در این آموزش قصد داریم تا روش دوم اجرای دستورات جاوااسکریپت از طریق مرورگر را آموزش دهیم.
برای شروع یک فایل با پسوند html. ایجاد نمائید. در این فایل دستورات ابتدایی مربوط به html را قرار دهید.
مثال:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title>عنوان فایل</title> </head> <body> </body> </html> |
نحوه نوشتن دستورات جاوااسکریپت
برای نوشتن دستورات جاوااسکریپت درون فایل html دو راه دارید:
- دستورات جاوااسکریپت خود را مستقیما درون فایل html با استفاده از تگ script در بخش head یا انتهای تگ body بنویسید.
- ابتدا یک فایل با پسوند js. ساخته و دستورات خود را درون آن قرار دهید. سپس فایل آن را از طریق فایل html فراخوانی و دستورات آن را اجرا کنید.
روش اول: قرار دادن تگ اسکریپت درون فایل html و نوشتن دستورات آن بصورت مستقیم
در این جا قصد داریم روش نوشتن دستورات جاوااسکریپت از طریق خود سند html را آموزش دهیم.
برای اینکار در سند html خود یا در انتهای تگ head قبل از بسته شدن یا در انتهای تگ body قبل از بسته شدن، تگ مربوط به script را قرار می دهیم.
نمونه تگ اسکریپت در انتهای تگ body:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <h2>JavaScript in Body</h2> <p id="demo"></p> <script></script> </body> </html> |
نمونه تگ اسکریپت در انتهای تگ head:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <script></script> </head> <body> <h2>JavaScript in Body</h2> <p id="demo"></p> </body> </html> |
در نسخه های قدیمی جاوااسکریپت از خصوصیت type با مقدار text/javascript برای تگ اسکریپت استفاده می شد، اما در نسخه های جدید نیازی به قرار دادن این خصوصیت نیست چون javascript زبان پیش فرض برنامه نویسی در html است.
مثال نمونه قدیمی با استفاده از خصوصیت text/javascript:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <h2>JavaScript in Body</h2> <p id="demo"></p> <script type="text/javascript"></script> </body> </html> |
قرار دادن جاوااسکریپت در head یا body
برای قرار دادن و فراخوانی فایل های اسکریپت در سند HTML هیچ محدودیتی از نظر تعداد فایل نداریم و شما می توانید به هر تعدادی که نیاز دارید فایل های اسکریپت خود را به ترتیب اولویت در اجرا فراخوانی کنید.
اسکریپت ها می توانند در انتهای بخش head یا body قرار بگیرند. ترتیب اجرای فایل های اسکریپت از بالا به سمت پایین است.
قرار دادن جاوااسکریپت در head
اگر قصد دارید اسکریپت خود را در بخش head قرار دهید می توانید طبق مثال زیر عمل کنید.تنها عیب این روش این است که در سرعت لود صفحه شما تاثیرگذار است و ممکن است باعث کندی سایت شما در هنگام اجرا بشود.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <script></script> </head> <body> <h2>Demo JavaScript in Head</h2> <p id="demo">A Paragraph</p> </body> </html> |
قرار دادن جاوااسکریپت در body
اگر قصد دارید اسکریپت خود را در انتهای تگ body قرار دهید می توانید طبق مثال زیر عمل کنید.این روش مناسب ترین روش برای اجرای اسکریپت پس از لود شدن کامل سند یا document است.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body> <h2>Demo JavaScript in Body</h2> <p id="demo">A Paragraph</p> <script></script> </body> </html> |
فرق محل قرارگیری اسکریپت ها در چیست؟
اگر اسکریپت خود را در انتهای سند بخوانید یعنی قبل از بسته شدن تگ body سرعت اجرای سند شما بالا می رود. چون سند از بالا به پایین لود می شود و تا زمانی که آنها لود نشده باشند امکان لود مابقی محتوا وجود ندارد.
از طرفی به علت اینکه ممکن است در دستورات جاوااسکریپت خود نیاز به دسترسی به dom (درختواره سند) را داشته باشید اگر جاوااسکریپت را زودتر از dom لود کنید با خطا مواجه خواهید شد.
بنابراین پیشنهاد ما قرار دادن اسکریپت در انتهای سند قبل از بسته شدن تگ body است.
انواع اسکریپت ها
اسکریپت ها هم می توانند مستقیما در سند ما قرار گرفته و اجرا شوند که به این حالت Internal Script (اسکریپت درونی) گفته می شود.
مثال یک سند html با اسکریپت درونی:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <h2>Demo JavaScript in Body</h2> <p id="demo">A Paragraph</p> <script> console.log("Hello Amir Javanmir"); </script> </body> </html> |
هم می توانند بعنوان یک فایل یا فایل های مجزا که دارای پسوند js. است، در کنار سند html یا درون پوشه ای در کنار سند html قرار بگیرند. به این نوع اجرای فایل External Script (بیرونی) گفته می شود.اجرای این فایل ها از طریق فایل html می باشد.
پسوند فایل های اسکریپت js. است و شما می توانید هر نامی را برای آن قرار دهید اما پسوند باید js. باشد.
در فایل خارجی یا External دیگر نیازی به قرار دادن تگ های اسکریپت در ابتدا و انتهای دستورات نیست و چون نوع سند جاوااسکریپت است پس از ذکر کردن تگ script خودداری کنید.
مثال یک سند جاوااسکریپت حاوی اسکریپت بیرونی:
|
1 |
console.log("Hello Amir Javanmir"); |
فایده این روش در این است که اگر قرار است از دستورات یکسانی در صفحات مختلف استفاده کنیم یک فایل ایجاد کرده و تنها این فایل را در اسناد خود فراخوانی می کنیم.
نحوه فراخوانی فایل External در سند HTML
برای فراخوانی فایل اسکریپت خارجی ابتدا باید فایل خود را با پسوند js. در کنار سند html یا در پوشه ای در کنار سند html ایجاد نمائیم.
پس از ایجاد آن تگ اسکریپت را در بخش انتهایی head یا انتهایی body قرار می دهیم.
توجه: دیگر بین تگ ها کد اسکریپت نمی نویسیم بلکه از خصوصیت src در تگ script استفاده کرده و نام فایل ساخته شده خود را بدرستی فراخوانی می کنیم.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body> <h2>Demo JavaScript in Body</h2> <p id="demo">A Paragraph</p> <script src="myScript.js"></script> </body> </html> |
انواع مسیردهی فایل خارجی
برای فراخوانی فایل اسکریپت خارجی می توان حالت های زیر را در نظر گرفت:
- آدرس فایل اسکریپت بصورت کامل بهمراه دامین از سایت خود یا از یک سایت بیرونی درون تگ script و خصوصیت src قرار می گیرد.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body> <h2>Demo JavaScript in Body</h2> <p id="demo">A Paragraph</p> <script src="https://dejavan.ir/myScript.js"></script> </body> </html> |
- در صورتی که فایل اسکریپت در کنار سند یا پوشه مجاور سند html شما قرار دارد با قرار دادن /. یا folderName/. درون خصوصیت src فایل اسکریپت را فراخوانی کنید.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <h2>Demo JavaScript in Body</h2> <p id="demo">A Paragraph</p> <script src="./myScript.js"></script> <script src="./folderName/myScript.js"></script> </body> </html> |
مزایای فراخوانی اسکریپت از طریق فایل خارجی یا External
- باعث جدا شدن فایل های اسکریپت از HTML می شود.
- خواندن و اصلاح کدها راحتتر و سریعتر می شود.
- فایل ها در لود اولیه کش شده و در نوبت های بعدی با سرعت بیشتری لود می شود.
