آموزش JavaScript قسمت دوم


تگ در HTML برای وارد کردن کدهای جاوا اسکریپت را در یک سند HTML به کار می رود.
ویژگی "id" که در HTML برای المان به کار می رود به منظور شناسایی عناصر HTML در زمان کدنویسی در جاوا اسکریپت کاربرد دارد.
دستکاری و ویرایش عناصر یا المان های HTML توسط جاوا اسکریپت :
جاوا اسکریپت به طور معمول برای دستکاری و ویرایش عناصر موجود در سند HTML استفاده می شود.
برای دسترسی به یک المان HTML از طریق جاوا اسکریپت از متد ()document.getElementById استفاده می کنیم.این متد توسط id مشخص شده به المان های HTML دسترسی پیدا می کند.
مثال :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 

My Web Page

 

"demo">A Paragraph.

 
"text/javascript">
document.getElementById("demo").innerHTML="My First JavaScript";
 

اضافه کردن مستقیم محتوا درون سند HTML :
1
2
3
4
5
6
7
8
9
10
11
12
 

My First Web Page

 
"text/javascript">
document.write("

My First JavaScript

");
 
همانطور که در مثال بالا مشاهده می کنید ما یک تگ

به صورت مستقیم به سند HTML اضافه کرده ایم.

جاوا اسکریپت می تواند در بخش body و در بخش HEAD یک صفحه HTML قرار داده شود :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<body>
 
<h1>My Web Pageh1>
 
<p id="demo">A Paragraph.p>
 
<script type="text/javascript">
document.getElementById("demo").innerHTML="My First JavaScript";
script>
 
body>
html>

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

توابع و رویدادها در جاوا اسکریپت :

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

قرار دادن توابع درون head در یک سند HTML :

در مثال زیر تابعی را که در بخش head سند HTML خود قرار داده ایم زمانی که رویداد کلیک برای دکمه رخ دهد اجرا می شود :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
"text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
 
 

My Web Page

 

"demo">A Paragraph.

 
 

در مثال زیر تابعی را که در بخش body سند HTML خود قرار داده ایم زمانی که رویداد کلیک برای دکمه رخ دهد اجرا می شود :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 

My First Web Page

 

"demo">A Paragraph.

 
 
"text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
 

شما می توانید تعداد نامحدودی از اسکریپت ها را در سند HTML قرار دهید، و شما می توانید از اسکریپت ها در هر دو بخش body و head را همزمان داشته باشید.

استفاده از جاوا اسکریپت به عنوان یک فایل خارجی :

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

در فایل های جاوا اسکریپت خارجی شما نمی توانید از تگ script استفاده کنید،بلکه بایستی فایل های جاوا اسکریپت خارجی را با پسوند JS. بسازید و ذخیره کنید.سپس در زمان استفاده از یک فایل جاوا اسکریپت خارجی بایستی آدرس و نام فایل جاوا اسکریپت را با پسون js درون خاصیت SRC تگ script در سند HTML قرار دهید.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 

My Web Page

 

"demo">A Paragraph.

 
 

Note: The actual script is in an external script file called "myScript.js".

 
"text/javascript" src="myScript.js">
 
دقت داشته باشید که با توجه به نحوه آدرس دهی در مثال بالا،فایل جاوا اسکریپت نام برده شده بایستی در همان پوشه و مسیری باشد که صفحه وب ما قرار دارد.


موضوعات مرتبط: آموزش زیان های برنامه نویسی

تاريخ : چهارشنبه بیست و نهم خرداد ۱۳۹۲ | 8:50 | نویسنده : حمید مقصودی |
.: Weblog Themes By Bia2skin :.
[قالب وبلاگ : بیاتو اسکین] [Weblog Themes By : Bia2skin.ir]