در این آموزش، ما به شما نحوه افزودن جاوا اسکریپت به HTML را نشان خواهیم داد. ابتدا ی این مقاله شامل معرفی مختصر JavaScript خواهد بود، در حالی که بقیه راهنما به روش های مختلف افزودن جاوا اسکریپت به HTML متمرکز است.
اگر می خواهید محتوای ایستا، به عنوان مثال مجموعه ای از تصاویر را نمایش دهید، HTML می تواند کار را برای شما انجام دهد. با این حال، صفحات ایستا به آرامی قدیمی می شوند. امروزه بیشتر مطالب تعاملی است و شامل نمایش های اسلایدی پر زرق و برق، فرم ها و منو ها است. آنها تجربه کاربر را افزایش می دهند و به وب سایت پویایی می بخشند. این امر با زبان های اسکریپت نویسی حاصل می شود و جاوا اسکریپت یکی از معروف ترین ها در این زمینه است و اجازه می دهد تا توسعه دهندگان، وب سایت هایی ایجاد کنند که با کاربر تعامل داشته باشند و بالعکس. حتی با وجود بسیاری از زبان های دیگر، هیچ یک از آنها به اندازه جاوا اسکریپت محبوب نیستند.
مزایای جاوا اسکریپت – JavaScript
جاوا اسکریپت ابتدا به LiveScript معروف شد. اما از آنجا که جاوا بحث شهر (واقعاً جهان) بود، Netscape صحیح دانست که نام آن را به JavaScript تغییر دهد. اولین حضور آن به سال ۱۹۹۵ در Netscape 2.0 برمی گردد. در اینجا برخی از بهترین مزایای استفاده از JavaScript وجود دارد :
- تعامل سرور به حداقل رسیده است
این یک واقعیت مشهود است که اگر می خواهید عملکرد یک وب سایت را بهینه کنید، بهترین راه کاهش ارتباط با سرور است. جاوا اسکریپت با اعتبارسنجی ورودی کاربر در سمت کلاینت، به این زمینه کمک می کند. این فقط پس از اجرای بررسی های تأیید اولیه، درخواست ها را به سرور ارسال می کند. در نتیجه، میزان استفاده از منابع و میزان درخواست ها به سرور به میزان قابل توجهی کاهش می یابد.
- رابط کاربری غنی تر و کاربر پسند
با استفاده از جاوا اسکریپت، می توانید رابط های تعاملی سمت کلاینت ایجاد کنید. به عنوان مثال افزودن اسلایدر ، نمایش اسلایدی ، جلوه های چرخش ماوس ، ویژگی های کشیدن و رها کردن و غیره.
- بازخورد فوری به کاربر
با استفاده از جاوا اسکریپت می توانید اطمینان حاصل کنید که کاربران بلافاصله پاسخ می دهند. به عنوان مثال، بیایید تصور کنیم یک کاربر یک فرم را پر کرده و یک قسمت را خالی گذاشته است. بدون اعتبار سنجی جاوا اسکریپت، آنها فقط باید صبر کنند تا صفحه بارگیری شود تا متوجه شوند که آنها یک قسمت خالی را پر نکرده اند. با این حال، با جاوا اسکریپت، به آنها فورا هشدار داده می شود.
- اشکال زدایی آسان
JavaScript یک زبان تفسیری است، به این معنی که کد نوشته شده خط به خط رمزگشایی می شود. در صورت بروز هرگونه خطا، شماره خط دقیق آن را دریافت خواهید کرد.
برای مطالعه بیشتر درمورد جاوا اسکریپت کلیک کنید.
افزودن جاوا اسکریپت به HTML
دو روش برای افزودن جاوا اسکریپت به HTML و کار با هم وجود دارد. اکنون که در مورد JavaScript صحبت کردیم و دیدیم که برخی از مزایای آن چه چیز هایی می تواند باشد، بیایید نگاهی به برخی از راه های اتصال JavaScript به HTML بیندازیم.
افزودن مستقیم جاوا اسکریپت به یک فایل HTML
اولین روش برای افزودن جاوا اسکریپت به HTML یک روش مستقیم است. این کار را می توانید با استفاده از برچسب <script> </script> که باید تمام کد JS را که می نویسید در بر بگیرد؛ کد JS را می توان به دو مکان اضافه کرد :
- بین برچسب <head>
- بین برچسب <body>
بسته به جایی که کد JavaScript را در پرونده HTML خود اضافه می کنید، بارگیری متفاوت خواهد بود. روش توصیه شده این است که آن را در بخش <head> اضافه کنید تا از محتوای واقعی فایل HTML شما جدا شود. اما قرار دادن آن در <body> می تواند سرعت بارگذاری را بهبود بخشد، زیرا محتوای واقعی وب سایت سریعتر بارگیری می شود و فقط در این صورت JavaScript تجزیه می شود. برای این مثال، بیایید نگاهی به فایل 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>
در حال حاضر، کد فوق شامل JavaScript نیست و بنابراین نمی تواند زمان واقعی را نشان دهد. ما می توانیم کد زیر را اضافه کنیم تا مطمئن شویم که زمان صحیح را نشان می دهد :
var time = new Date(); console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());
ما این کد را با برچسب <script> و </script> پر خواهیم کرد و آن را در بالای کد HTML قرار می دهیم تا اطمینان حاصل کنیم که هر زمان صفحه بارگیری می شود، هشدار ایجاد می شود که زمان فعلی را به کاربر نشان می دهد. در اینجا نحوه تکمیل فایل 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>"
مثال JavaScript برای تأیید اعتبار آدرس ایمیل
JavaScript با کمک به شما در تأیید اعتبار کاربر در سمت کلاینت، به برنامه شما قدرت می بخشد. یکی از مهمترین ورودی های کاربر که اغلب به تأیید اعتبار نیاز دارد، آدرس های ایمیل است. این عملکرد JavaScript می تواند به شما کمک کند آدرس ایمیل وارد شده را قبل از ارسال به سرور تأیید کنید :
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 اضافه کنید.
سلام خسته نباشید ممنون از آموزش های خوبتون.
من ادغام فایل jsوhtmlیادگرفتم ولی این کدها برای من تازه کار نامفهومه نمیتونم به جواب برسم میشه ی مثال خیلی ساده بزنید.که مثلا تو جاوااسکریپت چی بنویسیم تا مثلافایل htmlیکی بشه وتواجرا نشون بده؟؟ متشکرم
سلام مهسا جان …
مشکلتونو واضح بفرمایید