تبلیغات
سورمق - آموزش جاوا اسکریپت(قسمت پنجم)
سورمق
مردم این زمانه مثل گل انارند ....... از درو جلوه دارند نزدیک بو ندارند
گروه طراحی قالب من گروه طراحی قالب من گروه طراحی قالب من گروه طراحی قالب من گروه طراحی قالب من
درباره وبلاگ


سورمق
سورمه
دانلود رایگان
آموزش ساخت vpn
آموزش جاوا
کسب درآمد

مدیر وبلاگ : روح الله دهقان
نظرسنجی
مطالب وبلاگ در چه سطحی است؟




شئ های مربوط به HTML DOM

   برای دسترسی سریع از لینکهای زیر استفاده کنید:

تعریف DOM
سلسله مراتب اشیاء

در بخشهای قبل با شئ های درون ساخت جاوااسکریپت آشنا شدید. در این صفحه قصد داریم شئ های مربوط به HTML DOM را توضیح دهیم. ابتدا اجازه دهید در مورد DOM یک توضیحی بدهم که اصلاً DOM چی هست؟

 

تعریف DOM

DOM مخفف سه کلمه Document Object Model می باشد. در بعضی جاها برگردان فارسی آنرا مدل شئ سند می گویند. متنی که در زیر آمده تعریف DOM بر اساس W3C است:

" The Document Object Model is a platform- and language -neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web. "

اما به زبان ساده، DOM رابطه بین عناصر HTML مانند متن ها، عکس ها و غیره را با همان سند اچ تی ام ال بیان می کند. این یک فرآیندی است که به برنامه ها و اسکریپت ها اجازه دسترسی به محتوا و ساختار داخلی پنجره مرورگر را میدهد تا آنها بتوانند بصورت آزادانه تغییراتی ایجاد کنند که نتیجه این تغییرات در صفحه وب نمایان شود. در همین رابطه زبانی بنام DHTML بوجود آمد که با ترکیب کردن عناصر اچ تی ام ال با استایل شیت و اسکریپتها می تواند محتوای اسناد وب را بصورت متحرک و پویا درآورد. در اینجا پویا بودن فقط به این منظور نیست که متنها حرکت کنند و از یک طرف وارد بشوند و از طرف دیگر خارج؛ ممکن است لینکها هر بار شما را به یک سایتی پیوند دهند و یا عکس ها مرتب تغییر کنند، کلاً هر تغییری که نیاز به کدنویسی مجدد برای آن سند را نداشته باشد، منظور پویا بودن را می رساند.

 

سلسله مراتب اشیاء DOM

جاوااسکریپت، شئ هایی دارد که می توانند بطور مستقیم با خود مرورگر ارتباط برقرار کنند و همچنین شئ هایی که با صفحه وب در ارتباط هستند. در کل می توان این اشیاء را به دو دسته اصلی تقسیم کرد، دسته اول که BOM گفته می شود یعنی Browser Object Model  شئ هایی که با پنجره مرورگر می توانند ارتباط برقرار کنند و دسته دوم DOM که با Document یعنی همان سند اچ تی ام ال. تمامی این اشیاء بر اساس یک سلسله مراتبی این ارتباط را برقرار می کنند که در رأس آنها شئ window می باشد. برای دیدن این سلسله مراتب اینجا را کلیک کنید.

همانطور که در شکل مشاهده کردید از شئ window تا شئ Document جزو دسته BOM می باشند و اشیاء بعد از Document در دسته DOM قرار می گیرند. ناگفته نماند که در حال حاضر کمتر صحبت اصطلاح BOM می شود و کلاً این مجموعه را DOM می گویند.

شما باید این سلسله مراتب را برای استفاده اشیاء آن، رعایت کنید. این سلسله مراتب را می توان به شجره نامه تشبیه کرد و شما مجبور هستید برای صدا کردن هر شخص آنرا با نام پدرش بیاورید و در بعضی جاها حتی نام پدر بزرگ هم لازم است، بطور مثال: علی فرزند محمد یا علی فرزند محمد فرزند حسین. در اینجا هم پدر اصلی Window می باشد وپدر بعدی Document است که فرزندهای آن همان عناصر اچ تی ام ال میباشند و سپس Form و در آخر هم Select که تنها یک فرزند دارد. برای استفاده از آنها باید ابتدا اسم پدر و سپس اسم فرزند را نوشت و در آخر هم خصوصیت و یا متد آن فرزند که همه اینها با یک نقطه از هم باید جدا شوند. بطور مثال اگر میخواهید یک فرم را بنام form1 صدا بزنید تا با آن ارتباط برقرار کنید باید به شکل زیر عمل شود:

window.document.form1

مانند همه اشیاء در جاوااسکریپت ، این شئ ها هم دارای خصوصیات و متدهایی هستند که بعد از رعایت کردن سلسله مراتب با گذاشتن یک نقطه می توانید آنها را بنویسید. مانند:

window.history.go (-1)

که اگر این شئ را در یک لینک قرار دهید با کلیک کردن بر روی آن، کاربر به صفحه قبل بازگشت داده می شود.

در جدول زیر شئ های اصلی این سلسله مراتب لیست شده است.

 

 این شئ مستقیماً با پنجره مرورگر در ارتباط است که معمولاً خصوصیات و متدهای این شئ در تگهای body و frameset بکار می روند. window
 این شئ شامل اطلاعاتی در رابطه با مرورگر کاربر است که توسط خصوصیات و متدهای آن این اطلاعات ذخیره تا مورد استفاده قرار گیرند. navigator
برای کار کردن بر روی فریمهای اچ تی ام ال. frame
 دسترسی و ارتباط با کلیه عناصر اچ تی ام ال مانند، متنها فرمها عکسها و غیره. document
شامل اطلاعاتی در مورد URL یا همان آدرس اینترنتی صفحه ای که در حال نمایش است. location
این شئ دارای اطلاعاتی برای رجوع کاربر به صفحاتی که قبل از آن صفحه مشاهده شده و بر عکس. history
اطلاعات صفحه مرورگر کاربر را بر می گرداند مانند اندازه طول و عرض. screen

 

نکات مهم برای اسکریپت نویسی

 

قسمت مقدماتی آموزش جاوااسکریپت به پایان رسید و همانطور که مشاهده کردید دستورات این زبان، توضیح داده شد تا با استفاده از آنها بتوانید اسکریپتهایی برای صفحات وب خود بنویسید و یا اگر با اسکریپتی برخورد کردید، کاملاً آنرا درک کنید و مطابق نیاز خود آن را اصلاح کنید. فراموش نکنید که این دستورات و کدها را مرتب تمرین کرده و اسکریپتهای جدید و ساده برای خود بسازید تا این زبان در ذهن شما قرار گیرد. بهترین راه به خاطر سپردن دستورات جاوااسکریپت خلق کدهایی برای خودتان و دیگران است.

هرگاه خواستید که اسکریپتی خلق کنید، ابتدا آنرا در ذهن خود بررسی کنید که این اسکریپت چه کاری باید انجام دهد و چه نتیجه ای را می خواهید از آن بگیرید، سپس افکارتان را روی کاغذ پیاده کنید با جزئیات کامل که چه اطلاعاتی را باید دریافت کنید و توسط چه دستوراتی آنرا پیش ببرید و در آخر چه نتیجه ای باید بدهد.

هنگام خلق یک اسکریپت نکاتی را باید در نظر داشته باشید:

 

سعی کنید بعد از هر خط علامت ; را بگذارید تا پایان آن خط مشخص شود.

document.write ( " text string " );
document.write ( myFunction ) ;


جاوااسکریپت case sensetive است یعنی به حروف کوچک و بزرگ حساس است و بین آنها فرق می گذارد. در جاوااسکریپت myFunction با myfunction تفاوت دارد.


دقت کنید کلیه علامتها مانند پرانتز، آکلاد و کروشه در هر جا که می نویسید باید دوباره آنها را ببندید.

( { [ ..... ] } )


جاوااسکریپت فاصله های اضافی را در نظر نمی گیرد، پس شما می توانید برای خوانا بودن کد خود فاصله هایی را اضافه کنید. دو خط زیر تفاوتی با هم ندارند:

var name="value";
var name = " value " ;


در نظر داشته باشید که یک خط کد جاوااسکریپت حتماً باید در یک خط نوشته شود و نمی توانید ادامه آنرا در خط بعدی بنویسید، مگر اینکه به انتهای صفحه برسید و خود به خود به ابتدای خط بعد هدایت شوید. اما در میان رشته های متنی با گذاشتن علامت \ می توانید به خط بعد رفته و ادامه دهید.

document.write ( " Hello \
my friends! " ) ;


شما می توانید جلوی کدهای خود یک توضیح و یا یک نظریه را وارد کنید تا برای مراجعتهای بعدی یک سر نخی داشته باشید و سریع متوجه بشوید که آن قسمت از اسکریپت، چه کاری را انجام می دهد و یا اینکه شما یک اسکریپت برای یک فرد مبتدی می سازید و می خواهید بعضی از قسمتهای کد را توضیح دهید که برای این منظور ها می توانید در هر خط از اسکریپت که می خواهید علامت // گذاشته و سپس آن توضیح را بنویسید.

document.write( " text " ) ;   //  your comment

اگر هم نظریه یا توضیح شما بیشتر از چند کلمه است می توانید به صورت زیر عمل کنید:

/* This is a comment
block. It contains
several lines */

لازم بذکر است که این توضیحات و نظریات در صفحه نمایش داده نمی شوند.


در حال حاضر کلیه مرورگرها از جاوااسکریپت پشتیبانی می کنند ولی بعضی ممکن است از مرورگرهای قدیمی استفاده کنند و یا مرورگرهایی که قابلیت جاوااسکریپت را نداشته باشند، بکار برند. در این حالت شما یک تگ بعد از مجموعه اسکریپت خود به تگهای اچ تی ام ال صفحه اضافه می کنید به اسم noscript و متنی را داخل آن می نویسید تا به آن کاربر نشان داده شود و کاربر از کدهای جاوااسکریپت آن صفحه با خبر شود.

<script language="javascript" type="text/javascript">
javascript code......
</script>

<noscript> Your browser does not support javascript.</noscript>

 





نوع مطلب : اینترنت و شبکه، 
برچسب ها :
لینک های مرتبط :
روح الله دهقان
شنبه 31 اردیبهشت 1390
دوشنبه 27 شهریور 1396 06:38 قبل از ظهر
It's really a cool and helpful piece of info. I'm satisfied that you just shared this
helpful info with us. Please keep us up to date like this.

Thanks for sharing.
دوشنبه 30 مرداد 1396 10:23 قبل از ظهر
Hi! I know this is kinda off topic but I was wondering if you knew where I could find a
captcha plugin for my comment form? I'm using the
same blog platform as yours and I'm having problems finding one?
Thanks a lot!
سه شنبه 17 مرداد 1396 06:55 قبل از ظهر
Hey, I think your blog might be having browser compatibility issues.

When I look at your blog in Opera, it looks fine but when opening in Internet Explorer, it has some overlapping.
I just wanted to give you a quick heads up! Other then that, awesome blog!
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر




آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
امکانات جانبی
به سایت ما خوش آمدید
نام و نام خانوادگی      
آدرس ایمیل      
کلیه حقوق این وبلاگ برای سورمق محفوظ است