۱۳۹۰/۱۰/۲۹

راهنمای سریع جاوا اسکریپت

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

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

مقدمه

جاوااسکریپت زبانی است که توسط NetScape تولید شده است. هدف از این زبان پویانمایی اشیا داخل صفحات HTML می باشد. جاوا اسکریپت کاملا با زبان برنامه نویسی جاوا فرق دارد. اگر چه ساختار این زبان به سی پلاس پلاس و جاوا شباهت دارد؛ که این امر برای سهولت یادگیری در نظر گرفته شده است. از همینرو دستورهای متداول مانند if, for, try..catch و ... در این زبان هم یافت می‌گردند. کاربرد گسترده این زبان در سایتها و صفحات اینترنی می‌باشد و به کمک این زبان می‌توان به اشیاء داخل صفحات HTML دسترسی پیدا کرد و آنها را تغییر داد. به همین علت برای پویا نمایی در سمت کاربر، از این زبان استفاده می‌شود.

نحوه نگارش مستقیم کدهای جاوا اسکریپت در HTML

کدهای جاوا اسکریپت در صفحات HTML داخل تگ script قرار می گیرند. از خصیصه type برای مشخص کردن زبان اسکریپت نوشه شده استفاه می شود. <script type="text/javascript"> محل شروع کدهای جاوا اسکرپیت و </script> محل پایان کدهای جاوا اسکریپت را مشخص می کنند. مانند:





خروجی کد بالا نوشته‌ی !Hello World می باشد.

اسکریپت خارجی

گاهی اوقات شما نیاز به اجرای یک کد جاوا اسکریپت در صفحات مختلف (بدون نگارش در تک تک صفحات) دارید. و یا کد شما بسیار طولانی است و هنگام کد نویسی در صفحه html شما را دچار مشکل می کند. در این صورت با استفاده از اسکریپت خارجی مشکل شما حل می شود. برای نگارش اسکریپت خارجی ابتدا یک فایل با فرمت js. ایجاد کنید. می توانید پسوند یک فایل txt را به js. تغییر دهید. سپس این فایل را توسط یک ویرایشگر متن مانند Notepad باز کنید. کدهای جاوا اسکریپت خود را بدون تگ <script> در آن قرار دهید و سپس فایل را ذخیره کنید (با پسوند js.) برای فراخوانی اسکریپت خارجی از خصیصه src تگ <script> استفاده کنید. مانند زیر که xxx.js آدرس فایل جاوا اسکریپت است:







سمی‌کالن (;)، فضاهای سفید و حساس به حروف (Case Sensitive)

در جاوا اسکریپت دستورات اجرایی با سمی‌کالن (Semicolon) یا همان ; از هم جدا می شوند. با وجود اینکه استفاده از سمی‌کولن، در صورتی که دستورات در خطوط جداگانه نوشته شده باشند، اختیاریست، نوشتن آن بسیار توصیه می شود. بد نیست مطلب «معاهده‌های کدنویسی» را مطالعه کنید. فضاها سفید در جاوا اسکرپیت مانند اغلب زبان‌های برنامه نویسی هنگام اجرا در نظر گرفته نمی شوند. مگر اینکه مقدار یک متغیر رشته ای (String) باشند. زبان جاوا اسکریپت به کوچکی و بزرگی حروف حساس می باشد. به عنوان مثال bgColor با bgcolor برای نیست.

توضیحات (Comments)

توضیحات می توانند به صورت تک خطی و یا چند خطی باشند. مانند:
// این یک توضیح یک خطی است!

/*
این یک توضیح
چند خطی است.
*/

متغیرها (Variables)

برای تعریف متغیر کافیست نام دلخواه خود را بنویسید. استفاده از کلمه var قبل از نام متغیر اختیاری است، مگر در موارد زیر:
  • زمانی که نام یک متغیر محلی در داخل یک تابع با نام یک متغیر سراسری (Global) یکی باشد، متغیر محلی باید با var تعریف شود. در این مواقع شما در داخل تابع خود دسترسی به متغیر سراسری ندارید. هم چنین متغیرهای محلی فقط در داخل خود تابع قابل دستیابی می باشند.
  • در توابع بازگشتی استفاده از var الزامیست.

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

x = 42
var x = 42

انواع داده‌ها در جاوا اسکریپت

شما می تواند داده‌هایی از نوع زیر را در جاوا اسکریپ تعریف کنید:
  • شی (Object)
  • تابع (Function)
  • رشته (String)
  • عدد (Number)
  • نوع داده منطقی (Boolean)
در صورتی که متغییری تعریف نشده باشد، نوع آن متغیر undefined است. برای دستیابی به نوع یک متغیر می توانید از تابع typeof استفاده کنید. در زیر نمونه تعریف متغیرها و استفاده از تابع typeof را مشاهده می کنید:
var aDate = new Date()
var aPowerFunc = new Function("x", "return x * x")
var aString = "I am a string"
var aNumber = 42
var aBoolean = true

alert(typeof aPowerFunc); // typeof aPowerFunc is object
alert(typeof aDate); // typeof aDate is object
alert(typeof aString); // typeof aString is string
alert(typeof aNumber); // typeof aNumber is number
alert(typeof aBoolean); // typeof aBoolean is boolean
alert(typeof nonExistVar); // typeof nonExistVar is undefined
alert(typeof Date); // typeof Date is function. predefined object Date

آرایه ها (Arrays)

روش‌های مختلفی برای تعریف آرایه در جاوا اسکریپت وجود دارد. در زیر نمونه‌هایی از تعریف آرایه‌ها ارائه شده است:
beans = ["Java beans","Coffee beans","Cacao beans"];
myCars = new Array("Jaguar", "Mercedes", "Rolls Royce");
noOfEntries = myCars.length; // طول آرایه
myCD = new Array(42) // تعریف آرایه ای به نام myCD با 42 عضو
myCD[0] = "Queen" //اولین عنصر آرایه
myCD[1] = "Carlos Santana"
myCD[2] = "Mozart"
myCD[3] = "Chopin"
...
myCD[41] = "Shubidua" //آخرین عنصر آرایه
// تعریف آرایه با کلیدهای مشخص - Associative Array ویا همان Property Maps
assoarr = {color1: "green", color2: "yellow", color3: "white"};

اشیا (Objects)

تعریف یک شی مانند تعریف یک تابع می باشد. مانند:
function objDef(name) {
this.objvar = name
}
// creation of an instance of the above defined object "class" myObj = new objDef("Saeid")

متدها و خصوصیات (Methods, Properties)

متد همان تابع تعریف شده در یک شی و خصیصه، مقادیر متغیرهای آن می‌باشد. مانند:
//Property 
//objectName.propertyName = value
//Method
//objectName.methodName = function

function calcArea(radius) {
return(radius * radius * Math.PI);
}

function circle(color, radius) {
this.fillColor = color;
this.area = calcArea(radius);
}

var myCircle = new circle('green', 2);
alert(myCircle.fillColor);
alert(myCircle.area);

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

در زیر عملگرها بر اساس نوع عملیات و داده مورد استفاده دسته‌بندی شده‌اند.
انواع عملگرها برای اعداد
عملگر توضیحات
+ جمع
- تفریق
++ افزایش مقدار متغییر به اندازه یک واحد
-- کاهش مقدار متغییر به اندازه یک واحد
* ضرب
/ تقسیم
% باقیمانده
انواع عملگرها برای رشته‌ها
عملگر توضیحات
+ الحاق دو یا چند رشته
+= الحاق محتوای یک رشته با یک یا چند رشته و اختصاص دادن مقدار به رشته اول
انواع عملگرهای منظقی
عملگر توضیحات
&& و (AND)
|| یا (OR)
! خِلاف (NOT)
== مساوی با (equal)
!= نامساوی با (not equal)
=== دقیقا مساوی با (از نظر مقدار و نوع داده)
!== نامساوی با (از نظر ارزش) ویا نامساوی (از نظر نوع)
> بزرگتر از
>= بزرگتر از ویا مساوی با (بزرگترمساوی)
< کوچکتر
<= کوچکتر از ویا مساوی با (کوچکتر مساوی)
انواع عملگرها برای تخصیص
عملگر توضیحات
= اختصاص دادن یک مقدار به متغیر
+= الحاق محتوای متغیر سمت چپ عملگر با یک متغیر و اختصاص دادن مقدار به متغیر سمت چپ
-= تفریق یک متغیر از متغیر سمت چپ عملگر و اختصاص دادن مقدار بدست آمده به متغیر سمت چپ
*= ضرب یک متغیر در متغیر سمت چپ عملگر و اختصاص دادن مقدار بدست آمده به متغیر سمت چپ
/= تقسیم متغیر سمت چپ عملگر و اختصاص دادن مقدار بدست آمده به متغیر سمت چپ
%= تقسیم متغیر سمت چپ عملگر و اختصاص دادن باقیمانده تقسیم به متغیر سمت چپ
سایر عملگرها
عملگر توضیحات
new ایجاد یک شی
delete حذف یک شی
this اشاره به شی جاری
typeof دستیابی به نوع متغیر عملوند
void ارزیابی یک عبارت بودن بازیابی مقدار آن

عبارت‌های شرطی (Conditional Statements)

در زیر نحوه نگارش عبارت‌های شرطی با if و switch ارائه شده است.

عبارت شرطی با if

// if ساده
if (condition) {
 statements
}

// if همراه با else
if (condition) { statements
} else {
statements
}

// if خلاصه یک خطی
condition ?  expr1 :  expr2

عبارت شرطی با switch

switch (expression){ case label:
statement;
  break;
 case label2:
statement;
  break;
 default :  statement;
}

حلقه ها (Loops)

در جاوا اسکریپت امکان نوشتن حلقه ها به چهار صورت امکان پذیر است.

حلقه for

for(var i=0; i < array.length; i++){
 ...
}

حلقه do ... while

var i=0; do {
i+=1;
} while (i < 5)

حلقه while

n=8
while( n > 0) {
n--
}

حلقه while

این حلقه بر روی خصوصیات یک شی اعمالی را انجام می دهد:
student1 = new Student("Hans Christian", "Andersen", 1805); for (props in student1) {
  document.write(student1.props)
}

دستور break و continue

مانند سایر زبان‌های برنامه‌نویسی دستور break حلقه را قطع کرده و برنامه را به بعد از حلقه منتقل می‌کند. دستور continue نیز مانند break حلقه جاری را قطع می‌کند و در ادامه دور بعدی حلقه را اجرا می کند. مانند:
while(i > 0){ if(a[i]=="Orange")
break; i--;
}
while(i > 0){
 if(a[i]!="Orange")
  continue;
oranges++;
}

معرفی بعضی از اشیا موجود در جاوا اسکریپت

مهمترین آبجکت‌های جاوا اسکریپت عبارتند از:
Date
Array
Boolean
Function
Math
Number
RegExp
String
در ادامه تعدادی از این اشیا بررسی شده اند.

شی Date

برخی از متدهای شی Date
متد توضیحات
getDate() بازیابی روز ماه جاری (۱-۳۱)
getDay() بازیابی شماره روز هفته جاری (۰-۶)
getYear() سال جاری دو رقمی بین ۰ تا ۹۹ برای سالهای قبل از ۱۹۹۹ و چهار رقمی برای سال‌های بعد از آن
getFullYear() سال جاری چهار رقمی
getHours() ساعت (۰-۲۳)
getMonth() ماه (۰-۱۱) - این شماره از ماه جاری یک ماه کمتر است.
getSeconds() ثانیه جاری (۰-۵۹)
getTime() تعداد میلی‌ثانی‌های گذشته از تاریخ ۱ ژانویه ۱۹۷۰
setDate(), setHours(), . . . مقداردهی به تاریخ و زمان مورد نظر
parse() دستیابی به زمان طی شده از ۱ ژانویه ۱۹۷۰ تا زمان مورد نظر در واحد میلی‌ثانیه
toString() تبدیل تاریخ به رشته
برای استفاده از شی Date می توانید مانند زیر عمل کنید:
now = new Date // تاریخ جاری 
nowDay = now.getDay() // (0-6) 
nowHour = now.getHour() // (0-23)

شی Boolean

استفاده از شی Boolean بسیار ساده می باشد. در زیر نمونه تعریف آن آمده است:
x = true; // مقدار منطقی true
y = false; // مقدار منطقی false
z = new Boolean(false); // مقدار این شی false است.
z2 = new Boolean("false"); // مقدار ای شی true است! دقت کنید که هر رشته ای که به شی Boolean پاس شود مقدار ای شی را true می کند.
z3 = new Boolean(true); // مقدار این شی true است.

شی Math

همانطور که از اسم این شی مشخص است، کاربرد آن بیشتر در محاسبات و عبارت‌های ریاضی است.
برخی از متدهای شی Math
متد یا عبارت توضیحات
abs قدرمطلق
sin, cos, tan acos, asin, atan توابع مثلثاتی
min, max بدست آورن کمترین و بیشترین مقدار
round گردکردن مقدار
sqrt بدست آوردن جذر یک عدد
pow توان. اولین مقدار، پایه توان و دومین مقدار نمای آن می باشد. به عنوان مثال Math.pow(x,y) برابر است با xy
random ایجاد یک عدد رندوم بین صفر و یک.
Math.E مقدار ثابت عدد e (فرمول اولر یا اویلر) حدود ۲,۷۱۸
Math.PI مقدار ثابت عدد پی. حدود ۳,۱۴۱۵۹
نمونه استفاده از آبجکت Math:
a = Math.PI * r*r; with(Math){
a = PI * r*r;
x = sin(y);
}

شی String

برخی از متدهای شی String
متد توضیحات
bold مانند تگ <bold> رشته را درشت‌تر می‌کند.
italics مانند تگ <i> عمل می کند.
concat الحاق ۲ یا چند رشته
charAt دستیابی به کاراکتر از طریق ایندکس (اندیس) آن در رشته
fontcolor مانند تگ <font> به صورت <font color=color> عمل می‌کند.
fontsize مانند تگ <font> به صورت <font size=size> عمل می‌کند.
indexOf پیدا کردن اولین محل یافت شده از یک رشته در رشته دیگر. در صورتی که این جستجو نتیجه‌ای در بر نداشته باشد، مقدار بازگردانده خواهد شد.
lastIndexOf مانند indexOf با این تفاوت که آخرین محل یافت شده در جستجو را نشان می‌دهد.
length طول رشته را نشان می‌دهد.
link برای ایجاد لینک مانند تگ <a>
big مانند تگ <big>
small مانند تگ <small>
strike مانند تگ <strike>
sub مانند تگ <sub>
substring دستیابی به یک زیررشته از رشته مورد نظر.
toLowerCase تبدیل رشته به حروف کوچک
toUpperCase تبدیل رشته به حروف بزرگ
replace برای جایگزینه یک رشته در رشته دیگر کاربرد دارد.
split برای جداکردن رشته بر اساس یک الگو (جداکننده) کاربرد دارد.
مثال‌هایی از استفاده شی String و متدهای آن در زیر ارائه شده است:
var message = "Simple String";
message[0]; // مقدار "S" باز می‌گرداند.
document.write(message.bold()); // محتوای متغییر را به صورت درشت چاپ می‌کند.
message.charAt(0); // همان message[0] می‌باشد.
message.concat(" enhanced"); // مقدار "Simple String enhanced" را باز می‌گرداند.
message.length; // طول عبارت که همان عدد ۱۳ می باشد را باز می‌گرداند
message.indexOf("Simple"); // عدد ۰ را باز می‌گرداند.
message.lastIndexOf("String"); // عدد ۷ را باز می‌گرداند.
message.substring(2,5); // رشته "mple" را باز می‌گرداند.
document.write(message.replace("Simple", "Complex")); // مقدار "Complex String" را باز می‌گرداند.

رویدادها (Events)

منظور از رویداد، انتفاقی است که در سمت کاربر و براساس فعالیت‌های آن رخ می‌دهد. در زیر تعدادی از رویدادها مهم ارائه شده‌اند. دقت نمایید که فراخوانی آن‌ها در تگ‌های خاصی امکان پذیر است. به عنوان مثال رویداد onSubmit در تگ <form> فراخوانده می‌شود.
تعدادی از رویدادهای مهم در جاوا اسکریپت
رویداد زمان رخ دادن و فراخوانی
onSubmit هنگام ثبت شدن فرم
onReset هنگام زدن دکمه reset فرم
onChange هنگام تغییر یک مقدار
onSelect هنگام انتخاب یک متن در تگ <input> یا <textarea>
onBlur هنگام خارج شدن از فوکوس یک فیلد
onFocus هنگام فوکوس (انتخاب) یک فیلد
onKeydown هنگام فشردن یک کلید به پایین
onKeyup بعد از فشردن و رها کردن یک کلید
onKeypress هنگام فشردن یک کلید (مجموع onKeydown و onKeyup)
onMouseover زمانی که نشانگر ماوس بر روی منطقه تگ مورد نظر می رود.
onMouseout هنگامی که نشانگر ماوس از منطقه تگ مورد نظر خارج می شود.
onMousemove هنگام حرکت دادن نشانگر ماوس در یک منطقه
onClick هنگام کلیک کردن
onDblclick هنگام دابل کلیک کردن
onLoad هنگام بارگزاری صفحه
onUnload هنگام بستن صفحه مورد نظر
onResize هنگام تغییر دادن سایز صفحه (پنچره) مورد نظر
onError هنگام رخ دادن یک خطا جاوا اسکریپتی

پی‌نوشت

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

منابع

شاد و پیروز باشید :)

۱۱ نظر:

  1. عالی، میگم اینو با لاتک درس کن یه PDF خوشگل ازش درار کلی این دست اون دست میشه ملت دعات میکنن :)

    پاسخحذف
  2. البته این بیشتر به درد کسایی می‌خوره که حداقل یه زبان برنامه‌نویسی رو بلدن. کسایی که می‌خوان از پایه این زبان رو یاد بگیرن من اکیدا سایت codecademy.com رو پیشنهاد میکنم.

    پاسخحذف
  3. سلام،

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

    پاسخحذف
  4. سلام.
    مي بخشيد من يه سوال تخصصي داشتم...اميدوارم كمكم كنين:)
    من ميخوام طرف راست بلاگم يه عكس ثابت داشته باشم.بايد چيكار كنم؟

    پاسخحذف
  5. سلام،
    من خیلی وقته که با سیستم وبلاگ پرشین‌بلاگ کار نکردم ولی فکر کنم که باید مراحل زیر رو انجام بدین:
    ۱- عکس رو یک جا بارگزاری (آپلود) کنین. مثل: http://img4up.com/
    2- کد عکس رو به قالب سایت در قسمت ویرایش قالب اضافه کنین. مثل کد زیر:
    [html]
    <img src="FILE_ADDRESS" />
    [/html]

    پاسخحذف
  6. من تازه c++ یاد گرفتم میشه یه کتاب یا سایتی معرفی کنید

    پاسخحذف
  7. من تازه C++ یاد گرفتم میشه یه سایت معرفی کنی

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

    پاسخحذف
  9. البته تو google map که اشتباهی اینجا عنوان شد ex

    پاسخحذف
  10. سلام ممنون از زحمات شما من به یک مشکل برخوردم و در مورد وبلاگ نویسی می باشد ( بلاگفا )= من از کد های جاوا اسکریپ استفاده می کنم و در آخر کلید تایید را می زنم , پیام موفقیت به من داده می شود اما و قتی وارد وبلاگ
    می شوم هیچ کد جاوا اسکریپی در آن اعمال نشده است.لطفا مرا راهنمایی کنید. باسپاس

    پاسخحذف