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

چگونه می توان JavaScript را به HTML اضافه کرد؟ در این مقاله ما نحوه افزودن جاوا اسکریپت به HTML را پس از معرفی کوتاه جاوا اسکریپت به شما آموزش می دهیم.

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

مزایای استفاده از جاوا اسکریپت

ابتدا JavaScript با عنوان LiveScript شناخته شد. اما از آنجا که جاوا صحبت از شهر (جهان واقعی) بود، Netscape صحیح دانست که آن را به JavaScript تغییر نام دهد. اولین حضور آن در سال 1995 در Netscape 2.0 آغاز شد.

در اینجا بهترین مزایای استفاده از جاوا اسکریپت آورده شده است:

تعامل سرور به حداقل میرسد

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

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

رابط کاربر پسند

با استفاده از JavaScript ، می توانید رابط های تعاملی طرف مشتری ایجاد کنید. به عنوان مثال افزودن اسلایدها، نمایش اسلایدها ، جلوه های غلتکی ماوس، ویژگی های کشیدن و رها کردن و … .

بازخورد فوری به کاربر

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

اشکال زدایی آسان

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

نحوه افزودن JavaScript به HTML

دو روش برای افزودن جاوا اسکریپت به HTML وجود دارد و باعث می شود آنها با هم همکاری کنند. اکنون که در مورد جاوا اسکریپت صحبت کردیم و دیدیم که برخی از مزایای آن چه می تواند باشد، اجازه دهید نگاهی به برخی از راه های ارتباط JavaScript با HTML بیندازیم.

افزودن مستقیم جاوا اسکریپت به فایل HTML

اولین روش برای اضافه کردن جاوا اسکریپت به HTML روش مستقیم است. شما می توانید این کار را با استفاده از برچسب <script> </script> انجام دهید که باید تمام کد JS شما را بنویسد. کد JS را می توان اضافه کرد:

بین برچسب های <head>
بین برچسب های <body>

بسته به مکانی که جاوا اسکریپت را در فایل HTML خود اضافه می کنید، بارگذاری متفاوت خواهد بود.

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

برای این مثال، به پرونده HTML زیر که قرار است زمان فعلی را نشان دهد، نگاهی می اندازیم:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>JAVASCRIPT IS USUALLY PLACED HERE</script>
<title>Time right now is: </title>
</head>
<body>
<script>JAVASCRIPT CAN ALSO GO HERE</script>
</body>
</html>

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

var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());

ما این کد را با برچسب های <script> و </script> احاطه کرده و آن را در قسمت head کد HTML قرار می دهیم تا اطمینان حاصل شود که هر زمان که صفحه بارگیری می شود، یک هشدار ایجاد می شود که زمان فعلی را به کاربر نشان می دهد. در پایین نحوه کد را بعد از اضافه کردن مشاهده می کنیم:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now is: </title>
<script>
var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());
</script>
</head>
<body>
</body>
</html>

اگر می خواهید زمان را در بدنه صفحه، نمایش دهید، باید اسکریپت را در برچسب های <body> صفحه HTML وارد کنید. در پایین چگونگی ظاهر شدن کد هنگام انجام این کار آورده شده است:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now is: </title>
</head>
<body>
<script>
let d = new Date();
document.body.innerHTML = "<h1>Time right now is:  " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()
"</h1>"
</script>
</body>
</html>

نتیجه نهایی اینگونه به نظر می رسد:

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

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

برخی از مزایای اضافه کردن کد JS در پرونده های جداگانه عبارتند از:

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

ما می توانیم فابل جاوا اسکریپت را در HTML مانند این موارد ارجاع دهیم:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now:</title>
</head>
<body>
</body>
<script src="js/myscript.js"></script>
</html>

محتوای پرونده myscript.js به شرح زیر خواهد بود:

let d = new Date();
document.body.innerHTML = "<h1>Time right now is:  " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()</h1>"

توجه: فرض بر این است که پرونده myscript.js در همان دایرکتوری فایل HTML موجود است.

به عنوان مثال جاوا اسکریپت برای تأیید آدرس ایمیل

جاوا اسکریپت با کمک به شما در اعتبار سنجی ورودی کاربر در سمت مشتری، برنامه شما را تأیید می کند. یکی از مهمترین ورودی های کاربر که اغلب به اعتبار سنجی نیاز دارد، آدرس های ایمیل است. این عملکرد جاوا اسکریپت می تواند به شما در اعتبار سنجی آدرس ایمیل وارد شده قبل از ارسال به سرور کمک کند:

function validateEmailAddress(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate() {
$("#result").text("");
var emailaddress = $("#email").val();
if (validateEmailAddress(emailaddress)) {
$("#result").text(emailaddress + " is valid :)");
$("#result").css("color", "green");
} else {
$("#result").text(emailaddress + " is not correct, please retry:(");
$("#result").css("color", "red");
}
return false;
}
$("#validate").bind("click", validate);

به منظور پیوستن این عملکرد به ورودی فرم، می توانید از کد زیر استفاده کنید:

<form>
<p>Enter an email address:</p>
<input id='email'>
<button type='submit' id='validate'>Validate!</button>
</form>
<h2 id='result'></h2>

این نتیجه ای است که می توانید بعد از ترکیب همه موارد در یک فایل HTML بدست آورید:

اگر اعتبار سنجی نادرست باشد ، نتیجه متفاوت خواهد بود:

تبریک می گویم! شما یاد گرفته اید که چگونه با چند مثال اساسی، جاوا اسکریپت را به HTML اضافه کنید. همچنین ممکن است بخواهید مقاله ما را در مورد نحوه اضافه کردن جاوا اسکریپت به وردپرس ببینید.