نحوه ی اجرای statement ها در جاوا اسکریپت
statement ها در جاوا اسکریپت تک به تک و به ترتیب نوشته شدنشان اجرا می شوند!
این مسئله چه اهمیتی دارد؟ اگر کدی که در قسمت قبل نوشتیم با عبارت “Hello From Roxo” را بعد از تگ <p> بگذاریم مشکلی پیش نمی آید اما اگر قبل از آن بگذاریم چیزی اجرا نمی شود! به مثال های زیر توجه کنید:
حالت اول: عبارت “Hello From Roxo” بعد از تگ <p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>In HTML, JavaScript statements are executed by the browser.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello From Roxo";
</script>
</body>
</html>
|
حالت دوم: عبارت “Hello From Roxo” قبل از تگ <p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Hello From Roxo";
</script>
<h2>JavaScript Statements</h2>
<p>In HTML, JavaScript statements are executed by the browser.</p>
<p id="demo"></p>
</body>
</html>
|
می توانید کد های بالا را در ادیتور آنلاین، در این لینک، تست کنید. زمانی که روی لینک ادیتور کلیک کنید به صفحه ای می روید و آنجا می توانید تگ های <script> را به همراه کد هایشان بردارید و بالاتر از تگ <p> قرار دهید. خواهید دید که عبارت “Hello From Roxo” نشان داده نخواهد شد.
چرا؟ زیرا این کد معتبر نیست! گفتیم statement ها به ترتیب اجرا می شوند و هنوز به تگ <p> نرسیدیم، بنابراین در منطق کامپیوتری هنوز چنین تگی وجود ندارد!
بنابراین چطور تگی که وجود ندارد را تغییر دهیم؟ امکانش نیست. پس در نوشتن کدهایتان دقت بسیاری داشته باشید.
اگر کد ها را در فایلی جداگانه قرار داده باشیم چطور؟ شما گفتید می شود که کد ها را در فایل جداگانه قرار داد و در تگ <head> یعنی قبل از تمام تگ های اصلی بارگذاری کرد! چطور ممکن است؟ در قسمت قبل توصیه کردیم که مقاله ی مسیر ضروری رندرینگ (Critical Rendering Path) چیست؟ را مطالعه بفرمایید.
مرورگر در حالت عادی تا زمانی که فایل های CSS و JavaScript را دریافت نکند کاملا جلو نمی رود! اما وقتی این فایل ها را دانلود کند به سرعت اجرا خواهد کرد! حتی قبل از اینکه صفحه ی شما بارگذاری شده باشد.
بنابراین خیلی از اوقات قبل از اینکه تمام صفحه ی شما لود شود، فایل جاوا اسکریپت شما بارگذاری می شود. برای جلوگیری از این مشکل روشی ارائه شده است. جاوا اسکریپت را با تاخیر لود کنید! یعنی به مرورگر بگویید بعد از اینکه تمام صفحه بارگذاری شد سپس به سراغ جاوا اسکریپت برو! این کار به شکل زیر انجام می شود:
|
|
<script src="demo_defer.js" defer></script>
|
|
|
<script src="demo_defer.js" async></script>
|
اینجا مانند قبل فایل کد های خود را در تگ های <script> بارگذاری کرده ایم اما یک تفاوت وجود دارد. بعد از آدرس دهی به اسکریپت خود، از کلید واژه ی defer (به معنی به تعویق انداختن) استفاده کرده ایم.
در مثال دومی نیز از کلید واژه ی async (مخفف asynchronously به معنی “ناهمگام” در فارسی) استفاده شده است. اینها چه معنی دارند؟
- اگر ویژگی async را به تگ <script> داده باشید، اسکریپت شما به صورت ناهمگام با بقیه ی صفحه اجرا می شود (یعنی همانطور که صفحه در حال بارگذاری است، اسکریپت شما اجرا می شود).
- اگر ویژگی defer را به تگ <script> داده باشید، اسکریپت شما زمانی اجرا می شود که تجزیه و بارگذاری صفحه تمام شده باشد.
- اگر ویژگی async و defer را به تگ <script> ندهید، اسکریپت شما قبل از اینکه صفحه بارگذاری شود سریعاً اجرا می شود.
این موارد بسیار مهم هستند. بسیاری از برنامه نویسان تازه کار جاوا اسکریپت کد های بی نقصی می نویسند اما کدشان اجرا نمی شود بنابراین با خستگی و درماندگی کامل ساعت ها وقت می گذارند که ببینند کجای کار کد ها اشتباه است غافل از اینکه کد ها نقصی ندارند و تنها نحوه ی بارگذاری آن ها مشکل دارد.
نکته: مرورگر Internet Explorer یا Edge از نسخه ی 10 به بعد از این ویژگی پشتیبانی می کنند. بنابراین این نکات در ورژن های قبل از 10 بی معنی است
از آن جایی که statement ها با نقطه‌ویرگول از هم جدا می شوند، بدیهی است که فضای خالی (white space) هیچ تاثیری در کد شما ندارد! یعنی اگر کد بالا را به شکل زیر بنویسید هیچ تغییری در اجرای کد ها نخواهید دید
به زبان عامیانه بگویم؛ مرورگر شما اینتر و اسپیس حالیش نمی شه! اینتر و اسپیس ها فقط برای راحتی خواندن من و شما (انسان ها) است نه کامپیوتر ها!
در اینجاست که بحث minify کردن کد ها پیش می آید که در جلسات بعدی در مورد آن صحبت خواهیم کرد.
نکته ی مهم: در سال های اخیر دیگر مجبور به گذاشتن نقطه‌ویرگول نیستید و موتور های جاوا اسکریپت قادر به تشخیص پایان دستور ها هستند اما به سه دلیل همیشه سعی کنید کد ها را با نقطه‌ویرگول تمام کنید؛
اولا شیوه ی استاندارد کدنویسی این طور است. جاوا اسکریپت تنها زبانی نیست که در پایان دستورات خود نقطه‌ویرگول دارد؛ زبان PHP و خیلی از زبان های دیگر نیز چنین کاری میکنند.
دوما این کار در برخی از موارد باعث نقص در کد شما می شود.
سوما دیدن کد ها بدون نقطه‌ویرگول در فایل های حجیم باعث سرگیجه ی شما خواهد شد. چرا باید به خاطر چیزی که اهمیت چندانی ندارد سلامت و استاندارد سازی کد های خود را به خطر بیندازید؟
پس با این حساب اگر در کد های خود چندین اسپیس هم بزنید هیچ اتفاقی نمی افتد. به طور مثال هر دو کد زیر یکسان عمل می کنند:
اما روش استاندارد و زیباتر این است که بعد و قبل از اپراتور ها (= + – * /) اسپیس بگذارید. در قسمت های بعدی در مورد اپراتور ها بیشتر صحبت خواهیم کرد.
اطلاعاتی که در مورد اسپیس گفتیم در مورد اینتر هم صادق است و هر دو کد زیر یکسان هستند:
|
|
document.getElementById("demo").innerHTML = "Hello Dolly!";
|
|
|
document.getElementById("demo").innerHTML =
"Hello Dolly!";
|
امیدوارم از این قسمت استفاده ی کافی را برده باشید.
منبع: سایت روکسو
