در این صفحه به صورت خلاصه وار مباحث جاواسکریپت مطرح شده و تلاش کردم که هر موضوعی که وجود داره بهش اشاره کنم. در اینصورت با هر بار مرور این صفحه مباحث به مرور در حافظه بلند مدت ما ثبت میشه.
ساختار و قواعد دستوری جاوااسکریپت
رشته های زیر با هم متفاوت هستند
Name NAME name
بهترین مکان برای قرار دادن کدهای جاوااسکریپت، در پائین صفحه html قبل از بسته شدن تگ <body> است. سند html از بالا به پائین خوانده میشود و عناصر را بارگزاری میکند. حال اگر در این بین با تگ <script> برخورد کند. تا بارگزاری کامل آن صبر میکند و سپس ادامه میدهد. بنابراین اگر کدها یا فایل های اسکریپت خود را در پائین صفحه قرار دهیم. هم به تمام عناصر DOM دسترسی داریم و هم اطمینان داریم که html کامل لود شده است.
*نکته: مرورگر برای لود سریعتر، فایل های جاوااسکریپت اکسترنال یا خارجی را cache میکند. بنابراین بهتر است کدهای جاوااسکریپت خود را در فایل های جداگانه بنویسیم و در سند html به آن پیوند بدهیم.
توابع زیر را در کنسول مرورگر خود یا فایل جاوااسکریپت، مورد بررسی قرار دهید.
alert('this is a test.');
console.log('this is test.');
متغیرها و توابع در جاوااسکریپت
در جاوااسکریپت نوع داده با مقداری که به متغیر اختصاص میدهیم مشخص میشود. مثلاً:
var name = "Mokhtar"; => رشته var age = 34; => عدد var ok = true; => بولین
* نکته :در هنگام تشابه نام متغیرها و مقداردهی به آنها، آخرین مقدار وارد شده به آن متغیر اختصاص میابد.
var Name = "Mokhtar"; var Name = "AmirHosien"; console.log(Name); نتیجه => AmirHosien
ساختار کلی یک تابع
function fname (ورودی ها) {
//بلوک کدها
}
مثلاً:
function get (name){
console.log(name);
}
این تابع یک رشته را به عنوان ورودی دریافت میکند و در کنسول چاپ میکند.
میخواهیم با کلیک بر روی یک لینک، تابعی که در بالا نوشتیم اجرا شود. بنابراین:
<a href="#" onClick="get("Mokhtar")" >چاپ کن</a>
آرایه ها در جاوااسکریپت
مثال های زیر مربوط به آرایه ها در جاوااسکریپت هستند.
var names = ['mokhtar','amirhosien','afshin']; console.log(names[1]); نتیجه => amirhosien
چندین نام را درون یک آرایه ذخیره کردیم و در خط دوم گفتیم که کدام عنصر آرایه را چاپ کن.
روش دیگر ساخت آرایه
var names = new Array('mokhtar','amirhosien','afshin');
console.log(names[1]);
از آنجا که در جاوااسکریپت هر چیزی که با آن مواجه میشوید یک شی است، بنابراین آرایه ها هم یک شی هستند و دستور بالا یک نمونه از آن شی را برای ساخت آرایه استفاده کرده. و هنگامی هم که با کروشه آرایه میسازیم، جاوااسکریپت خودش به صورت خودکار یک نمونه از این شی را برای ایجاد آرایه استفاده میکند.
جالبه بدونید که آرایه ای هم که ما آن را ایجاد میکنیم یک شی است که از شی آرایه ارث بری کرده، بنابراین آرایه ما میتواند از خواص و متودهای شی والد خودش استفاده کند. به عنوان مثال یکی از متودهای شی آرایه. sort است. که با استفاده از این متود میتوانیم آرایه خودمون رو مرتب کنیم.
مثال زیر را بررسی کنید
var names = new Array('mokhtar','amirhosien','afshin');
console.log(names);
var sorted = names.sort();
console.log(sorted);
میخواهیم نتیجه را به جای چاپ در کنسول، بر روی سند html نمایش دهیم. بنابراین:
document.write(sorted);
عملگرهای محاسباتی و مقایسه ای:
+ - * / % ++ -- x = 50; y = x++; نتیجه => y=50 , x=51 x = 50; y = ++x; نتیجه => y=51 , x = 51;
اشیا در جاوااسکریپت
قبلاً اشاره کردیم که هر چیزی در جاوااسکریپت یک شی هست. الان خودمون میخواهیم یک شی ایجاد کنیم و به خواص و متودهای اون دسترسی داشته باشیم.
var person = {
name : 'Mokhtar',
lastName:'Mohammadiyan',
age:34,
fullName:function(){
return this.name+' '+this.lastName;
}
}
console.log(person.name);
console.log(person.fullName());
رویدادها در جاوااسکریپت
این موضوع وبلاگ مربوط به جاوااسکریپت سمت کلاینت است. بنابراین منظور ما رویدادهای سمت کاربر است. مثلاً:
<button onClick="showDate()">کلیکم کن !</button> onClick نام رویداد showDate() اتفاقی که میفتد
* نکته: کلمه this در تگ رویداد html به همان عنصر html اشاره میکند. مثال زیر را آزمایش کنید.
<button onClick="this.innerHTML=Date()">کلیکم کن !</button>
یک مثال دیگر:
<div>
<button id="btn" onClick="this.innerHTML=Date()">کلیکم کن !</button>
</div>
<div>
<input type="text" onchange="document.getElementById('btn').innerHTML=this.value">
</div>
ساختار دستورات شرطی جاوااسکریپت
if(){
//بلوک کد
}
if(){
//بلوک کد
}else{
//بلوک کد
}
if(){
//بلوک کد
}else if(){
//بلوک کد
}else{
//بلوک کد
}
دستور switch
switch(یک متغیر یا مقدار){
case انطباق:{
//بلوک کد
}
break;
default:{
//بلوک کد
}
break;
}
حلقه ها در جاوااسکریپت
for (var i=0;i<10;i++){
console.log(i);
}
var int = 10;
var x=1;
while(x<=int){
if(x==5)continue;
console.log(x)
x++;
}
مدیریت خطاها برای جلوگیری از، از کارافتادن برنامه
کلمات کلیدی قابل استفاده ------> try , catch , finally , throw
هر قطعه کدی را که احتمال میدهیم ممکن است دارای خطا باشد، مثلاً کاربر به جای عدد یک رشته ارسال کرده. میتوانیم قطعه کد مورد نظر را درون بدن try قرار دهیم و با استفاده از catch خطای پیش آمده در بدنه try را مدیریت کنیم. و اینکه چه خطا داشته باشیم و چه بدنه try بدون خطا اجرا شود. finally اجرا خواهد شد. استفاده از finally اختیاری است.
با استفاده از throw برنامه نویس میتواند یک خطا تولید کند و مانند خطاهای دیگر در کنسول نمایش دهد. به این نکته توجه داشته باشید که کدهای پس از دستور throw دیگر اجرا اجرا نخواهد شد و برنامه متوقف میشود. کاملاً همانند خطاهای دیگر. با این تفاوت که برنامه نویس آن را تولید کرده است.
throw 'this is my error';
try {
//احتمال بروز خطا
}catch(err){
//دریافت خطا و کار با آن
}finally{
//در هر صورت اجرا خواهد شد
}
مثال کامل تر از مدیریت خطاها
x = "";
try{
if(x=="") throw 'empty';
if(isNaN(x)) throw 'Not a number';
x = Number(x);
if(x<=5) throw 'too low';
if(x>10) throw 'too high';
}catch(err){
document.write('Input is '+err);
}finally{
console.log('Success Process.');
}
کلمات کلیدی this و let در جاوااسکریپت
کلمه کلیدی this کاربرد زیادی در زبان جاوااسکریپت دارد و منظورش اشاره به شی سازنده خودش است.
سوال :
var x = this;
در مثال بالا this به چه چیزی اشاره میکند؟
در اینجا this میتواند به پنجره مرورگر اشاره داشته باشد. از x یک لاگ بگیرید تا متوجه شوید که this به چه آبجکتی اشاره کرده.
var x = this.innerWidth; اشاره به پنچره مرورگر و درخواست عرض پنجره.
سوال:
function exp (){
return this;
}
در مثال فوق this به چی اشاره کرده؟
صدازننده یا call کننده این تابع، مورد اشاره this در اینجاست. (this به صدازننده خودش اشاره کرده)
کلمه کلیدی let
کلمه کلیدی let در اساندارد جاوااسکریپت 6 یا es6 یا اکمااسکریپت 6 معرفی شد و مشکل تداخل نام های متغیرها در سورس کدهای مجزا و طولانی را حل کرد. و دسترسی مطمئن تری به یک متغیر به ما میدهد.
کلمه کلیدی const
const از ES2015 به بعد برای تعریف ثابت ها به کار میرود. برای مقادیری که قرار نیست در طول برنامه تغییر کنند و همانند let فقط در داخل بلوک مخصوص خودش قابل دسترسی است.
نکته: اگر از const برای تعریف یک شی استفاده کنیم. امکان تغییر مقدار خواص شی دیگر وجود ندارد اما میتوانیم به خواص و متودهای دیگری به آن اضافه کنیم.
const person = {name:"mokhtar",age:34}
person.favorites = ['developing','programing'];
console.log(person);
سازنده شی یا constructor
می خواهیم اشیاء ما به صورت خودکار ایجاد شوند تا نیازی نباشد تک تک آبجکت تعریف کنیم و مقداردهی کنیم. بنابراین از سازنده آبجکت استفاده میکنیم.
function person (name,lastName,age){
this.name = name;
this.lastName = lastName;
this.age = age;
}
var mokhtar = new person('mokhtar','mohammadiyan',34);
console.log(mokhtar);
حالا با کمک این تابع میتوانیم به تعداد دلخواه آبجکت بسازیم. به مثال زیر توجه کنید:
var pepole = [];
pepole.push(new person('mahmood','ahadinejad',43));
pepole.push(new person('mostafa','pahlevanzade',38));
pepole.push(new person('mokhtar','mohammadiyan',34));
console.log(pepole);
توجه داشته باشید که امکان افزودن خواص و متودهای جدید به اشیاء ایجاد شده از نمونه اولیه وجود دارد که مربوط به مبحث prototype جاوااسکریپت است.
روش دیگر تعریف یک تابع در جاوااسکریپت
این روش هم البته شاید به نظر بی معنی برسد اما کاربردهای منطقی خودش را دارد.
var func = new Function('a','b','return a+b');
console.log(func(5,5));
در مثال تابع func را تعریف کردیم که دو ورودی بگیرد و ورودی ها را با هم جمع بزند و برگرداند.
نکته: میتوان توابعی نوشت که خود اجرا هستند و نیازی به صدا زدن ندارند.
تابع زیر برای اجرا باید فراخوانی شود
function print_welcome(){
console.log('welcome to emok.ir');
}
تابع زیر خودش اجرا میشود
(function print_emok(){
console.log('welcome to emok.ir');
})()
خلاصه نویسی با استفاده از استاندارد جاوااسکریپت6 (ES6). (از همون اول باید اسمش رو میزاشتن اکمااسکریپت، حالا دیگه اسمش رو هر چی بزارن من میگم جاوااسکریپت:))
خلاصه نویسی به این صورته که به جای آکولاد باز و بسته و کلمه return از علامت (<=) میشه استفاده کرد. مثلاً:
let sum = (a,b)=>a+b;
ممکن است کاربر از تعداد ورودی ها مطلع نباشد، چگونه مقادیر پیشفرض ورودی های تابع را کنترل کنیم که برنامه با خطا مواجه نشود؟
البته در ES6 این مشکل برطرف شده ولی اگر نخواهیم از ES6 استفاده کنیم باید به روش زیر ورودی ها بررسی کنیم.
function sum(x,y){
if(x===undefined){
x=0;
}
if(y===undefined){
y=0;
}
return x+y;
}
console.log(sum(5));
روش دیگر این است که به ورودی ها مقدار اولیه اختصاص بدیم.
function sum(x=0,y=0){
return x+y;
}
console.log(sum(5));
زمانی که ما اطلاع نداریم که کاربر چند ورودی ارسال خواهد کرد
function sum(){
for(var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
توابع تو در تو یا nesting functions
function add(x){
var counter = x;
function plus(){
counter++;
}
plus();
return counter;
}
console.log(add(5));
DOM یا Document Object Model
عناصری که درون سند html قرار میگیرند object model هستند، مثل تصاویر، لینکها، متن ها و ... و با جاوااسکریپت میتوانیم آن ها راکنترل کنیم. خلاصه تمام ارتباطات و اتصالات به عناصر html توسط جاوااسکریپت، همان ارتباط با DOM است. مثلاً انتخاب تمام عناصری که تگ p دارند.
var ps = document.getElementsByTagName('p');
for (i in ps){
console.log(ps[i].innerHTML);
}
}
مثال دیگر برای انتخاب تمام عناصر p که داری کلاس emok هستند.
document.querySelectorAll('p.emok');
انتخاب فرم از صفحه html به صورت زیر:
var x = document.forms['formID']; تعداد عناصر فرم console.log(x.length); مقدار یک عنصر در فرم با استفاده از اندیس آن عنصر در آرایه فرم var elm = x.elements[0].value;
معرفی چند تابع کاربردی پیشفرض جاوااسکریپت:
تابع ()setInterval: آرگومان اول، تابعی است که میخواهیم پس از مدت زمان مشخصی دائماً اجرا شود. مثلاً هر 1 ثانیه متنی را چاپ کند. یا هر 10 ثانیه اتصال کاربر را بررسی کند. آرگومان دوم این تابع زمان به میلی ثانیه است. (1000 = 1 ثانیه)
تابع setTimeout مشابه setInterval است، اما یک بار اجرا میشود. مثلا بعد از گذشت 3 ثانیه از کلیک کاربر فقط یک تابع اجرا شود.
var logger = setInterval(function(){
console.log('welcome to my blog.');
},1000);
تابع ()clearInterval: نام تابع یا متغیر مربوط به setInterval را دریافت میکند و آن را حذف میکند.
دستکاری خواص عناصر html
تغییر خواص html
document.getElementById('emok').src = "http://emok.ir";
تغییر خواص css
document.getElementById('emok').style.width = "100%";
چند مثال مربوط به رویدادها
<button id="btn" onclick="this.innerHTML='oops'">Click Me!</button>
<h1 onclick="changeText(this)">This is a text.</h1>
function changeText(txt){
txt.innerHTML = "oops";
}
document.getElementById('btn').onclick = func;
function func(){
console.log(Date());
}
بسیار خوب اکنون به یک روش ساده تر، پرقدرت تر، قابل کنترل تر و حرفه ای میپردازیم. استفاده از شنونده رویداد EventListener.
به مثال زیر توجه کنید: بدون اینکه در صفحه html نامی از تابع خاصی آورده شود و فقط با اختصاص یک id به یک عنصر میتوانیم تمام رویدادهای آن عنصر را کنترل کنیم.
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
btn.innerHTML = 'Thank you very much';
console.log('button is clicked.');
});
در مثال بالا در واقع توسط انتخابگر id یک عنصر را انتخاب کردیم و به رویدادهایش گوش کردیم. اگر رویدادی که اتفاق افتاد، همان رویداد مورد نظر ما باشد آنگاه تابعی که برای این رویداد در نظر گرفتیم اجرا میشود. البته میتوانیم برای یک عنصر به تعداد دلخواه شنونده رویداد تعریف کنیم.
Callback Functions - توابع کال بک
- با فانکش ها مانند نوع داده های دیگر با آنها برخورد می شود
- فانکشن ها از نوع object type هستند
- شما می توانید فانکشن ها را در یک متغیر ذخیره کنید
- فانکشن می تواند دارای property هایی باشد و همچنین link back به متد سازنده خودش!
- شما می توانید فانکشن ها رو به عنوان آرگومان به فانکش دیگر ارسال نمائید
- می توانید آنها در داخل فانکش دیگر تعریف و دستکاری کنید
- شما می توانید آنها را به راحتی در داخل فانکش دیگر فراخوانی کنید
- شما می توانید فانکشن ها رو به عنوان مقدار بازگشتی یک فانکش بر گردونید
همین موارد بالا ماهیت استفاده از فانکشن های callback هستند.
فانکشن callback چیست ؟
فانکش callback تابعی است که قرار است بعد از تابع دیگری اجرا شود. مثال:
const func = (int1,int2,callback)=>{
let res = int1 + int2;
return callback(res)
}
let result = func(5,6,(res)=>{
console.log(res)
})
ادامه دارد ....
پروفایل
نکات، تجربیات، محتوای آموزشی و مطالب گردآوری شده در حوزه برنامه نویسی وب
آرشیو وبلاگ
پیوندها
تبلیغات
عالی بود... لطفا این بخش و بیشتر آپدیت بکنید ممنون