طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش JavaScript – بخش اول

آموزش JavaScript - بخش اول

سلام و درود بر دوستان و همراهان گرامی سایت سازان. در خدمت شما عزیزان هستم در آموزش JavaScript – بخش اول  و در این جلسه می خواهم مباحث زیر، که مطالب مقدماتی جاوا اسکریپت می باشند را برای شما دوستان گرامی شرح دهم:

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

در ابتدا مروری داشته باشیم بر آنچه که تا کنون آموخته ایم:

در آموزش HTML آموختیم که چگونه میتوان با استفاده از ابزاری به نام تگ، المان های یک صفحه وب را تعریف و نشانه گذاری کنیم و گفتیم که در واقع با استفاده از زبان HTML اسکلت اصلی یک صفحه وب را ایجاد می کنیم.

در قدم بعدی نیاز داشتیم که این المان ها را زیبا سازی و سبک دهی کنیم که در آموزش CSS ویژگی های پرکاربرد را دیدیم و مهم ترین آنها را بررسی کردیم.

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

آشنایی اولیه با جاوا اسکریپت

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

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

onclick یک رویداد است (با رویداد ها در جلساتی آتی آشنا خواهیم شد) و یعنی زمانی که برروی این المان (که در اینجا المان ما یک دکمه می باشد) کلیک شد، اتفاقی روی دهد که در اینجا محتوای پاراگراف، با عبارت: :” محتوای پاراگراف تغییر یافت” جایگزین می شود.

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

آموزش JavaScript - بخش اول

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

در این دو مثالی که بررسی کردیم اسکریپت ها در تگ <botton>  نوشته شده اند. ممکن است بپرسید که همیشه اسکریپت ها به این صورت نوشته می شوند؟ کدهای جاوا اسکریپت را چگونه و در کجا باید نوشت؟

در پاسخ به این سوال باید خدمتتان عرض کنم که  با استفاده از تگ <script>  بازه ای را تعریف می کنیم و کدها را در آن می نویسیم. این بازه را می توان در تگ <head>  و یا در <body>  و یا در هر دو بخش قرار داد.

خب دوستان در اینجا توجهتان را به نکته ی زیر جلب می کنم:

در تگ <body>  تگ های <script>  آخرین تگ ها خواهند بود. یعنی بعد از تمام المان ها قرار می گیرند. خب به نظر شما چرا؟

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

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

علاوه بر این می توان اسکریپت ها را در یک فایل خارجی (که فایل را با پسوند .js ذخیره می کنیم) بنویسیم و این فایل را به سند HTML پیوند دهیم. به این ترتیب می توانیم یک فایل جاوااسکریپت را برای چندین صفحه بنویسیم. و اما به چه صورت فایل اسکریپت را به یک سند HTML متصل می کنیم؟

با استفاده از تگ <script>  و خصیصه src می توان این کار را انجام داد. همانطور که می دانید این خصیصه برای آدرس دهی استفاده می شود که در جلسه ششم آموزش HTML با آدرس دهی آشنا شدیم.

به عنوان مثال اگر فایلی با نام myScript.js و در کنار فایل index.html داشته باشیم، به صورت زیر، آن را به سند html پیوند می دهیم:

این تگ نیز می تواند در تگ <head>  و یا <body>  قرار بگیرد.

می توان چندین فایل خارجی جاوااسکریپت را به روش گفته شده به یک سند HTML پیوند داد.

در نوشتن کدهای جاوا اسکریپت در فایل خارجی، تگ <script>  را نمی نویسیم.

خب بعد از این اطلاعات اولیه می خواهیم ببینیم که به چه صورت می توان از کدها خروجی گرفت؟

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

با استفاده از متدهای زیر می توان هر داده ای را در خروجی مشاهده کرد:

  • innerHTML
  • document.write()
  • window.alert()
  • console.log()

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

innerHTML

زمانی که می خواهیم داده ای را در یک المان HTML بنویسیم در ابتدا باید به آن المان دسترسی پیدا کنیم. جهت دسترسی به المان ها، از متد document.getElementById()  استفاده می کنیم. این متد دسترسی به یک المان را از طریق id امکان پذیر می سازد (با استفاده از کلاس نیز می توان به المان ها دسترسی پیدا کرد.). زمانی که به المان مورد نظرمون دسترسی پیدا کردیم با استفاده از ویژگی innerHTML  می توان هر عبارتی را در آن نوشت.

آموزش JavaScript - بخش اول

document.write()

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

اگر عبارت ” فایل ضمیمه شده است” در مرورگر برگردانده شد، پس فایل ضمیمه شده است. بدین ترتیب می توان از این متد برای تست کدها و دستورات استفاده کرد.

یک نکته مهم در رابطه با این متد را بعد از بررسی مثال زیر خدمت شما عرض می کنم:

آموزش JavaScript - بخش اول

آموزش JavaScript - بخش اول

با توجه به مثال بالا، متد document.write()  تمام محتویات صفحه را حذف می کند و مقدار دریافتی خود را نمایش می دهد. همچنین این متد فقط برای تست استفاده می شود.

window.alert()

متدی سومی که معرفی شد، متد window.alert()  است که مقدار نوشته شده در پرانتز را در پنجره اخطار مرورگر نمایش می دهد:

آموزش JavaScript - بخش اول

console.log()

این متد نیز برای اشکال زدائی به کار می رود. بدین ترتیب که مقداری را به آن پاس می دهیم. این مقدار باید در قسمت console مرورگر (که با دکمه F12 می توانید به آن دسترسی داشته باشید) نمایش داده شود. اگر نمایش داده نشود، قاعدتا در نوشتن کدها خطایی رخ داده است که باید رفع شود.

آموزش JavaScript - بخش اول

خب دوستان، توجه کنید که با کاربرد این متد ها هنگام برنامه نویسی و اجرای پروژه آشنا خواهید شد. در ادامه ضمن آشنایی بیشتر با ساختار زبان برنامه نویسی جاوا اسکریپت، نکاتی را که هنگام نوشتن کدها، نیاز است بدانها توجه شود را بیان می کنیم.

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

جاوا اسکریپت ترکیبی از دستوراتی است که برنامه های جاوا اسکریپت را می سازند. خب حال ممکن است این سوال مطرح شود که برنامه جاوا اسکریپت چیست؟

برنامه های کامپیوتری، مجموعه ای از دستورالعمل هایی هستند که توسط کامپیوتر اجرا می شوند. در زبان برنامه نویسی این دستورالعمل ها را دستور (statement) می گوییم.

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

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

دستورات از ترکیب مقادیر (value)، عملگرها (operator)، اصطلاحات (expression) ، کلمات کلیدی (keyword) و توضیحات ساخته می شوند. در ادامه راجع به این موارد با شما دوستان صحبت می کنم:

مقادیر

در جاوا اسکریپت مقادیر به دو دسته تقسیم می شوند که عبارتند از مقادیر ثابت (fixed values و به آنها مقادیر تحت اللفظی نیز می گوییم.) و مقادیر متغیر ( variable value ). خب حالا کمی بیشتر این مقادیر را بررسی کنیم:

مقادیر تحت اللفظی

مقادیر تحت اللفظی مقادیر ثابتی هستند که در تعریف آنها، هیچ کلمه کلیدی استفاده نمی شود و به دو دسته تقسیم می شوند. در دسته اول اعداد جای می گیرند که با یا بدون اعشار نوشته می شوند. در دسته دوم رشته ها قرار می گیرند که منظور از رشته، حروف و عبارات متنی می باشد که آنها را در علامت نقل قول دوگانه یا یگانه می نویسیم.

به عنوان مثال دستور زیر مقدار ثابت 25 را در یک المان با شناسه id می نویسد:

همانطور که مشاهده می کنید قبل از عدد 25 هیچ کلمه کلیدی به کار برده نشده است. (در این جلسه با کلمات کلیدی آشنا می شویم.)

مقادیر متغیر

در زبان های برنامه نویسی، متغیر ها برای ذخیره سازی اطلاعات به کار برده می شوند و در تعریف آنها از یک کلمه کلیدی استفاده می شود. در زبان جاوا اسکریپت از کلمه کلیدی var برای تعریف مقادیر متغیر استفاده می کنیم که بعد از تعریف هر متغیر باید به آن مقدار دهی کنیم. در مثال زیر در ابتدا متغیر های x و y تعریف شده اند و سپس مقدار 10 و 15 به آنها تخصیص داده شده است.

عملگرها

در جاوا اسکریپت همانند سایر زبان های برنامه نویسی از عملگرهای ساده ریاضی (+ * – /) برای محاسبات استفاده می کنیم.

در برنامه نویسی علامت تساوی (=) را عملگر تخصیص می گوییم و متغیر ها را با استفاده از آن مقدار دهی می نماییم.

اصطلاحات

اصطلاحات یا expressions ترکیبی از مقادیر، متغیر ها و عملگرهاست که معادله ای را تشکیل می دهند. مثلا میتوانیم دو عدد را با هم جمع یا ضرب یا … کنیم، یا اینکه یک متغیر را بعد از تعریف در مقداری عددی ضرب کنیم. همچنین جمع کردن دو یا چند مقدار رشته ای (string) هم در دسته اصطلاحات قرار می گیرد.

کلمات کلیدی

در زبان برنامه نویسی جاوا اسکریپت کلماتی رزرو شده وجود دارند که برای منظور خاص استفاده می شوند. مثلا کلمه کلیدی var برای تعریف متغیر استفاده می شود.

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

از دیگر کلمات کلیدی در زبان های برنامه نویسی می توان به if، else، for، function و … اشاره کرد. هر کدام از این کلمات را در زمان مناسب بررسی خواهیم کرد.

توضیحات

در جاوا اسکریپت نیز می توان توضیحاتی را برای خوانایی بیشتر کدها نوشت که این توضیحات در مرورگر نمایش داده نمی شوند:

علاوه بر نوشتن توضیحات متنی، می توان بخشی از کدها را نیز از این طریق غیر فعال کرد. بدین منظور در ابتدای هر خط کد، علامت (//) را قرار می دهیم و اگر بخواهیم چندین خط را غیر فعال کنیم، از علامت ( /* */) استفاده می کنیم.

شناسه ها

شناسه ها (identifier) در جاوااسکریپت، نام هایی هستند که برای متغیر ها، توابع و کلمات کلیدی به کار برده می شوند. مثلا برای انجام عملی خاص، تابعی را تعریف می کنیم که باید این تابع را نام گذاری نماییم. نام تابع در واقع یک شناسه می باشد.

در نام گذاری به نکات زیر توجه داشته باشید:

  • کاراکتر اول هر نام باید حرف و یا (_) باشد. به هیچ عنوان نام گذاری را با عدد شروع نکنید.
  • در نام گذاری از کاراکتر دوم به بعد می توان از علامت دلار ($)، اعداد و حروف استفاده کرد.

در بیشتر مواقع برای نامگذاری از عبارت های دو یا چند قسمتی استفاده می کنیم. که برای جداسازی بخش های مختلف نام ها نمی توان از فاصله استفاده کرد. بنابراین روشی به نام Camel Case را به کار می بریم. به این ترتیب که حرف اول هر کلمه را با حرف بزرگ می نویسیم و بین کلمات فاصله نمی دهیم. مثلا my function را به صورت myFunction می نویسیم.

علاوه بر این می توان علامت (_) را برای جدا سازی به کار برد. به عنوان مثال my_function.

علامت تفریق (Hyphen) را برای جدا سازی استفاده نکنید.

جاوا اسکریپت  Case Sensitive است. یعنی به بزرگ یا کوچک بودن حروف حساس است. مثلا کلمه var را نمیتوان به صورت VAR یا Var نوشت. یا به عنوان مثال firstname و firstName دو متغیر جدا از هم هستند.

خب دوستان امیدوارم که تا اینجای کار خسته نشده باشید و با انرژی ادامه مطالب را مطالعه کنید.

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

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

برنامه های جاوا اسکریپت را دستوراتی تشکیل داده اند که خط به خط و به همان ترتیبی که نوشته شده اند اجرا می شوند. خب این یعنی چی؟ ابتدا به مثال زیر توجه کنید:

مرورگر این دستورات را از بالا به پایین اجرا می کند. یعنی در ابتدا x و y و z را متغیر در نظر می گیرد. سپس مقدار دهی به x و بعد y و در ادامه به z را انجام می دهد. و در نهایت دستور  document.getElementById("p01").innerHTML = z; را اجرا می کند و مقدار z را در پاراگرافی با شناسه p01 می نویسد و این یعنی مرورگر دقیقا به تریبی که دستورات نوشته شده اند آنها را اجرا می کند.

نکات زیر را برای نوشتن بهتر کدها به خاطر بسپارید:

  • دستورات جاوا اسکریپت را کدهای جاوا اسکریپت می گوییم و همانطور که می دانید در انتهای دستورات علامت نقل قول نوشته می شود. به این ترتیب می توان چند دستور را در یک خط نوشت.
  • هر تعداد فاصله را بین دو عبارت می توان قرار داد که جاوا اسکریپت آنها را در نظر نمی گیرد. دو خط زیر معادل هم هستند:

اما برای خوانایی کدها، قبل و بعد از عملگرها فاصله قرار می دهیم.

  • برای خوانا بودن کدها، بهتر است که هر خط کد، بیشتر از 80 کاراکتر نباشد. زمانی که تعداد کاراکتر های یک دستور بیشتر از 80 باشد، بهتر است که بعد از عملگرها خط را بشکنیم و ادامه کدها را در خط بعدی بنویسیم.

بلوک کد

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

با این کار در واقع یک بلوک کد ایجاد می کنیم.

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

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

متغیر ها در جاوا اسکریپت

حال می خواهیم که متغیر ها را کمی بیشتر بررسی کنیم. همانطور که گفتیم متغیر ها ( variable ) برای ذخیره سازی داده ها استفاده می شوند.

در مثال زیر x عدد 10 را ذخیره کرده است، y عدد 15 و z مجوع اعداد x و y را در خود ذخیره دارد:

حال می خواهیم چند تفاوت بین عملیات جبری در برنامه نویسی و در ریاضات را ببینیم.

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

یک تفاوت اساسی که بین جبر و برنامه نویسی وجود دارد این است که در برنامه نویسی علامت مساوی برای تخصیص دادن یک مقدار به یک متغیر استفاده می شود و نباید با علامت مساوی جبری اشتباه شود. معادل علامت مساوی جبری در برنامه نویسی، == خواهد بود.

بنابراین وقتی بین یک متغیر و مقدارش علامت مساوی قرار می دهیم، یعنی این مقدار خاص را به این متغیر تخصیص داده ایم.

از دیگر تفاوت های برنامه نویسی و جبر این است که در برنامه نویسی عبارت x = x + 5 معنا دار است. چرا که عبارت x + 5 به متغیر x تخصیص داده شده است. اما در جبر عبارت مذکور معنا ندارد.

همچنین متغیر ها در زبان برنامه نویسی می توانند مقدار عددی یا مقدار متنی ( string ) داشته باشند که در ریاضیات فقط از اعداد می توانیم استفاده کنیم. داده های مختلفی را میتوان در متغیرها ریخت که در این جلسه فقط داده های رشته ای و عددی را در نظر می گیریم. با انواع داده در جلسه دوم آموزش جاوا اسکریپت آشنا خواهیم شد.

تعریف متغیر

همانطور که گفته شد، متغیر ها را با کلمه کلیدی var تعریف می کنیم. بعد از تعریف یک متغیر می توان به آن مقدار دهی کرد.

تعریف و مقدار دهی متغیر را همزمان می توان انجام داد.

اگر یک متغیر را بعد از تعریف مقدار دهی نکنیم، مقدار آن undefined یعنی تعریف نشده، خواهد بود.

مقادیر متغیر ها را می توان در یک المان نوشت که در مثال زیر نحوه انجام این کار را می بینیم:

آموزش JavaScript - بخش اول

  • بهتر است که در ابتدای اسکریپت ها تمام متغیرها تعریف شوند.
  • میتوان چند متغیر را در یک دستور تعریف کرد:

یا متغیر های بالا را به صورت زیر تعریف کرد:

حال می توان هر کدام از این متغیر ها را صدا زد.

در مثال بالا متغیر emailAddress مقدار دهی نشده است که طبق نکته ی گفته شده مقدار آن تعریف نشده است. با صدا زدن این متغیر، مقدار undefined در مرورگر برگردانده می شود:

آموزش JavaScript - بخش اول

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

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

  • عملگرهای محاسباتی (arithmetic)
  • عملگرهای انتصاب (assignment)
  • عملگرهای مقایسه ای (comparison)
  • عملگرهای منطقی (logical)

در ادامه با این عملگر ها آشنا می شویم.

عملگرهای محاسباتی

در جاوا اسکریپت عملگرهای زیر را برای انجام محاسبات برروی اعداد داریم:

عملگرتوضیح
+جمع
تفریق
*ضرب
/تقسیم
%قدر مطلق (درحقیقت باقیمانده تقسیم دو عدد را بر می گرداند)
++افزایش
کاهش

عملگرهای انتصاب

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

عملگرنمایش در برنامه نویسینمایش جبری
=x = yx = y
+=x += yx = x + y
-=x -= yx = x – y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y

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



آموزش JavaScript - بخش اول

در مثال زیر استفاه از عملگر انتصاب برای اتصال داده های رشته ای را می بینید:

آموزش JavaScript - بخش اول

هنگام کار با داده های رشته ای، + را عملگر الحاق می گوییم.

جمع مقادیر رشته ای و عددی

جمع دو عدد، یک مقدار عددی را ایجاد می کند. اما جمع یک مقدار عددی و رشته ای، مقداری رشته ای را ایجاد می کند:

آموزش JavaScript - بخش اول

به تفاوت بین متغیر c و d توجه کنید. در متغیر c (از سمت چپ به راست) اولین داده رشته ای است، پس با اعداد 2 و 4 نیز مانند متغیر رشته ای رفتار می شود.

در متغیر d اولین متغیر، متغیری عددی است، پس 2 و 4 به صورت عددی جمع شده اند و در نهایت به صورت رشته ای به حرف جمع الحاق شده اند.

عملگرهای مقایسه ای

در جدول زیر عملگرهای مقایسه ای را می بینیم:

عملگرتوضیح
==برابر است با
===مقدار و نوع برابرند
!=برابر نیست
!==مقدار و نوع برابر نیستند
>بزرگتر
<کوچکتر
>=بزرگتر مساوی
<=کوچکتر مساوی

عملگرهای منطقی

عملگرهای منطقی که در تعیین شرط در حلقه ها کاربرد دارند را در جدول زیر می بینیند

عملگرتوضیح
&&گیت AND
||گیت OR
!گیت NOT

خب دوستان عزیز آموزش JavaScript – بخش اول را در اینجا به پایان می رسانم. امیدوارم که مطالب این جلسه برای شما مفید بوده باشد. در انتها از شما همراهان دعوت می کنم تا با ارائه نظرات و پیشنهادات خود، ما را در تهیه این سری آموزشی همراهی فرمایید.

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

دیدگاه ‏خود را بنویسید