آموزش جاوا اسکریپت – شروع کدنویسی

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

در اینجا یاد می گیرید که به راحتی تعامل (interactivity) را به صفحه وب با جاوا اسکریپت اضافه کنید. اما, قبل از شروع, اطمیمنان حاصل کنید که کمی HTML و CSS بلد هستید

اگر به تازگی طراحی و توسعه وب را شروع کردید, پس از اینجا شروع کنید

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

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

معمولا سه راه برای افزودن JavaScript به یک صفحه وب وجود دارد:

جاسازی (embed) کد جاوا اسکریپت بین یک جفت تگ <script> </script>
ساخت یک فایل جاوا اسکریپت خارجی با پسوند .js و سپس لود کردن آن با ویژگی src از تگ <script>
قرار دادن کد جاوا اسکریپت بصورت مستقیم داخل خصوصیت تگ HTML خاص مثل onclick, onmouseover, onkeypress, onload و غیره.

بخش زیر هر یک از روش های بالا را با جزییات توضیح می دهد:

جاسازی (embed) کد جاوا اسکریپت

شما می توانید کد جاوا اسکریپت را در صفحه وب بین دو تگ <script> و </script> قرار بدید.

تگ <script> به مرورگر نشان می دهد که دستورات بین آن به عنوان یک اسکریپت باید اجرا شوند.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embedding JavaScript</title>
</head>
<body>
    <script>
    var greet = "Hello World!";
    document.write(greet); // Prints: Hello World!
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Embedding JavaScript</title>

</head>

<body>

var greet = "Hello World!";

document.write(greet); // Prints: Hello World!

</script>

</body>

</html>

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

نکته: ویژگی type در تگ <script> (مثلا <script type="text/javascript">) از HTML5 دیگر نیاز نیست. جاوا اسکریپت زبان اسکریپت نویسی پیش فرض برای HTML5 است.

فایل جاوا اسکریپت خارجی

شما می توانید کد جاوا اسکریپت خودتان را در یک فایل جداگانه با پسوند .js ذخیره و آن را با ویژگی src تگ <script> به صفحه وب اضافه کنید.

<script src="js/hello.js"></script>

1	<script src="js/hello.js"></script>

این مورد زمانی که که می خواهید یک اسکریپت یکسان را در صفحات مختلف استفاده کنید, مفید خواهد بود.

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

پس به این صورت ما یک فایل جاوا اسکریپت با نام “hello.js” را ساخته و کد زیر را داخل آن قرار می دهیم:

// A function to display a message
function sayHello() {
    alert("Hello World!");
}

// Call function on click of the button
document.getElementById("myBtn").onclick = sayHello;

// A function to display a message

function sayHello() {

alert("Hello World!");

}

// Call function on click of the button

document.getElementById("myBtn").onclick = sayHello;

حالا فایل جاوا اسکریپت خارجی را دخل صفحه وب به اینصورت با تگ <script> اضافه می کنیم:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Including External JavaScript File</title>        
</head>
<body>    
    <button type="button" id="myBtn">Click Me</button>
    <script src="js/hello.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Including External JavaScript File</title>

</head>

<body>

<button type="button" id="myBtn">Click Me</button>

</body>

</html>

نکته: معمولا زمانی که یک فایل جاوا اسکریپت برای اولین بار دانلود می شود, مرورگر آن را در کش (cache) خود ذخیره می کند (مثل تصاویر و فایل های CSS), بنابراین نیاز به دانلود چندین باره آن از وب سرور نخواهد بود و سرعت لود صفحه بسیار افزایش می یابد.

قرار دادن کد جاوا اسکریپت خطی

شما می توانید کد جاوا اسکریپت را با قرار دادن مستقیم آن در تگ HTML با ویژگی خاص تگ مثل onclick, onmouseover, onkeypress, onload و غیره اجرا کنید.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inlining JavaScript</title>        
</head>
<body>    
    <button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Inlining JavaScript</title>

</head>

<body>

<button onclick="alert('Hello World!')">Click Me</button>

</body>

</html>

مثال بالا به شما یک پیام را با کلیک روی دکمه نمایش می دهد.

نکته: شما باید همیشه محتوا و ساختار صفحه وب را (HTML) با ارائه (CSS) و رفتار (JavaScript) جدا نگه دارید.

موقعیت دهی اسکریپت داخل سند HTML

المان <script> می تواند داخل <head> یا <body> یک سند HTML قرار بگیرید. اما بصورت ایده آل, شما باید اسکریپت ها را در پایان بخش بدنه صفحه درست قبل از بسته شدن تگ </body> قرار بدید.

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

هر قرایند رندر بلاک تگ <script> تا زمانی که کامل دانلود و کد جاوا اسکریپت اجرا شود, ادامه می یابد, بنابراین قرار دادن آن در بخش head (المان <head>) سند بدون هیچ دلیلی باعث ایجاد تاثیر قابل ملاحظه ای در عملکرد سایت می شود.

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

تفاوت بین اسکریپت نویسی سمت کلاینت و سرور

اسکریپت نویسی سمت کلاینت مثل جاوا اسکریپت, ‌VBScript و غیره تفسیر شده و در مرورگر وب اجرا می شوند,

در حالی که اسکریپت نویسی سمت سرور مثل PHP, ASP, Java, Python, Ruby و غیره در وب سرور اجرا و خروجی آنها در فرمت HTML به مروگر بازگشت داده می شود.

اسکریپت نویسی سمت کلاینت مزیت های زیادی نسبت به اسکریپت نویسی سمت سرور دارد.

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

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

بنابراین, پاسخ از سمت اسکریپت سمت سرور آهسته تر از اسکریپت سمت کلاینت است, چراکه اسکریپت های سمت سرور بر روی کامپیوتر از راه دور پردازش می شوند نه روی کامپیوتر محلی کاربر.

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

در بخش بعدی با شکل نوشتاری (سینتکس) جاوا اسکریپت آشنا می شوید.

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

موفق باشید.

آموزش جاوا اسکریپت – شروع کدنویسی

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

جاسازی (embed) کد جاوا اسکریپت

فایل جاوا اسکریپت خارجی

قرار دادن کد جاوا اسکریپت خطی

موقعیت دهی اسکریپت داخل سند HTML

تفاوت بین اسکریپت نویسی سمت کلاینت و سرور

آموزش HTML – تگ script در html

لغو پاسخ

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

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه