جاوا اسکریپت مقدماتی: کار با کنسول مرورگر، تعریف متغیر با let

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

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

در جلسه قبل درباره اهمیت جاوا اسکریپت و کاربردهای آن صحبت کردیم و گفتیم که یادگیری جاوا اسکریپت آینده و مسیر شغلی شما را تغییر می دهد، پروسه یادگیری Node.js را آسان تر می کند و موجب درک بهتر ساختار و عملکرد فریمورک های جاوا اسکریپتی می شود.

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

در این جلسه می خواهیم به جزئیات بیشتری بپردازیم و وارد مباحث اصلی جاوا اسکریپت شویم. اما در ابتدا بهتر است کمی با کنسول مرورگر آشنا شوید، چرا که برای کار با جاوا اسکریپت تنها چیزی که اهمیت دارد یک مرورگر بروز و مدرن مثل گوگل کروم(Google Chrome) است.

کنسول مرورگر چیست؟

اکثر مرورگرهای امروزی از یک قابلیت داخلی به نام ابزار توسعه دهنده(Developer Tools/DevTools) برخوردار هستند که توسعه دهندگان برای کار با جاوا اسکریپت و سایر تکنولوژی های وب از آن استفاده می کنند. کنسول مرورگر(Console) یکی از بخش های مهم این ابزار است که شباهت زیادی به رابط خط فرمان ابزارهایی مثل Powershell ویندوز یا ترمینال لینوکس دارد.

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

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

  1. کلید F12 را فشار دهید.
  2. روی صفحه وب راست کلیک کرده و گزینه Inspect را انتخاب کنید.
  3. از  منوی Customize and control google chrome(سه نقطه گوشه بالا سمت چپ) وارد گزینه More tools شوید و Developer tools را انتخاب کنید.

ابزار developer tools مرورگر کروم

 

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

کنسول مرورگر کروم

 

کار با کنسول مرورگر

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

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

 

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

۱- عملیات ریاضی ساده.

۸ * ۸
۱۰ + ۲۰ - ۵

 

۲- عدد ۷۷ را در حافظه ذخیره کردیم و برچسب myLuckyNumber را به آن اختصاص دادیم.

let myLuckyNumber = 77

 

۳- مقدار myLuckyNumber را با عدد ۱۰ جمع کردیم.

۱۰ + myLuckyNumber

 

۴- می توانیم چیزی های بیشتری در حافظه نگهداری کنیم، مثلا نام و نام خانوادگی، آدرس وب سایت. برای نگهداری این نوع مقادیر از کوتیشن(Single Quotes) یا دابل کوتیشن(Double Quotes) استفاده می کنیم.

let fullName = "Saeed Yavarnia"

 

۵- با تایپ برچسب fullName مقدار آن را از حافظه فراخوانی و نمایش دادیم.

۶- به کمک + یک متن ثابت را با مقدار برچسب fullName الحاق کردیم.

'Hello, my name is ' + fullName

 

۷- در نهایت با کمک alert یک پیغام ساده پاپ آپ(Popup) در داخل مرورگر نشان دادیم.

alert( "Hello JavaScript" )

 

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

کار با درخت DOM از طریق کنسول مرورگر

 

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

۱- بدست آوردن عنوان صفحه وب

document.title

 

۲- تغییر رنگ پس زمینه

document.body.style.backgroundColor = '#2980b9'

 

۳- افزودن متن جایگزین(placeHolder) به کادر جستجو

document.querySelector( 'input[type="text"]' ).setAttribute( 'placeholder', 'Please enter your search term ...' )

 

۴- بدست آوردن تمام لینک های صفحه وب و نگهداری در حافظه

let links = document.querySelectorAll( 'a' )

 

۵- دسترسی به لینک ها مرحله قبل و تغییر رنگ آنها

links.forEach( function( link ){ link.style.color = 'white' } )

 

کنسول مرورگر و فایل های جاوا اسکریپت

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

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

لطفا کدهای زیر را طبق آموزش جلسه اول به فایل main.js اضافه نمائید.

۱- متد log

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

console.log( "Hi there!" )

console.log( 1399 )

console.log( [1,9,23,15] )

console.log( {name: "Jack", age: 35} ) 

console.log( true )

 

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

آشنایی با console.log در جاوا اسکریپت

۲- متد table

خروجی داده ها را به صورت سطری و ستونی نمایش می دهد.

console.table( [100,19,283,105] )

console.table( {name: "Hamid", age: 35} )

 

آشنایی با console.table در جاوا اسکریپت

 

۳- متد error

به کمک این متد می توانید یک پیغام خطای قرمز رنگ تولید کنید، در انتهای پیغام نیز لینک main.js:1 وجود دارد که شما را به خطی از سورس که خطا رخ داده است منتقل می کند.

console.error( 'This is an error!' )

 

آشنایی با console.error در جاوا اسکریپت

 

۴- متد warn

به کمک این متد می توانید یک پیغام اخطار زرد رنگ نشان دهید.

console.warn( 'This is a warning message!' )

 

آشنایی با console.warn در جاوا اسکریپت

 

۵- متد clear

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

console.clear()

 

متغیر یا Variable چیست؟

تا اینجای آموزش به دفعات گفتیم : “مقدار X را در حافظه ذخیره کردیم”، “مقدار Y را به برچسب X اختصاص دادیم”، “مقدار X را در حافظه نگهداری کردیم”. همه اینها به یک موضوع اشاره دارد و آن هم متغیر است.

حالا جمله “عدد ۷۷ را در حافظه ذخیره می کنیم و برچسب myLuckyNumber را به آن اختصاص می دهیم.” اینگونه اصلاح می شود:

عدد ۷۷ را در متغیری به نام myLuckyNumber ذخیره می کنیم.

let myLuckyNumber = 77

 

پس به جای واژه غیرفنی برچسب(Label) از واژه فنی متغیر استفاده می کنیم. مثلا متغیر myLuckyNumber، متغیر links.

متغیر، محلی از حافظه است که داده ها در آنجا ذخیره و نگهداری می شود، برای فراخوانی و دسترسی به داده های ذخیره شده از نام متغیر استفاده می کنیم. به بیان ساده تر، متغیر ظرفی است که داده ها را در خود نگهداری می کند.

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

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

کلمات کلیدی(Keywords) یا کلمات رزرو شده(Reserved) کلماتی هستند که برای جاوا اسکرپیت معنا و مفهوم خاصی دارند و نباید از آنها برای نامگذاری متغیرها استفاده کنید، به عنوان مثال let، var، const، function و return از جمله کلمات رزرو شده جاوا اسکریپت هستند.

کدهای زیر باعث تولید خطا می شود چون برای اسامی متغیرها از کلمات کلیدی let و function استفاده کردیم.

let let = 5
let function = 10

 

نمونه هایی از تعریف متغیر با let

۱- تعریف یک متغیر و مقداردهی اولیه(می توانیم در هنگام تعریف یک متغیر مقداری در آن ذخیره کنیم)

let fullName = "Jackie Chan"

 

۲- تعریف یک متغیر بدون مقداردهی اولیه(مقدار آن در خطوط بعدی مشخص می شود)

let yourAge
yourAge = 35

 

۳- تعریف چند متغیر و مقداردهی اولیه، متغیرها با کاما(,) از یکدیگر جدا می شوند.

let firstName = "Jackie",
    lastName = "Chan",
    age = 35

می توانید متغیر های بالا را اینگونه هم تعریف کنید.

let firstName = "Jackie"
let lastName = "Chan"
let age = 35

قوانین نامگذاری متغیرها

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

  • نام متغیر نباید با عدد شروع شود، مثلا ۲afm معتبر نیست.
  • نام متغیر می تواند شامل ترکیبی از حروف و اعداد باشد. مثلا agha30
  • نام متغیر می تواند دارای زیر خط یا Underline باشد، مثلا name_ یا first_name
  • نام متغیر می تواند با $ شروع شود، مثلا element$

اگر دقت کرده باشید تا اینجای آموزش به صورت چراغ خاموش از یک قانون دیگر پیروی کردیم، البته اجباری در اینکار نیست، اما به عنوان یک توسعه دهنده جاوا اسکریپت بهتر است آن را در نظر بگیرید، آن هم جداسازی اسامی چند کلمه ای به روش camelCase.

در این شیوه نامگذاری حرف اول کلمه اول را با حروف کوچک و حرف اول کلمات بعدی را با حروف بزرگ تایپ می کنیم، مثلا myFavoriteColor یا lastName. در طول این آموزش برای تعریف متغیرها و توابع از این روش استفاده خواهیم کرد.

نامگذاری چند متغیر و یک تابع به روش Camel Case

let age = 30

let myFirstName = "Saeed"

function getMyFullName(){

}

جاوا اسکریپت حساس به حروف بزرگ و کوچک یا Case Sensitive است، یعنی چی؟

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

توجه داشته باشید که کلمات کلیدی در جاوا اسکریپت باید با حروف کوچک تایپ شوند، let درست است نه Let یا LET.

let age = 50
let Age = 20
let aGe = 33
let agE = 15

console.log(age, Age, aGe, agE)

 

حالا اگر سعی کنید دو متغیر همنام تعریف کنید، جاوا اسکریپت خطا می دهد.

let age = 50
let age = 20

console.log(age)

 

خط اول به درستی اجرا خواهد شد، اما در خط دوم(main.js:2) پیغام خطا صادر می شود چون متغیر age قبلا تعریف شده است.

خطای تعریف متغیر در جاوا اسکریپت

 

اما می توانید مقدار یک متغیر را در خطوط بعدی تغییر دهید.

ابتدا متغیر age را با مقدار اولیه ۵۰ تعریف کردیم و در خطوط بعدی آن را به ۲۰ تغییر دادیم.

let age = 50
console.log(age)

age = 20
console.log(age)

 

خلاصه

  •  ابزار توسعه دهنده(Developer Tools) بخشی از مرورگر وب است، کنسول مرورگر هم یکی از امکانات کاربردی این ابزار است.
  • کنسول می تواند خطاهای موجود در صفحات وب را نشان دهد و برای خطایابی اسکریپت های جاوا اسکریپت عالی است.
  • برای تعریف متغیرها از کلمه کلیدی let استفاده می کنیم.
  • برای نامگذاری متغیرها و توابع چند کلمه ای از شیوه camelCase پیروی کنید.
  • جاوا اسکریپت حساس به حروف بزرگ و کوچک است، به عنوان نمونه سه متغیر NAME ،name، Name با یکدیگر متفاوتند.
برچسب ها
سعید یاورنیا 118 نوشته 130 دیدگاه

توسعه دهنده PHP و Wordpress
توسعه وب سایت یکی از کارهایی است که تلاش می کنم تخصصم رو در اون بالا ببرم، یادگیری تکنولوژی های جدید یکی از چالش هایی است که به شدت به آن علاقمند هستم.

دیدگاهتان را بنویسید.

نشانی ایمیل شما منتشر نخواهد شد، بخش‌های موردنیاز با * مشخص شده‌اند.