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

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

اولین روش : استفاده از تگ <script></script> به صورت باز و بسته که درون این دو تگ کدهای خودمان را می نویسم . تگ script در واقع یک سری Attributes داره مثل type="text/javascript" . برای اینکه با این نوع فراخوانی آشنا بشوید یک مثال خیلی ساده براتون می زنیم . در این مثال با استفاده از تابع alert در جاوا اسکریپت ما به هنگام بارگذاری صفحه یک پیغام خاص درون صفحه مرورگر کاربر به صورت پنجره ای نمایش می دهیم .

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Javascript - Session 01 </title>
</head>
<body>
    <script type="text/javascript">
        alert("Welcome to javascript Tutorial");
    </script>
</body>
</html>

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

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

نکته : پنجره alert درون مرورگرهای مختلف شکلها و ظاهر متفاوت دارد .

 

دومین روش : استفاده از یک فایل جاوا اسکریپ به صورت جداگانه و فراخوانی آن درون صفحه html می باشد . بدین صورت که شما یک فایل با پسوند JS درون پوشه پروژه خودتان ایجاد می کنید و سپس با اسفتاده از خاصیت یا attributes مربوط به فراخوانی فایل که src می باشد آدرس و مسیر فایل خود را درون تگ script قرار می دهید . به صورت زیر :

کد صفحه HTML :

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Javascript - Session 01 </title>
</head>
<body>
    <script type="text/javascript" src="/app-01.js" ></script>
</body>
</html>

کد صفحه app-01.js ایجاد شده :

alert("Welcome to javascript Tutorial");

 

حالا باز هم اگر صفحه html خودتان را با استفاده از یک مرورگر باز کنید ، می بینید که باز پیغام پنجره ای برای شما نمایش داده می شود . در صورتی که پیغام پنجره ای برای شما نمایش داده نشود احتمال زیاد در آدرس دهی فایل javascript اشتباه کرده اید و مسیر به اشتباه وارد کرده اید .


چند نکته مورد فراخوانی فایل و استفاده از فایل خارجی در جاوا اسکریپت ، لازم است که گفته شود :

  1. نکته اول : در قسمت مسیر فایل src شما باید حتما مسیری که فایل جاوا اسکریپت مخصوص شما وجود دارد قرار بدهید .
  2. نکته دوم : ما بین تگ script هیچ کد دیگری نباید قرار بدهید .
  3. نکته سوم : درون فایل JS که ایجاد کرده اید دیگر شما تگی از Html نیاز نیست قرار بدهید و صرفا فقط اون کدهایی که ما بین فایل script قرار دارند را باید فراخوانی کنید .

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

اما چه زمانی از روش اول و چه زمانی از روش دوم استفاده کنیم ؟ زمانی که حجم کدهاتون زیاد می باشد ( بالای 15 خط ) ، طبیعی که باید از روش دوم استفاده کنید و درون یک فایل فراخوانی کنید که باعث سنگین شدن صفحه نشود ، اگر حجم کدهای جاوا اسکریپت کم بود در حد 3 تا 5 خط بود دیگه لزومی نداره که به خاطرش یک فایل جاوا اسکریپت درون صفحه فراخوانی کنید و از همان روش اول می توانید استفاده کنید .

امکان داره بعضی واقع برخی مرورگرها کدها و دستورات جاوا اسکریپت پشتیبانی نکنند ، برای اینکه درون مرورگر کاربر پیغامی مبنی بر پشتیبانی نکردن مرورگر از کدهای جاوا اسکریپت بدهید از دستور noscript دقیقا بعد از تگ script استفاده می کنید . یعنی زمانی که تگ script به صورت بسته نوشته اید دستور noscript باز و بسته را نیز به کدهامون اضافه می کنیم .

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Javascript - Session 01 </title>
</head>
<body>
    <script type="text/javascript">
        alert("Welcome to javascript Tutorial");
    </script>
    <noscript>Your Browser doesn't support javascript !</noscript>
</body>
</html>

اگر مرورگر جاوا اسکریپت پشتیبانی کرد ، که کدهای مروبط به جاوا اسکریپت اجرا می شود و تگ noscript اجرا نمی شود . اما اگر مرورگر جاوا اسکریپت پشتیبانی نکند مستقیم تگ noscript اجرا می شود .

 

موضوعی بعدی که بهش قرار بپردازیم بارگذاری و لود شدن فایل ها درون صفحه سایت می باشد . زمانی که شما یک یک فایل جاوا اسکریپت با استفاده از مشخصه src میاید و درون صفحه یک فایل جاوا اسکریپت بارگذاری می کند از لحاظ فنی شاید دو یا سه روش وجود دارد برای برخورد مرورگر با بارگذاری این فایل .

 

روش اول : اگر به صورت ساده که در بالا توضیح داده شد ، یک فایل جاوا اسکریپت بدون هیچ خاصیتی بخواهید درون یک صفحه بارگذاری کنید ، مرورگر از اول میاد و تمام کدهای درون صفحه را بارگذاری می کند و زمانی که به فایل جاوا اسکریپت شما برسد ، باید اول مرورگر کاملا آن فایل جاوا اسکریپت شما را بارگذاری بکند و بعدا ادامه کدهایی که درون سند Html وجود دارد اجرا کند . بزرگترین عیب این روش این می باشد که اگر فایل جاوا اسکریپت ما خیلی سنگین باشد و خیلی دیر بارگذاری شود ، به همان نسبت صفحه وب سایت ما هم دیر بارگذاری می شود . که برای رفع این مورد راه حل هایی وجود دارد که در ادامه به آنها می پردازیم .

روش دوم  : استفاده از خصوصیت و مشخصه async درون تگ مربوط به Script . اگر ما این خصوصیت را درون تگ script خودمان استفاده کنیم ، مرورگر به محض اینکه به تگ script مربوط به فایل جاوا اسکریپت که خصوصیت async داخلش می باشد برسد ، شروع به لود و بارگذاری این فایل می کند ، منتهی روند بارگذاری صفحه html را نیز همزمان ادامه می دهد . مزیتی که دارد این می باشد که همزمان هم فایل javascript بارگذاری میکند و هم مابقی دستورات درون صفحه را و عیب این دستور نیز این می باشد که امکان دارد برخی از دستورات بارگذاری شده درون صفحه وابستگی به فایل javascript مورد نظر داشته باشد .

<script type="text/javascript" src="/app-01.js" async="async" ></script>

روش سوم : استفاده از خصوصیت و مشخصه defer درون تگ اسکریپت . این خصوصیت زمانی در تگ script استفاده می شود که ما بخواهیم فایل جاوا اسکریپت در انتهای کار و بعد از لود کامل صفحه بارگذاری شود ، طبیعتا شاید این روش یک مقدار بهتر باشد ، آن هم به این دلیل که شما اجازه می دهید همه کدهای درون صفحه بارگذاری کامل شود و سپس فایل و کدهای جاوا اسکریپت ما بارگذاری شود .

<script type="text/javascript" src="/app-01.js" defer="defer" ></script>

نکته بعدی که درباره بارگذاری فایلهای جاوا اسکریپت وجود دارد بدین صورت است که شما فایلهای جاوا اسکریپت در کجای صفحه قرار دهید و بارگذاری کنید ، آیا فایل جاوا اسکریپت درون تگ head و یا در انتهای صفحه قبل از تگ body بسته بارگذاری شود یا بعد از تگ شروع body . مکان مناسب برای بارگذاری کجا می باشد ؟ همه این موارد تماما بستگی به نوع عملکرد دستورات فایل جاوا اسکریپت فایل شما دارد . پیشنهادی که کلا به این موضوع می شود بدین صورت است که فایلهای جاوا اسکریپت شما در انتهای صفحه و قبل از تگ body بسته قرار بگیرد تا باعث دیر بارگذاری شدن سایت شما نشود .

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Javascript - Session 01 </title>
</head>
<body>
    <p> Hello ... </p>
    
    <script type="text/javascript" src="/app-01.js" defer="defer" ></script>
</body>
</html>

 

در جلسه بعدی آموزش برنامه نویسی سایت تحت زبان جاوا اسکریپت ، با مقدمات اصلی زبان جاوا اسکریپت آشنا می شوید و به موضوعاتی مانند  قرار دادن توضیحات ، دستور Alert و دستور consle log بیشتر آشنا می شویم .