۱- مقدمه – دنیای دیجیتال

تاریخچه

اولین وب بروزر، موزاییک (Mosaic) نام داشت که در سال ۱۹۹۳ ارائه شد. یک سال بعد برنامه نویسان موزایک شرکت نتسکیپ (Netscape) را تأسیس کردند و نام بروزر خودشان را نتسکیپ نویگیتور (Netscape Navigator) گذاشتند. (اکنون شرکت نتسکیپ به موزیلا و نویگیتور به فایرفاکس تغییر نام داده است.) در سال ۱۹۹۵ آنها تصمیم گرفتند یک زبان برنامه نویسی برای توسعه صفحات وب ایجاد کنند.

بنابراین برِندن ایچ (Brendan Eich) که یکی از برنامه نویسان شرکت نتسکیپ بود، این کار را با الهام از زبان جاوا انجام داد.

گفته شده است که او این کار تنها در ۱۰ روز انجام داد. در ابتدا نام آن را مُکا (Mocha) گذاشت. ولی بعد از ۶ ماه به دلیل علاقه‌ای که به زبان جاوا داشت، نام آن را به جاواسکریپت تغییر داد.

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

شرکت نتسکیپ زبان جاواسکریپت را در سال ۱۹۹۶ به سازمان استاندارد آی تی (ECMA) برد. و از آن به بعد تحت آن استاندارد به نام اکماسکریپت (ECMAScript) ارائه شد و تا کنون پیوسته در حال پیشرفت است.

پس از آن شرکت مایکروسافت هم یک زبان مشابه برای بروزر خود (Internet Explorer) به نام جی سکریپت (JScript) ارائه کرد. که تقلیدی از جاواسکریپت بود.

امروزه جاواسکریپت محبوب ترین زبان اسکریپت نویسی سمت کاربر می‌باشد. به طوریکه بیش از ۹۰٪ وبسایت‌های پرمخاطب مثل گوگل و فیسبوک از آن استفاده می‌کنند.

اینفوگرافیک تاریخچه جاواسکریپت

جاواسکریپت چه کارهایی می‌تواند انجام دهد؟

دسترسی: بررسی کردن محتوای صفحه
تغییر: تغییر دادن محتوای صفحه
عملیات: انجام دادن یک دستورالعمل
واکنش: نشان دادن واکنش به رویدادها

مثلا در یک فرم ورود:

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

برنامه یا اسکریپت

برنامه (Program) و اسکریپت (Script) هر دو مثل یک دستور آشپزی است. یک مجموعه‌ای از دستورات است که برای رسیدن به نتیجه باید آنها را یک به یک انجام داد.

شباهت برنامه با اسکریپت

تعدد: شامل چندین دستور می شود. به یک دستور برنامه یا اسکریپت نمی‌گویند.
ترتیب: هر دستور بعد از کدام دستور و قبل از کدام باید انجام شود.

تفاوت برنامه با اسکریپت

اجرا: اسکریپت توسط یک نرم افزار دیگر (مثل وب بروزر) اجرا می شود. در صورتیکه برنامه برای اجرا شدن نیازی به برنامه دیگر ندارد و مستقلا بر روی سیستم عامل اجرا می‌شود.
استقلال: اسکریپت به سیستم عامل وابسته نیست و روی هر سیستم عاملی (اندروید، ویندوز و …) کار می‌کند، در حالیکه برنامه‌ها تنها روی سیستم عاملی که برای آن تهیه شده‌اند، کار می‌کند.
سادگی: تولید و توسعه نرم افزار به روش اسکریپت نویسی بسیار ساده‌تر از برنامه نویسی است.
سرعت: اسکریپت‌ها چون برای اجرا نیاز به برنامه دیگری دارند، کندتر از برنامه ها اجرا می شوند.

جاواسکریپت، یک زبان اسکریپت نویسی است. نه برنامه نویسی

Object Oriented Programming – OOP

شیء گرایی (OOP) یک شیوه تولید و توسعه نرم افزار است. به دلیل آنکه جاواسکریپت با این شیوه کار می کند، ابتدا باید با آن آشنا شوید.

چند اصطلاح در شیء گرایی:

آبجکت (Object): چیز، شیء، موجود
کلاس (Class): رسته، نوع
اینستنس (Instance): نمونه، مورد

به عنوان مثال در تصویر بالا

آبجکت میز: میز شماره یک، یک آبجکت است.
کلاس میزها: در تصویر بالا چندین میز وجود دارد که همگی نمونه‌ای (اینستنس) از کلاس میزها هستند.
یک کلاس میز وجود دارد، در حالیکه چندین آبجکت میز دیده می‌شود.
هر یک میز یک آبجکت است که یک اینستنس از کلاس میزها بشمار می‌رود.

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

هر آبجکتی دو چیز دارد:

پراپرتی (Property): ویژگی، خصوصیت، صفت، دارایی
متد (Methods): روند، روال، قابلیت، کارهایی که می‌تواند بکند.

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

پراپرتی: رنگ، اندازه، وزن، …

متد: قابلیت عکس گرفتن، قابلیت اتصال وای فای، …

هر آبجکتی، مجموعه‌ای از پراپرتی‌ها و متدهاست.

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

در مثال زیر این اتومبیل یک آبجکت است.

پراپرتی‌ها:

عرض: ۱۷۶ سانتیمتر
طول: ۴۵۸ سانتیمتر
ارتفاع: ۱۴۲ سانتیمتر
وزن: ۱۳۵۰ کیلوگرم
رنگ: آبی

متدها:

شیشه بالابر برقی
دزدگیر الکترونیکی
نمایش باد لاستیک

The Browser Object Model – BOM

از نظر جاواسکریپت هر چیزی در وب بروزر یک آبجکت است.

مثلا یک پاراگراف، یک تصویر، یک لینک و … در صفحه وب، یک آبجکت است. که می‌تواند پراپرتی (طول و عرض و …) و متدهایی (کلیک، حرکت موس، …) داشته باشد.

<!DOCTYPE html>
<html>

  <head>
    <title> ... </title>
    <style> ... </style>
  </head>

  <body>
    <h1> ... </h1>
    <script> ... </script>
  </body>

</html>

Object.property

به عنوان مثال:

document.dir
document.charset
document.title

Object.method

به عنوان مثال:

document.getElementById( )
document.querySelector( )
document.write( )

Event-Driven Programming

رویدادگرایی، سبکی برای توسعه نرم افزار است که در آن، رویدادها (Event) مسیر اجرای برنامه را تعیین می‌کند. هر کلیک ماوس یا زدن یک دکمه کیبرد، می‌تواند یک ایونت باشد. و هر ایونت می‌تواند یک متد را اجرا کند.

Object.event

به عنوان مثال:

.onclick
.onkeypress
.onscroll

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

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

Internal


<script>

// JavaScript goes here

</script>

External


<script src="myScript.js" ></script>

تگ اسکریپت را کجا بنویسیم؟

Head

<!DOCTYPE html>
<html>
  <head>
    ...
    <script src="myScript.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

Body

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script src="myScript.js"></script>
  </body>
</html>

تمرین

ابتدا یک پوشه به نام js1 بسازید. و در آن برای هر تمرین در هر جلسه پوشه‌ای جداگانه مشابه تصویر زیر بسازید. (ابتدا شماره جلسه سپس شماره تمرین)

تمرین ۱

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

تمرین ۲

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