نصب جاوا اسکریپ ,همان طور که می دانید جاوا اسکریپت یکی از محبوب ترین و پر استفاده ترین زبان های برنامه نویسی است که در سال ۱۹۹۵ با هدف داینامیک سازی (پویا سازی) صفحات وب ارائه شد اما با توجه به پیشرفت هایی که داشته، امروزه علاوه بر سمت کلاینت در حوزه هایی مثل برنامه نویسی سمت سرور، دسکتاپ، موبایل، هوش مصنوعی و … مورد استفاده قرار می گیرد و بازار کار فوق العاده ای دارد.
خیلی از دوستانی که به تازگی وارد حوزه برنامه نویسی فرانت اند (سمت کلاینت) شدند، ممکن است با نحوه نصب جاوا اسکریپت در ویندوز مشکل داشته باشند.
در این مقاله قصد داریم در مورد نحوه نصب و استفاده از جاوا اسکریپت در پروژه های وب و همچنین نحوه فعال کردن جاوا اسکریپت در کروم و مرورگرهای مختلف صحبت کنیم.
کلمه Internal به معنی “داخلی” است. به این معنی که ما برای استفاده از کدهای جاوا اسکریپت، کد ها را داخل خود صفحه Html می نویسیم.
همان طور که قبلا Css را در صفحه Html داخل تگ های Style می نوشتیم، برای نوشتن کد های جاوا اسکریپت به صورت internal نیز از تگ script استفاده می شود.
به عنوان مثال قصد داریم جمله “به سایت سبزلرن خوش آمدید” را به کمک جاوا اسکریپت به کاربر های وب سایت نمایش دهیم.
اگر بخواهیم به شکل Internal از جاوا اسکریپت استفاده کنیم، به شکل زیر خواهد بود (برای نمایش پیغام در جاوا اسکریپت از متد alert استفاده می شود که در کد زیر خواهید داد):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SabzLearn</title>
</head>
<body>
alert('به وب سایت سبزلرن خود آمدید')
</body>
</html>
همان طور که مشاهده می کنید، انتهای تگ body یک تگ script را باز کرده و داخل آن کد های جاوا اسکریپتی مورد نظرمان را می نویسیم.
اگر همین کدها را در یک فایل Html ذخیره کرده و آن را اجرا کنیم، بدون هیچ خطایی خواهیم دید که متن مورد نظر را به ما نمایش می دهد.
اما شاید برایتان سوال باشد که قبلا فایل های Css را داخل تگ head لینک می کردیم، چرا کد جاوا اسکریپت را انتهای body نوشتیم!
عجله نکنید. در انتهای مقاله به این موضوع هم خواهیم پرداخت و علت این موضوع رو به صورت مفصل برای شما خواهم گفت.
در این بخش از آموزش نصب جاوا اسکریپت به بررسی روش نصب اکسترنال جاوا اسکریپت می پردازیم.کلمه External به معنی “خارجی” است. به این معنی که ما برای استفاده از کد های جاوا اسکریپت، آن ها را داخل صفحه Html نمی نویسیم. بلکه آن ها را خارج از فایل Html داخل یک فایل جاوا اسکریپتی نوشته و سپس فایل را به صفحه Html خود لینک می کنیم.
دقیقا مثل زمانی که کد های Css خود را داخل فایلی مثل style.css می نوشتیم و آن را به کمک تگ link به صفحه html خود لینک می کردیم، برای لینک کردن جاوا اسکریپت هم از تگ script استفاده می کنیم.
اما نکته قابل توجه اینجاست که فایل های جاوا اسکریپتی را با فرمت js ذخیره می کنیم.
پس یک فایل به اسم script.js ایجاد کرده و سپس همان کد alert را داخل آن می نویسیم:
1
alert('به وب سایت سبزلرن خود آمدید')
تا این قسمت یک فایل جاوا اسکریپت ایجاد کرده و داخل آن یک خط کد نوشتیم. حال نوبت آن است که این فایل را به فایل Html خود لینک کنیم.
برای لینک کردن یک فایل External جاوا اسکریپت از روش زیر استفاده می شود:
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SabzLearn</title>
</head>
<body>
<script src="script.js">
</body>
</html>
همان طور که در کد بالا مشاهده می کنید، برای لینک کردن یک فایل جاوا اسکریپتی به Html از تگ script استفاده می شود.
نکته بعدی این است که هنگام لینک کردن فایل های Css به کمک تگ link، برای آدرس دهی آن ها از اتربیوت (صفت) href استفاده می کردیم، اما در تگ script خبری از href نیست و برای آدرس دهی فایل های جاوا اسکریپت از اتربیوت src استفاده می کنیم.
همان طور که می توانید چندین فایل Css را به پروژه خود لینک کنید، برای لینک کردن فایل های جاوا اسکریپتی نیز محدودیتی وجود ندارد و می توانید چندین فایل جاوا اسکریپت را به صفحه خود لینک کنید.
برای لینک کردن هر فایل جاوا اسکریپت، باید یک تگ script داشته باشیم و نمی توانیم همه آن ها را با یک تگ script لینک کنیم.
به کد زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SabzLearn</title>
</head>
<body>
<script src="script.js">
<script src="about.js">
<script src="contact.js">
</body>
</html>
همان طور که مشاهده می کنید، 3 فایل script، about و contact را به صفحه Html خود لینک کردیم.
نکته بعدی برای لینک کردن فایل های External جاوا اسکریپت در مورد آدرس دهی آن ها است. همه قوانین و نکاتی که برای لینک کردن فایل های Css وجود دارند، برای لینک کردن فایل های جاوا اسکریپت نیز وجود دارند.
به عنوان مثال اگر فایل جاوا اسکریپتی ما داخل یک پوشه ای به اسم codes قرار بگیرند، هنگاام لینک کردن از آدرس زیر استفاده می کنیم:
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SabzLearn</title>
</head>
<body>
<script src="codes/script.js">
</body>
</html>
همان طور که مشاهده می کنید، برای لینک کردن فایل Script.js ابتدا داخل فولدر codes شدیم و سپس اسم فایل را فراخوانی کردیم.
همان طور که می دانید اگر فایل ما خارج از پوشه فعلی باشد، برای خارج شدن از پوشه فعلی از .. استفاده می کنیم.
فرض کنید فایل جاوا اسکریپتی ما یک پوشه خارج از پوشه فعلی قرار دارد. برای لینک کردن آن به شکل زیر عمل می کنیم:
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SabzLearn</title>
</head>
<body>
<script src="../script.js">
</body>
</html>
به همین راحتی.
ضمنا، اگر هنگام لینک کردن فایل ها در مورد آدرس دهی آن ها مشکلی دارید، حتما ویدئوی آموزش نصب جاوا اسکریپت این مقاله را مشاهده کنید تا تمام سوالات و ابهامات شما در این زمینه برطرف شوند.
کلمه Inline به معنی “داخل خط” است. یعنی ما کد های جاوا اسکریپت مورد نیاز را داخل هر خط از کد های Html می نویسیم.
به عنوان مثال فرض کنید قصد داریم برای یک تگ h1 رویداد تعریف کنیم که اگر کاربر روی h1 مورد نظر ما کلیک کرد، یک پیغام به کاربر نمایش داده شود.
اگر بخواهیم همچین عملکردی را به روش inline پیاده سازی کنیم، به شکل زیر عمل می کنیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SabzLearn</title>
</head>
<body>
<h1 ="alert('به سبزلرن خوش آمدید')">SabzLearn</h1>
</body>
</html>
همان طور که مشاهده می کنید، بدون استفاده از روش های Internal و External برای المنت h1 رویداد click تعریف کردیم و اگر روی این تگ کلیک شود، متن “به سبزلرن خوش آمدید” برای کاربر نمایش داده می شود.
اما موضوع مهم این است که برای هر کار دلخواهی نمی توان از روش Inline استفاده کرد و روش Inline یکی از روش های استفاده از جاوا اسکریپت است که فقط برای تعریف رویداد های مختلف استفاده می شود.
