مباحث اولیه برای آشنایی با javascript

P O U R I A · Aug 6, 2015

فهرست مطالب:

شیوه های مختلف نوشتن کدهای javascript
ارجاع به شیء های صفحه HTML ، توسط javascript ، بر اساس مرتبه بندی شیء ها در صفحه HTML
نوشتن توضیحات، در میان کدهای javascript
تعریف متغیرها (variables) ، با دستور var در javascript
ساخت آرایه ها (Arrays)، در javascript
عملگرها (Operators) در javascript
توابع (Functions) از پیش تعریف شده در javascript
تعریف یک تابع (Function) جدید در javascript

منبع: کلیدستان

P O U R I A · Aug 6, 2015

شیوه های مختلف نوشتن کدهای javascript

شیوه های مختلف نوشتن کدهای javascript

کدهای javascript ، به سه شیوه مختلف نوشته می شوند :

1- نوشتن کدهای javascript به صورت بلوک های اسکریپت (script blocks)

2- نوشتن کدهای javascript به صورت فایل جداگانه (external JavaScript files)

3- نوشتن کدهای javascript به صورت درون خطی (درون تگ های HTML)

در ادامه، این شیوه ها را شرح می دهیم.

[h=2]نوشتن کدهای javascript به صورت بلوک های اسکریپت (script blocks) :[/h]در این شیوه، قبل از شروع کدهای javascrpt ، عبارت زیر را می نویسیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]

و در انتها (بعد از کدهای javascript)، باید عبارت زیر نوشته شود :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]

مثل کد زیر (در ساختار صفحه HTML) :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]html[COLOR=#339933]>[/COLOR]
[COLOR=#339933]<[/COLOR]head[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
    window.[COLOR=#006633]alert[/COLOR][COLOR=#009900]([/COLOR][COLOR=#0000FF]"hello !"[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]head[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]body[COLOR=#339933]>[/COLOR]
[COLOR=#339933]</[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]html[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=2]نوشتن کدهای javascript به صورت فایل جداگانه (external JavaScript files)[/h]در این شیوه، ابتدا کدهای javascript مورد نظرمان را در یک فایل می نویسیم و آن را ذخیره می کنیم (پسوند فایل باید js باشد). سپس در صفحه مورد نظرمان، به آن فایل، ارجاع می دهیم. مثلا فرض کنید که نام فایل حاوی کدهای javascript ، برابر code.js باشد، در این صورت، با کد زیر می توانیم به آن ارجاع بدهیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR] src[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"code.js"[/COLOR][COLOR=#339933]></[/COLOR]script[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]

مثل کد زیر (در ساختار صفحه HTML) :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]html[COLOR=#339933]>[/COLOR]
[COLOR=#339933]<[/COLOR]head[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR] src[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"code.js"[/COLOR][COLOR=#339933]></[/COLOR]script[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]head[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]body[COLOR=#339933]>[/COLOR]
[COLOR=#339933]</[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]html[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=2]نوشتن کدهای javascript به صورت درون خطی (درون تگ های HTML)[/h]برخی کدهای javascrpit ، به صورت درون خطی (درون تگ های HTML صفحه) نوشته می شوند. به آنها، به کار گیرنده رویداد (event handler) گفته می شود.به مثال زیر توجه کنید :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]html[COLOR=#339933]>[/COLOR]
[COLOR=#339933]<[/COLOR]head[COLOR=#339933]>[/COLOR]
[COLOR=#339933]</[/COLOR]head[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]p[COLOR=#339933]>[/COLOR]
    [COLOR=#339933]<[/COLOR]span onclick[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"document.bgColor='red';"[/COLOR][COLOR=#339933]>[/COLOR]Red[COLOR=#339933]</[/COLOR]span[COLOR=#339933]>[/COLOR] [COLOR=#339933]|[/COLOR]
    [COLOR=#339933]<[/COLOR]span onclick[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"document.bgColor='white';"[/COLOR][COLOR=#339933]>[/COLOR]White[COLOR=#339933]</[/COLOR]span[COLOR=#339933]>[/COLOR]
[COLOR=#339933]</[/COLOR]p[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]html[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :

[/h]
در کادر بالا، اگر بر روی کلمه Red کلیک کنید، آنگاه پس زمینه صفحه، با رنگ قرمز نمایش داده می شود و اگر بر روی کلمه white کلیک نماییم، آنگاه پس زمینه صفحه، با رنگ سفید نمایش داده خواهد شد.

P O U R I A · Aug 6, 2015

ارجاع به شیء های صفحه HTML ، توسط javascript ، بر اساس مرتبه بندی شیء ها در صفحه HTML

ارجاع به شیء های صفحه HTML ، توسط javascript ، بر اساس مرتبه بندی شیء ها در صفحه HTML

در javascript ، معمولا به شیء های به کار رفته در صفحه HTML ، ارجاع داده می شود (اشاره به آنها)، بنابراین باید اساس مرتبه بندی شیء ها در صفحه HTML را بدانیم، تا این ارجاع، به درستی صورت گیرد.

در شکل زیر، HTML DOM (مخفف HTML Document Object Model ، به معنای مدل شیء های صفحه HTML) نمایش داده شده است :

همان طور که در شکل بالا مشاهده می کنید، در مرتبه اول، window می باشد، یعنی شیء window دارای بالاترین مرتبه است. سپس شیء document را داریم. بنابراین، شیء document ، بچه شیء window می باشد (child of window). سپس تمامی عناصر صفحه HTML که در صفحه نمایش داده می شوند، مثل فرم ها (forms)، جدول ها (tables)، لینک ها (links)، عکس ها (images) و ... ، بچه های شیء window می باشند. هر کدام از این شیء ها، می توانند بچه های خود را داشته باشند. مثلا یک شیء form ، دارای بچه های textboxes و radio buttons و .. می باشد.

برای دسترسی به یک شیء صفحه HTML ، باید بر اساس رتبه بندی شیء ها در صفحه، به آن اشاره کنیم. برای این منظور، شیء ها را به ترتیب اولویت، ذکر می کنیم و در بین آنها، علامت نقطه (.) قرار می دهیم. مثل عبارت زیر :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]window.[COLOR=#006633]document[/COLOR].[COLOR=#006633]loginform[/COLOR][/FONT]
[/FONT][/COLOR]

با کد بالا، به یک فرم (form) که دارای نام loginform است، اشاره کرده ایم.

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

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]window[COLOR=#009900][[/COLOR][COLOR=#0000FF]'document'[/COLOR][COLOR=#009900]][/COLOR][COLOR=#009900][[/COLOR][COLOR=#0000FF]'loginform'[/COLOR][COLOR=#009900]][/COLOR][/FONT]
[/FONT][/COLOR]

اکنون فرض کنید که بخواهیم به اولین فرم یک صفحه، اشاره کنیم. کدهای زیر را می نویسیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]window.[COLOR=#006633]document[/COLOR].[COLOR=#006633]forms[/COLOR][COLOR=#009900][[/COLOR][COLOR=#CC66CC]0[/COLOR][COLOR=#009900]][/COLOR][/FONT]
[/FONT][/COLOR]

و به شیوه دوم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]window[COLOR=#009900][[/COLOR][COLOR=#0000FF]'document'[/COLOR][COLOR=#009900]][/COLOR][COLOR=#009900][[/COLOR][COLOR=#0000FF]'forms'[/COLOR][COLOR=#009900]][/COLOR][COLOR=#009900][[/COLOR][COLOR=#CC66CC]0[/COLOR][COLOR=#009900]][/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نکته :[/h]چون مرتبه شیء window از همه شیء های دیگر، بالاتر است، بنابراین می توانیم آن را ذکر نکنیم. یعنی به جای نوشتن کد زیر :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]window.[COLOR=#006633]document[/COLOR].[COLOR=#006633]loginform[/COLOR][/FONT]
[/FONT][/COLOR]

می توانیم کد زیر را بنویسیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]document.[COLOR=#006633]loginform[/COLOR][/FONT]
[/FONT][/COLOR]

P O U R I A · Aug 6, 2015

نوشتن توضیحات، در میان کدهای javascript

نوشتن توضیحات، در میان کدهای javascript

نوشتن توضیحات در میان کدهای javascript ، به ما کمک می کند که در آینده که زمان زیادی از نوشتن کدها گذشته است، با نگاه کردن به آنها، به راحتی متوجه عملکرد بخش های مختلف کدهای javascript بشویم.

برای نوشتن توضیحات در میان کدهای javascript ، دو روش وجود دارد. روش اول، نوشتن توضیحات در یک خط (تک خطی) است و روش دوم، نوشتن یک بلوک (چندین خط) از توضیحات می باشد.

[h=2]نوشتن توضیحات تک خطی، در javascript :[/h]برای نوشتن توضیحات تک خطی، در میان کدهای javascript ، می توانیم از علامت های // استفاده کنیم. مثل کد زیر :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
    window.[COLOR=#006633]alert[/COLOR][COLOR=#009900]([/COLOR][COLOR=#0000FF]"hello !"[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
    [COLOR=#666666][I]// This is a single-line comment[/I][/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=2]نوشتن توضیحات به صورت بلوک (چندین خط)، در javascript :[/h]برای نوشتن توضیحات به صورت بلوک، در میان کدهای javascript ، می توانیم از علامت های */ و /* استفاده کنیم. مثل کد زیر :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
    window.[COLOR=#006633]alert[/COLOR][COLOR=#009900]([/COLOR][COLOR=#0000FF]"hello !"[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
    [COLOR=#666666][I]/*
    This is
    a multi-line
    comment.
    */[/I][/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]

P O U R I A · Aug 6, 2015

تعریف متغیرها (variables) ، با دستور var در javascript

تعریف متغیرها (variables) ، با دستور var در javascript

همان طور که می دانید، متغیرها (variables)، برای ذخیره کردن مقادیر به کار می روند. در javascript ، برای تعریف یک متغیر، باید از دستور var استفاده کنیم.

برای تعریف متغیرها، می توانیم به دو صورت عمل کنیم :

ا- همزمان که متغیر را تعریف می کنیم، مقدار متناظر با آن را هم مشخص نماییم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]var name [COLOR=#339933]=[/COLOR] [COLOR=#CC66CC]34[/COLOR][COLOR=#339933];[/COLOR][/FONT]
[/FONT][/COLOR]

2- ابتدا متغیر را تعریف کنیم و سپس در ادامه کدها، هر زمان که خواستیم، مقداری را در آن ذخیره نماییم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]var name[COLOR=#339933];[/COLOR]
name [COLOR=#339933]=[/COLOR] [COLOR=#CC66CC]34[/COLOR][COLOR=#339933];[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]html[COLOR=#339933]>[/COLOR]
[COLOR=#339933]<[/COLOR]head[COLOR=#339933]>[/COLOR]
[COLOR=#339933]</[/COLOR]head[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]p id[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"paragraph1"[/COLOR][COLOR=#339933]>[/COLOR]
[B]This[/B] is a paragraph.
[COLOR=#339933]</[/COLOR]p[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
    var colorName [COLOR=#339933]=[/COLOR] [COLOR=#0000FF]"blue"[/COLOR][COLOR=#339933];[/COLOR]
    document.[COLOR=#006633]getElementById[/COLOR][COLOR=#009900]([/COLOR][COLOR=#0000FF]"paragraph1"[/COLOR][COLOR=#009900])[/COLOR].[COLOR=#006633]style[/COLOR].[COLOR=#006633]backgroundColor[/COLOR][COLOR=#339933]=[/COLOR]colorName[COLOR=#339933];[/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]html[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]

در کدهای فوق، یک پاراگراف با id برابر paragraph1 ساخته ایم و سپس با کدهای javascript ، رنگ پس زمینه آن را برابر آبی قرار داده ایم. مشاهده می کنید که رنگ مورد نظر را در متغیری با نام colorName ذخیره کرده ایم (به صورت یک رشته (string)).

[h=4]نتیجه :[/h]

P O U R I A · Aug 6, 2015

ساخت آرایه ها (Arrays)، در javascript

ساخت آرایه ها (Arrays)، در javascript

در مبحثی دیگر، چگونگی تعریف متغیر ها (variables) با استفاده از دستور var را شرح دادیم، اما گاهی اوقات نیاز داریم که تعدادی مقدار را به صورت همزمان و در یک آرایه (Array) تعریف کنیم. برای این منظور، می توانیم از هر یک از روش های زیر اقدام کنیم :

1- تعریف آرایه، تنها با به کار بردن دستور var :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]var myarray [COLOR=#339933]=[/COLOR] [COLOR=#009900][[/COLOR][COLOR=#009900]][/COLOR][COLOR=#339933];[/COLOR]
myarray[COLOR=#009900][[/COLOR][COLOR=#CC66CC]0[/COLOR][COLOR=#009900]][/COLOR] [COLOR=#339933]=[/COLOR] value1[COLOR=#339933];[/COLOR]
myarray[COLOR=#009900][[/COLOR][COLOR=#CC66CC]1[/COLOR][COLOR=#009900]][/COLOR] [COLOR=#339933]=[/COLOR] value2[COLOR=#339933];[/COLOR]
myarray[COLOR=#009900][[/COLOR][COLOR=#CC66CC]2[/COLOR][COLOR=#009900]][/COLOR] [COLOR=#339933]=[/COLOR] value3[COLOR=#339933];[/COLOR][/FONT]
[/FONT][/COLOR]

همان طور که مشاهده می کنید، شماره (اندیس) عنصر را در جلوی نام آرایه (Array) و در میان علامت های [ و ] قرار می دهیم و سپس یک علامت تساوی و در آخر، مقدار مورد نظرمان برای آن عنصر از آرایه را می نویسیم.

نکته مهم این است که اندیس هایی که برای عنصرهای آرایه در نظر می گیریم، از عدد صفر شروع می شوند (نه از عدد یک).

همچنین اگر بخواهیم تمامی عنصرهای آرایه را به صورت همزمان تعریف کنیم، کدها را به شکل زیر می نویسیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]var myarray [COLOR=#339933]=[/COLOR] [COLOR=#009900][[/COLOR]value1, value2, value3[COLOR=#009900]][/COLOR][COLOR=#339933];[/COLOR][/FONT]
[/FONT][/COLOR]

2- تعریف آرایه، با استفاده از کلاس Array :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]var myarray [COLOR=#339933]=[/COLOR] [B]new[/B] [COLOR=#003399]Array[/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
myarray[COLOR=#009900][[/COLOR][COLOR=#CC66CC]0[/COLOR][COLOR=#009900]][/COLOR] [COLOR=#339933]=[/COLOR] value1[COLOR=#339933];[/COLOR]
myarray[COLOR=#009900][[/COLOR][COLOR=#CC66CC]1[/COLOR][COLOR=#009900]][/COLOR] [COLOR=#339933]=[/COLOR] value2[COLOR=#339933];[/COLOR]
myarray[COLOR=#009900][[/COLOR][COLOR=#CC66CC]2[/COLOR][COLOR=#009900]][/COLOR] [COLOR=#339933]=[/COLOR] value3[COLOR=#339933];[/COLOR][/FONT]
[/FONT][/COLOR]

از کلاس (class) با نام Array ، یک شیء (object) ساخته ایم. اگر مفاهیم کلاس (class) و شیء (object) را نمی دانید، باید بگویم که این مفاهیم، مربوط به برنامه نویسی شیء گرا (oop) می باشد (نیازی نیست که حتما این مفاهیم را بدانید).

همچنین اگر بخواهیم تمامی عنصرهای آرایه را به صورت همزمان تعریف کنیم، کدها را به شکل زیر می نویسیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]var myarray [COLOR=#339933]=[/COLOR] [B]new[/B] [COLOR=#003399]Array[/COLOR][COLOR=#009900]([/COLOR]value1, value2, value3[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR][/FONT]
[/FONT][/COLOR]

نکته :

برای عناصر یک آرایه، اندیس، هم می تواند به صورت عدد باشد و هم به صورت رشته (string). برای اندیس به صورت عدد، کدهایی را شرح دادیم، بد نیست کدهایی را هم برای تعیین اندیس به صورت رشته (string) ارائه کنیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]var myarray [COLOR=#339933]=[/COLOR] [B]new[/B] [COLOR=#003399]Array[/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
myarray[COLOR=#009900][[/COLOR][COLOR=#0000FF]"tehran"[/COLOR][COLOR=#009900]][/COLOR] [COLOR=#339933]=[/COLOR] value1[COLOR=#339933];[/COLOR]
myarray[COLOR=#009900][[/COLOR][COLOR=#0000FF]"shiraz"[/COLOR][COLOR=#009900]][/COLOR] [COLOR=#339933]=[/COLOR] value2[COLOR=#339933];[/COLOR]
myarray[COLOR=#009900][[/COLOR][COLOR=#0000FF]"ghom"[/COLOR][COLOR=#009900]][/COLOR] [COLOR=#339933]=[/COLOR] value3[COLOR=#339933];[/COLOR][/FONT]
[/FONT][/COLOR]

با توجه به کد بالا، اکنون اگر بخواهیم به مقدار value2 در آرایه myarray اشاره کنیم، باید عبارت زیر را بنویسیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]myarray[COLOR=#009900][[/COLOR][COLOR=#0000FF]"shiraz"[/COLOR][COLOR=#009900]][/COLOR][/FONT]
[/FONT][/COLOR]

مثال :

سه پاراگراف با id های برابر paragraph1 و paragraph2 و paragraph3 تعریف می کنیم و سپس با کدهای javascript ، یک آرایه با نام colorNames تعریف می کنیم که نام سه رنگ مختلف در آن ذخیره شده است و سپس با روش document.getElementById ، به هر یک از پاراگراف ها، ارجاع می دهیم و رنگ پس زمینه آنها را بر اساس یکی از عناصر آرایه colorNames قرار می دهیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]html[COLOR=#339933]>[/COLOR]
[COLOR=#339933]<[/COLOR]head[COLOR=#339933]>[/COLOR]
[COLOR=#339933]</[/COLOR]head[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]p id[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"paragraph1"[/COLOR][COLOR=#339933]>[/COLOR]
[B]This[/B] is a paragraph.
[COLOR=#339933]</[/COLOR]p[COLOR=#339933]>[/COLOR]
[COLOR=#339933]<[/COLOR]p id[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"paragraph2"[/COLOR][COLOR=#339933]>[/COLOR]
[B]This[/B] is a paragraph.
[COLOR=#339933]</[/COLOR]p[COLOR=#339933]>[/COLOR]
[COLOR=#339933]<[/COLOR]p id[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"paragraph3"[/COLOR][COLOR=#339933]>[/COLOR]
[B]This[/B] is a paragraph.
[COLOR=#339933]</[/COLOR]p[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
    var colorNames [COLOR=#339933]=[/COLOR] [B]new[/B] [COLOR=#003399]Array[/COLOR][COLOR=#009900]([/COLOR][COLOR=#0000FF]"blue"[/COLOR], [COLOR=#0000FF]"red"[/COLOR], [COLOR=#0000FF]"green"[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
    document.[COLOR=#006633]getElementById[/COLOR][COLOR=#009900]([/COLOR][COLOR=#0000FF]"paragraph1"[/COLOR][COLOR=#009900])[/COLOR].[COLOR=#006633]style[/COLOR].[COLOR=#006633]backgroundColor[/COLOR][COLOR=#339933]=[/COLOR]colorNames[COLOR=#009900][[/COLOR][COLOR=#CC66CC]0[/COLOR][COLOR=#009900]][/COLOR][COLOR=#339933];[/COLOR]
    document.[COLOR=#006633]getElementById[/COLOR][COLOR=#009900]([/COLOR][COLOR=#0000FF]"paragraph2"[/COLOR][COLOR=#009900])[/COLOR].[COLOR=#006633]style[/COLOR].[COLOR=#006633]backgroundColor[/COLOR][COLOR=#339933]=[/COLOR]colorNames[COLOR=#009900][[/COLOR][COLOR=#CC66CC]1[/COLOR][COLOR=#009900]][/COLOR][COLOR=#339933];[/COLOR]
    document.[COLOR=#006633]getElementById[/COLOR][COLOR=#009900]([/COLOR][COLOR=#0000FF]"paragraph3"[/COLOR][COLOR=#009900])[/COLOR].[COLOR=#006633]style[/COLOR].[COLOR=#006633]backgroundColor[/COLOR][COLOR=#339933]=[/COLOR]colorNames[COLOR=#009900][[/COLOR][COLOR=#CC66CC]2[/COLOR][COLOR=#009900]][/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]html[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

P O U R I A · Aug 6, 2015

عملگرها (Operators) در javascript

عملگرها (Operators) در javascript

در javascript ، عملگرهای (Operators) مختلفی به کار می روند که در دسته های زیر قرار می گیرند :

1- عملگرهای حسابی (Arithmetic Operators)

2- عملگرهای مقداردهی (Assignment Operators)

3- عملگرهای رشته (String Operators)

4- عملگرهای بیتی (دودویی)(Bitwise Operators)

5- عملگر typeof برای تشخیص نوع یک متغیر (variable)

6- عملگر delete برای حذف کردن مشخصه های (Properties) یک شیء (Object)

7- عملگر یگانی + (Unary + Operator) برای تبدیل یک متغیر (variable) به عدد (number)

8- عملگرهای مقایسه (Comparison Operators)

9- عملگرهای منطقی (Logical Operators)

10- عملگر شرطی (Conditional Operator)

1- عملگرهای حسابی (Arithmetic Operators) :

عملگرهای حسابی (Arithmetic Operators)، برای کار با اعداد می باشند :

عملیات	عملگر (operator)
جمع (Addition)	+
تفریق (Subtraction)	-
ضرب (Multiplication)	*
تقسیم (Division)	/
(Modulus-remainder)	%
افزایش یه اندازه یک واحد (Increment by one)	++
کاهش یه اندازه یک واحد (Decrement by one)	--

2- عملگرهای مقداردهی (Assignment Operators) :

عملگرهای مقداردهی (Assignment Operators)، هنگام تعیین مقدار برای یک متغیر (variable) به کار می روند :

عملیات معادل	عملیات	عملگر (operator)
	a=7	=
a=a+7	a+=7	+=
a=a-7	a-=7	-=
a=a*7	a*=7	*=
a=a/7	a/=7	/=
a=a%7	a%=7	%=

3- عملگرهای رشته (String Operators) :

عملگرهای رشته (String Operators)، برای کار با رشته ها (متن ها - strings) به کار می روند :

مثال	عملیات	عملگر (operator)
var myVariable = "Hello " + "world";	اتصال (Concatenation) دو رشته به یکدیگر	+
var myVariable = "Hello "; myVariable += "world";	اتصال (Concatenation) و مقداردهی (assignment) به صورت همزمان	+=

4- عملگرهای بیتی (دودویی)(Bitwise Operators) :

عملگرهای بیتی (دودویی)(Bitwise Operators) برای کار با عددهای 32 بیتی (32 bits numbers) استفاده می شوند :

دهدهی (decimal)	نتیجه	معادل	مثال	عملیات	عملگر (operator)
1	0001	0101 & 0001	x = 5 & 1	AND	&
5	0101	0101 \| 0001	x = 5 \| 1	OR	\|
10	1010	~0101	x = ~ 5	NOT	~
4	0100	0101 ^ 0001	x = 5 ^ 1	XOR	^
10	1010	0101 << 1	x = 5 << 1	Left shift	<<
2	0010	0101 >> 1	x = 5 >> 1	Right shift	>>

5- عملگر typeof برای تشخیص نوع یک متغیر (variable) :

عملگر typeof را در تاپیک متغیرها (Variables) در javascript شرح داده ایم.

6- عملگر delete برای حذف کردن مشخصه های (Properties) یک شیء (Object) :

عملگر delete را در تاپیک مباحث عمومی در javascript شرح داده ایم.

7- عملگر یگانی + (Unary + Operator) برای تبدیل یک متغیر (variable) به عدد (number) :

عملگر یگانی + (Unary + Operator) برای تبدیل یک متغیر (variable) به عدد (number) به کار می رود.

8- عملگرهای مقایسه (Comparison Operators) :

عملگرهای مقایسه (Comparison Operators) برای مقایسه مقادیر متغیرها (varibles) به کار می روند :

مثال	عملیات	عملگر (operator)
x == 3	برابر با (دارای مقدار برابر)	==
x === "3"	هم دارای مقدار برابر و (and) هم از یک نوع	===
x != 3	نابرابر	!=
x !== "3"	نابرابر یا (or) از دو نوع مختلف	!==
x > 3	بزرگتر از	>
x < 3	کوچکتر از	<
x >= 3	بزرگتر یا مساوی	>=
x <= 3	کوچکتر یا مساوی	<=

9- عملگرهای منطقی (Logical Operators) :

مثال	عملیات	عملگر (operator)
x < 10 && y > 1	and	&&
x == 5 \|\| y == 5	or	\|\|
!(x == y)	not	!

10- عملگر شرطی (Conditional Operator) :

عملگر شرطی (Conditional Operator) در javascript ، به صورت زیر به کار می رود :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]variablename [COLOR=#339933]=[/COLOR] [COLOR=#009900]([/COLOR]condition[COLOR=#009900])[/COLOR] [COLOR=#339933]?[/COLOR] value1[COLOR=#339933]:[/COLOR]value2[/FONT]
[/FONT][/COLOR]

در عبارت بالا، چنانچه شرط condition صادق باشد، مقدار value1 در متغیر با نام variablename ذخیره خواهد شد و چنانچه شرط condition صادق نباشد، مقدار value2 در متغیر variablename ذخیره می شود.

مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
voteable [COLOR=#339933]=[/COLOR] [COLOR=#009900]([/COLOR]age [COLOR=#339933]<[/COLOR] [COLOR=#CC66CC]18[/COLOR][COLOR=#009900])[/COLOR] [COLOR=#339933]?[/COLOR] [COLOR=#0000FF]"Too young"[/COLOR][COLOR=#339933]:[/COLOR][COLOR=#0000FF]"Old enough"[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]

P O U R I A · Aug 6, 2015

توابع (Functions) از پیش تعریف شده در javascript

توابع (Functions) از پیش تعریف شده در javascript

در javascript ، توابع (Functions) زیادی به صورت از پیش تعریف شده وجود دارند و هر کدام عملیات خاصی را اجرا می کنند.

به عنوان مثال، تابع Number برای تبدیل نوع یک متغیر به عدد (number) به کار می رود. وقتی می گوییم تابع Number ، در واقع window.Number می باشد که به طور خلاصه، کلمه Number را می نویسیم و دیگر window را ذکر نمی کنیم.

به مثال زیر توجه کنید :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]html[COLOR=#339933]>[/COLOR]
[COLOR=#339933]<[/COLOR]head[COLOR=#339933]>[/COLOR]
[COLOR=#339933]</[/COLOR]head[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]<[/COLOR]p[COLOR=#339933]>[/COLOR]
[COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
var A [COLOR=#339933]=[/COLOR] [COLOR=#0000FF]"41"[/COLOR][COLOR=#339933];[/COLOR]
var A_number_1 [COLOR=#339933]=[/COLOR] [COLOR=#003399]Number[/COLOR][COLOR=#009900]([/COLOR]A[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
var A_number_2 [COLOR=#339933]=[/COLOR] window.[COLOR=#003399]Number[/COLOR][COLOR=#009900]([/COLOR]A[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]

document.[COLOR=#006633]write[/COLOR][COLOR=#009900]([/COLOR]A_number_1[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
document.[COLOR=#006633]write[/COLOR][COLOR=#009900]([/COLOR][COLOR=#0000FF]"<br />"[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
document.[COLOR=#006633]write[/COLOR][COLOR=#009900]([/COLOR]A_number_2[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR]
[COLOR=#339933]</[/COLOR]p[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]body[COLOR=#339933]>[/COLOR]

[COLOR=#339933]</[/COLOR]html[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :

[/h]

P O U R I A · Aug 6, 2015

تعریف یک تابع (Function) جدید در javascript

تعریف یک تابع (Function) جدید در javascript

در مبحثی دیگر، در مورد توابع (functions) از پیش تعریف شده در javascript صحبت کردیم که در خود javascript وجود دارند و می توانیم از آنها استفاده کنیم، اما ممکن است که بخواهیم خودمان یک تابع جدید تعریف کنیم و از آن استفاده نماییم.

به عنوان مثال، فرض کنید که بخواهیم تابعی با نام AddNumbers تعریف کنیم که دو عدد را در ورودی خود دریافت کرده و آن را با هم جمع کند و سپس نتیجه جمع را برگرداند، بنابراین برای تعریف تابع، کدهای زیر را می نویسیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
function AddNumbers[COLOR=#009900]([/COLOR]A,B[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
    C[COLOR=#339933]=[/COLOR]A[COLOR=#339933]+[/COLOR]B[COLOR=#339933];[/COLOR]
    [B]return[/B] C[COLOR=#339933];[/COLOR]
[COLOR=#009900]}[/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]

حال چنانچه بخواهیم از این تابع تعریف شده، برای جمع زدن دو عدد 2 و 3 استفاده کنیم، کدهای زیر را می نویسیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]myNumber [COLOR=#339933]=[/COLOR] AddNumbers[COLOR=#009900]([/COLOR][COLOR=#CC66CC]2[/COLOR],[COLOR=#CC66CC]3[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR][/FONT]
[/FONT][/COLOR]

بنابراین کل کدها را به صورت زیر می نویسیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]script type[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"text/javascript"[/COLOR][COLOR=#339933]>[/COLOR]
function AddNumbers[COLOR=#009900]([/COLOR]A,B[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
    C[COLOR=#339933]=[/COLOR]A[COLOR=#339933]+[/COLOR]B[COLOR=#339933];[/COLOR]
    [B]return[/B] C[COLOR=#339933];[/COLOR]
[COLOR=#009900]}[/COLOR]

myNumber [COLOR=#339933]=[/COLOR] AddNumbers[COLOR=#009900]([/COLOR][COLOR=#CC66CC]2[/COLOR],[COLOR=#CC66CC]3[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
document.[COLOR=#006633]write[/COLOR][COLOR=#009900]([/COLOR]myNumber[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#339933]</[/COLOR]script[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :

[/h]

عنوان	تالار	پاسخ ها	تاریخ
مباحث عمومی در javascript	JavaScript	6	Aug 8, 2015
تاریخ و زمان در javascript	JavaScript	10	Aug 8, 2015
عملیات های ریاضی در javascript	JavaScript	8	Aug 8, 2015
آرایه ها (Arrays) در javascript	JavaScript	5	Aug 8, 2015
نمایش پیام در javascript	JavaScript	3	Aug 7, 2015

مباحث اولیه برای آشنایی با javascript

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد

Similar threads