آموزش طراحی سایت-جاوا اسکرپیت

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

• آموزش دستورات جاوا اسکریپت
• کلید واژه های جاوا اسکریپت
• آموزش متغیرها و انواع داده ای در زبان جاوا اسکریپت
• آموزش محل قرار گیری کدهای جاوا اسکریپت

حال ادامه آموزش طراحی سایت در خدمت شما هستیم.

آموزش خروجی جاوا اسکریپت:

زبان JavaScript هیچ گونه توابع توکار (built-in) مربوط به چاپ و نمایش (print،display) ندارد.

توانایی جاوا اسکریپت در نمایش داده ها به گونه های مختلف (با استفاده از توابع متفاوت)

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

1. با استفاده از تابع window.alert()، در پنجره ی هشدار (alert box) داده را نمایش می دهد.
2. با استفاده از تابع ()، متن مشخص (خروجی HTML) را در صفحه چاپ کرده و نمایش می دهد.
3. به وسیله ی خاصیت innerHTML، محتوای HTML را تعریف می کند و داخل آن کد می نویسید یا آن را دستکاری می کند.
4. به کمک متد console.log()، داده ی مورد نظر را در مرورگر به نمایش می گذارد.

استفاده از تابع ()window.alert

می توانید از یک پنجره ی هشدار (alert box) برای نمایش دادن خروجی (داده) استفاده کرد.

1< h1 >My First Web Page< /h1 >

1< p >My first paragraph.< /p >

1  

1< script >

1    window.alert(5 + 6);

1< /script >

استفاده از متد ()

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

مثال:

1< script >

1    (5 + 6);

1< /script >11

استفاده از () پس از اینکه سند HTML کاملاً بار گذاری شده، باعث می شود کلیه ی HTML های موجود از صفحه حذف گردند.

مثال:

< button type="button" ="(5 + 6)" >Try it< /button >

استفاده از خاصیت innerHTML

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

جهت دسترسی به عنصر HTML، جاوا اسکریپت می تواند از متد document.getElementById(id) بهره بگیرد.
خصیصه ی id عنصر HTML را تعریف می کند. خاصیت innerHTML در واقع محتوای HTML را تعریف می کند.

مثال:

1< script >

1    document.getElementById("demo") = 5 + 6;

1< /script >

استفاده از متد ()console.log

می توان در مرورگر با استفاده از متد console.log()، داده ی مورد نظر را نمایش داد.
دکمه ی F12 را فشار داده تا پنجره ی فرمان / کنسول مرورگر فعال شود، سپس "Console" را در منو انتخاب کنید.

مثال:

1< script >

1    console.log(5 + 6);

1< /script >

آموزش Syntax جاوا اسکریپت:

دستور گرامری Syntax در حقیقت یک سری قوانین است که به وسیله ی آن می توان فهمید برنامه های جاوا اسکریپت چگونه ساخته می شوند.

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

یک برنامه ی کامپیوتری / Computer program در واقع فهرستی از "دستورات / instructions" می باشد که باید توسط رایانه "اجرا / execute" شود.
در یک زبان برنامه نویسی به instruction های برنامه، Statement (دستور) گفته می شود.
جاوا اسکریپت نیز یک زبان برنامه نویسی محسوب می شود.
دستورات زبان جاوا اسکریپت توسط کاراکتر نقطه ویرگول (;) از هم جدا می شوند.

مثال:

1var x = 5; 

1var y = 6; 

1var z = x + y; 

نکته:

در HTML، برنامه های جاوا اسکریپت توسط مرورگر وب اجرا می شوند.

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

دستورات JavaScript

دستورات جاوا اسکریپت متشکل است از : values (مقادیر)، Operators (عملگرها)، Expressions (عبارات)، Keywords (کلیدواژه ها) و Comments (توضیحات).

لفظ ها یا لیترال های جاوا اسکریپت JavaScript literals:

مهمترین قوانین برای نوشتن مقادیر ثابت عبارتند از

اعداد Numbers – اعدادی که با اعشار (decimal) یا بدون اعشار نوشته می شوند، به ترتیب زیر

10.50

‎1001‎

رشته ها Strings – رشته ها متن یا نوشته هایی هستند که درون علامت های " " یا ' ' نوشته می شوند.

"John Doe" ‎

‎'John Doe'

عبارات Expressions – عبارات نیز می توانند نمایان گر مقادیر ثابت باشند.

5 + 6

‎5 * 10

متغیرهای جاوا اسکریپت (JavaScript Variables)

در یک زبان برنامه نویسی، متغیرها (variables) به منظور ذخیره سازی (store) مقادیر داده ها بکار می روند.
جاوا اسکریپت با استفاده از کلید واژه ی var متغیر تعریف (define) می کند.
علامت مساوی (=) را به منظور تخصیص مقادیر به متغیرها مورد استفاده قرار می دهیم.
در این مثال، x به عنوان متغیر تعریف شده، سپس به مقدار 6 به آن اختصاص داده شده است.

var x;

x = 6; ‎‏

عملگرهای جاوا اسکریپت (JavaScript Operators)

جاوا اسکریپت با استفاده از عملگر جایگزین / assignment operator(=) مقادیر را به متغیر ها نسبت (تخصیص / assign) می دهد.

var x = 5;

var y = 6;‎

جاوا اسکریپت با استفاده از عملگرهای محاسباتی (arithmetic operator) از جمله :+ - * / مقادیر را محاسبه (compute) می کند.

(5 + 6) * 10‎‏ ‏

کلیدواژه های جاوا اسکریپت (JavaScript Keywords)

واژه های کلیدی (Keyword) جاوا اسکریپت به منظور شناسایی عملیاتی که باید (انجام) پیاده شود مورد استفاده قرار می گیرد.
در واقع کلید واژه ی var به مرورگر دستور / اطلاع می دهد یک متغیر جدید ایجاد کند.

var x = 5 + 6;

var y = x * 10;‎‏

توضیحات در جاوا اسکریپت (JavaScript Comments)

تمامی دستورات جاوا اسکریپت لزوماً "اجرا" نمی شوند.
کدهایی که پس از کاراکتر // یا بین */ و /* قرار داده می شوند در حقیقت توضیح (comment) محسوب می شوند و از این رو در اجرا نادیده گرفته می شوند.

var x = 5; // I will be executed

‎// var x = 6; I will NOT be executed

جاوا اسکریپت، حساس به کوچک و بزرگی حروف (Case sensitive)

تمامی شناسه های (identifier) جاوا اسکریپت به کوچک و بزرگی حروف حساس هستند.
به عنوان مثال، lastName و lastname گرچه هر دو متغیر هستند ولی به دلیل تفاوت در کوچک و بزرگی حروف کاملاً از هم متمایز تلقی می گردند.

lastName = "Doe";

lastname = "Peterson";‎

برای جاوا اسکریپت VAR یا Var با کلید واژه ی var یکسان نیست.

JavaScript و Camel Case

در گذشته، برنامه نویسان از سه روش برای گنجاندن چندین کلمه در یک اسم متغیر واحد استفاده می کردند.

خط تیره (hyphen)

first-name،‎ last-name،‎ master-card،‎ inter-city ‏

خط زیرین (underscore)

first_name،‎ last_name،‎ master_card،‎ inter_city

و

First Name،‎ LastName،‎ MasterCard،‎ InterCity‎

در زبان های برنامه نویسی، بخصوص جاوا اسکریپت، camel case اغلب با یک حرف کوچک (lower case) شروع می شود.

firstName،‎ lastName،‎ masterCard،‎ interCity

توجه:

در جاوا اسکریپت اجازه ی استفاده از خط تیره (hyphen) به برنامه نویس داده نمی شود مگر برای تفریق.

مجموعه کاراکترهای جاوا اسکریپت (JavaScript Character set)

جاوا اسکریپت از مجموعه کاراکترهای Unicode استفاده می کند.

یونیکد Unicodeتمامی کاراکترها، نشانه گذاری ها (punctuation) و علائم موجود را دربر می گیرد.

آموزش توضیحات در جاوا اسکریپت:

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

توضیحات تک خطی (single line comments)

توضیحات تک خطی با کاراکتر // آغاز می گردند.
جاوا اسکریپت هر متنی را که بین کاراکتر // و انتهای خط قرار بگیرد کاملاً نادیده می گیرد(اجرا نمی کند).
در این مثال از comment تک خطی پیش از هر خط به منظور تشریح کد مربوط استفاده شده.

مثال

1< script >

1    // Change heading:

1    document.getElementById("myH") = "My First Page"

1    // Change paragraph:

1    document.getElementById("myP") = "My first paragraph."

1< /script >

مثال زیر برای توضیح کد در انتهای هر خط یک comment تک خطی بکار گرفته.

1< script >

1    var x = 5;      // Declare x, give it the value of 5

1    var y = x + 2;  // Declare y, give it the value of x + 2

1  

1    document.getElementById("demo") = y; // Write y to demo

1< /script >

توضیحات چند خطی (multi-line comments)

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

کامنت Comment های چند خطی با */ آغاز شده و با کاراکتر /* خاتمه می یابند.
هر نوشته ی که بین دو کاراکتر گفته شده قرار گیرد کاملاً توسط جاوا اسکریپت نادیده گرفته می شود.
این مثال یک توضیح چند خطی (comment block یا مجموعه ی از توضیحات) را برای تشریح کد مورد نظر بکار می گیرد

مثال:

1< script >

1    /*

1    The code below will change

1    the heading with id = "myH"

1    and the paragraph with id = "myp"

1    in my web page:

1    */

1    document.getElementById("myH") = "My First Page"

1    document.getElementById("myP") = "My first paragraph."

1< /script >

نکته:

در بیشتر مواقع برنامه نویسان از توضیح تک خطی استفاده می کنند.

کامنت Comment block ها معمولا برای مستند سازی های رسمی بکار می روند.

استفاده از توضیحات برای جلوگیری از اجرای کد

با بهره گیری از توضیحات (comments) می توان از اجرای کد جلوگیری کرد که برای اجرای تست و امتحان کردن کد جایگزین بسیار کارامد تلقی می گردد.
افزودن کاراکتر // در ابتدای خط کد باعث می شود خط کد از حالت قابل اجرا به حالت comment تبدیل شود، بدین معنا که دیگر خط کد مورد نظر اجراشدنی نبوده و به یک توضیح ساده تبدیل گردد.
این مثال با استفاده از //، اجرای یکی از خط کدها را مانع می شود.

مثال:

1< script >

1    //document.getElementById("myH") = "My First Page"

1    document.getElementById("myP") = "My first paragraph."

1< /script >

حال مثال زیر را مشاهده می کنید که به کمک comment block از اجرای چندین خط کد جلوگیری می کند.

مثال:

1< script >

1     /*

1     document.getElementById("myH") = "Welcome to my Homepage"

1     document.getElementById("myP") = "This is my first paragraph."

1     */

1 < /script >

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