نحوه اضافه کردن جاوا اسکریپت به HTML
آیا می توانیم HTML را در جاوا اسکریپت نوشت
معرفی
جاوا اسکریپت، به اختصار JS، زبان برنامه نویسی مورد استفاده در توسعه وب است. به عنوان یکی از فن آوری های اصلی وب در کنار HTML و CSS، جاوا اسکریپت برای ایجاد صفحات وب تعاملی و ساخت برنامه های وب استفاده می شود. مرورگرهای وب مدرن که به استانداردهای نمایش معمولی پیوسته اند، جاوا اسکریپت را از طریق موتورهای ساخته شده بدون نیاز به پلاگین های اضافی پشتیبانی می کنند.
هنگام کار با فایل ها برای وب، جاوا اسکریپت باید لود شود و همراه نشانه گذاری HTML اجرا شود. این را می توان به صورت خطی درون یک سند HTML یا در یک فایل جداگانه که مرورگر در کنار سند HTML دانلود می کند، انجام می دهد.
این آموزش در مورد چگونگی جاوا اسکریپت در فایلهای وب شما، به صورت یکپارچه به یک سند HTML و به عنوان یک فایل جداگانه انجام خواهد شد.
اضافه کردن جاوا اسکریپت به یک سند HTML
شما می توانید کد جاوا اسکریپت را در یک سند HTML با استفاده از تگ اختصاصی HTML> script> که در اطراف کد جاوا اسکریپت قرار دارد، اضافه کنید.
تگ <script> را می توان در بخش <head> HTML خود، در بخش <body> یا بعد از تگ </ body> بستگی قرار داد، بسته به نوع زمانی که شما می خواهید جاوا اسکریپت را بارگذاری کنید.
به طور کلی، کد جاوا اسکریپت می تواند داخل بخش سند <head> قرار گیرد تا محتوای آنها را از محتویات اصلی سند HTML خود خارج کند.
با این حال، اگر اسکریپت شما نیاز به اجرا در یک نقطه خاص در یک طرح صفحه مانند استفاده از document.write برای تولید محتوا - شما باید آن را در نقطه ای که باید آن را نامیده می شود، معمولا در قسمت <body> قرار دارد.
بیایید سند HTML خالی زیر را با یک عنوان مرورگر تاریخ امروز بررسی کنیم:
index.html
<! DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width، initial-scale = 1">
<title> تاریخ امروز </ title>
</ head>
<body>
</ body>
</ html>
در حال حاضر، این فایل فقط حاوی نشانه گذاری HTML است. بگذارید بگوییم ما دوست داریم کد جاوا اسکریپت زیر را به سند اضافه کنیم:
اجازه دهید d = تاریخ جدید ()؛
هشدار ("تاریخ امروز" + د)؛
این صفحه وب را برای نمایش یک هشدار با تاریخ فعلی بدون در نظر گرفتن زمانی که کاربر سایت را بارگذاری می کند، فعال می کند.
برای رسیدن به این هدف، یک برچسب <script> همراه با برخی از کد جاوا اسکریپت را در فایل HTML اضافه خواهیم کرد.
برای شروع، کد جاوا اسکریپت را بین برچسب های <head> اضافه می کنیم و به مرورگر نشان می دهد که اسکریپت جاوا اسکریپت را قبل از بارگذاری در بقیه صفحه اجرا کنیم. ما می توانیم جاوا اسکریپت را در زیر تگ های <title> اضافه کنیم، به عنوان مثال، همانطور که در زیر نشان داده شده است:
index.html
<! DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width، initial-scale = 1">
<title> تاریخ امروز </ title>
<script>
اجازه دهید d = تاریخ جدید ()؛
هشدار ("تاریخ امروز" + د)؛
</ script>
</ head>
<body>
</ body>
</ html>
هنگامی که صفحه را بارگذاری میکنید، یک هشدار دریافت خواهید کرد که شبیه به این خواهد بود:
مثال هشدار جاوا اسکریپت
شما همچنین می توانید با قرار دادن اسکریپت داخل یا خارج از برچسب های <body> و دوباره بارگذاری صفحه را آزمایش کنید. به عنوان این سند HTML قوی نیست، شما احتمالا هیچ تفاوت در بارگذاری صفحه را متوجه نمی شوید.
اگر ما اصلاح آنچه در بدن HTML نشان داده شده است، ما باید آن را پس از بخش <head> به طوری که آن را بر روی صفحه نشان می دهد، همانطور که در مثال زیر:
index.html
<! DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width، initial-scale = 1">
<title> تاریخ امروز </ title>
</ head>
<body>
<script>
اجازه دهید d = تاریخ جدید ()؛
document.body.innerHTML = "<h1> تاریخ امروز" + d + "است </ h1>"
</ script>
</ body>
</ html>
خروجی برای سند HTML بالا که از طریق یک مرورگر بارگذاری می شود، شبیه به موارد زیر خواهد بود:
مثال جاوا اسکریپت
اسکریپت هایی که کوچک و یا تنها در یک صفحه اجرا می شوند می توانند در یک فایل HTML خوب عمل کنند، اما برای اسکریپت های بزرگتر و یا اسکریپت هایی که در بسیاری از صفحات استفاده می شود، این یک راه حل بسیار موثر نیست، زیرا از جمله می توان آن را غیر قابل خواندن یا خواندن سخت و درک کن در بخش بعدی، ما در مورد چگونگی اداره یک فایل جاوا اسکریپت جداگانه در سند HTML خود خواهیم بود.
کار با یک فایل جاوا اسکریپتی جداگانه
به منظور جا به جا کردن اسکریپت ها یا اسکریپت های بزرگتر که در چندین صفحه استفاده می شوند، کد جاوا اسکریپت به طور کلی در یک یا چند فایل js که در اسناد HTML اشاره شده است، همانند نحوه ارزیابی دارایی های خارجی مانند CSS اشاره دارد.
مزایای استفاده از یک فایل جاوا اسکریپتی جداگانه عبارتند از:
جدا کردن نشانه گذاری HTML و کد جاوا اسکریپت برای ایجاد هر دو ساده تر
فایل های جداگانه باعث می شود تعمیر و نگهداری آسان تر شود
هنگامی که فایلهای جاوا اسکریپت ذخیره می شوند، صفحات سریعتر بارگذاری می شوند
برای نشان دادن نحوه اتصال یک سند جاوا اسکریپت به یک سند HTML، اجازه دهید یک پروژه کوچک وب ایجاد کنیم. این شامل script.js در js / directory، style.css در css / directory و اصلی index.html در ریشه پروژه است.
پروژه
css
سبک.css
JS
script.js
index.html
ما می توانیم با ما شروع کنیم
قالب HTML قبل از بخش بالا:
index.html
<! DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width، initial-scale = 1">
<title> تاریخ امروز </ title>
</ head>
<body>
</ body>
</ html>
حالا، جاوا اسکریپت ما را حرکت می دهد که تاریخ را به عنوان header <h1> به فایل script.js نشان می دهد:
script.js
اجازه دهید d = تاریخ جدید ()؛
document.body.innerHTML = "<h1> تاریخ امروز" + d + "است </ h1>"
ما می توانیم یک مرجع به این اسکریپت را به بخش یا زیر بخش <body> اضافه کنیم، با خط زیر کد:
<script src = "js / script.js"> </ script>
تگ <script> به فایل script.js در js / دایرکتوری پروژه وب ما اشاره دارد.
بیایید به این خط در متن فایل HTML ما، در این مورد، زیر بخش <body> نگاه کنیم:
index.html
<! DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width، initial-scale = 1">
<title> تاریخ امروز </ title>
</ head>
<body>
</ body>
<script src = "js / script.js"> </ script>
</ html>
در نهایت، بگذارید فایل file style.css را نیز با افزودن یک رنگ پسزمینه و سبک به <h1> header:
style.css
بدن {
رنگ پس زمینه: # 0080ff؛
}
h1 {
رنگ: #fff؛
فونت خانواده: Arial، Helvetica، sans-serif؛
}
ما می توانیم فایل CSS را در بخش <head> سند HTML ما مرجع:
index.html
<! DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width، initial-scale = 1">
<title> تاریخ امروز </ title>
<link rel = "stylesheet" href = "css / style.css">
</ head>
<body>
</ body>
<script src = "js / script.js"> </ script>
</ html>
در حال حاضر، با جاوااسکریپت و CSS در محل ما می توانیم صفحه index.html را در مرورگر وب ما انتخاب کنید. ما باید صفحه ای شبیه به موارد زیر را ببینیم:
تاریخ جاوا اسکریپت با مثال CSS
حالا که جاوا اسکریپت را در یک فایل قرار داده ایم، می توانیم آن را از صفحات وب اضافی با هم تماس بگیریم و همه آنها را در یک مکان به روز رسانی کنیم
نتیجه
این آموزش در مورد چگونگی جاوا اسکریپت در فایلهای وب خود، هر دو درون یک سند HTML و به عنوان یک فایل جداگانه .js انجام شد.
از اینجا میتوانید یاد بگیرید چگونه با کنسول توسعه دهنده JavaScript و نحوه نوشتن نظرات در جاوااسکریپت کار کنید.
