معرفی javascript
در این جلسه به آموزش معرفی javascript در زبان کد نویسی HTML خواهیم پرداخت. لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
یک اسکریپت قطعه ی کوچکی از برنامه است که می تواند به وب سایت شما تعامل اضافه کند. به عنوان مثال یک اسکریپت می تواند یک هشدار پاپ آپ مربوط به باکس پیغام تولید کند، یا یک منوی رو به پایین ایجاد کند. این اسکریپت توسط javascript یا VBScript نوشته می شود. شما می توانید با استفاده از هر زبان اسکریپتی، کارکردهای متنوع کوچکی به نام گردانندگان رویداد بنویسید و سپس می توانید آن عملکردها را با استفاده از ویژگی های HTML اجرا کنید.
ین روزها فقط javascript و چارچوب های متناظر با آن توسط بسیاری از توسعه دهندگان وب استفاده می شوند. VBScript حتی توسط برخی مرورگرها پشتیبانی هم نمی شود. شما می توانید کد javascript را در یک فایل مجزا نگهداری کرده و سپس هرزمان که الزم بود آن را وارد کنید، یا می توانید قابلیت را در داخل خود داکیومنت HTML تعریف کنید. اجازه بدهید هر دو مورد را یکی یکی با مثال های مناسب بررسی کنیم.
جاوااسکریپت خارجی
اگر قصد دارید قابلیتی را تعریف کنید که در انواع داکیومنت های HTML استفاده می شود، بهتر است آن قابلیت را در یک فایل مجزای جاوااسکریپت حفظ کرده و آن فایل را وارد داکیومنت های HTML خود کنید. یک فایل جاوااسکریپت دارای ضمیمه هایی مانند js می باشد که با استفاده از برچسب <script <وارد فایل های HTML می شود.
مثال
تصور کنید که با استفاده از جاوااسکریپت در js.script یک عملکرد کوچک را تعریف می کنیم که دارای کد زیر می باشد
function Hello()
{
alert("Hello, World");
}
اکنون اجازه بدهید از فایل جاوااسکریپت خارجی بالا در داکیومنت HTML خود استفاده کنیم، مانند زیر
<!DOCTYPE html> <html> <head> <title>Javascript External Script<title> <script src="/html/script.js" type="text/javascript" /><script> <head> <body> <input type="button" onclick="Hello();" name="ok" value="Click Me" /> <body> <html>
این مثال نتیجه ای را به دنبال خواهد داشت که می توانید با کلیک کردن برروی دکمه ی ارائه شده توسط این مثال آن را امتحان کنید.
جاوا اسکریپت درونی
شما می توانید کد جاوااسکریپت را مستقیما روی داکیومنت HTML خود بنویسید. معموال کد اسکریپت را با استفاده از برچسب <script> در سربرگ داکیومنت نگهداری می کنیم در غیر این صورت هیچ محدودیتی وجود نداشته و می توانید کد خود را در هر جایی در داکیومنت به جز داخل برچسب <script> نگه دارید.
<!DOCTYPE html>
<html>
<head>
<title>Javascript Internal Script<title>
<script type="text/javascript">
function Hello() {
alert("Hello, World");
}
<script>
<head>
<body>
<input type="button" onclick="Hello();" name="ok" value="Click Me" />
<body>
<html>
این مثال نتیجه ای را به دنبال خواهد داشت که می توانید با کلیک کردن برروی دکمه ی ارائه شده توسط این مثال آن را امتحان کنید.
گردانندگان رویدادها ()EventHandler
گردانندگان رویدادها عملکردهای تعریف شده ی ساده ای می باشند که می توانند برعلیه هر یک از عملکردهای ماوس یا صفحه کلید فراخوانده شوند. شما می توانید عملکرد خود را در یک گرداننده ی رویداد تعریف کنید که می تواند یک خط تا ۱۰۰۰ خط کد باشد. در زیر مثالی را می بینید که چگونگی نگارش یک گرداننده ی رویداد را نشان می دهد. اجازه بدهید یک تیتر ساده ی ()EventHandler را در تیتر داکیومنت بنویسیم. هر زمان که کاربر ماوس را روی یک پاراگراف بیاورد، این عملکر را فرا خواهیم خواند.
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example<title>
<script type="text/javascript">
function EventHandler() {
alert("I'm event handler!!");
}
<script>
<head>
<body>
<p onmouseover="EventHandler();">Bring your mouse here to see an alert<p>
<body>
<html>
معرفی javascript
این مثال نتیجه ی زیر را تولید خواهد کرد، ماوس خود را روی آن آورده تا نتیجه را ببینید.
Bring your mouse here to see an alert
مخفی کردن اسکریپت ها از مرورگرهای قدیمی
گرچه بیشتر مرورگرها این روزها جاوا اسکریپت را پشتیبانی می کنند، اما هنوز مرورگرهایی قدیمی تری هستند که این کار را نمی کنند. اگر مرورگری جاوااسکریپت را پشتیبانی نکند، به جای اجرای اسکریپت کدی را به کاربر نمایش می دهد. برای جلوگیری از این مسئله می توانید کامنت های HTML را در اطراف جاوااسکریپت قرار دهید، همانطور که در زیر می بینید
JavaScript Example
<script type="text/javascript">
<!--
document.write("Hello Javascript!");
//-->
<script>
VBScript Example
<script type="text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
<script>
معرفی javascript
عنصر <noscript>
می توانید یک سری اطلاعات جایگزین به کاربری ارائه دهید که مرورگر وی اسکریپت ها را پشتیبانی نمی کند، همچنین برای کاربرهایی که گزینه ی script مرورگر خود را غیرفعال کرده اند. شما می توانید اینکار را با استفاده از برچسب <noscript >انجام دهید.
JavaScript Example
<script type="text/javascript">
<!--
document.write("Hello Javascript!");
//-->
</script>
<noscript>Your browser does not support Javascript!
<noscript>
معرفی javascript
برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید.
تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید.
امیدوارم این سری آموزشی مورد استفاده شما واقع شده باشد. با تشکر از همراهی شما دوستان و همراهان عزیز سایت لرن پارسی و عرض خسته نباشید خدمت شما.
دیدگاه ها