ورود کاربر

آموزش جاوا اسکریپت

معرفی جاوا اسکریپت

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

- جاوا اسکریپت می تواند محتوای HTML را تغییر دهد. یکی از متدهای فراوان HTML متد getElementById() است.

در مثال زیر از این متد برای پیدا کردن عنصر HTML (با شناسه id=”demo") استفاده کرده و محتوای آن را با استفاده از متد innerHTML به Hello Java تغییر می دهیم.

آموزش جاوا اسکریپت - کد3

- جاوا اسکریپت می تواند خصیصه HTML را تغییر دهد.

در مثال زیر از جاوا اسکریپت برای تغییر تصویر در HTML استفاده می کنیم، یعنی خصیصه src تگ <img> را تغییر می دهیم:

آموزش جاوا اسکریپت - کد4

برای اجرای این مثال، لازم است که آدرس دو فایل gif را مشخص نماییم. بنابراین برای اجرای مثال ابتدا دو فایل زیر را دانلود کرده و در مسیر برنامه قرار دهید. برای اینکار، روی عکس ها کلیک راست کرده و از منوی ظاهر شده گزینه save image را بزنید.

turn off turn of

- جاوا اسکریپت می تواند استیل (CSS) عنصر HTML را تغییر دهد.

تغییر استیل عنصر در اصل نوعی تغییر خصیصه تگ های HTML است. در این مثال اندازه فونت تگی با شناسه demo تغییر داده می شود:

آموزش جاوا اسکریپت - کد 5

- جاوا اسکریپت می تواند اعتبار (درستی) اطلاعات وارده شده به یک صفحه را ارزیابی کنید.

اغلب برای اعتباربخشی صحت اطلاعات وارده کاربر در صفحات وب از زبان جاوا اسکریپت استفاده می شود. در مثال زیر از کاربر خواسته می شود که عددی بین 1 تا 10 را وارد کند و دکمه submit را کلیک کند. اگر عدد در دامنه 1-10 باشد، پیغام Input OK نمایش داده می شود و اگر عدد در این دامنه نباشد، پیغام معتبر نبود ورودی یعنی input not valid به کاربر داده می شود:

آموزش جاوا اسکریپت - کد6

توجه: آیا می دانید جاوا اسکریپت و جاوا دو زبان کاملاً متفاوت هستند؛ چه از نظر زبان و چه طراحی. جاوا اسکریپت در سال 1995 توسط برندان اریش اختراع شده و در سال 1997 به استاندارد ECMA تبدیل شد. نام رسمی آن ECMA_262 است. آخرین نسخه رسمی منتشر شده جاوا اسکریپت نسخه ECMAScript است که در ژوئن 2015 منتشر شده است.

محل قرارگیری کدهای جاوا اسکریپت

کدهای جاوا اسکریپت را می توان در بدنه یا هد سند html نوشت.

تگ <script>

در کدهای html، کد جاوا اسکریپت را بایستی در بین دو تگ <script> و <script/> قرار داد.

تذکر: همانطور که شما مستحضر هستید، تگ های html به استثناء معدودی از موارد دارای یک تگ شروعی (opening tag) و یک تگ پایانی (closing tag) است. تگ پایانی از طریق / اول تگ مشخص می شود.مثال:

آموزش جاوا اسکریپت - کد 7

تذکر: من بعد از آوردن الگوی صفحات html در مثال ها خودداری می شود. فقط کد جاوا اسکریپت مثال قید می شود. همچنین در نسخه های قدیمی تر ممکن است تگ script همراه با معرفی نوع استفاده شود (<script type = "text/javascript>) اما در نسخه جدید html جاوا اسکریپت زبان پیش فرض بوده و نیازی به آوردن خصیصه type در تگ های اسکریپت نیست.

توابع و واقعه های جاوا اسکریپت

تابع (Functions) جاوا اسکریپت یک بلوک یا قطعه کد است که در زمان فراخوانی اجرا می شود. مثلاً تابع زمانی اجرا می شود که واقعه ای (event) رخ داده باشد، مثل زمانی که کاربر روی دکمه ای کلیک کند. در ادامه آموزش در این مورد بیشتر بحث می شود.

جاوا اسکریپت را در هد بگذاریم یا بدنه html

ما می توانیم هر تعداد اسکریپت که مایل باشیم در یک سند html درج کنیم. اسکریپت ها را می توانیم در بدنه (<body>) یا هد (<head>) سند یا در هر دوی آنها بگذاریم. اما نگهداری همه کدها در یک فایل یا جای منفرد عادت بهتری است.

جاوا اسکریپت در head

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

آموزش جاوا اسکریپت - کد8

جاوا اسکریپت در body

در مثال زیر تابع جاوا اسکریپت در بخش بدنه صفحه html قرار دارد. این تابع نیز در صورت کلیک دکمه try it فراخوانی می شود.

آموزش جاوا اسکریپت - کد 9

نکته: بهتر است عادت کنیم تمامی کدهای جاوا اسکریپت موجود در یک سند html را در آخر صفحه و قبل از بسته شدن تگ <html/> قرار دهیم. این کار موجب می شود که بارگذاری صفحه ما در جستجوگر وب سریعتر انجام شود، زیرا نمایش محتوای html توسط خواندن کدهای جاوا اسکریپت بلوکه نمی شود.

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

جاوا اسکریپت را می توان در یک فایل جدا و بیرون از سند html قرار داد. این مسئله بخصوص زمانی اهمیت دارد، که یک قطعه کد یا تابع به صورت تکراری در صفحات متعددی از یک سایت تکرار می شود. پسوند فایل های جاوا اسکریپت js است. برای استفاده از فایل جاوا اسکریپت بیرونی، در سند html متناظر آن خصیصه منبع (src) را در تگ <script> به نام فایل ست می کنیم. مثال:

آموزش جاوا اسکریپت - گد 10

مرجع به فایل جاوا اسکریپت بیرونی مهم نیست که در بدنه یا هد سند html باشد. اسکریپت طوری رفتار می کند که انگار در خود بدنه یا هد نوشته شده است. در اسکرپیت های خارجی (فایل اسکریپت مجزا) نباید از تگ <script> استفاده کرد.

مزایای استفاده از فایل مجزا

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

- html و کدهای جاوا اسکریپت از هم جدا هستند.

- خواندن و نگهداری و به روز رسانی کدهای html و جاوا اسکریپت را آسان می کند.

- فایل های جاوا اسکریپت که در سیستم کاربر catch می شوند، موجب سریعتر شدن بالا آمدن صفحه می شود.

خروجی جاوا اسکریپت

جاوا اسکریپت دارای توابع پیش فرض (built-in) برای پرینت یا نمایش خروجی نیست. خروجی جاوا اسکریپت به طرق زیر قابل نمایش است:

- نوشتن خروجی در یک کادر اخباری یا alert box با استفاده از تابع () window.alert

- نمایش خروجی در یک سند html با استفاده از تابع () document.write

- نوشتن خروجی در یک عنصر html با استفاده از تابع innerHTML

- نوشتن خروجی در کنسول جستجوگر با استفاده از () console.log

استفاده از () window.alert

می توان خروجی جاوا اسکریپت را به صورت یک دیالوگ اخباری نمایش داد. مثال:

windows altert

استفاده از () document.write

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

توجه: استفاده از document.write() در سند html که به طور کامل بارگذاری شده است، موجب می شود که تمامی محتوای html موجود در صفحه حذف شود. مثال:

document write

استفاده از روش innerHTML

برای دستیابی به یک عنصر html، می توان از متد (document. getElementById (id جاوا اسکریپت استفاده کرد. خصیصه id مشخص می کند که کدام عنصر html مد نظر است. خصیصه innerHTML محتوای html را مشخص می کند. مثال:

innerHTML

اکثر مواقع برای نمایش داده در html، مقدار را در یک خصیصه innerHTML ست می کنیم.

استفاده از تابع ()console.log

برای نمایش خروجی کد جاوا اسکریپت، می توان از کنسول برنامه جستجوگر استفاده کرد. این کنسول با زدن دکمه F12 صفحه کلید فعال می شود. مثال:

console log

 مژده به همکاران عزیز:

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

ثبت سفارش ترجمه متون

 مژده به همکاران عزیز:

مرکز خدمات پرستار راه اندازی شد. برای ثبت سفارش نگارش پیش پروپوزال، نگارش پروپوزال، نگارش پایان نامه، تجزیه و تحلیل آماری پایان نامه، تهیه اسلاید پاورپوینت دفاع به لینک زیر مراجعه نمایید. توجه بفرمایید که پوسته و ظاهر سایت تغییر می کند، زمانیکه وارد ساب دامین thez.parastar.info برای ثبت سفارش می شوید. اما این ساب دامین همانطور که از نامش پیداست مربوط به وبگاه پرستار است و تحت مسئولیت وبگاه پرستار عمل می کند. فقط کافی است ثبت نام کرده و پنل کاربری خود را فعال کنید. از قیمت ها و کیفیت کار تز شگفت زده خواهید شد.

ثبت سفارش پروپوزال و پایان نامه

بالای صفحه
JSN Boot template designed by JoomlaShine.com