اضافه کردن کد های جاوااسکریپت به سند html

جاوااسکریپت چیست ؟

به صورت خلاصه می توان گفت جاوااسکریپت (javascript) که به اختصار JS نیز نامیده می شود ، یکی از محبوبترین زبان های برنامه نویسی است که در کنار HTML و CSS برای توسعه وب استفاده می شود.

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

اضافه کردن جاوا اسکریپت به سند HTML

یکی از این روش ها اضافه کردن کد جاوااسکریپت با استفاده از تگ script است ، این تگ را می توان در قسمت head و یا body سند html خود با توجه به زمان مورد نیاز برای اجرای کد های جاوااسکریپت قرار داد.

کد html زیر را در نظر بگیرید :

  <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

در ادامه قصد داریم کد های جاوا اسکریپتی زیر را در سند html خود قرار دهیم.

let d = new Date();
alert("Today's date is " + d);

این قطعه کد با استفاده از تابع alert پیامی را با تاریخ فعلی نمایش می دهد.

برای افزودن این کد در سند html می توانیم تگ script خود را در بخش head قرار دهیم ، با این کار مرورگر اسکریپت جاوا اسکریپت را قبل از بارگذاری سایر بخش ها اجرا می کند.

  <!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <script>
        let d = new Date();
        alert("Today's date is " + d);
    </script>
</head>

<body>

</body>

</html>

در مثال زیر ما تگ script خود را در قسمت body قرار می دهیم :

  <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

  <script>
      let d = new Date();
      document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
  </script>

</body>

</html>

در این مثال در ظاهر نتیجه یکسان است ولی در واقع زمانی که تگ script خود را در قسمت تگ head قرار می دهیم ابتدا کد های جاوااسکریپت اجرا می شوند .

در این مثال تعداد کد های جاوااسکریپت ما کم است ، به همین دلیل می توانیم این کد ها را درون خود سند html قرار دهیم ولی در پروژه های واقعی ، کد های جاوااسکریپت خود را درون فایل های جداگانه ای قرار میدهیم تا در مواقع نیاز از آن ها استفاده کنیم و آن هارا بارگذاری کنیم .

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

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

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

نگهداری آسان تر

افزایش سرعت بارگذاری صفحات وب

جلوگیری از نوشتن کد های تکراری

کدنویسی استاندارد

در مثال زیر قصد داریم با انجام یک پروژه تمرینی کوچک یک فایل جداگانه جاوااسکریپت ایجاد کنیم :

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

کد بالا را درون سند html خود قرار دهید سپس یک فایل جاوااسکریپت با پسوند js ایجاد کنید و کد های زیر را درون آن قرار دهید.

let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"

پس از آن تگ script خود را در بخش تگ body قرار دهید :

<script src="script.js"></script>

در ادامه یک فایل با نام style و پسوند css ایجاد می کنیم (style.css) و کد های زیر را درون آن قرار می دهیم :

body {
    background-color: #0080ff;
}

h1 {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

لینک آن را مانند کد زیر در بخش تگ head قرار دهید :

 <link rel="stylesheet" href="style.css">

که خروجی آن کد زیر است :

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

<script src="script.js"></script>

</body>

</html>

اضافه کردن کد های جاوااسکریپت به سند html

جاوااسکریپت چیست ؟

اضافه کردن جاوا اسکریپت به سند HTML

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

مقالات مشابه

نوشتن اولین برنامه جاوااسکریپت

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

بررسی اصول چهار گانه ی شی گرایی oop در جاوااسکریپت