۲۳
مرداد

جلسه ۲۶ : HTML DOM در زبان دارت

دسته‌بندی‌ها :

با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره آموزش زبان برنامه نویسی دارت Dart در خدمت شما هستیم.
در این جلسه قصد داریم به آموزش HTML DOM در زبان دارت Dart بپردازیم.

فهرست

مقدمه

هر صفحه وب در داخل یک مرورگر نمایش داده می‌شود که می‌توان آن را به عنوان یک شئ در نظر گرفت.

یک شئ سند (Documnet Object)، سند HTML را که در پنجره خود قرار دارد، نمایش می‌دهد.
documnet object خواص (Properties) مختلفی دارد که به اشیاء دیگر نیز اشاره می‌کند و امکان ایجاد تغییر و دسترسی به سند را به ما می‌دهد.

Document Object Model

نحوه دسترسی و تغییر محتوای یک سند، Documnet Object Model یا DOM نامیده می‌شود.
اشیا در یک سلسله مراتب سازماندهی شده اند. این ساختار سلسله مراتبی برای سازماندهی اشیا در یک سند وب اعمال می‌شوند.

window : بالاترین و اصلی ترین عنصر سلسله مراتب شئ است.
documnet : هر سند HTML که در پنجره مرورگر بارگذاری می‌شود، تبدیل به یک شئ document می‌شود.
این شئ شامل محتوای صفحه است.
element : این شئ نمایانگر محتوای یک صفحه وب است. مانند تکست باکس ها، عنوان صفحه، فیلد ها و … .
node : اغلب همان المان ها هستند، با این تفاوت که می‌توانند ویژگی (attribute) نیز باشند. مانند متن، کامنت و … .

برای دستکاری و کار با اشیاء و المان ها در DOM، از کتابخانه dart:html استفاده می‌کنیم.
برای استفاده از این کتابخانه آن را به صورت زیر import می‌کنیم:

مثال :

import 'dart:html';

1	import 'dart:html';

دسترسی به عناصر (Element) DOM

با استفاده از تابع ()querySelector می‌توانیم عناصر صفحه را جستجو و به آن ها دسترسی داشته باشیم.

مثال :

Element querySelector(String selectors);

1	Element querySelector(String selectors);

این تابع اولین عنصری را از بین گروه مشخص شده selector ها پیدا کند، برمی‌گرداند.
همچنین این تابع یک پارامتر از نوع String می‌گیرد که باید یک selector css باشد.

مثال:

مثال :

var element1 = document.querySelector('.className'); 
var element2 = document.querySelector('#id');

1 2	var element1 = document.querySelector('.className'); var element2 = document.querySelector('#id');

فایل HTML زیر را در نظر بگیرید:

مثال :

<!DOCTYPE html>   
<html> 
   <head>     
      <meta charset = "utf-8">     
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge">     
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <meta name = "scaffolded-by" content = "https://github.com/google/stagehand">
      <title>DemoWebApp</title>     
      <link rel = "stylesheet" href = "styles.css">     
      <script defer src = "main.dart" type = "application/dart"></script>
      <script defer src = "packages/browser/dart.js"></script> 
   </head>
   
   <body>   
      <h1>
         <div id = "output"></div> 
      </h1>  
   </body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>DemoWebApp</title>

</head>

<body>

<h1>

</h1>

</body>

</html>

در برنامه زیر یک متن را در عنصر div با آی‌دی output نمایش می‌دهیم.

مثال :

import 'dart:html';  
void main() {   
   querySelector('#output').text = 'Your Dart web dom app is running!!!.'; 
}

import 'dart:html';

void main() {

querySelector('#output').text = 'Your Dart web dom app is running!!!.';

}

خروجی به شکل زیر خواهد بود:

HTML DOM در زبان دارت dart

مدیریت رویداد

با استفاده از شئ onClick در کتابخانه dart:html می‌توانیم رویداد های صفحه را مدیریت کنیم.

گرامر آن به صورت زیر خواهد بود:

مثال :

querySelector('#Id').onClick.listen(eventHanlderFunction);

1	querySelector('#Id').onClick.listen(eventHanlderFunction);

متد ()listen یک تابع را به عنوان پارامتر گرفته و آن را هنگام رخ دادن رویداد مورد نظر، اجرا می‌کند.

گرامر تابع برای یک رویداد موس باید به صورت زیر باشد:

مثال :

void eventHanlderFunction (MouseEvent event){ }

1	void eventHanlderFunction (MouseEvent event){ }

فایل html زیر را در نظر بگیرید:

مثال :

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "utf-8"> 
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge"> 
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> 
      <meta name = "scaffolded-by" content ="https://github.com/google/stagehand"> 
      <title>DemoWebApp</title> 
      <link rel = "stylesheet" href = "styles.css"> 
      <script defer src = "TestEvent.dart" type="application/dart"></script> 
      <script defer src = "packages/browser/dart.js"></script> 
   </head> 
   
   <body> 
      <div id = "output"></div> 
      <h1> 
         <div> 
            Enter you name : <input type = "text" id = "txtName"> 
            <input type = "button" id = "btnWish" value="Wish"> 
         </div> 
      </h1> 
      <h2 id = "display"></h2> 
   </body>
   
</html>

<!DOCTYPE html>

<html>

<head>

<title>DemoWebApp</title>

</head>

<body>

<h1>

<div>

Enter you name : <input type = "text" id = "txtName">

</div>

</h1>

</body>

</html>

برنامه زیر یک مدیریت کننده رویداد برای یک دکمه ایجاد می‌کند.
اگر دکمه کلیک شود، پیامی حاوی متن داخل تکست باکس نمایش داده می‌شود.

مثال :

import 'dart:html'; 
void main() { 
   querySelector('#btnWish').onClick.listen(wishHandler); 
}  
void wishHandler(MouseEvent event){ 
   String name = (querySelector('#txtName')  as InputElement).value; 
   querySelector('#display').text = 'Hello Mr.'+ name; 
}

import 'dart:html';

void main() {

querySelector('#btnWish').onClick.listen(wishHandler);

}

void wishHandler(MouseEvent event){

String name = (querySelector('#txtName') as InputElement).value;

querySelector('#display').text = 'Hello Mr.'+ name;

}

خروجی به شکل زیر خواهد بود:

کار با html در زبان دارت dart

جلسه آموزش HTML DOM در زبان دارت و همچنین دوره آموزش زبان دارت Dart نیز به پایان رسید.

امیدوارم این دوره برای شما عزیزان مفید واقع شده باشد. موفق باشید.

جلسه ۲۵ : تست واحد در زبان دارت

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۶ : HTML DOM در زبان دارت

مقدمه

Document Object Model

دسترسی به عناصر (Element) DOM

مدیریت رویداد

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ