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

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

مرورگرهای وب قادر به درک زبان‌های HTML و CSS هستند و از ترکیب آن‌ها اطلاعات را بر روی صفحه‌نمایش نشان می‌دهند. به آن بخش از مرورگر که وظیفه تبدیل دستورات HTML و CSS به اجزاء قابل رؤیت بر روی نمایش گر را دارد موتور رندر یا Rendering Engineمی‌گویند.

در کنار Rendering Engine، هر مرورگر وب دارای یک مفسر جاوااسکریپت است (JavaScript Interpreter) که وظیفه آن درک دستورات JavaScript و اجرای مرحله به مرحله خطوط آن است و با استفاده از این مفسر دستوراتJavaScript شما در مرورگر اجرا می‌شود.

افزودن جاوا اسکریپت به روش داخلی (internal javascript) 🖹

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

غالب طراحان وب مانند شکل زیر تگ <script> را در تگ <head> قرار می‌دهند.

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript">
		alert("Hello World");
	</script> 
</head>
<body>
</body>
</html>

صفت type در تگ <script> بیانگر نوع و فرمت اسکریپت استفاده شده در تگ است. در مثال بالا type="text/javascript" بدین مفهوم است که دستورات به صورت متن عادی بوده و با زبان جاوا اسکریپت نوشته شده‌اند و جالب‌تر اینکه اگر از HTML5 استفاده کنید نیازی به نوشتن خاصیت یا صفت type نیست و هر تگ <script> به صورت پیش‌فرض از نوع text/javascript در نظر گرفته خواهد شد.در ادامه شما باید کدهای جاوا اسکریپت خود را بین تگ باز و بسته <script> مانند کد زیر بنویسید.

<!DOCTYPE html>
<html>
<head>
	<script>
		alert("Hello World");
	</script> 
</head>
<body>
</body>
</html>

تگ اسکریپت را در چه مکان‌هایی می‌توانیم قرار دهیم؟

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

قرار دادن تگ `<script>` در تگ `<head>`

با قرار دادن دستورات جاوا در تگ <head> مرورگر قبل از هر کاری دستورات جاوا اسکریپت را توسط مفسر بررسی و اجرا می‌کند. البته این کار مزایا و معایب خود را دارد. مثلاً اگر قصد دارید به محض ورود کاربر به سایت یک پیغام به او نشان دهید گزینه خوبی است اما چنانچه بخواهید با المان‌های صفحه کار کنید ممکن است به علت ایجاد نشدن المان‌ها با خطا مواجه شوید.

برنامه نویسان غالباً توابع و دستورات کلی را در <head> قرار می‌دهند.

قرار دادن تگ `<script>` در تگ `<body>`

گاهی اوقات نیاز است که تگ <script> درون تگ <body> قرار گیرد و انجام کار خاصی را بر عهده بگیرد. این روش برای کدهایی یک بار مصرفی که کاربردهای بسیار جزیی دارند مفهید است اما برای کارهایی که زیاد مورد استفاده قرار میگیرد توصیه نمی شود

قرار دادن تگ `<script>` بعد از تگ `<body>`

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

تفاوت کد سمت سرور با کد سمت کاربر (Server Side/ Client Side): زبان برنامه‌نویسی جاوااسکریپت در اصل برای طرف کاربر یا Client Side ساخته‌شده است.در این روش جاوا اسکریپت به همراه کلیهٔ فایل‌های وب از طرف سرور به سمت کاربر ارسال شده و در طرف کاربر اجرا شده و عمل موردنظر صورت می‌پذیرد.در حالتی که در طرف سرور از زبان‌های برنامه‌نویسی دیگری تحت عنوان زبان‌های برنامه‌نویسی Server Side استفاده می‌شود که Asp، PHP،.Net و … مثال‌هایی از آن هستند. همان‌طور که از نام آن‌ها پیداست برنامه‌های این زبان‌ها در طرف سرور اجرا شده و خروجی کار آن‌ها به سمت کاربر ارسال می‌شود.
تفاوت‌ زبان‌های برنامه‌نویسی سمت سرور و زبان برنامه نویسی سمت کاربر

افزودن فایل های جاوا اسکریپت خارجی 🔗

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

این روش دقیقاً مانند فایل‌های CSS خارجی است. فایل‌های خارجی جاوااسکریپت متنی هستند و تمام دستورات را می‌توان در آن قرار داد و با پسوند.js ذخیره نمود مثلاً navigation.js و برای الحاق آن به صفحه موردنظر، مانند زیر عمل می‌کنیم

<!DOCTYPE html>
<html>
	<head>
      <meta charset="UTF-8">
      <script src="navigation.js"></script>
      <title>My Web Page</title>
	</head>
	<body>
	</body>
</html>

صفت src در تگ <script> مانند خاصیت src در تگ <image> عمل می‌کند و شامل مسیر فایل خارجی جاوا اسکریپت است.

اگر یک فایل جاوا اسکریپت را به صفحهٔ خود از طریق تگ <script> الحاق می‌کنید نباید از طریق همان تگ دستورات جاوا اسکریپت دیگری بنویسید و باید از یک تگ مجزا برای این کار استفاده کنید. به مثال زیر توجه کنید

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

شما همچنین می‌توانید چندین فایل جاوا اسکریپت را به صفحهٔ وب خود الحاق کنید برای مثال در کد زیر دو فایل جاوااسکریپت مختلف به صفحه وب الحاق شده است یکی برای کنترل منوها (navigation.js) و یکی برای اسلایدر (slider.js). در کل شما می‌توانید از چندین فایل الحاق شده و همچنین دستورات درون صفحه‌ای به صورت همزمان استفاده کنید.

<!DOCTYPE html>
<html>
	<head>
      <meta charset="UTF-8">
      <script src="navigation.js"></script>
      <script src="slideshow.js"></script>
      <script>
      	alert('hello world');
      </script>
      <title>My Web Page</title>
	</head>
	<body>
    
	</body>
</html>

یادتان نرود که برای هر فایل خارجی از یک تگ <script> باز و بسته مجزا استفاده کنید.

شما می‌توانید فایل جاوا اسکریپت را در هر جایی از وب سایت خود قرار دهید. بیشتر توسعه‌دهندگان وب همهٔ فایل‌های جاوااسکریپت را در یک پوشه مجزا به نام js یا Lib به معنی Library یا کتابخانه و در پوشه مسیر اصلی وب سایت قرار می‌دهند.

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

خلاصه درس 📜

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

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

تمرین‌های درس ✏️

تمرین اول : یک صفحه وب ایجاد که با ورود کاربر با استفاده از جاوا اسکریپت پیغامی به او نمایش دهد.

تمرین دوم : تمرین اول را طوری تغییر دهید که از یک فایل جاوا اسکریپت خارجی برای اجرای کد استفاده کند.

تمرین سوم : با آزمایش نشان دهید که چنانچه یک تگ اسکریپت مانند کد زیر یک فایل خارجی را با استفاده از خاصیت scr به صفحه الحاق کند و همزمان در بین تگ‌های باز و بسته دستورات جاوا اسکریپت قرار بگیرد جاوا اسکریپت کدها را چگونه اجرا خواهد کرد؟

<script src="file.js">
  alert(1); 
</script>

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

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

آزمون درس اض افه کردن جاوا اسکریپت در Google form

🧶

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

درس قبلی: جی کوئری چیست