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

تاریخچه

اولین وب بروزر، موزاییک (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 باز کنید. و با اسکریپت اکسترنال عنوان صفحه را به نام خود تغییر دهید.