آموزش برنامه نویسی

آموزشگاه تحلیل داده ارایه دهنده به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی است که در این زمینه بی رقیب است

آموزش برنامه نویسی

آموزشگاه تحلیل داده ارایه دهنده به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی است که در این زمینه بی رقیب است

آموزش برنامه نویسی

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

۴ مطلب با کلمه‌ی کلیدی «فیلم آموزش جاوا اسکریپت» ثبت شده است

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

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

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

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

زبان 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 >

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

۰ نظر موافقین ۰ مخالفین ۰ ۲۳ دی ۹۸ ، ۱۲:۵۴
افشین رفوا

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

  • مزایای استفاده از جاوا اسکریپت
  • نوشتن اولین قطعه کد جاوا اسکریپت
  • فعال سازی جاوا اسکریپت در مرورگرها
  • محل قرارگیری دستورات جاوا اسکریپت

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

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

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

دستورات جاوا اسکریپت

دستور زیر به مرورگر دستور می دهد عبارت "Hello Dolly." را داخل یک المان HTML با شناسه ی "demo" بنویسد.

document.getElementById("demo") = "Hello Dolly."

عبارات JavaScript

document.getElementById("demo") = "Hello Dolly." Try it Yourself »

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

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

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

در این مثال x، y و z هر یک مقداردهی شده اند که یکی پس از دیگری اجرا می شوند. همان طور که خود مشاهده می کنید z آخر از همه اجرا می گردند.

مثال:

var x = 5; var y = 6; var z = x + y; 1document.getElementById("demo") = z;

توجه:

برنامه های نوشته شده توسط جاوا اسکریپت (javascript programs) همگی کد جاوا اسکریپت خوانده می شوند.

نقطه ویرگول ;

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

در انتهای هر دستور قابل اجرا یک نقطه ویرگول لحاظ کنید.

a = 5;

b = 6;

c = a + b;‎

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

a = 5; b = 6; c = a + b;‎

نکته:

قرار دادن نقطه ویرگول در انتهای دستورات اگرچه کاملاً ضروری نیست، اما اکیداً توصیه می شود.

فاصله بین بخش های مختلف کد

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

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

به عنوان مثال، دو نمونه ی زیر کاملاً یکسان هستند.

var person = "Hege";

var person="Hege";‎

توصیه می شود از فاصله در اطراف عملگرهای = + - * / استفاده کنید.

var x = y + z;‎

طول خط کد و شکستن آن (line length، line break)

به منظور خواناتر کردن کد، برنامه نویس ها اغلب سعی می کنند خطوط کدهایشان از 80 کاراکتر تجاوز نکند

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

مثال:

document.getElementById("demo") =

‎"Hello Dolly.";‎

مجموعه / گروهی از دستورات (code block)

می توان مجموعه ی از دستورات جاوا اسکریپت را داخل علامت های {...} جای گذاری کرد تا از این طریق امکان اجرای یکجا و همزمان کدها فراهم آید (به عبارتی آن ها را با قرار دادن داخل کاراکتر مزبور گروه بندی کرد).

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

یکی از جاهایی که در آن دستورات جاوا اسکریپت را به صورت گروه بندی شده مشاهده می کنید، داخل توابع (function) جاوا اسکریپت است.

مثال:

function myFunction() { 1‎ document.getElementById("demo") = "Hello Dolly." document.getElementById("myDIV") = "How are you?" ‎}‎

کلید واژه های جاوا اسکریپت

دستورات جاوا اسکریپت معمولاً با یک کلید واژه / keyword شروع می شود که نوع عملیاتی که در جاوا اسکریپت باید اجرا شود را تعیین می کند.

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

ihak1vfelngw.png

لطفاً توجه داشته باشید کلید واژه ها را نمی توان به عنوان اسم برای متغیرها مورد استفاده قرار داد.

آموزش متغیرها و انواع داده ای در زبان جاوا اسکریپت:

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

یکی از مشخصه های اساسی هر زبان برنامه نویسی، انواع داده ای (Data Types) است که توسط آن پشتیبانی می شود. جاوا اسکریپت امکان استفاده از سه نوع داده ای اساسی زیر را به کاربر می دهد.

اعداد (Numbers) مثل 123 ، 12.50 و....

متن (Strings) مثل “ Text “ و....

مقادیر صحیح یا غلط (Boolean) مثل true یا false.

همچنین جاوا اسکریپت دو نوع داده ای جزیی به صورت null (خالی) و undefined (تعریف نشده) را نیز به صورت مقادیر تک وجهی پشتیبانی می کند.

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

نکته:

جاوا اسکریپت، تفاوتی بین نوع داده ای عددی (Integer) و اعداد بزرگتر (Flaot) قائل نشده و تمامی اعداد در این زبان در یک متغیر 64 بیتی از نوعfloat تعریف می شوند.

نحوه تعریف متغیرها در زبان جاوا اسکریپت

همانند سایر زبان های برنامه نویسی، جاوا اسکریپت نیز از متغیرها (Variables) پشتیبانی می کند. متغیرها در واقع ظروفی هستند که مقادیر مورد نظر خود را درون آنها ریخته و یک نام منحصر به فرد را برایش انتخاب می کنید. سپس در هر جای برنامه که خواستید از آن مقدار استفاده نموده و یا آن را تغییر دهید، کافی است نام متغیر را در کد خود بنویسید.

قبل از استفاده از یک متغیر در زبان جاوا اسکریپت، بایستی آن را در کد خود تعریف کنید. از واژه کلیدی var، همانند کد زیر برای تعریف متغیرها استفاده می شود. در مثال زیر، دو متغیر به نام های money و name را تعریف کرده ایم.

<script type="text/javascript">

‎‎

همچنین می توانید دو یا چندین متغیر را با استفاده از یک واژه کلیدی var و به صورت پشت سر هم تعریف کنید. همانند کد زیر

<script type="text/javascript">‎

‎‎

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

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

<script type="text/javascript">‎

‎‎

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

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

نوع داده ای یک متغیر جاوا اسکریپت، حتی در طول کد می تواند، مثلا از عدد به متن تعییر کند. این کار آزادی عمل و امکان بروز خطای کمتری را به کاربر می دهد.

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

میدان شعاع ( دید ) استفاده از متغیرها در جاوا اسکریپت

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

متغیرهای سراسری (Global Variables) :

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

متغیرهای محلی (Local Variables) :

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

نکته:

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

<script type="text/javascript">‎

‎‎

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

در هنگام اجرای دستور (myVar); درون تابع، مقدار متغیر محلی خوانده شده و در خروجی چاپ می شود.

قواعد نام گذاری متغیرها در جاوا اسکریپت

در هنگام نامگذاری متغیرها در جاوا اسکریپت، بایستی موارد زیر را رعایت نمایید.

شما مجاز به استفاده از نام های ذخیره شده و کلمات کلیدی زبان جاوا اسکریپت برای یک متغیر نیستید. لیست نام های دخیره شده و کلمات کلیدی جاوا اسکریپت در بخش بعدی قرار داده شده است. برای مثال نام هایی مثال if یاBoolean برای نامگذاری، غیر مجاز است.

نام متغیرها در جاوا اسکریپت، نباید با یک عدد(9 -0) شده و برای آغاز نام حتما بایستی یک کاراکتر حروفی یا علامت _ قرار بگیرد. برای مثال نام های 123est غیر مجاز و نام_123est ممکن است.

نام متغیرها در زبان جاوا اسکریپت، به بزرگی یا کوچکی حروف حساس هستند. برای مثال متغیرهای Name ، name و یا NaMe با هم متفاوت خواهند بود.

لیست کلمات کلیدی و ذخیره شده زبان جاوا اسکریپت

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

reczmergtagf.png

آموزش محل قرار گیری کدهای جاوا اسکریپت:

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

< head > … < /head >.

قرار دادن اسکریپت ها در تگ اصلی < body > … < /body > .

قرار دادن کدهای جاوا اسکریپت در یک فایل خارجی . js سپس لینک به آن فایل در بخش < head > صفحه.

در ادامه به تشریح هر یک از روش های بالا خواهیم پرداخت.

قرار دادن کدهای جاوا اسکریپت در تگ< head >صفحه

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

در مثال زیر در صورت کلیک کاربر بر روی دکمه فرمان< input > ، تابع sayHello ( ) اجرا شده و پیام خود را در صفحه نمایش می دهد.

توجه داشته باشید که کدهای موجود در بخش < head > صفحه، تا زمانی که فراخوانی نشوند، اجرا نخواهند شد.

قرار دادن کدهای جاوا اسکریپت در بخش < body > صفحه

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

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

قرار دادن کدهای جاوا اسکریپت در بخش < head > و < body > صفحه

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

همانند مثال زیر. در مثال زیر کد < script > موجود در بخش < head > در صورت کلیک کاربر بر روی دکمه فرمان و کد < script > موجود در بخش < body > به محض لود صفحه اجرا می شوند.

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

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

  1. جدا کردن بخش کدها از تگ های HTML برای خوانایی و کاهش حجم کد صفحه.
  2. استفاده از یکسری کد مشترک جاوا اسکریپت در چندین فایل HTML با اتصال به فایل “.js” به جای نوشتن آن کدها به صورت جداگانه در هر صفحه.

برای این منظور، بایستی ابتدا کدها و توابع مورد نظر را در یک فایل متنی با نام مشخص و پسوند “.js” نوشته و سپس به وسیله یک تگ < script > در بخش < head > صفحه، آن فایل خارجی را به صفحه متصل کنید. همانند کد زیر < html >‎ ‎< head > ‎ < script type="text/javascript" src="filename.js" >< /script >‎ ‎ < /head >‎ ‎< body > ‎ ‎ .......‎ ‎ < /body >‎‎ < /html >‎

برای مثال شما می توانید تابع را در یک فایل خارجی “.js” تعریف کرده و سپس به وسیله یک تگ < script > و تابع sayHello ( )، در هر جای صفحه که می خواهید، آن را فراخوانی و اجرا کنید.

function sayHello() {‎ alert("Hello World")‎ }‎‏ ‏

همچنین می توانید این کد و فایل را برای هر چند فایل HTML دیگر که می خواهید، به کار ببرید.

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

۰ نظر موافقین ۰ مخالفین ۰ ۲۳ دی ۹۸ ، ۱۰:۲۷
افشین رفوا
سلام با آموزش طراحی سایت در خدمت شما هستیم .در قسمت قبل در مورد جاوا اسکرپیت صحبت کردیم , حال ادامه آموزش طراحی سایت در خدمت شما هستیم.
جاوا اسکریپت JavaScript زندگی خود را با نام Live Script آغاز نمود، اما شرکت Netscape نام آن را، احتمالا به دلیل هیجانی که می توانست از سوی زبان Java به خود بگیرد، به JavaScript تغییر داد.
جاوا اسکریپت برای اولین بار در مرورگر Netscape 2.0 با عنوان Live Script به کار گرفته شد. جاوا اسکریپت یک زبان سبک و مفسر، همراه با قابلیت های شی گرایی (Object Oriented) است که به شما این امکان را داده تا به صفحات ایستاتیک و ساده HTML ، حالت واکنش گرا و تعاملی بدهید. به طور کلی می توان جاوا اسکریپت را در موارد زیر خلاصه کرد.
جاوا اسکریپت یک زبان سبک و مفسر می باشد (معنای مفسر این است که برنامه دستورات را به صورت خط به خط خوانده و در پایان هر خط آن را اجرا می کند. بر خلاف کامپایلر که ابتدا کل دستورات را خوانده و اشکال یابی کرده، سپس آنها را یکباره اجرا می کند). این زبان برای ساخت نرم افزارهای میانی شبکه ( واسط ) استفاده می شود. جاوا اسکریپت یک زبان مکمل برای HTML می باشد. این زبان یک پلتفرم باز می باشد. جاوا اسکریپت یک زبان طرف کاربر (Client Side) است .
زبان جاوا اسکریپت یک زبان طرف مشتری (Client Side) می باشد، به این معنی که دستورات آن در کامپیوتر کاربر و در مرورگر وی اجرا می شود. دستورات جاوا اسکریپت را مستقیما می توان درون اسناد HTML وارد کرده و یا آنها را در یک فایل مجزا قرار داد و سپس آن فایل را به صفحه HTML پیوند زد. وجود زبان جاوا اسکریپت باعث می شود تا صفحات HTML از حالت Static و ساده درآمده و بتوانند با کاربر ارتباط برقرار کرده، مرورگر را کنترل نموده و به صورت پویا محتویات HTML تولید و به صفحه اضافه کنند. کدهای سمت کلاینت جاوا اسکریپت، قابلیت انجام بسیاری از کارهایی که توسط کد های سمت سرور انجام می شوند را دارا هستند.
برای مثال، می توانید کد جاوا اسکریپتی نوشته تا مقدار ورودی کاربر در یک کادر متن را کنترل نموده و در صورتی که وی یک آدرس ایمیل با فرمت صحیح را وارد کرده باشد، اجازه ارسال فرم و اطلاعات درون آن را بدهد. کد های جاوا اسکریپت در صورتی که کاربر تمامی مقادیر مورد نیاز را به درستی در فرم وارد نموده باشد، پس از Submit فرم در صفحه، اجرا می شوند. جاوا اسکریپت می تواند اعمال کاربر، مثل فشردن یک دکمه فرمان، کلیک بر روی یک لینک و... را تشخیص داده و دستورات مورد نظر را پس از انجام این رخدادها، اجرا کند.
 
مزایای استفاده از جاوا اسکریپت
 
استفاده از زبان جاوا اسکریپت، مزایای خاصی دارد که از آن جمله می توان به موارد زیر اشاره کرد.
کاهش عملکرد و درگیر نمودن سرور :
با کنترل مقادیر وارد شده توسط کاربر در فیلدهای فرم دریافت اطلاعات، می توانید از ارسال اطلاعات نا صحیح به سرور و پردازش آنها جلوگیری کنید. این کار بار ترافیکی بر روی سرور و همچنین میزان اطلاعات ارسال و دریافت شده را کاهش می دهد.
پاسخ سریع و لحظه ای به کاربر :
به دلیل اجرای سریع کدهای جاوا اسکریپت که در مرورگر کاربر اجرا می شوند، کاربر دیگر مجبور نخواهد بود تا پایان زمان ارسال اطلاعات به سرور و پردازش و سپس لود صفحه جهت دربافت نتیجه خود صبر کند.
بالا رفتن قدرت تعامل با کاربر :
به وسیله جاوا اسکریپت می توانید کدهایی طراحی نموده تا به سرعت به انجام اعمالی مثل کلیک کاربر، عبور موس از روی یک منطقه و یا زدن دکمه های کیبورد، واکنش نشان دهید.
رابط کاربری قوی تر :
به وسیله جاوا اسکریپت می توانید اجزایی مثل منو های بازشو، اسلایدشوها و... را طراحی نموده و به سایت خود، رابط کاربری قوی تری بدهید.

 

محدودیت در کار با جاوا اسکریپت
شما نمی توانید از جاوا اسکریپت، به عنوان یک زبان کامل که تمامی نیازهای برنامه نویسی تان را برآورده می کند، استفاده کنید. این زبان، فاقد امکانات مهم زیر می باشد. زبان کلاینت ساید جاوا اسکریپت، امکان خواندن و نوشتن بر روی فایل ها را به دلیل مسایل امنیتی نمی دهد. جاوا اسکریپت نمی تواند برای ساخت نرم افزارهای جامع و پیشرفته شبکه، به دلیل عدم پشتیبانی مناسب، به کار رود. جاوا اسکریپت فاقد قابلیت اجرای چندین پروسه یا کار به صورت همزمان است.
 
ساختار دستوری جاوا اسکریپت
یک قطعه کد جاوا اسکریپت، شامل دستوراتی است که درون یک تگ باز و بسته ... ، در صفحات وب HTML تعریف می شوند. می توانید کدهای جاوا اسکریپت خود را که در تگ تعریف نموده اید، در هر جای صفحه وب مورد نظرتان قرار دهید، اما بهترین روش این است که آنها را در تگ ابتدای صفحه (تگ <head>) بگنجانی تگ به مرورگر اعلام می کند که کلیه دستورات درون این تگ را به صورت مفسر خوانده و اجرا کند. بنابراین ساده ترین کد جاوا اسکریپت می تواند به صورت زیر در صفحه تعریف شود.
<script...>‎
‎ ‎دستورات‎ ‎جاوا‎ ‎اسکریپت‎ JavaScript code //‎
‎‎
تگ JavaScript دو خاصیت مهم زیر را می تواند داشته باشد.
Language :
این خاصیت تعیین می کند که شما از چه زبان اسکریپتی برای نوشتن کدهای خود استفاده نموده اید که قاعدتا بایستی javascript باشد. به همین دلیل مرورگرهای جدید، از این خاصیت صرف نظر می کنند.
Type :
این خاصیت نیز نوع دستورات تعیین شده در اسکریپت را تعیین می کرده که رایج ترین مقدار برای آن “ text/javascript “ می باشد. به معنای اینکه به زبان جاوا اسکریپت و به صورت متنی هستند. بنابراین تگ JavaScript شما در حالت کاملتر بایستی به صورت زیر باشد.
<script language="javascript" type="text/javascript">‎
‎ JavaScript code
‎‎
نوشتن اولین قطعه کد جاوا اسکریپت
بیایید برای یادگیری و درک بهتر زبان جاوا اسکریپت، اولین قطعه کد خود را برای چاپ عبارت “ Hello World “ در خروجی بنویسیم. به شرح زیر
<html>‎
‎<body> ‎
<script language="javascript" type="text/javascript">‎
‎ ‎ ‎
</body>‎‎
</html>‎
در قطعه کد فوق، ما یک کد دلخواه به نام توضیح (comment) را اضافه کرده ایم که سایر دستورات را درون خود جای داده است. این کار برای جلوگیری از اجرای ناصحیح دستورات جاوا اسکریپت توسط ورژن های قدیمی مرورگرهایی است که از این زبان پشتیبانی نمی کنند. در مرحله بعد، تابع document.wite ( ) را فراخوانی کرده که می تواند متن یا کد HTML درون پرانتز مقابلش را بر روی صفحه چاپ می کند. بنابراین خروجی کد فوق به صورت زیر است.
Hello World!
وجود فاصله ( جای خالی ) بین کاراکترها و رفتن به خط بعدی را در دستورات جاوا اسکریپت
جاوا اسکریپت به طور کلی، فواصل خالی بین کاراکترها، Tab ها و رفتن به خط بعدی را در دستورات نادیده گرفته و تاثیری بر روی خروجی کد ندارند. به همین دلیل می توانید با مرتب کردن و دادن فواصل لازم به خطوط کدهای خود، آنها را بسیار خوانا و قابل فهم نمایید.
به کار بردن کاراکتر ; اختیاری است
معمولا هر خط کد یا دستور در جاوا اسکریپت، همانند آنچه در C++ یا Java دیده اید، با یک کاراکتر ; به پایان می رسد. اما در جاوا اسکریپت، چنانچه هر کد دستوری شما در یک خط جدا Line باشد، می توانید از به کار بردن کاراکتر; خودداری کنید. برای مثال در قطعه کد زیر، می توانید از به کار بردن ; در پایان هر دستور اجتناب نمایید.
<script language="javascript" type="text/javascript">‎
‎‎
اما در قطعه کد زیر، هر دستور در هنگام پایان حتما بایستی با یک کاراکتر ; بسته شود.
<script language="javascript" type="text/javascript">‎
‎‎
نکته:
بهتر است عادت کرده از ; در کدهای خود استفاده نمایید.
 
جاوا اسکریپت یک زبان حساس به بزرگ یا کوچک بودن حروف می باشد. این بدان معناست که که کلمات کلیدی زبان، نام متغیرها یا توابع و هر واژه دیگری بایستی با رعایت بزرگ یا کوچک بودن حروف نوشته شوند. بنابراین کلمات Time، TIME و یا TiMe در این زبان با هم متفاوت می باشند.
 
قرار دادن توضیحات کدنویسی (comment) در جاوا اسکریپت
از توضیحات یا کامنت ها، برای تشریح کدهای خود و یا غیر فعال کرد موقت آنها استفاده می کنیم. این دستورها و متون توسط موتور جاوا اسکریپت اجرا نشده و خروجی بر روی صفحه ندارند. زبان جاوا اسکریپت از روشی همانند زبان C++ برای قرار دادن توضیحات در کدهای خود استفاده کرده و قانون های کلی زیر را داراست. هر متنی که بین یک // و پایان یک خط دستور قرار بگیرد، یک توضیح حساب می شود. هر متنی که بین یک /* و */ قرار بگیرد، توضیح حساب شده و می تواند حتی شامل چندین خط دستور باشد. جاوا اسکریپت، از کاراکتر ویژه زبان HTML جهت توضیحات پشتیبانی می کند.
 
فعال سازی جاوا اسکریپت در مرورگرها
تمامی مرورگرهای مطرح و به روز دنیا، دارای موتور پردازشگر جاوا اسکریپت به صورت پیش فرض بوده و این قابلیت در آنها فعال است. اما گاهی اوقات لازم می شود تا قابلیت جاوا اسکریپت را در مرورگرتان فعال و یا غیر فعال نمایید. در این درس قصد داریم تا نحوه فعال سازی و یا غیر فعال نمودن قابلیت جاوا اسکریپت در مرورگرهایIE ، FireFox وOpera را به شما آموزش دهیم.
 
جاوا اسکریپت و اینترنت اکسپلورر
مراحل زیر، نحوه روشن یا خاموش کردن قابلیت جاوا اسکریپت را در مرورگر IE نشان می دهد.
  1. از منوی اصلی مرورگر، گزینه Tools > Internet Option را کلیک نمایید.
  2. از کادر باز شده، لبه Security را انتخاب کنید.
  3. دکمه Custom Level را کلیک نمایید.
  4. منوی فوق را تا رسیدن به گزینه “ Security Option “ به سمت پایین اسکرول کنید.
  5. دکمه رادیویی Enable را در زیر بخش Active Scripting ، برای فعال شدن قابلیت جاوا اسکریپت کلیک نمایید.
  6. در نهایت دکمه Ok را زده و از پنجره خارج شوید.
نکته:
برای غیر فعال نمودن قابلیت جاوا اسکریپت، بایستی دکمه رادیویی Disable را در همان بخش Active Scripting انتخاب کنید.
جاوا اسکریپت در مرورگر Firefox :
مراحل زیر نحوه روشن یا خاموش نمودن فابلیت جاوا اسکریپت در مرورگرFirefox را نشان می دهد.
  1. از منوی برنامه، مراحل زیر را دنبال کنید : Tools > Options
  2. گزینه Content را از پنجره باز شده انتخاب کنید.
  3. گزینه Enable JavaScript را انتخاب کنید.
  4. در نهایت دکمه ok را زده و پنجره را ببندید.
برای غیر فعال نمودن قابلیت جاوا اسکریپت در مرورگر Firefox ، بایستی تیک گزینه Enable JavaScript را بردارید.
Opera جاوا اسکریپت در مرورگر
مراحل زیر، نحوه روشن یا خاموش کردن قابلیت جاوا اسکریپت در مرورگر Opera را نشان می دهد.
  1. از منوی اصلی مرورگر، مسیر زیر را طی کنید : Tools > Prefrences
  2. گزینه Advanced را از پنجره باز شده انتخاب کنید.
  3. از لیست آیتم های موجود، گزینه Content را انتخاب نموده و کادر انتخابی Enable JavaScript را علامت بزنید.
  4. در نهایت دکمه Ok را زده و پنجره را ببندید.
برای غیر فعال نمودن قابلیت جاوا اسکریپت در مرورگر اپرا، کافی است تیک گزینه Enable JavaScript را در منوی اشاره شده بردارید.
نحوه هشدار دادن به مرورگرهایی که از جاوا اسکریپت پشتیبانی نمی کنند
گاهی اوقات ممکن است به دلیل قدیمی بودن مرورگر مورد استفاده کاربر و یا غیر فعال بودن قابلیت جاوا اسکریپت، مرورگر کدهای جاوا اسکریپت را به درستی اجرا نکرده و باعث تولید خروجی نا مطلوب در صفحه شود. برای این منظور، می توان با استفاده از تگ <noscript> <span =""> یک اقدام احتیاطی انجام داد تا در صورت عدم اجرای دستورات <span=""><>، دستور آن تگ اجرا نشود. این تگ بایستی بلافاصله پس از تگ <span=""><> در صفحه تعیین شده و حاوی پیامی به کاربر با مفهوم عدم اجرای اسکریپت ها باشد. مثال زیر نحوه استفاده از این تگ را نشان می دهد.
< html >
< body >
‎ < script language="javascript" type="text/javascript" >
‎ < /script ‎>
< noscript >
متاسفانه دستورات جاوا اسکریپت، در این مرورگر اجرا نمی شوند.
< /noscript >‎‎
< /body >
< /html >‎
 
آموزش محل قرارگیری دستورات جاوااسکریپت-javascript
محل قرارگیری دستورات جاوا اسکریپت
دستورات JavaScript را می توان در بخش های < body > و همچنین < head > یک سند HTML جای گذاری کرد.
تگ< script >
در HTML، کدهای جاوا اسکریپت را باید بین تگ های < script > و < /script > درج کرد (وارد کرد).
مثال:
< script >
document.getElementById("demo") = "My First JavaScript";
< /script >
نکته:
در مثال های پیشین خصیصه ی typeبرای تگ< script >بکار برده شده مانند این نمونه
< script type="text/javascript" >
در 5 ،HTMLکلیه ی مرورگر های موجود زبان پیش فرض اسکریپت نویسی JavaScript می باشد و از این رو نیازی به خصیصه ی (attribute) type نیست.
توابع و رخدادهای JavaScript
یک تابع / function در جاوا اسکریپت در واقع یک ساختمان یا مجموعه (block) ای از کدها است، که درست زمانی که لازم است اجرا می شوند. برای مثال، یک تابع ممکن است زمانی اجرا شود که رخدادی / event معین روی دهد درست مثل زمانی که کاربر موس را کلیک می کند.
قرار دادن کدهای جاوا اسکریپت در بخش< head >یا< body >
می توان هر تعداد اسکریپت که لازم است در سند HTML قرار داد. اسکریپت ها را می توان در بدنه ی HTML یا قسمت < body >قرار داد و یا آن ها را در بخش< head >صفحه HTML گنجاند.
نکته:
توصیه می کنیم تمامی کدهای خود را در یک مکان واحد نگه دارید.
قراردهی کد جاوا اسکریپ در بخش< head >
در این مثال، یک تابع جاوا اسکریپت در بخش (بین تگ باز و بسته ی)< head > صفحه ی HTML قرار داده می شود. زمانی که روی دکمه کلیک می کنید تابع فراخوانده (invoke) می شود.
مثال:
< !DOCTYPE html >
< html >
< head >
< script >
function myFunction() {
document.getElementById("demo") = "Paragraph changed.";
}
< /script >
< /head >
< body >
< h1 >My Web Page< /h1 >
< p id="demo" >A Paragraph< /p >
< button type="button" ="myFunction()" >Try it< /button >
< /body >
< /html >
جای گذاری کدهای جاوا اسکریپت در بدنه ی HTML / قسمت < body >
در این مثال، یک تابع جاوا اسکریپت بین تگ های باز و بسته ی < body > صفحه ی HTML قرار داده می شود. تابع مربوطه با کلیک روی تنها یک دکمه فراخوانده می شود.
مثال:
< !DOCTYPE html >
< html >
< body >
< h1 >My Web Page< /h1 >
< p id="demo" >A Paragraph< /p >
< button type="button" ="myFunction()" >Try it< /button >
< script >
function myFunction() {
document.getElementById("demo") = "Paragraph changed.";
}
< /script >
< /body >
< /html >
نکته:
توصیه می شود اسکریپت ها (Script) را در پایین (انتهای) المان < body > قرار دهید. این کار در حقیقت به بارگذاری هر چه بهتر صفحه کمک می کند، زیرا که نمایش HTML با بارگذاری اسکریپت ها مسدود نمی گردد.
قراردادن اسکریپت ها در فایل های خارجی
همچنین می توان اسکریپت ها را در فایل های خارجی جای گذاری کرد. اسکریپت های خارجی (external scripts) زمانی بیشترین کارایی را دارند که یک کد یکسان در بسیاری از صفحات وب بکار گرفته شده است. فایل های جاوا اسکریپت همگی دارای پسوند .jsهستند. جهت استفاده از یک اسکریپت که در فایل خارجی قرار داده شده باشد، کافی است اسم فایل اسکریپت را داخل خصیصه ی src (source) در تگ< script > قرار دهید.
مثال:
< !DOCTYPE html >
< html >
< body >
< script src="myScript.js" >< /script >
< /body >
< /html >
می توانید ارجاع (reference) به اسکریپت خارجی را مطابق میل خود در تگ های < head >یا < body > قرار دهید. اسکریپت مربوطه درست همانگونه عمل خواهد کرد که گویی دقیقاً همان جایی که تگ< script > قرار گرفته، جای گذاری شده.
توجه:
اسکریپت های خارجی نمی توانند دربردارنده ی تگ های < script > باشند.
مزایای استفاده از خاصیت قراردهی کدهای جاوا اسکریپت در فایل های خارجی
.جای گذاری دستورات جاوا اسکریپت در فایل های خارجی مزایایی دارد که به ترتیب زیر می باشد کد و HTML را از هم جدا می سازد مدیریت و خواندن کدهای HTML و JavaScript را به مراتب آسان تر می سازد. فایل های جاوا اسکریپت که در حافظه ی پنهان ذخیره شده باشند.(به طور موقت ذخیره شده باشند) می توانند در افزایش سرعت بارگذاری صفحه کمک شایانی بکنند.
این آموزش ادامه دارد
۰ نظر موافقین ۰ مخالفین ۰ ۱۳ دی ۹۸ ، ۱۱:۳۰
افشین رفوا

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل CSS در HTML‏ را یاد گرفتیم , در حال با ادامه آموزش طراحی سایت همراه باشید:

یک اسکریپت قطعه ی کوچکی از برنامه است که می تواند به وب سایت شما تعامل اضافه کند. به عنوان مثال یک اسکریپت می تواند یک هشدار پاپ آپ مربوط به باکس پیغام تولید کند، یا یک منوی رو به پایین ایجاد کند. این اسکریپت توسط javascript یا VBScript نوشته می شود.
شما می توانید با استفاده از هر زبان اسکریپتی، کارکردهای متنوع کوچکی به نام گردانندگان رویداد بنویسید و سپس می توانید آن عملکردها را با استفاده از ویژگی های HTML اجرا کنید.
این روزها فقط javascript و چارچوب های متناظر با آن توسط بسیاری از توسعه دهندگان وب استفاده می شوند. VBScript حتی توسط برخی مرورگرها پشتیبانی هم نمی شود.
شما می توانید کد javascript را در یک فایل مجزا نگهداری کرده و سپس هرزمان که لازم بود آن را وارد کنید، یا می توانید قابلیت را در داخل خود داکیومنت HTML تعریف کنید. اجازه بدهید هر دو مورد را یکی یکی با مثال های مناسب بررسی کنیم.


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

مثال:

تصور کنید که با استفاده از جاوااسکریپت در script.js یک عملکرد کوچک را تعریف می کنیم که دارای کد زیر می باشد.

function Hello()

{

alert("Hello, World");

}


اکنون اجازه بدهید از فایل جاوااسکریپت خارجی بالا در داکیومنت HTML خود استفاده کنیم، مانند زیر



این مثال نتیجه ای را به دنبال خواهد داشت که می توانید با کلیک کردن برروی دکمه ی ارائه شده توسط این مثال آن را امتحان کنید.

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

نمونه یک







Javascript Internal Script





function Hello() {


alert("Hello, World");


}




این مثال نتیجه ای را به دنبال خواهد داشت که می توانید با کلیک کردن برروی دکمه ی ارائه شده توسط این مثال آن را امتحان کنید.

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

نمونه دو







Event Handlers Example



۱ نظر موافقین ۰ مخالفین ۰ ۲۹ آذر ۹۸ ، ۱۳:۵۹
افشین رفوا