درس دوم- مقدمات کار با برچسب اسکریپت و ویژگی‌هایش
در درس پیشین نگاهی گذرا به زبان‌های برنامه نویسی داشتیم و در آخر اندکی در مورد زبان برنامه نویسی جاوا اسکریپت سخن گفتیم. در این درس کمی با مقدمات برنامه نویسی با این زبان آشنا می‌شویم و با نمونه‌های کوچکی، چگونگی کار با این زبان را نشان خواهیم داد.
برچسب Script
برای نوشتن برنامه‌ای تحت وب و با زبان جاوا اسکریپت ابتدا باید کدهای جاوا اسکریپت را به مرورگر معرفی کرد. معرفی کدهای جاوا اسکریپت به مرورگر با نوشتن یک برچسب (تگ) انجام می‌شود. برچسب script که بصورت یک برچسب شروع کننده کدها و یک برچسب پایان دهنده کدها نوشته می‌شود، وظیفه شناساندن کدهای جاوا اسکریپت را برعهده دارد. این برچسب‌ها به مرورگر می‌فهمانند که در کجا فعالیت این زبان آغاز شده -تا مفسر جاوا اسکریپت مرورگر فعال شود- و در کجا پایان می‌پذیرد که برنامه مفسر هم کار خود را خاتمه دهد.
نکته: همانطور که در درس پیشین گفته شد کدهای جاوا اسکریپت باید در بین برچسب‌های اچ تی ام ال قرار گیرند.
گفتیم که برای اجرا شدن کدهای جاوا اسکریپت باید آنها را در میان برچسب‌های اچ تی ام ال قرار دهیم. پرسشی که ممکن است پیش بیاید این است که باید آنها را در کجای برچسب‌های اچ تی ام ال بگذاریم، آیا جای ویژه‌ای دارند یا در هر کجا می‌توانیم اینکار را انجام دهیم؟ پاسخ این پرسش اینست که کدهای جاوا اسکریپت میتوانند در هر کجای فایل اچ تی ام ال باشند اما باید ابتدا تشخیص دهیم که نسبت به نیاز ما (برنامه‌ای که می‌نویسیم) بکار بردن هر قسمت از اسکریپت در کجای برگه مناسب‌تر می‌باشد. بطور کل محل قرار دادن کدهای جاوا اسکریپت به سه دسته تقسیم می‌شوند، یک دسته از آنها در قسمت «سر» یعنیhead جای می‌گیرند و یک دسته در قسمت «بدنه» اچ تی ام ال و دسته سوم هم در یک فایل جداگانه و خارج از کدهای HTML با پسوند js قرار می‌گیرند که در ادامه به توضیح هر دسته خواهیم پرداخت.
قرار دادن کدهای جاوا اسکریپت در بدنه اچ تی ام ال
در این دسته ما کدها را بطور مستقیم در بدنه فایل اچ تی ام ال و بین برچسب‌های باز و بسته <body> قرار می‌دهیم.
برای نمونه به کدهای زیر توجه بفرمایید:
<script>
alert("درود جهان");
</script>
برای دیدن خروجی کدهای بالا ابتدا باید یک فایل ساخته و کدها را در آن قرار دهیم. فایلی با نام Lesson2.txtکه یک فایل نوشتن است بسازید و کدهای زیر را در آن قرار دهید:
<html><head>
<title> آموزش جاوا اسکریپت - درسنامه </title>
</head>
<body>
<script>
alert("درود جهان");
</script> </body> </html>
نکته: همانطور که می‌بینید کدهای باز و بسته اسکریپت (Script) را در داخل برچسب‌های اچ تی ام ال قرار داده‌ایم.
بعد از نوشتن کدهای بالا فایل خود را در پوشه‌ای که برایتان براحتی قابل دسترسی باشد با نام درس دوم(Lesson2.txt) یا هر نامی که دوست دارید ثبت کنید. فراموش نکنید که هنگام ثبت فایل، نوع یاEncoding آن را از ANSI به UTF-8 تغییر دهید وگرنه نوشته‌های فارسی بصورت کاراکترهای عجیب نمایش داده می‌شود.
نکته: بعد از نوشتن کدها وقتی می‌خواهید فایل را ثبت کنید هشداری به مفهوم «اعلام وجود نوشته‌هایی که ممکن است بصورت کاراکترهای عجیب نمایان شوند»، دریافت می‌کنید. متن این هشدار به زبان انگلیسی و بصورت «This file contains characters in unicode...» می‌باشد. در اینجا شما باید انتخابCancel را بزنید تا پنچره Save as باز شود. در این پنچره شما میتوانید نوع فایل(Encoding) را از ANSIبه UTF-8 تغییر دهید.
حال که فایل را ساخته و کدها را در آن قرار داده‌اید، زمان اجرای آن فرا رسیده است. اما این کدها در میان برچسب‌های اچ تی ام ال است، این یعنی شما باید پسوند فایل را از txt. به html. تغییر دهید تا مرورگر شما این فایل را شناسایی و اجرا کند.
بعد اجرای فایل شما با تصویری مانند عکس زیر مواجه می‌شوید:
بدین صورت شما نخستین کد جاوا اسکریپت را در برگه اچ تی‌ام ال نوشتید. همانطور که دیدید ما کدها را در بین دو برچسب <body> و </body> قرار دادیم.
قرار دادن کدها در بخش برچسب سرایند (Head)
در قسمت قبلی نمونه‌ای که اجرا کردیم کدها را بطور مستقیم در بدنه گذاشتیم اما در این قسمت می‌خواهیم کدها را در بخش «برچسب سرایند» (<head>) برگه اچ تی ام ال بگذاریم. کدهای جاوا اسکریپت به محض باز شدن یک صفحه در مرورگر اجرا می‌شوند، اما گاهی ما نیاز داریم تا یک اسکریپت زود‌تر از کدهای دیگر اجرا شده و یا آماده باشد تا در صورت لازم فراخوانی شود. در این زمان، ما کدها را باید در قسمت سرایند و مابین تگ head بنویسیم و در قسمت بدنه آن را فراخوانی کنیم. به نمونه زیر توجه کنید:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="نخستین تابع در جاوا اسکریپت";
}
</script>
</head>
<body>
<h1>درود دنیا</h1>
<p id="demo"> محل استفاده از تابع </p>
<button type="button" onclick="myFunction()"> انتخاب کنید </button>
</body>
</html>
نکته: هدف از این نمونه تنها نشان دادن چگونگی قرار گرفتن کد در قسمت برچسب بالا هست. در ادامه دوره با چگونگی نوشتن تابع آشنا می‌شویم. اکنون فقط به محل قرار گرفتن کدها توجه کنید.
همانطور که می‌بینید تابع ما در قسمت بالا تعریف شده و در قسمت بدنه فراخوان گشته است. حال با دوبار کلیک کردن فایل را اجرا کنید. بعد از اجرا با تصویری مانند زیر روبرو می‌شوید:
با فشردن دکمه «انتخاب کنید» تابع فراخوان می‌شود و متن دیگری نمایش داده می‌شود.
نوشتن کدها در یک فایل خارجی
دسته سوم از کد نویسی جاوا اسکریپت قرار دادن کدها در یک فایل خارجی و وارد کردن آن در فایل‌های دیگر است. ما می‌توانیم جهت ساده سازی کدنویسی و یا برای جلوگیری از تکرار یک اسکریپت در صفحات وب، برچسب‌های اچ تی ام ال را در یک صفحه و کدهای جاوا اسکریپت را در یک فایل جداگانه داخل برگه دیگری بنویسیم و با پسوند js آنها را ذخیره کنیم سپس در هر قسمت برگه اچ تی ام ال که لازم بود، و یا در قسمت سرایند آن را وارد کنیم.
کدهای زیر را در یک فایل نوشته و آنرا به اسم javascript.js ذخیره کنید:
document.write (" گرفتن داده از فایل خارجی ")
حال برگه‌ای دیگر با نام Lesson2-3.html ساخته و کدهای زیر را در آن قرار دهید:
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript" src="javascript.js">
</script>
</head>
<body>
</body>
</html>
همانطور که می‌بینید با اجرا کردن فایل اچ تی ام ال، نوشته‌ای که شما در کد جاوا اسکریپت- در فایل خارجی- قرار داده‌اید، نمایان می‌شود. یعنی وقتی شما فایل Lesson2-3.html اجرا می‌کنید (روی آن دو بار کلیک می‌کنید)، برگه کد جاوا اسکریپت که نشانی‌اش را داده‌ایم فراخوان می‌شود و کد داخل آن نوشته را نمایش می‌دهد.
خصوصیت یا ویژگی‌های برچسب Script
برچسب اسکریپت که برچسب اصلی مشخص کننده کدهای جاوا اسکریپت است دارای یک سری ویژگی‌هایی می‌باشد که توسط آنها بهتر به مرورگر شناسانده می‌شود.
ویژگی زبان یا Language
این برچسب نقش مشخص کردن زبان کدها را بازی می‌کند. برای برچسب زبان باید مقدار javascript به صورت زیر نوشته شود:
<script language="javascript">
........
</script>
ویژگی نوع یا Type
این برچسب نوع کدها را به مرورگر می‌شناساند و شیوه نوشتن آن بصورت زیر است:
<script type="text/javascript">
</script>
ویژگی منبع یا src (Source)
از این برچسب در زمان‌هایی که می‌خواهیم از کدهای جاوا اسکریپت که در فایل خارجی قرار دارد استفاده کنیم، بهره می‌بریم. همانطور که در بخش «نوشتن کدها در یک فایل خارجی» دیدید ما از این ویژگی استفاده کردیم.
بدین ترتیب نسخه کامل برچسب اسکریپت باید بصورت زیر باشد:
<script language="javascript" type="text/javascript" src="نام و نشانی فایل خارجی">
</script>
در این صورت ما زبان، نوع کدها نام و نشانی منبع فایل خارجی را به مرورگر معرفی کرده‌ایم.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.