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

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

کمی از تاریخچه زبان جاوا اسکریپت

جاوا اسکریپت در سال 1995 توسط Brendan Eich اختراع شد.

ابتدا جاوا اسکریپت پروژه ای به نام Mocha بود و سپس به LiveScript تغییر نام داد.

پس از مدتی طبق توافقی بین شرکت Sun و شرکت Netscape، نام جاوا اسکریپت بر روی آن نهاده شد.

اما با به هم خوردن توافق، از آن پس نام ECMAScript برای این زبان مطرح شد و این نام اکنون نام استاندارد این زبان است.

ECMAScript نام استاندارد زبان جاوا اسکریپت است.

چرا زبان برنامه نویسی جاوا اسکریپت را بیاموزیم؟

جاوا اسکریپت یکی از 3 زبانی هست که هر توسعه دهنده وب باید بیاموزد. HTML و CSS دو زبان دیگر هستند.

در حالی که اچ تی ام ال و سی اس اس معمولا با نمایش زیبایی یک وب‌سایت سر و کار دارند، جاوا اسکریپت یک عملیات را در یک صفحه وب برنامه ریزی می‌کند.

البته صفحات وب تنها مکانهای نیستند که زبان جاوا اسکریپت مورد استفاده قرار گرفته است.  همچنین بسیاری از نرم افزارهای دسکتاپ و سرور نیز با  قدرت گیری از جاوا اسکریپت در حال اجرا هستند.

 به عنوان مثال Node.js  که اکنون بسیار گسترده مورد استفاده قرار گرفته است با زبان جاوا اسکریپت فعالیت میکند.

 همچنین برخی از پایگاه های داده مانند MongoDB و CouchDB  زبان جاوا اسکریپت را به عنوان زبان برنامه نویسی خود برگزیده اند.

مثال هایی از عملکرد جاوا اسکریپت در یک صفحه وب

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

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

برای اجرای جاوا اسکریپت در HTML می توانید کد ها را در ببین تگ <script> قرار دهید. البته در جاوا اسکریپت می توان به صورت inline اچ تی ام ال نیز کد ها را اجرا کرد.

در مثال های آینده ممکنه است چند روش مختلف اجرای جاوا اسکریپت را مشاهده کنید که در آینده در مورد هر روش بیشتر توضیح خواهیم داد.

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

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

به عنوان مثال فانکشن getElementById() برای انتخاب یک المان با یک آیدی خاص مورد استفاده قرار می گیرد.

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

در مثال زیر با استفاده از فانکشن getElementById() المان با آی دی demo را انتخاب کرده و محتوای آن را تغییر می دهیم: (این مثال مدل inline html نوشته شده)

فصل 1 – مثال 1

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

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

تغییر استایل المان ها در جاوا اسکریپت بسیار ساده انجام می شود.
در مثال زیر ما نشان داده ایم که چگونه می توان سایز فونت یک متن را با استفاده از جاوا اسکریپت افزایش داد:

فصل 1 – مثال 2

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

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

در مثال زیر ما نشان داده ایم که چگونه می توان با استفاده از جاوا اسکریپت یک المان html را از دید کاربر مخفی کرد:

فصل 1 – مثال 3

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

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

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

فصل 1 – مثال 4