ColoMax
October 25th, 2015, 20:57
مقاله ای در مورد آشنایی با جاوا اسکریپت
وب جهانی در ابتدا رسانه ای محسوب می شد که چیزی بیشتر از متن در خود نداشت. در واقع نسخه اولیه HTML حتی قابلیت تعریف یک تصویر را نیز در صفحه نداشت. اما سایت های وب امروزی می توانند شامل قابلیت های بسیاری، از جمله تصویر گرافیکی، صوت، انیمیشن، ویدئو و سایر مطالب چند رسانه ای باشند.در همین راستا، زبان های اسکریپت نویسی وب، مانند جاوا اسکریپت ، یکی از ساده ترین روش های ایجاد رابطه متقابل با کاربران و خلق جلوه های دینامیک محسوب می شوند.
اصول اسکریپت نویسی در صفحات وب
اساسا کاربران، برای منتقل کردن دستورات خود به رایانه، از زبان های برنامه نویسی مانند c ، Basic و جاوا اسکریپت استفاده می کنند. اگر شما با HTML آشنا باشید ، باید گفت که حداقل یک زبان برنامه نویسی رایانه ای را می شناسید. به کمک HTML می توان ساختار یک صفحه وب را تعریف کرد.مرورگر نیز با اطاعت از این دستورات ، ظاهر صفحه را بر اساس ساختار مورد نظر تنظیم می نماید. از آن جا که HTML یک زبان علامت گذاری ساده متن می باشد، نمی توان با کاربران رابطه متقابل ایجاد کند و یا بر اساس شروط خاصی تصمیماتی را اتخاذ نماید. در واقع برای انجام اعمالی از این قبیل ، باید از زبان های پیچیده تری کمک گرفت . چنین زبانی می تواند یک زبان برنامه نویسی و یا یک زبان اسکریپت نویسی باشد.ضمن این که اکثر زبان های برنامه نویسی پیچیده هستند و در مقابل، زبان های اسکریپت نویسی معمولا از ساختار ساده تری برخوردارند. در این زبان ها می توان به کمک دستوراتی ساده، برخی از عملیات مورد نظر را انجام داد.
زبان های اسکریپت نویسی را می توان با دستورات HTML ترکیب کرده و مجموعه آن ها را در یک سند HTML نوشت. چنین سندی می تواند یک صفحه پویا و دینامیک وب را ایجاد نماید.اسکریپت ها و برنامه هادستورات جاوا اسکریپت برای اجرا شدن به یک مرورگر وب و یا به طور کلی به نرم افزار مفسر جاوا اسکریپت نیاز دارند. همچنین بعضی از زبان های برنامه نویسی باید قبل از اجرا، به کدهای زبان های ماشین ترجمه شده و یا به اصطلاح کامپایل شوند.در مقابل دستورات جاوا اسکریپت در هنگام اجرا، تفسیر می گردند. به عبارت دیگر مرورگر با خواندن هر یک از این دستورات، بلافاصله آن ها را تفسیر و اجرا می کند.توجه داشته باشید، زبان هایی که تفسیر می شوند، یک مزیت بزرگ دارند و آن این است که نوشتن و یا تغییر دادن دستورات چنین زبانی بسیار ساده است. مثلا تغییر یک برنامه جاوا اسکریپت به سادگی تغییر دادن دستورات HTML در یک سند HTML می باشد. این تغییرات به محض بارگذاری شدن مجدد سند، در صفحات وب اعمال خواهد شد.جاوا اسکریپت برای اولین بار ، توسط شرکت نت اسکیپ توسعه یافته و در مرورگر Netscape Navigator به کار گرفته شد. این زبان ، اولین زبان اسکریپتی در عرصه وب به شمار رفته و پر استفاده ترین آنها نیز می باشد.جاوا اسکریپت در ابتدا Live Script نام داشت و در سال ۱۹۹۵ در نسخه دوم Netscape Navigator به کار گرفته شد و سپس به دلیل رابطه ای که با جاوا برقرار نمود، جاوا اسکریپت نام گرفت.آموختن جاوا اسکریپت تقریبا به سادگی آموختن HTML است. دستورات این زبان می تواند مستقیما در یک سند HTML قرار بگیرد.»
موارد زیر را می توان از جمله قابلیت هایی دانست که این زبان به صفحات وب اضافه می کند :
افزودن پیغام های متحرک و متغییر در نوار وضعیت مرورگر
بررسی محتویات یک پرسش نامه و انجام عملیات لازم بر روی آن قبل از ارسال پرسش نامه به سوی سرویس دهنده.
نمایش پیغام دلخواه برای کاربر، چه داخل صفحه وب و چه از طریق پنجره های هشدار
ساخت انیمیشن و یا تصاویری که در اثر حرکت یا کلیک کردن ماوس تغییر می یابد.
تشخیص نوع مرورگر و نمایش دادن مطالب بر اساس آن.
قرار دادن ساعت ها یا همان زمان سنج های زیبا در صفحات وب
ایجاد Background زیبا برای صفحات وب
ایجاد Navigator Bar در صفحات وب.
تشخیص برنامه های اتصالی نصب شده و هشدار به کاربران، در صورت نیاز به یک برنامه اتصالی خاص.
و …موارد ذکر شده، تنها نمونه های اندکی از قابلیت هایی هستند که جاوا اسکریپت می تواند به یک صفحه وب بیفزاید.به گونه ای که با استفاده از این زبان می توان برنامه های کاملی را در یک صفحه خلق کرد.
چگونه جاوا اسکریپت در یک صفحه وب قرار می گیرد؟
همانطور که می دانید، زبان و فرمت مشهور و پرطرفدار HTML زبان استاندارد خلق صفحات وب می باشد.کد زیر، یک سند ساده HTML را نشان می دهد.
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Demo Page</title>
</head>
<body>
<h3>Hello World!</h3>
</body>
</html>
تگ های html, head و body از عناصر اصلی ایجاد یک سند HTML می باشد. در قسمت body محتوای صفحه که در مرورگر نمایش داده می شود قرار می گیرد. در میان تگ title عنوان صفحه درج می شود.خروجی کد فوق به این شکل خواهد بود :Hello World!
حال به نمونه کد زیر توجه نمایید:
علاوه بر تگ های اصلی HTML، در قسمت head تگ <script> قرار گرفته است. این تگ به مرورگر اعلام می کند از شروع تا پایان این تگ دستورات جاوا اسکریپت را خوانده و اجرا کند. مرورگرها به طور پیش فرض با مشاهده <script> زبان آن را جاوا اسکریپت در نظر می گیرند لذا نوشتن language=”javascript” داخل تگ <script> الزامی نیست اما بهتر است نوع (type) را برای آن تعریف نماییم و همانطور که در کد نمونه مشاهده می کنید نوع آن را به صورت: type=”text/javascript” نوشته ایم.
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script type=”text/javascript”>
function myfunc() {
document.getElementById(“demo”).innerHTML=”w elcome to my web page”;
}
</script>
</head>
<body>
<h3>Hello World!</h3>
<button onClick=”myfunc()”>Click Me</button>
<div id=”demo”></div>
</body>
</html>
خروجی کد بالا پس از اجرا روی مرورگر به صورت زیر خواهد بود:Hello World !
Click Me
محل قرا گرفتن کد جاوا اسکریپت
کد های جاوا اسکریپت در قسمت html, head,body و نیز به صورت یک فایل خارجی (فایلی با پسوند js) قابل استفاده و فراخوانی هستند. اما معمولا” به کار بردن آن به صورت یک فایل خارجی به دلیل کم شدن میزان کد صفحه و ویرایش آسان تر مناسب تر است. به ویژه اگر جااوااسکریپت ما در تعداد زیادی از صفحات استفاده شده باشد.
در قسمت head صفحه :
در نمونه کد فوق ، تگ <script> در قسمت head صفحه بین دستورات آغازین و پایانی قرار گرفته است:
اسکریپت هایی که در این قسمت قرار می گیرند، بلاقاصله اجرا نمی شوند، اما سایر اجزا و اسکریپت های صفحه می توانند به این اسکریپت ها ارجاع شوند. معمولا قسمت head صفحه ، برای قرار دادن توابع جاوا اسکریپت مورد استفاده قرار می گیرد. (توابع گروهی از دستورات هستند که با یک ارجاع، اجرا می شوند.)
در قسمت body
با قرار گرفتن فایل جاوا اسکریپت در قسمت body با لود شدن صفحه مستقیما” اجرا می گردد. معمولا” اسکریپت های شمارنده ها و برخی اسکریپت های آماری در بخش body قرا می گیرد.
درون یک سند HTML:
چنین عبارت هایی، کنترل گرهای حوادث نامیده می شوند و می توانند رویدادهای خاصی را با آن دستور HTML فعال نمایند. کنترل گرهای رویدادها در واقع نوع خاصی از اسکریپت محسوب می شوند که به دستور نیاز ندارند.
در یک فایل جداگانه:
جاوا اسکریپت از فایل های خارجی با پسوند .js پشتیبانی می کند. این فایل ها می توانند حاوی اسکریپت هایی باشند که از داخل یک سند HTML به آن ها ارجاع داده می شوند. نحوه فرا خوانی یک فایل خارجی جاوا اسکریپت (demo.js) به ترتیب زیر می باشد :
<script type=”text/javascript” src=”scripts/demo.js”></script>
مزایای جاوا اسکریپت :
اضافه کردن بخش های پویا به یک سند ساده HTML
برخی از عملیات را نمی توان بدون استفاده از این زبان برنامه نویسی انجام داد. نظیر تعامل با کاربر، یافتن اطلاعات کاربری بازدید کنندگان نظیر IP های آنها و موارد دیگر
نزدیک بودن جاوا اسکریپت به زبان های برنامه نویسی دیگر نظیر C, C++ و یا C#
امکان استفاده از کتابخانه های آماده این زبان مانند jQuery
سادگی در کد نویسی و پیاده سازی بدون درگیر شدن با کامپایلرهای پیچیده
معایب جاوا اسکریپت :
از جمله معایب جاوا اسکریپت می توان موارد برتر زیر را بر شمرد:
کند بودن در زمان اجرا بدلیل عدم کامپایل شدن کدها.
وب جهانی در ابتدا رسانه ای محسوب می شد که چیزی بیشتر از متن در خود نداشت. در واقع نسخه اولیه HTML حتی قابلیت تعریف یک تصویر را نیز در صفحه نداشت. اما سایت های وب امروزی می توانند شامل قابلیت های بسیاری، از جمله تصویر گرافیکی، صوت، انیمیشن، ویدئو و سایر مطالب چند رسانه ای باشند.در همین راستا، زبان های اسکریپت نویسی وب، مانند جاوا اسکریپت ، یکی از ساده ترین روش های ایجاد رابطه متقابل با کاربران و خلق جلوه های دینامیک محسوب می شوند.
اصول اسکریپت نویسی در صفحات وب
اساسا کاربران، برای منتقل کردن دستورات خود به رایانه، از زبان های برنامه نویسی مانند c ، Basic و جاوا اسکریپت استفاده می کنند. اگر شما با HTML آشنا باشید ، باید گفت که حداقل یک زبان برنامه نویسی رایانه ای را می شناسید. به کمک HTML می توان ساختار یک صفحه وب را تعریف کرد.مرورگر نیز با اطاعت از این دستورات ، ظاهر صفحه را بر اساس ساختار مورد نظر تنظیم می نماید. از آن جا که HTML یک زبان علامت گذاری ساده متن می باشد، نمی توان با کاربران رابطه متقابل ایجاد کند و یا بر اساس شروط خاصی تصمیماتی را اتخاذ نماید. در واقع برای انجام اعمالی از این قبیل ، باید از زبان های پیچیده تری کمک گرفت . چنین زبانی می تواند یک زبان برنامه نویسی و یا یک زبان اسکریپت نویسی باشد.ضمن این که اکثر زبان های برنامه نویسی پیچیده هستند و در مقابل، زبان های اسکریپت نویسی معمولا از ساختار ساده تری برخوردارند. در این زبان ها می توان به کمک دستوراتی ساده، برخی از عملیات مورد نظر را انجام داد.
زبان های اسکریپت نویسی را می توان با دستورات HTML ترکیب کرده و مجموعه آن ها را در یک سند HTML نوشت. چنین سندی می تواند یک صفحه پویا و دینامیک وب را ایجاد نماید.اسکریپت ها و برنامه هادستورات جاوا اسکریپت برای اجرا شدن به یک مرورگر وب و یا به طور کلی به نرم افزار مفسر جاوا اسکریپت نیاز دارند. همچنین بعضی از زبان های برنامه نویسی باید قبل از اجرا، به کدهای زبان های ماشین ترجمه شده و یا به اصطلاح کامپایل شوند.در مقابل دستورات جاوا اسکریپت در هنگام اجرا، تفسیر می گردند. به عبارت دیگر مرورگر با خواندن هر یک از این دستورات، بلافاصله آن ها را تفسیر و اجرا می کند.توجه داشته باشید، زبان هایی که تفسیر می شوند، یک مزیت بزرگ دارند و آن این است که نوشتن و یا تغییر دادن دستورات چنین زبانی بسیار ساده است. مثلا تغییر یک برنامه جاوا اسکریپت به سادگی تغییر دادن دستورات HTML در یک سند HTML می باشد. این تغییرات به محض بارگذاری شدن مجدد سند، در صفحات وب اعمال خواهد شد.جاوا اسکریپت برای اولین بار ، توسط شرکت نت اسکیپ توسعه یافته و در مرورگر Netscape Navigator به کار گرفته شد. این زبان ، اولین زبان اسکریپتی در عرصه وب به شمار رفته و پر استفاده ترین آنها نیز می باشد.جاوا اسکریپت در ابتدا Live Script نام داشت و در سال ۱۹۹۵ در نسخه دوم Netscape Navigator به کار گرفته شد و سپس به دلیل رابطه ای که با جاوا برقرار نمود، جاوا اسکریپت نام گرفت.آموختن جاوا اسکریپت تقریبا به سادگی آموختن HTML است. دستورات این زبان می تواند مستقیما در یک سند HTML قرار بگیرد.»
موارد زیر را می توان از جمله قابلیت هایی دانست که این زبان به صفحات وب اضافه می کند :
افزودن پیغام های متحرک و متغییر در نوار وضعیت مرورگر
بررسی محتویات یک پرسش نامه و انجام عملیات لازم بر روی آن قبل از ارسال پرسش نامه به سوی سرویس دهنده.
نمایش پیغام دلخواه برای کاربر، چه داخل صفحه وب و چه از طریق پنجره های هشدار
ساخت انیمیشن و یا تصاویری که در اثر حرکت یا کلیک کردن ماوس تغییر می یابد.
تشخیص نوع مرورگر و نمایش دادن مطالب بر اساس آن.
قرار دادن ساعت ها یا همان زمان سنج های زیبا در صفحات وب
ایجاد Background زیبا برای صفحات وب
ایجاد Navigator Bar در صفحات وب.
تشخیص برنامه های اتصالی نصب شده و هشدار به کاربران، در صورت نیاز به یک برنامه اتصالی خاص.
و …موارد ذکر شده، تنها نمونه های اندکی از قابلیت هایی هستند که جاوا اسکریپت می تواند به یک صفحه وب بیفزاید.به گونه ای که با استفاده از این زبان می توان برنامه های کاملی را در یک صفحه خلق کرد.
چگونه جاوا اسکریپت در یک صفحه وب قرار می گیرد؟
همانطور که می دانید، زبان و فرمت مشهور و پرطرفدار HTML زبان استاندارد خلق صفحات وب می باشد.کد زیر، یک سند ساده HTML را نشان می دهد.
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Demo Page</title>
</head>
<body>
<h3>Hello World!</h3>
</body>
</html>
تگ های html, head و body از عناصر اصلی ایجاد یک سند HTML می باشد. در قسمت body محتوای صفحه که در مرورگر نمایش داده می شود قرار می گیرد. در میان تگ title عنوان صفحه درج می شود.خروجی کد فوق به این شکل خواهد بود :Hello World!
حال به نمونه کد زیر توجه نمایید:
علاوه بر تگ های اصلی HTML، در قسمت head تگ <script> قرار گرفته است. این تگ به مرورگر اعلام می کند از شروع تا پایان این تگ دستورات جاوا اسکریپت را خوانده و اجرا کند. مرورگرها به طور پیش فرض با مشاهده <script> زبان آن را جاوا اسکریپت در نظر می گیرند لذا نوشتن language=”javascript” داخل تگ <script> الزامی نیست اما بهتر است نوع (type) را برای آن تعریف نماییم و همانطور که در کد نمونه مشاهده می کنید نوع آن را به صورت: type=”text/javascript” نوشته ایم.
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script type=”text/javascript”>
function myfunc() {
document.getElementById(“demo”).innerHTML=”w elcome to my web page”;
}
</script>
</head>
<body>
<h3>Hello World!</h3>
<button onClick=”myfunc()”>Click Me</button>
<div id=”demo”></div>
</body>
</html>
خروجی کد بالا پس از اجرا روی مرورگر به صورت زیر خواهد بود:Hello World !
Click Me
محل قرا گرفتن کد جاوا اسکریپت
کد های جاوا اسکریپت در قسمت html, head,body و نیز به صورت یک فایل خارجی (فایلی با پسوند js) قابل استفاده و فراخوانی هستند. اما معمولا” به کار بردن آن به صورت یک فایل خارجی به دلیل کم شدن میزان کد صفحه و ویرایش آسان تر مناسب تر است. به ویژه اگر جااوااسکریپت ما در تعداد زیادی از صفحات استفاده شده باشد.
در قسمت head صفحه :
در نمونه کد فوق ، تگ <script> در قسمت head صفحه بین دستورات آغازین و پایانی قرار گرفته است:
اسکریپت هایی که در این قسمت قرار می گیرند، بلاقاصله اجرا نمی شوند، اما سایر اجزا و اسکریپت های صفحه می توانند به این اسکریپت ها ارجاع شوند. معمولا قسمت head صفحه ، برای قرار دادن توابع جاوا اسکریپت مورد استفاده قرار می گیرد. (توابع گروهی از دستورات هستند که با یک ارجاع، اجرا می شوند.)
در قسمت body
با قرار گرفتن فایل جاوا اسکریپت در قسمت body با لود شدن صفحه مستقیما” اجرا می گردد. معمولا” اسکریپت های شمارنده ها و برخی اسکریپت های آماری در بخش body قرا می گیرد.
درون یک سند HTML:
چنین عبارت هایی، کنترل گرهای حوادث نامیده می شوند و می توانند رویدادهای خاصی را با آن دستور HTML فعال نمایند. کنترل گرهای رویدادها در واقع نوع خاصی از اسکریپت محسوب می شوند که به دستور نیاز ندارند.
در یک فایل جداگانه:
جاوا اسکریپت از فایل های خارجی با پسوند .js پشتیبانی می کند. این فایل ها می توانند حاوی اسکریپت هایی باشند که از داخل یک سند HTML به آن ها ارجاع داده می شوند. نحوه فرا خوانی یک فایل خارجی جاوا اسکریپت (demo.js) به ترتیب زیر می باشد :
<script type=”text/javascript” src=”scripts/demo.js”></script>
مزایای جاوا اسکریپت :
اضافه کردن بخش های پویا به یک سند ساده HTML
برخی از عملیات را نمی توان بدون استفاده از این زبان برنامه نویسی انجام داد. نظیر تعامل با کاربر، یافتن اطلاعات کاربری بازدید کنندگان نظیر IP های آنها و موارد دیگر
نزدیک بودن جاوا اسکریپت به زبان های برنامه نویسی دیگر نظیر C, C++ و یا C#
امکان استفاده از کتابخانه های آماده این زبان مانند jQuery
سادگی در کد نویسی و پیاده سازی بدون درگیر شدن با کامپایلرهای پیچیده
معایب جاوا اسکریپت :
از جمله معایب جاوا اسکریپت می توان موارد برتر زیر را بر شمرد:
کند بودن در زمان اجرا بدلیل عدم کامپایل شدن کدها.