بازگشت به صفحه ی دوره

مثال ۲.۰۳: تایید ترتیب اجرای دستورات

بریم یک مثال کوچیک بزنیم و ببینیم که هر کد جاوا اسکریپتی که توی <head> قرار میدیم قبل از کد های تگ <body> اجرا میشه یا نه:

۱- توی فایل های مربوط به مثال های این فصل، یک فایل order.html وجود داره. پیداش کنید و با VSCode بازش کنید. این فایل دارای کد های HTML زیر هست:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Execution Order</title>
  </head>
  <body>
    <h1>JavaScript Execution Order</h1>
    <p>View the browser console to see the effective order of execution.</p>
  </body>
</html>

۲- همونطور که میبینید، فعلا هیچ کد جاوا اسکریپتی توی کد بالا وجود نداره. وقتشه یک سری کد جاوا اسکریپت توی جاهای مختلفش بنویسیم. کد زیر رو در تگ <head> و زیر <title> قرار بدید:

<script>console.log('Within the HEAD');</script>

۳- حالا کد زیر رو توی تگ <body> و بالای <h1> قرار بدید:

<script>console.log('Within the BODY');</script>

۴- در نهایت، کد زیر رو قبل از پایان کد های تگ <body> قرار بدید:

<script>console.log('At the very END');</script>

تا اینجا باید محتویات فایلتون این شکلی باشه:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Execution Order</title>
    <script>console.log('Within the HEAD');</script>
  </head>
  <body>
    <script>console.log('Within the BODY');</script>
    <h1>JavaScript Execution Order</h1>
    <p>View the browser console to see the effective order of execution.</p>
    <script>console.log('At the very END');</script>
  </body>
</html>

۵- برید توی مرورگرتون و زمانی که تب کنسول توی ابزار های توسعه دهنده باز هست، فایل HTML که حاوی کد بالاست رو باز کنید. بله، همونطور که انتظار میرفت و توضیح دادیم کد ها از بالا به پایین اجرا میشن:

تایید ترتیب اجرای دستورات در جاوا اسکریپت

دستور ()console.log توی جاوا اسکریپت هر داده ای که توی پرانتز هاش قرار میگیره رو توی کنسول به صورت خروجی نشون میده. استفاده از این دستور ساده ترین راه برای دیباگ کردن کد جاوا اسکریپت هست، با این حال توی فصل بعدی بیشتر راجع بهش حرف میزنیم.

توی این قسمت، درمورد تعدادی از اصول مهم مربوط به ساختار و syntax جاوا اسکریپت، مخصوصا توی محیط مرورگر، صحبت کردیم.

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