آموزش طراحی سایت

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

آموزش طراحی سایت

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

ساختارهای شرطی در جاوا اسکریپت

ساختارهای شرطی در جاوا اسکریپت :

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

بر حسب شرایط می توان از یکی از ساختارهای دستوری زیر استفاده کرد :

1 )  if   ( Condition )   Statment :

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

شکل کلی استفاده از این ساختار به صورت زیر است :

 

if   ( شرط یا شروط )

  {

    دستورات مورد نظر که در صورت برقرار بودن شرط ها اجرا می شوند

  }

مثال :

< script type="text/javascript" >
  var  IntNum  = 18
  if ( IntNum > 10 )
    {
      document.write (" This Number is bigger than 10 ")
    }
< /script >

2 )   if   ( Condition )   Statment 1   else   Statment 2 :

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

شکل کلی استفاده از این ساختار به صورت زیر است :

 

if   ( شرط یا شروط )

  {

    دستوراتی که در صورت بر قرار بودن شرط یا شروط اجرا می شوند

  }

else

  {

    دستوراتی که در صورت عدم بر قراری شرط یا شروط اجرا می شوند

  }

عملگر شرطی :

دستور if تک شرطی را مانند یک عملگر می توان به صورت زیر نیز نوشت .

در این حالت برنامه شرط معرفی شده در پرانتز را چک کرده و در صورت درست بودن آن شرط ، مقدار 1 و در صورت درست نبودن آن مقدار 2 را به متغیر نسبت می دهد .

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

نام متغیر = ( شرط ) ؟    مقدار 1   :   مقدار 2

variable name = ( condition ) ? value 1 : value 2 ; دستور if تک شرطی را مانند یک عملگر می توان به صورت زیر نیز نوشت

در این حالت برنامه شرط معرفی شده در پرانتز را چک کرده و در صورت درست بودن آن شرط ، مقدار 1 و در صورت درست نبودن آن مقدار 2 را به متغیر نسبت می دهد .

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

 

نام متغیر = ( شرط ) ؟    مقدار 1   :   مقدار 2

variable name = ( condition ) ? value 1 : value 2 ;

3 ) if   ( Condition 1 )   Statment 1   else if   ( Condition 2 )   Statment 2   else   Statment 3 :

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

در این ساختار ، شرط اول در دستور if ابتدا تعریف شده و هر یک از گروه شرط های دیگر به وسیله یک دستور else if تعیین می شود . در آخر نیز واژه کلیدی else و دستورات مربوط با آن قرار می گیرد ، که در صورت عدم بر قراری تمام گروه شرط های تعیین شده ، دستورات قسمت else اجرا می شوند .

در این ساختار چنانچه هر یک از شرط های یک دستور if یا else if درست باشند ، دستورات مربوط به آن اجرا شده و برنامه از کنترل و اجرای سایر شرط های دیگر خودداری می کند . چنانچه هیچ یک از گروه شرط های تعیین شده درست نباشند ، دستورات بخش else در پایان ساختار اجرا می شوند .

شکل کلی استفاده از این ساختار به صورت زیر است :

 

if   ( گروه شرط های شماره 1 )

  {

    دستوراتی که در صورت بر قرار بودن گروه شرط های 1 اجرا می شوند

  }

else if   ( گروه شرط های شماره 2 )

  {

    دستوراتی که در صورت بر قرار بودن گروه شرط های 2 اجرا می شوند

  }

else if   ( گروه شرط های شماره 3 )

  {

    دستوراتی که در صورت بر قرار بودن گروه شرط های 3 اجرا می شوند

  }

.

.

.

else

  {

    دستوراتی که در صورت عدم بر قراری تمام گروه شرط های فوق اجرا می شوند

  }

 

نکته 1 : به تعداد مورد نیاز می توان در این ساختار به وسیله دستور else if شرط و دستورات جدید تعریف کرد .

نکته 2 :استفاده از کروشه در قسمت دستورات شرط if ، فقط در زمانی که دستورات مورد نظر بیش از یک خط هستند ، ضروری است .

نکته 3 : تعیین قسمت else در ساختار فوق اختیاری بوده و می تواند تعریف نشود .

نکته 4 : در زمانی که تعداد حالت های شروط بسیار زیاد هستند ، بهتر است از ساختار Switch استفاده کرد .

ساختار کنترلی switch :

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

شکل کلی استفاده از این ساختار به صورت زیر است :

 

switch    ( نام یک متغیر یا یک عبارت )
{
  case    مقدار 1 :
  case 1 دستورات مربوط به
  case    مقدار 2 :
  case 2 دستورات مربوط به
  .
  .
  .
  .

  case    n مقدار :
  case n دستورات مربوط به
  default :

دستورات پیش فرض ساختار که در صورت عدم برقراری مقادیر تمام case های فوق ، اجرا خواهند شد  
{

نحوه عملکرد این ساختار به شرح زیر است :

ابتدا در پرانتز مقابل واژه کلیدی switch ، یک متغیر یا عبارت اعلام می شود . همچنین در هر دستور case ، یک مقدار مرتبط با آن متغیر نیز تعیین می شود . برنامه مقدار متغیر را ( که از قبل توسط یک تابع یا دستور مقدار دهی شده است ) را با مقدار تعیین شده برای هر case به ترتیب مقایسه کرده و در صورت برابر بودن آنها ، دستورات آن case و case های بعد از آن را اجرا می کند . در واقع دستورات تا زمان رسیدن به یک دستور break اجرا می شوند .

نکته : برای جلوگیری از اجرای case های بعدی همراه با case ای که اجرا می شود ، باید در پایان دستورات هر case از واژه کلیدی break استفاده کرد .

قسمت default ، دستورات پیش فرض ساختار را تعیین می کند ، که در صورت عدم برقراری مقادیر تمام case های ساختار ، دستورات آن قسمت اجرا خواهد شد .

 

نکات مهم :

    نوع متغیر تعیین شده در قسمت switch و مقدارهای هر یک از case ها باید با هم یکسان و از یک نوع باشند .

    به تعداد مورد نیاز می توان از دستور case در ساختار switch استفاده کرد .

    تعیین قسمت default در ساختار switch ، اختیاری است و می تواند تعیین نشود .

    مقدار هیچ دو case متفاوتی ، نباید با هم یکسان باشد .

 

مثال : در مثال زیر دو کادر متن و یک دکمه فرمان قرار داده شده است . کادر متن اول یک متن یا عدد از کاربر دریافت کرده و با کلیک بر روی دکمه فرمان و فراخوانی تابع ( ) hello ، خروجی در کادر متن دوم نمایش داده می شود .

عملکرد تابع ( ) hello به شرح زیر است :

این تابع مقدار کنترل کادر متن اول یعنی txtinput ، را در متغیر matn ذخیره کرده و سپس در یک ساختار switch ،بر حسب مقادیر مختلف خروجی را در کادر متن دوم یعنی txtresult نمایش می دهد .

توجه : در اینجا به دلیل عدم استفاده از دستور break در پایان دستورات هر case با اجرای هر کدام از case های مثال ، دستورات بقیه case ها نیز اجرا می شود . بنابراین همواره خروجی ما در این حالت خروجی قسمت default است .

< input type="text" id="txtinput " / >
< input type="button" name="clickme" onclick="hello( )" value="click me !" / >
< input type="text" id="txtresult" / >
< script type="text/javascript" >
  function hello( )
    {
      var matn = txtinput.value ;
      switch (matn)
      {
        case "1":
        txtresult.value = "one" ;
        case "2":
        txtresult.value = "two";
        case "3":
        txtresult.value = "three";
        default:
        txtresult.value = "bigger than 3";
      }
    }
< /script >

دستور break :

همانطور که در قسمت بالا نیز اشاره شد ، چنانچه یک دستور case در ساختار switch اجرا شود ، برنامه به طور اتوماتیک دستورات تمام case های بعد از آن را نیز اجرا خواهد کرد ، مگر اینکه به یک دستور break برسد . . برای جلوگیری از این مسئله ، باید در پایان دستورات هر case از دستور break استفاده کرد .
در این حالت در صورت وارد شدن برنامه به یک دستور یک case ، فقط دستورات آن case اجرا شده و اجرای بقیه case ها متوقف می شود .
شکل کلی استفاده از دستور break به صورت زیر است :

switch    ( نام یک متغیر یا یک عبارت )
{
  case    مقدار 1 :
  case 1 دستورات مربوط به
  break ;
  case    مقدار 2 :
  case 2 دستورات مربوط به
  break ;
  .
  .
  .
  .

  case    n مقدار :
  case n دستورات مربوط به
  break ;
  default :

دستورات پیش فرض ساختار که در صورت عدم برقراری مقادیر تمام case های فوق ، اجرا خواهند شد  
{

 

 

عملگرها در جاوا اسکریپت

 

عملگرهای جاوا اسکریپت :

1 ) عملگرهای ریاضی :

توضیح عملوند : عملوند به متغیری گفته می شود ، که عملگر بر روی آن عملیات انجام می دهد .

(1  عملگرهای ریاضی :

عملگر

شرح

مثال

+   جمع

دو عملوند خود را با هم جمع می کند .

x = 2      y = 2     x + y = 4

-   تفریق

دو عملوند خود از هم کم می کند .

x = 4      y = 2     x - y = 2

*   ضرب

دو عملوند خود را در هم ضرب می کند .

x = 2      y = 3     x * y = 6

/   تقسیم

عملوند اول خود را بر عملوند دوم تقسیم می کند .

x = 6      y = 2     x / y = 3

%   باقی مانده

باقی مانده حاصل از تقسیم عملوند اول بر عملوند دوم را محاسبه می کند .

x = 8      y = 3     x % y = 2
x = 15      y = 4     x % y = 3
x = 9      y = 3     x % y = 0

++   افزاینده

عملوند خود را یک واحد افزایش می دهد .

x = 7      x++     x = 8

- -   کاهنده

عملوند خود را یک واحد کاهش می دهد .

x = 8      x- -     x = 7

 

2 ) عملگرهای انتسابی :

از عملگرهای انتسابی ، برای نسبت دادن مقدار به یک متغیر استفاده می شود .

نکته : برخی از حالت های محاسبات متغیرها مثل x = x + y را می توان به صورت خلاصه تر به صورت x += y نوشت . در جدول زیر انواع حالت های آن آمده است :

عملگر

مثال

برابر است با

=    انتساب

x = y   یا   x = 5

y = 5    x = y    نتیجه :    x = 5
var x ;      x = 5   (x انتساب مقدار 5 به )

+=    جمع

x += y

x = x + y

- =    تفریق

x - = y

x = x - y

*=    ضرب

x *= y

x = x * y

/=    تقسیم

x /= y

x = x / y

%=    باقی مانده

x %= y

x = x % y

 

3 ) عملگرهای مقایسه ای :

از این عملگرها برای مقایسه یک متغیر با یک مقدار و یا مقایسه 2 متغیر با هم استفاده می شود .

عملگر

شرح

مثال

= =   تساوی

امتحان برابری با یک مقدار یا یک متغیر دیگر

x = = y    یا    y = = 8

= = =   تساوی

امتحان برابری با یک مقدار یا یک متغیر دیگر هم از لحاظ مقدار و هم از لحاظ نوع داده ای

x = = = y    یا    y = = = "8"
مثال: x = 5   ,   y = "5"   ,   اگر    x = = = y    نتیجه : غلط است

! =    عدم تساوی

امتحان عدم برابری با یک مقدار یا یک متغیر دیگر

x ! = y    یا    y ! = 4
مثال : x = 5   ,   y = 6   ,   اگر    x ! = y    نتیجه : درست است

>    بزرگتر بودن

امتحان بزرگتر بودن

x > y    یا    y > 4
مثال : x = 5   ,   y = 6   ,   اگر    x > y    نتیجه : غلط است

<    کوچکتر بودن

امتحان کوچکتر بودن

x < y    یا    y < 4
مثال : x = 5   ,   y = 6   ,   اگر    x < y    نتیجه : درست است

مساوی یا بزرگتر بودن    >=

امتحان مساوی یا بزرگتر بودن

x >= y    یا    y >= 4
مثال : x = 5   ,   y = 6   ,   اگر    x >= y    نتیجه : غلط است

مساوی یا کوچکتر بودن    <=

امتحان مساوی یا کوچکتر بودن

x < y    یا    y < 4
مثال : x = 5   ,   y = 5   ,   اگر    x <= y    نتیجه : درست است
مثال : x = 5   ,   y = 7   ,   اگر    x <= y    نتیجه : غلط است

 

4 ) عملگرهای منطقی :

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

عملگر

شرح

مثال

&&    عملگر " و "

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

مثال : x = 5   ,   y = 7   ,   اگر  ( x < 3   &&   y > 9 )    نتیجه : غلط است
مثال : x = 5   ,   y = 7   ,   اگر  ( x < 6   &&   y > 8 )    نتیجه : درست است

||    عملگر " یا "

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

مثال : x = 5   ,   y = 7   ,   اگر  ( x < 3   ||   y > 4 )    نتیجه : درست است
مثال : x = 5   ,   y = 7   ,   اگر  ( x < 3   ||   y > 8 )    نتیجه : غلط است

!    عملگر not

این عملگر برای بر عکس کردن درستی یا عدم درستی یک عبارت استفاده می شود . استفاده این عملگر قبل از یک عبارت صحیح باعث نادرست شدن جواب و برعکس خوهد شد .

مثال : x = 5   ,   y = 5   ,   اگر  ! ( x == y ) نتیجه : غلط است
مثال : x = 5   ,   y = 7   ,   اگر  ! ( x == y ) نتیجه : درست است

5 ) عملگر رشته ای :

متغیرهای رشته ای متغیر هایی هستند ، که از متن تشکیل شده اند . این متغیرها را همانطور که قبلا اشاره شد ، باید بین دو علامت " " تعریف کرد .

در جاوا اسکریپت می توان دو متغیر رشته ای را با عملگر + به هم اضافه کرد . همچنین برای ایجاد فاصله بین متغیرهای می توان از یک " " به شکلی که در مثال زیر آمده است ، استفاده کرد .

مثال : در مثال زیر دو عبارت رشته ای matn1 و matn2 را در قالب یک متغیر جدید به نام welcome ذخیره کرده ایم :

< script type="text/javascript" >
  var matn1 = "Welcome to" ;
  var matn2 = "Gharbnet .ir" ;
  var welcome = matn1 + " " + matn2 ;
  document.write (welcome) ;
< /script >

خروجی کد : Welcome to Gharbnet .irWelcome to Gharbnet .ir

نمایش کاراکترهای خاص در جاوا اسکریپت :

در کد نویسی دستورات جاوا اسکریپت ، از برخی از کاراکترها به منظور ویژه های استفاده می کنیم . برای مثال از کاراکتر " برای شروع یک عبارت متنی در دستوراتی نظیر document.write و ... استفاده می شود . به کار بردن مستقیم چنین کاراکترهای در عبارت های متنی باعث تداخل با کدهای برنامه و بروز خطا و خروجی نامناسب می شود .

برای نمایش چنین کاراکترهایی در عبارت های متنی ، باید از یک کاراکتر \ قبل از کاراکتر مورد نظر استفاده کرد .

شکل غلط استفاده : var matn = "Hello Welcome to "gharbnet .ir " a website for Gharbnets" ;

شکل صحیح استفاده: var matn = "Hello Welcome to \"gharbnet .ir\" a website for Gharbnets" ;

ایجاد یک خط جدید در نوشته :

می توان در متن نوشته ی کادر های Pop-Up در جاوا اسکریپت ، نوشته را به سطر پایین انتقال داد . برای این منظور از یک کاراکتر n\ استفاده می شود . هر بار استفاده از این کاراکتر باعث انتقال نوشته به یک سطر پایین تر می شود .

مثال :

<script type="text/javascript">
  function New_Line ( )
    {
      alert ( "Hello \nDear User \n\n Welcome to Gharbnet.ir" ) ;
    }
</script>

سایر کاراکترها :

سایر کاراکترهایی که برای نمایش آنها باید از روش فوق استفاده کرد ، به همراه توضیح آنها در جدول زیر آمده اند 

شرح

خروجی

نحوه استفاده

علامت نقل قول تکی     '

'

\'

علامت نقل قول جفتی     "

"

\"

علامت و در انگلیسی     &

&

\&

علامت اسلش در متن     \

\

\\

رفتن به خط جدید در متن    

 

\n

 

آشنایی با جاوا اسکریپت

معرفی Java Script :

Java Script یکی از زبان های برنامه نویسی اسکریپتی است ، که اولین بار توسط شرکت Netscape Communicator عرضه کننده مرورگر معروف  Netscape ارائه شد و امروزه متداولترین زبان اسکریپت نویسی صفحات وب است .

توجه : قبل از مطالعه قسمت آموزش Java Script ، شما باید به طور کامل با زبان HTML و به خصوص تگ < script > آشنا باشید .

خصوصیات مهم Java Script :

  •  Java Script یک زبان برنامه نویسی اسکریپتی است . دستور العمل های زبان های اسکریپتی ، در کامپیوتر کاربر و توسط مرورگر اجرا شده و برای اجرا نیازی به برنامه کمکی خاصی ندارند  به این زبان ها در اصطلاح طرف مشتری ( Client Side ) می گویند . در مقابل زبان های مثل ASP.NET ابتدا توسط سرور ارسال کننده وب اجرا شده و سپس نتایج خروجی به زبان HTML برای اجرا در مرورگر فرستاده می شود . به این زبان ها در اصطلاح طرف سرور ( Server Side ) می گویند .
  • زبان های اسکریپتی ، جزء زبان های برنامه نویسی سبک هستند . این زبان ها در هنگام اجرا فازی به نام کامپایل* را طی نکرده و دستورات آن ها به صورت خط به خط اجرا می شوند .

برخی از امکانات Java Script :

به طراحان وب ، یک ابزار برنامه نویسی ساده و کارا می دهد .

Java Script به رویدادهای مختلف در صفحه واکنش نشان می دهد . برای مثال می توان یک تابع Java Script تعریف کرده تا در هنگام وقوع یک رویداد مثل کلیک بر روی یک دکمه یا لود شدن صفحه ، اجرا شود .

Java Script می تواند اطلاعات ارسالی یک فرم را اعتبار سنجی و کنترل نموده و در صورت صحیح بود ، آنها را به سرور ارسال کند . این کار باعث جلوگیری از ورود اطلاعات نادرست به سرور و کاهش ترافیک آن می شود .

Java Script توانایی تشخیص نوع و نسخه مرورگر مورد استفاده کاربر را داشته و می تواند بر حسب آن نوع مرورگر خاص ، تنطیمات و صفحات ویژه ای را بارگذاری نماید .

Java Script توانایی خواندن و نوشتن اطلاعات مورد نیاز مرورگر را بر روی کامپیوتر بازدید کننده صفحه را داراست ، که در اصطلاح به این کار ایجاد و خواندن Cookie می گویند .

Java Script می تواند انواع کادرهای اخطار ، تایید و دریافت ورودی را به کاربر نمایش دهد .

نحوه تعریف دستورات Java Script در صفحه :

برای تعریف و ایجاد یک اسکریپت ، از تگ < script > استفاده می شود . کلیه دستورات مورد نظر اسکریپت ، درون تگ باز و بسته < script > تعریف شده و به عبارتی محدوده کدهای اسکریپت را تعیین می کند . در هر صفحه HTML ، می توان به تعداد مورد نیاز از تگ < script > استفاده کرد ، که هر تگ به صورت مجموعه ای واحد برای خود عمل می کند .

انواع حالت های دستورات اسکریپتی :

به طور کلی 2 حالت اسکریپت ( برنامه اجرایی ) در صفحات وب قابل پیاده سازی است :

    اسکریپت های که می خواهیم به محض لود شدن صفحه ، اجرا شده و اثر خود را نمایش دهند . در این حالت باید اسکریپت ها را در قسمت <body> صفحه قرار داد .

    اسکریپت هایی که می خواهیم در هنگام بروز یک رویداد در صفحه ، مثل کلیک بر روی یک دکمه خاص و ... اجرا شوند . به عبارت دیگر می خواهیم اجرای آنها کنترل شده باشد . در این حالت دستورات اسکریپت را در قسمت < head > صفحه و یا در یک فایل خارجی تعریف کرد .

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

محل قرار دادن اسکریپت ها در صفحات وب :

به طور کلی 3 روش برای قرار دادن اسکریپت ها در صفحات وب وجود دارد :

1 ) درون محدوده اصلی صفحات HTML ، در قسمت تگ < body > :

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

2 ) در قسمت تگ < head > :

اسکریپت هایی که می خواهیم در هنگام بروز یک رویداد در صفحه مثل کلیک بر روی یک دکمه و ... اجرا شوند ، را می توان در قسمت < head > تعریف کرد . دستورات اسکریپت های این قسمت بایستی در قالب توابع تعریف شده باشند و تا زمانی که از سوی برنامه یا کاربر فراخوانی نشده باشند ، اجرا نخواهند شد . مزیت این روش در این است ، که این اسکریپت ها قبل از اجرا توسط مرورگر لود شده اند . فراخوانی باید توسط یک اسکریپت دیگر در قسمت تگ < body > صورت بگیرد .

مثال :

تابع ()hello توسط رویداد onclick ( کلیک ) دکمه فرمان فراخوانی شده و خروجی خود را نمایش می دهد .

< html >
  < head >
    < title > Title of Page
عنوان صفحه < /title >
    < script type="text/javascript" >
     function hello ( )
      {
       document.write ( "Hello User . This script is placed in the head section . " )
      }
    < /script >
  < /head >
  < body >
    
محتویات صفحه
    < input value ="to view script Click me" id="Button1" type="button" onclick="hello( )" / >
  < /body >
</html>

3 ) در یک فایل خارجی JS

در این حالت تمام اسکریپت های مورد نظر را در یک فایل خارجی متنی با پسوند JS ، تعریف کرده و سپس به وسیله تگ < script > در قسمت

 < head > صفحه ، بین آن فایل و صفحه لینک ایجاد می کنیم .

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

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

مثال : نحوه ارتباط با فایل خارجی جاوا اسکریپت :

< html >
  < head >
    < title > Title of Page
عنوان صفحه < /title >
    < script type="text/javascript" src ="../myscript.js" >            *
ایجاد لینک بین صفحه و فایل اسکریپت *
    < /script >
  < /head >
  < body >
    
محتویات صفحه   
    < input value="to view script Click me" id="btnhello2" type="button" onclick="hello2( )" / >
  < /body >
</html>

نکات مهم در کد نویسی جاوا اسکریپت :

1 ) جاوا اسکریپت به بزرگ یا کوچک بودن حروف حساس است ( بر خلاف HTML ) :

در تعریف و نام گذاری توابع و متغیرها در جاوا اسکریپت باید به بزرگ یا کوچک بودن حروف کاملا دقت کرد . تابع با نام "MyFunction" با تابع "myfunction" و متغیر با نام "Matn" با متغیر با نام "matn" متفاوت هستند .

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

2 ) جاوا اسکریپت فواصل خالی اضافی در کد نویسی را نادیده می گیرد :

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

نکته : بین دستورات و کلمات کلیدی باید حداقل یک فاصله وجود داشته باشد ، در اینجا منظور از فاصله اضافی ، بیش از یک کاراکتر فاصله است

3 ) نوشتن عبارت های متنی در بیش از یک خط :

در هنگام تعریف و استفاده از عبارت های متنی در دستوراتی نظیر document.write و ... ، می توان ادامه متن را به کمک یک کاراکتر \ به سطر بعدی انتقال داد . این مسئله در زمانی که عبارت های متنی طولانی استفاده می شود ، کاربرد دارد .

4 ) درج توضیحات ( comments ) مورد نظر در بخش کد نویسی :

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

دو نوع توضیح در جاوا اسکریپت می توان ایجاد کرد :

1 . توضیحات یک خطی : این توضیات به کمک دو بک اسلش // به صورت زیر وارد می شود . توضیحات ارائه شده به این صورت حداکثر می تواند در یک خط باشد . به مثال زیر دقت کنید . در این مثال خط اول یک comment خط دوم یک دستور چاپ خروجی است . همانظور که در خروجی کد مشخص است ، دستور چاپ توسط مرورگر اجرا شده ولی comment نمایش دادده نمی شود :

مثال:

<script type="text/javascript">
  // this is a one line comment . navigator won`t show it .
  document.write ( "How to write a comment" ) ;
</script>

2 . توضیحات چند خطی : با استفاده از یک نماد */ در ابتدای اولین خط توضیحات و یک نماد /* در آخرین خط توضیحات ، می توان توضیحات چند خطی در اسکریپت ها وارد کرد . از این حالت برای ارائه توضیحات طولانی استفاده می شود . به مثال زیر دقت کنید . در این مثال هم یک دستور و یک comment چند خطی قرار داده شده است . دستور توسط مرورگر اجرا شده ، ولی comment نمایش داده نمی شود :

مثال:

<script type="text/javascript">
/* this is a multi line comment . navigator won`t show it .
We use it for long comments .
It can be several lines */

document.write ( "How to write a multi line comment" ) ;
</script>