JavaScript
شروع کار با JavaScript
JavaScript بطور معمول برای دستکاری عناصر HTML استفاده می شود.
تغییر محتوای عناصر HTML
در JavaScript برای دسترسی به یک عنصر HTML از طریق ID می توان از دستور ()document.getElementById استفاده کرد.
این متد بوسیله شناسه یا (ID) یک عنصر، به آن دسترسی پیدا می کند.
در مثال زیر، محتوای عنصر با شناسه "demo" به مقدار جدید، تغییر می کند:
مثال (شروع کار با JavaScript)
<!DOCTYPE html>خودتان امتحان کنید »
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
</body>
</html>همچنین در مثال زیر، تاریخ جاری سیستم، داخل عنصری با شناسه "demo" نوشته می شود (عنصر <p>):
مثال (شروع کار با JavaScript)
<html>خودتان امتحان کنید »
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>دستور ()document.write
در مثال زیر، یک عنصر <p> با محتوی "My First JavaScript" در ادامه فایل HTML نوشته می شود:
مثال (شروع کار با JavaScript)
<!DOCTYPE html>خودتان امتحان کنید »
<html>
<body>
<h1>My First Web Page</h1>
<script>
document.write("<p>My First JavaScript</p>");
</script>
</body>
</html>
توجه:در کدهای JavaScript واقعی، از دستور ()document.write استفاده نکنید. چون تمام صفحه دوباره نوشته می شود. با این وجود در اینجا دستور ()document.write یک راه ساده برای ایجاد خروجی در JavaScript را نشان می دهد. (به مثال زیر توجه نمایید)مثال (شروع کار با JavaScript)
<!DOCTYPE html>خودتان امتحان کنید »
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.write("Oops! The document disappeared!");
}
</script>
</body>
</html>JavaScript در Windows 8
Microsoft در Windows 8 برای ایجاد برنامه های تحت ویندوز، JavaScript را پشتیبانی می کند.
در آینده بطور قطع، JavaScript هم در اینترنت و هم در ویندوز استفاده خواهد شد.
شیء boolean در JavaScript
شیء Boolean برای تبدیل یک مقدار غیر Boolean به یک مقدار Boolean استفاده می شود (true یا false)
Check Boolean value
به ازای چه مقادیری شیء Boolean با true یا false تنظیم می شود.ایجاد یک شیء Boolean
شیء Boolean تنها نماینده دو مقدار می تواند باشند: True یا False
قطعه کد زیر، یک شیء Boolean بنام myBoolean ایجاد می کند:
var myBoolean=new Boolean();اگر زمان اعلان، شیء Boolean مقدار دهی نشود و یا با یکی از مقادیر زیر تنظیم شود:
- 0
- -0
- null
- ""
- false
- undefined
- NaN
شیء Boolean با مقدار false تنظیم می شود و برای بقیه مقادیر (حتی اگر با رشته "false" مقدار دهی شود) با مقدار true تنظیم خواهد شد.
مرجع کامل شیء Boolean
برای مشاهده یک مرجع کامل از خصوصیت ها (Property) و متدهای (Method) مربوط به شیء Boolean، به لینک زیر مراجعه نمایید:
عبارات منظم در JavaScript
عبارت RegExp مخفف واژه ی regular expression بمعنی عبارات منظم است.
مرجع کامل شیء RegExp
برای مشاهده یک مرجع کامل از خصوصیت ها (Property) و متدهای (Method) مربوط به شیء RegExp، به لینک زیر مراجعه نمایید:
منظور از عبارات منظم (RegExp) چیست؟
عبارت منظم، شیء ای است که درباره ی الگوی کاراکترها توضیح می دهد.
زمانی که در یک متن جستجو می کنید، می توانید از یک الگوی خاص برای کلمه ی مورد جستجو استفاده نمایید.
یک کاراکتر تنها، می تواند یک الگوی ساده باشد.
یک الگوی پیچیده تر می تواند شامل کاراکترهای بیشتری باشد و از آن می توان برای تجزیه کردن، فرمت دهی، چک کردن، جایگزینی و... استفاده نمود.
نحوه استفاده:
var patt=new RegExp(pattern,modifiers);
//یا بطور ساده تر:
var patt=/pattern/modifiers;- pattern: الگوی یک عبارت را مشخص می کند.
- modifiers: سراسری (global) بودن و یا حساس به بزرگ و کوچک بودن حروف (case-sensitive) در یک جستجو را مشخص می کند.
Modifiers در شیء RegExp
Modifiers، سراسری (global) بودن و یا حساس به بزرگ و کوچک بودن حروف (case-sensitive) در یک جستجو را مشخص می کند.
حرف "i" نشان دهنده case-insensitive بودن جستجو است. (حساس نبودن به حروف بزرگ و کوچک)
حرف "g" نشان دهنده سراسری (global) بودن جستجو است. (جستجو بعد از یافتن اولین مورد متوقف نمی شود)
مثال 1
جستجوی کلمه ی "beyamooz" در رشته str بصورت case-insensitive:
var str="Visit Beyamooz.com";
var patt1=/beyamooz/i;
document.write(str.match(patt1));خروجی کد بالا:
Beyamoozخودتان امتحان کنید »مثال 2
جستجوی کلمه ی "is" در رشته str بصورت سراسری (global):
var str="Is this all there is?";
var patt1=/is/g;
document.write(str.match(patt1));خروجی کد بالا:
is,isخودتان امتحان کنید »مثال 3
جستجوی کلمه ی "is" در رشته str بصورت سرارسی (global) و case-insensitive:
var str="Is this all there is?";
var patt1=/is/gi;
document.write(str.match(patt1));خروجی کد بالا:
Is,is,isخودتان امتحان کنید »متد ()test
متد ()test، یک رشته را داخل یک مقدار مشخص جستجو می کند و براساس نتیجه، مقدار true یا false را برمی گرداند.
در مثال زیر، کاراکتر "e" در رشته جستجو می شود:
مثال (عبارات منظم در JavaScript)
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));چون کاراکتر "e" در رشته وجود دارد، خروجی کد بالا به صورت زیر خواهد بود:
trueخودتان امتحان کنید »متد ()exec
متد ()exec، یک رشته را داخل یک مقدار مشخص جستجو می کند و براساس نتیجه، مقدار جستجو شده یا null را برمی گرداند.
در مثال زیر، کاراکتر "e" در رشته جستجو می شود:
مثال 1
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));چون کاراکتر "e" در رشته وجود دارد، خروجی کد بالا به صورت زیر خواهد بود:
eخودتان امتحان کنید »{nice1}
عملگرها در JavaScript
عملگرها در JavaScript
عملگر انتساب (=) برای اختصاص یک مقدار به یک متغیر به کار می رود.
عملگر محاسباتی (+) برای جمع کردن مقادیر با یکدیگر به کار می رود.
y=5;
z=2;
x=y+z;بعد از اجرای دستورات بالا مقدار x برابر 7 است.
عملگرهای محاسباتی JavaScript
عملگرهای ریاضی برای اجرای محاسبات بین متغیرها و یا مقادیر به کار می رود.
جدول زیر، عملگرهای محاسباتی JavaScript را توضیح می دهد (با فرض y=5):
عملگر (Operator) توضیحات مثال نتیجه + جمع x=y+2 x=7 y=5 - تفریق x=y-2 x=3 y=5 * ضرب x=y*2 x=10 y=5 / تقسیم x=y/2 x=2.5 y=5 % باقیمانده تقسیم x=y%2 x=1 y=5 ++ افزایش یک واحد x=++y x=6 y=6 x=y++ x=5 y=6 -- کاهش یک واحد x=--y x=4 y=4 x=y-- x=5 y=4 عملگرهای انتسابی JavaScript
عملگرهای انتسابی، مقادیر را به متغیرها اختصاص می دهند.
جدول زیر، عملگرهای انتسابی JavaScriptرا توضیح می دهد (با فرض y=5 و x=10):
عملگر مثال یکسان با مثال نتبجه = x=y x=5 += x+=y x=x+y x=15 -= x-=y x=x-y x=5 *= x*=y x=x*y x=50 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0 عملگر (+) در رشته ها
عملگر (+) علاوه بر استفاده در محاسبات ریاضی برای جمع دو متغیر رشته ای و یا مقادیر متنی نیز بکار می رود.
مثال:
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;بعد از اجرای کد بالا، متغیر txt3 برابر "what a verynice day" می شود.
برای اضافه کردن فضای خالی بین دو متن، در انتها یا ابتدای یکی از آنها فضای خالی قرار می دهیم:
txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;یا بین دو متغیر یک فضای خالی قرار می دهیم:
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;بعد از اجرای کد بالا، متغیر txt3 برابر "what a very nice day" می شود.
جمع رشته ها و اعداد
یک قانون وجود دارد! اگر شما یک عدد و یک رشته را با هم جمع کنید حاصل یک رشته خواهد بود.
به مثال های زیر توجه کنید:
مثال (عملگرها در JavaScript)
x=5+5;خودتان امتحان کنید »
document.write(x);
x="5"+"5";
document.write(x);
x=5+"5";
document.write(x);
x="5"+5;
document.write(x);عملگرهای مقایسه ای JavaScript
عملگرهای مقایسه ای در دستورات منطقی برای تعیین تساوی یا اختلاف بین متغیرها و یا مقادیر استفاده می شوند.
جدول زیر، عملگرهای مقایسه ای JavaScript را توضیح می دهد (با فرض x=5):
عملگر توضیحات مثال نتیجه == تساوری x==8
x==5false
true=== تساوی از نظر نوع و مقدار x===5
x==="5"true
false!= مخالف x!=8 true > بزرگتر از x>8 false < کوجکتر از x<8 true => بزرگتر و مساوری x>=8 false =< کوچکتر و مساوی x<=8 true چگونه از آن استفاده کنیم؟
عملگرهای مقایسه ای در دستورات شرطی برای مقایسه مقادیر استفاده می شوند.
if (age<18) document.write("Too young");در فصل های آینده درباره دستورات شرطی بیشتر خواهید آموخت.
عملگرهای منطقی JavaScript
عملگرهای منطقی برای تعیین منطق بین متغیرها و یا مقادیر استفاده می شود.
جدول زیر، عملگرهای منطقی JavaScript را توضیح می دهد (با فرض x=6 و y=3):
عملگر توضیحات مثال نتیجه && and (x < 10 && y > 1) true || or (x==5 || y==5) false ! not !(x==y) true عملگر شرطی (?)
عملگر (?) یک عملگر شرطی است که مقداری را به یک متغیر، مبنی بر یک یا چند شرط انتساب می دهد.
نحوه استفاده
variablename=(condition)?value1:value2مثال
مثال (عملگرها در JavaScript)
اگر متغیر visitor با مقدار "PRES" تنظیم شده باشد، آنگاه مقدار "Dear President" به متغیر greeting اختصاص داده خواهد شد و در غیر اینصورت، مقدار آن "Dear" می شود.
<script type="text/javascript">خودتان امتحان کنید »
var visitor="PRES";
var greeting=(visitor=="PRES")?"Dear President ":"Dear ";
document.write(greeting);
</script>کتابخانه prototype
اضافه کردن کتابخانه Prototype به صفحه وب
برای استفاده از یک کتابخانه JavaScript، باید آنرا به صفحه وبتان اضافه نمایید.
برای اضافه کردن کتابخانه، باید از تگ <script> استفاده کنید و خصوصیت src آنرا با URL کتابخانه تنظیم نمایید.
اضافه کردن Prototype
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js>
</script>
</head>
<body>
</body>
</html>توصیف Prototype
کتابخانه Prototype توابعی را برای برنامه نویسی آسان تر، فراهم می کند.
مانند jQuery، کتابخانه Prototype نیز تابع ()$ را دارد.
تابع ()$، معادل متد ()document.getElementById در JavaScript عمل می کند. اگر با توجه به مدل DOM در HTML، شناسه یک عنصر به آن ارسال شود، در Prototype به کلیه خصوصیت ها و متدهای آن دسترسی خواهید داشت.
برخلاف jQuery، کتابخانه Prototype متد ()ready را ندارد. بجای آن در Prototype ملحقاتی به مرورگر و مدل DOM اضافه شده است.
اختصاص یک تابع به رویداد onload:
در JavaScript، می توان یک تابع را به یک رویداد مثل onload اختصاص داد:
روش JavaScript:
function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello Prototype";
}
onload=myFunction;معادل کد بالا در Prototype با کمی تفاوت:
روش Prototype:
function myFunction()
{
$("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);سه پارامتر ورودی شیء ()Event.observe:
- پارامتر اول (window): شیء DOMی است که می خواهید روی آن کار کنید.
- پارامتر دوم (load): رویدادی است که می خواهید به ازای آن کاری انجام شود.
- پارامتر سوم (myFunction): تابعی است که می خواهید صدا زده شود.
کار کردن با Prototype
مثال زیر را امتحان کنید:
مثال (کتابخانه prototype)
<!DOCTYPE html>خودتان امتحان کنید »
<html>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js">
</script>
<script>
function myFunction()
{
$("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>مثال زیر را نیز امتحان کنید:
مثال (کتابخانه prototype)
<!DOCTYPE html>خودتان امتحان کنید »
<html>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js">
</script>
<script>
function myFunction()
{
$("h01").writeAttribute("style","color:red").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>همان طور که در مثال بالا می بینید، مانند jQuery در Prototype نیز می توانید چندین کار را بطور همزمان روی یک شیء انجام دهید. (زنجیره ای کردن یا Chaining)
$("h01").writeAttribute("style","color:red").insert("Hello Prototype!");
کتابخانه های JavaScript
بعضی کتابخانه های معروف JavaScript:
- jQuery
- MooTools
- Prototype
کتابخانه های JavaScript
برنامه نویسی پیشرفته در JavaScript (بخصوص پیچیدگی کارکردن با مرورگرهای مختلف) می تواند اغلب، مشکل و زمان گیر باشد.
برای برخورد با این مشکل، کتابخانه های زیادی در JavaScript گسترش یافته است.
کتابخانه های JavaScript را اغلب JavaScript framework نیز می نامند.
در این آموزش، نگاهی به بعضی از کتابخانه های محبوب JavaScript خواهیم انداخت:
- jQuery
- MooTools
- Prototype
تمام این کتابخانه ها، توابعی برای انجام کارهای معمول در JavaScript مانند: دستکاری عناصر، کار با Ajax و متحرک سازی را دارند.
jQuery
امروزه jQuery محبوب ترین کتابخانه JavaScript است.
در jQuery برای دسترسی به عناصر HTML و دستکاری آنها از گزینشگرهای CSS استفاده شده است. (CSS selector)
بعضی از شرکت های بزرگی که از jQuery استفاده کرده اند:
- Microsoft
- IBM
- Netflix
اگر می خواهید درباره jQuery مطاب بیشتری را بخوانید، لطفاً به لینک jQuery HOME مراجعه نمایید.
Prototype
Prototype یکی از کتابخانه های JavaScript است که یک API ساده برای انجام کارهای معمول در JavaScript فراهم نموده است.
API مخفف کلمات (Application Program Interface) به معنی "واسط برنامه های کاربردی" است و کتابخانه ای شامل خصوصیت ها و متدهایی برای دستکاری عناصر HTML است.
Prototype کارآیی JavaScript را با فراهم نمودن کلاس ها و ارث بری، افزایش می دهد.
MooTools
کتابخانه MooTools، نیز frameworkی است که یک API ساده را برای برنامه نویسی آسان تر در JavaScript فراهم نموده است.
MooTools، همچنین شامل توابعی برای افکت دهی و متحرک سازی است.
CDN
CDN مخفف کلمات Content Delivery Networks است. (تحویل محتوی، روی شبکه)
شما همیشه می خواهید که صفحات وبتان، تا جای ممکن سریع و کم حجم باشند و مرورگر نیز تا جای ممکن آنها را cache کند.
از کتابخانه های JavaScript، در وب سایت های مختلف، استفاده می شود، بنابراین احساس می شود که باید یک مکان مشترک برای استفاده عموم از این کتابخانه ها روی اینترنت ایجاد شود.
CDN این مشکل را حل کرده است. CDN، یک شبکه از چندیدن کتابخانه عمومی JavaScript است.
Google، یک CDN رایگان از کتابخانه های JavaScript فراهم نموده است:
- jQuery
- Prototype
- MooTools
- Dojo
- Yahoo! YUI
برای استفاده از کتابخانه های JavaScript در وب سایتتان، فقط کافی که آدرس URL آن کتابخانه را با استفاده از تگ <script> به صفحه اضافه نمایید:
اضافه کردن jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>کلیه دستورات JavaScript
کلیه دستورات JavaScript
با استفاده از دستورات JavaScript در HTML، می توانید به مرورگر فرمان بدهید.
هدف از این دستورات این است که به مرورگر بگوییم چه کاری را باید انجام دهد.
با استفاده از کد JavaScript زیر به مرورگر می گوییم که، محتوای عنصر با id یا شناسه "demo" را مساوی با ".Hello Dolly" قرار دهد:
مثال (کلیه دستورات JavaScript)
document.getElementById("demo").innerHTML = "Hello Dolly.";
خودتان امتحان کنید »برای کسب اطلاعات بیشتر در مورد دستورات JavaScript به لینک روبرو مراجعه فرمایید: آموزش JS-دستورات
لیست تمام دستورات JavaScript
با استفاده از کلمات رزرو شده که هر کدام معادل یک دستور JavaScript است می توانید دستورات را اجرا نمایید.
از این کلمات رزرو شده نمی توانید برای نامگذاری متغیرها (یا چیزهای دیگر) استفاده کنید.در جدول زیر، لیست تمام دستورات JavaScript آورده شده است:
دستور توضیحات break از این دستور در JavaScript، برای خروج کامل از یک switch یا یک حلقه استفاده می شود. continue از این دستور در JavaScript، برای خروج از گام جاری حلقه استفاده می شود. یعنی اگر در حلقه یک شرط مشخص اتفاق بیافتد اجرای ادامه کد، متوقف شده و حلقه به گام بعدیش منتقل می شود. debugger از این دستور در JavaScript، برای متوقف کردن اجرای JavaScript و فراخوانی تابع debugging البته اگر در دسترس باشد استفاده می شود. (اگر تابع debugging در دسترس نباشد، این دستور تأثیری نخواهد داشت) do... while از این دستور در JavaScript، برای ایجاد حلقه استفاده می شود. دستورات داخل حلقه چه شرط حلقه درست باشد و چه نباشد برای یک بار اجرا می شود، و در مراحل بعدی اگر شرط حلقه درست بود، دستورات اجرا می شوند. for از این دستور در JavaScript، برای ایجاد حلقه استفاده می شود. دستورات داخل حلقه از یک عدد مشخص به تعدادی مشخص تکرار می شوند. for... in از این دستور در JavaScript، برای ایجاد حلقه در اشیاء استفاده می شود و مخصوص کار با آرایه ها و خصوصیات اشیاء می باشد و به واسطه آنها حلقه ایجاد می کند. function از این دستور در JavaScript، برای ایجاد تابع استفاده می شود. if... else... else if از این دستور در JavaScript، برای اجرای یک دستور از بین چند دستور استفاده می شود. return از این دستور در JavaScript، برای متوقف کردن کامل اجرای یک تابع و برگرداندن یک مقدار توسط آن تابع استفاده می شود. switch از این دستور در JavaScript، برای انتخاب و اجرای یک دستور از بین چند دستور استفاده می شود. throw از این دستور در JavaScript، برای پرتاب کردن یا تولید یک خطا به سمت catch استفاده می شود. try... catch... finally از این دستورات در JavaScript، برای برخورد با خطاها استفاده می شود. var از این دستور در JavaScript، برای تعریف یا اعلان یک متغیر استفاده می شود. while از این دستور در JavaScript، برای ایجاد یک حلقه استفاده می شود. تا زمانی که شرط حلقه درست باشد، دستورات اجرا می شود. کلیه عملگرها در JavaScript
با استفاده از عملگرها در JavaScriptمی توانید مقادیر را به متغیرها انتساب دهید و یا آنها را مقایسه کنید. همچنین می توانید عملگرهای ریاضی را روی مقادیر اجرا نمایید.
عملگرهای ریاضی در JavaScript
عملگرهای ریاضی برای اجرای محاسبات بین متغیرها و یا مقادیر به کار می رود.
جدول زیر، عملگرهای محاسباتی JavaScript را توضیح می دهد (با فرض y=5):
عملگر توضیحات مثال محتوای y محتوای x + جمع x = y + 2 y = 5 x = 7 - تفریق x = y - 2 y = 5 x = 3 * ضرب x = y * 2 y = 5 x = 10 / تقسیم x = y / 2 y = 5 x = 2.5 % باقیمانده تقسیم x = y % 2 y = 5 x = 1 ++ افزایش یک واحد x = ++y y = 6 x = 6 x = y++ y = 6 x = 5 -- کاهش یک واحد x = --y y = 4 x = 4 x = y-- y = 4 x = 5 برای کسب اطلاعات بیشتر در مورد اعداد در JavaScript به لینک روبرو مراجعه فرمایید: آموزش JS-عملگرها
عملگرهای انتسابی در JavaScript
عملگرهای انتسابی، مقادیر را به متغیرها اختصاص می دهند.
جدول زیر، عملگرهای انتسابی JavaScript را توضیح می دهد (با فرض y=5 و x=10):
عملگر مثال Same As محتوای x = x = y x = y x = 5 += x += y x = x + y x = 15 -= x -= y x = x - y x = 5 *= x *= y x = x * y x = 50 /= x /= y x = x / y x = 2 %= x %= y x = x % y x = 0 برای کسب اطلاعات بیشتر در مورد اعداد در JavaScript به لینک روبرو مراجعه فرمایید: آموزش JS-عملگرها
عملگرهای رشته ای در JavaScript
عملگرهای (+) و (=+) علاوه بر استفاده در محاسبات ریاضی برای جمع دو متغیر رشته ای و یا مقادیر متنی نیز بکار می روند.
جدول زیر، عملگرهای رشته ای JavaScript را توضیح می دهد (با فرض text1=Good و text2=Morning و ""=text3):
عملگر مثال متن 1 متن 2 متن 3 + text3 = text1 + text2 "Good " "Morning" "Good Morning" += text1 += text2 "Good " "Morning" "" عملگرهای مقایسه ای JavaScript
عملگرهای مقایسه ای در دستورات منطقی برای تعیین تساوی یا اختلاف بین متغیرها و یا مقادیر استفاده می شوند.
جدول زیر، عملگرهای مقایسه ای JavaScript را توضیح می دهد (با فرض x=5):
عملگر توضیحات مقایسه نتیجه == تساوی x == 8 false x == 5 true === تساوی از نظر نوع و مقدار x === "5" false x === 5 true != مخالف x != 8 true !== مخالف از نظر نوع و مقدار x !== "5" true x !== 5 false > بزرگتر از x > 8 false < کوچکتر از x < 8 true >= بزرگتر و مساوی x >= 8 false <= کوچکتر و مساوی x <= 8 true برای کسب اطلاعات بیشتر در مورد اعداد در JavaScript به لینک روبرو مراجعه فرمایید: آموزش JS-عملگرها
عملگر شرطی
با استفاده از عملگر شرطی (؟) می توانید یک مقدار را بر اساس یک شرط به یک متغیر انتساب دهید:
نحوه ی استفاده مثال variablename= (condition) ? value1:value2 voteable = (age < 18) ? "Too young":"Old enough"; توضیح مثال: اگر مقدار متغیر age کوچکتر از 18 باشد متغیر voteable با مقدار "Too young" تنظیم می شود والا با "Old enough" تنظیم خواهد شد.
عملگرهای منطقی JavaScript
عملگرهای منطقی برای تعیین منطق بین متغیرها و یا مقادیر استفاده می شود.
جدول زیر، عملگرهای منطقی JavaScript را توضیح می دهد (با فرض x=6 و y=3):
عملگر توضیحات مثال && and (x < 10 && y > 1) is true || or (x == 5 || y == 5) is false ! not !(x == y) is true عملگرهای بیتی
این عملگرها بر روی بیت های یک متغییر، عملی را انجام میدهند و بیت ها را به نسبت عملگر برمی گردانند. اگر متغییرها رشته هستند بر روی کدهای ASCII آنها عمل می کند. توجه داشته باشید که عملگرهای بیتی در جاوااسکریپت از سیستم 32 بیتی استفاده می کنند یعنی ابتدا عملوند به یک عدد 32 بیتی تبدیل می شود و سپس عملیات انجام می شود.
عملگر توضیحات مثال تبدیل نتیجه معادل عددی & AND x = 5 & 1 0101 & 0001 0001 1 | OR x = 5 | 1 0101 | 0001 0101 5 ~ NOT x = ~ 5 ~0101 1010 6- ^ XOR x = 5 ^ 1 0101 ^ 0001 0100 4 << Left shift x = 5 << 1 0101 << 1 1010 10 >> Right shift x = 5 >> 1 0101 >> 1 0010 2 توجه: در مثال های بالا، از سیستم 4 بیتی استفاده شده است اما همانطور که گفته شد در جاوااسکریبت از سیستم 32 بیتی استفاده می شود. همچنین اولین بیت از سمت چپ برای علامتگذاری عدد استفاده می شود. یعنی برای اعداد مثبت از 0 و برای اعداد منفی از 1 استفاده خواهد شد.بنابراین برای مثال ردیف سوم، (x = ~ 5) بجای 10 مقدار 6- برگشت خواهد شد:
~00000000000000000000000000000101 return 11111111111111111111111111111010
کلیه متدها و خصوصیات عمومی
کلیه خصوصیت ها و توابع عمومی را می توانید همراه با تمام اشیاء توکار JavaScriptاستفاده نمایید.
مرجع خصوصیات عمومی در JavaScript
متد توضیحات Infinity یک مقدار عددی که نشان دهنده ی مثبت/منفی بی نهایت است.
NaN نشان دهنده ی یک مقدار غیر عددی می باشد.
undefined نشان می دهد که به یک متغیر، مقداری انتساب داده نشده است.
مرجع توابع عمومی در JavaScript
تابع توضیحات decodeURI() رمزگشایی کردن یک URI. decodeURIComponent() رمزگشایی کردن یک کامپوننت URI.
encodeURI() رمزگذاری کردن یک URI. encodeURIComponent() رمزگذاری کردن یک کامپوننت URI.
escape() بد دانسته شده در ورژن 1.5. می توانید به جای آن از متدهای encodeURI()و encodeURIComponent() استفاده کنید.
eval() یک رشته را ارزیابی کرده و در صورتی که یک کد اسکریپت باشد، آن را به اجرا در می آورد.
isFinite() مشخص می کند که آیا یک مقدار، یک عدد محدود و قانونی است یا نه.
isNaN() مشخص می کند که آیا یک مقدار، یک عدد غیرقانونی است یا نه.
Number() مقدار یک شیء را تبدیل به عدد می کند.
parseFloat() یک رشته را تجزیه کرده و عدد با ممیز شناور را برمی گرداند.
parseInt() یک رشته را تجزیه کرده و یک عدد صحیح را برمی گرداند.
String() مقدار یک شیء را تبدیل به رشته می کند.
unescape() بد دانسته شده در ورژن 1.5. می توانید به جای آن از متدهایdecodeURI() و decodeURIComponent() استفاده کنید.
کلیه متدهای شیء Array
شیء Array در JavaScript
شیء آرایه یک نوع خاص از متغیر هاست که می تواند چندین داده را در قالب یک نام در خود ذخیره کند.
var cars = ["Saab", "Volvo", "BMW"];توجه: ایندکس آرایه از صفر شروع می شود، یعنی اولین آیتم [0] است، دومین آیتم [1] و...برای کسب اطلاعات بیشتر در مورد آرایه ها در JavaScriptبه لینک روبرو مراجعه فرمایید: آموزش JS-آرایه ها
کل خصوصیت های مربوط به آرایه ها در JavaScript
متد توضیحات constructor این خصوصیت، تابع سازنده ی آرایه را برمی گرداند.
length این خصوصیت، تعداد عناصر یک آرایه را برمی گرداند.
prototype این خصوصیت، امکان اضافه کردن خصوصیت یا متد را به یک شیء آرایه فراهم می کند.
کل متدهای مربوط به آرایه ها در JavaScript
متد توضیحات concat() این متد، دو آرایه را به هم الحاق کرده و یک کپی از آرایه های الحاق شده را برمی گرداند.
indexOf() این متد، آرایه را برای یافتن یک عنصر جستجو کرده و مکان آن را برمی گرداند.
join() این متد، تمام عناصر یک آرایه را الحاق کرده و در یک رشته قرار می دهد.
lastIndexOf() این متد، آرایه را برای یک عنصر جستجو کرده و مکان آن را برمی گرداند.
pop() این متد، آخرین عنصر یک آرایه را حذف کرده و آن عنصر را برمی گرداند.
push() این متد، عناصر جدید را به آخر یک آرایه اضافه می کند و طول آرایه جدید را برمی گرداند.
reverse() این متد، ترتیب عناصر یک آرایه را معکوس می کند.
shift() این متد، اولین عنصر یک آرایه را حذف کرده و آن عنصر را برمی گرداند.
slice() این متد، قسمتی از یک آرایه را جدا کرده و آرایه جدید را برمی گرداند.
sort() این متد، عناصر یک آرایه را مرتب می کند.
splice() این متد، عناصر را به آرایه اضافه یا حذف می کند.
toString() این متد، یک آرایه را تبدیل به رشته کرده و نتیجه را برمی گرداند.
unshift() این متد، عناصر جدید را به ابتدای یک آرایه اضافه می کند و طول آرایه ی جدید را برمی گرداند.
valueOf() این متد، مقدار اولیه ی یک آرایه را برمی گرداند.
کلیه متدهای شیء Boolean
شیء Boolean در JavaScript
شیء Boolean در JavaScriptمی تواند دو مقدار true یا false را داشته باشد.
تابع ()Boolean
با استفاده از تابع ()Boolean می توانید درست یا نادرست بودن یک عبارت را بفهمید:
و یا حتی راحتر:
مثال (کلیه متدهای شیء Boolean)
(10 > 9) // also returns true
10 > 9 // also returns true
خودتان امتحان کنید »برای کسب اطلاعات بیشتر در مورد شیء Boolean به لینک روبرو مراجعه فرمایید: آموزش JS-شیء Boolean
خصوصیت های شیء Boolean
متد توضیحات constructor از این متد، برای برگرداندن تابع سازنده ی Boolean استفاده می شود.
prototype از این متد، برای اضافه کردن خصوصیت یا متد به یک شیء استفاده می شود.
متدهای شیء Boolean
متد توضیحات toString() این متد، یک مقدار boolean را تبدیل به رشته کرده و نتیجه را برمی گرداند.
valueOf() این متد، مقدار اولیه ی یک boolean را برمی گرداند.
کلیه متدهای شیء Date
شیء Date
از شیء Date برای کار کردن بر روی تاریخ و زمان استفاده می شود.
اشیاء Date به وسیله ی دستور new Date() ایجاد می شوند.
چهار راه برای تعریف یک شیء Date وجود دارد:
var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);برای کسب اطلاعات بیشتر در مورد تاریخ و زمان به لینک روبرو مراجعه فرمایید: آموزش JS-تاریخ
خصوصیات شیء Date
متد توضیحات constructor از این خصوصیت در Javascript، برای برگرداندن تابع سازنده ی شیء date استفاده می شود. prototype از این خصوصیت در Javascript، برای اضافه کردن خصوصیت یا متد به یک شیء استفاده می شود. متدهای شیء Date
متد توضیحات getDate() از این متد در Javascript، برای برگرداندن روز نسبت به ماه استفاده می شود(از 1 تا 31). getDay() از این متد در Javascript، برای برگرداندن روز نسبت به هفته استفاده می شود(از 0 تا 6). getFullYear() از این متد در Javascript، برای برگرداندن سال استفاده می شود. getHours() از این متد در Javascript، برای برگرداندن ساعت استفاده می شود(از 0 تا 23). getMilliseconds() از این متد در Javascript، برای برگرداندن میلی ثانیه ها استفاده می شود(از 0 تا 999). getMinutes() از این متد در Javascript، برای برگرداندن دقیقه ها استفاده می شود(از 0 تا 59). getMonth() از این متد در Javascript، برای برگرداندن ماه استفاده می شود(از 0 تا 11). getSeconds() از این متد در Javascript، برای برگرداندن ثانیه ها استفاده می شود(از 0 تا 59). getTime() از این متد در Javascript، برای برگرداندن میلی ثانیه ها از نیمه شب 1 ژانویه 1970 تا اکنون استفاده می شود. getTimezoneOffset() از این متد در Javascript، برای برگرداندن اختلاف بین زمان جهانی(UTC) و زمان محلی در دقیقه استفاده می شود. getUTCDate() از این متد در Javascript، برای برگرداندن روز نسبت به ماه طبق زمان جهانی استفاده می شود(از 1 تا 31). getUTCDay() از این متد در Javascript، برای برگرداندن روز نسبت به هفته طبق زمان جهانی استفاده می شود(از 0 تا 6). getUTCFullYear() از این متد در Javascript، برای برگرداندن سال بعنوان یک عدد چهار رقمی طبق زمان جهانی استفاده می شود. getUTCHours() از این متد در Javascript، برای برگرداندن ساعت طبق زمان جهانی استفاده می شود(از 0 تا 23). getUTCMilliseconds() از این متد در Javascript، برای برگرداندن میلی ثانیه ها طبق زمان جهانی استفاده می شود(از 0 تا 999). getUTCMinutes() از این متد در Javascript، برای برگرداندن دقیقه ها طبق زمان جهانی، استفاده می شود(از 0 تا 59). getUTCMonth() از این متد در Javascript، برای برگرداندن ماه، طبق زمان جهانی استفاده می شود(از 0 تا 11). getUTCSeconds() از این متد در Javascript، برای برگرداندن ثانیه ها، طبق زمان جهانی، استفاده می شود(از 0 تا 59). getYear() غیرقابل استفاده ، به جای آن از متد getFullYear استفاده کنید. parse() از این متد در Javascript، برای تجزیه یک تاریخ و برگرداندن تعداد میلی ثانیه ها از1 ژانویه 1970 تا آن تاریخ استفاده می شود. setDate() از این متد در Javascript، برای ست کردن روز نسبت به ماه در یک شیء تاریخ استفاده می شود. setFullYear() از این متد در Javascript، برای ست کردن سال(4 رقمی) در یک شیء تاریخ استفاده می شود. setHours() از این متد در Javascript، برای ست کردن ساعت در یک شیء تاریخ استفاده می شود. setMilliseconds() از این متد در Javascript، برای ست کردن میلی ثانیه ها در یک شیء تاریخ استفاده می شود. setMinutes() از این متد در Javascript، برای ست کردن دقیقه ها در یک شیء تاریخ استفاده می شود. setMonth() از این متد در Javascript، برای ست کردن ماه در یک شیء تاریخ استفاده می شود. setSeconds() از این متد در Javascript، برای ست کردن ثانیه ها در یک شیء تاریخ استفاده می شود . setTime() از این متد در Javascript، برای ایجاد یک تاریخ از تعداد مشخصی میلی ثانیه، قبل یا بعد از تاریخ 1 ژانویه 1970، استفاده می شود. setUTCDate() از این متد در Javascript، طبق زمان جهانی، برای ست کردن روز نسبت به ماه در یک شیء تاریخ استفاده می شود. setUTCFullYear() از این متد در Javascript، طبق زمان جهانی ،برای ست کردن سال(چهار رقمی)در یک شیء تاریخ استفاده می شود. setUTCHours() از این متد در Javascript، برای ست کردن ساعت در یک شیء تاریخ طبق زمان جهانی استفاده می شود. setUTCMilliseconds() از این متد در Javascript، برای ست کردن میلی ثانیه ها در یک شیء تاریخ ،طبق زمان جهانی استفاده می شود. setUTCMinutes() از این متد در Javascript، برای ست کردن دقیقه ها در یک شیء تاریخ طبق زمان جهانی استفاده می شود. setUTCMonth() از این متد در Javascript، برای ست کردن ماه در یک شیء تاریخ طبق زمان جهانی،استفاده می شود. setUTCSeconds() از این متد در Javascript، برای ست کردن ثانیه ها در یک شیء تاریخ طبق زمان جهانی استفاده می شود. setYear() غیر قابل استفاده ،به جای آن از متد setFullYear استفاده کنید . toDateString() از این متد در Javascript، برای جدا کردن قسمت مربوط به تاریخ از یک تاریخ، و تبدیل آن بصورت یک رشته ی قابل خواندن، استفاده می شود.
toGMTString() غیر قابل استفاده،به جای آن از متدtoUTCString استفاده کنید. toISOString() از این متد درJavascript، برای برگرداندن تاریخ بعنوان یک رشته،طبق استاندارد ISO استفاده می شود. toJSON() از این متد درJavascript، برای برگرداندن تاریخ بعنوان یک رشته و تغییر فرمت آن طبق فرمت تاریخ در JSON استفاده می شود. toLocaleDateString() از این متد درJavascript، برای برگرداندن قسمت مربوط به تاریخ از یک تاریخ کامل که فرمت نوشتن آن بصورت معمولی نوشتن تاریخ است، استفاده می شود. toLocaleTimeString() از این متد درJavascript، برای برگرداندن قسمت مربوط به زمان از یک تاریخ کامل که فرمت نوشتن آن بصورت معمولی نوشتن زمان است، استفاده می شود. toLocaleString() از این متد درJavascript، برای برگرداندن تاریخ بعنوان یک رشته که بصورت معمولی نوشتن تاریخ است، استفاده می شود. toString() از این متد درJavascript، برای تبدیل شیء تاریخ به یک رشته، استفاده می شود. toTimeString() از این متد درJavascript، برای تبدیل قسمت زمان از یک شیء تاریخ، به یک رشته استفاده می شود. toUTCString() از این متد درJavascript، برای تبدیل یک شیء تاریخ به رشته، طبق ساعت جهانی، استفاده می شود. UTC() از این متد درJavascript، برای برگرداندن تعداد میلی ثانیه های یک تاریخ از 1 ژانویه 1970 تا آن تاریخ ،طبق ساعت جهانی استفاده می شود. valueOf() از این متد درJavascript، برای برگرداندن مقدار اولیه ی یک شیء تاریخ استفاده می شود. کلیه متدهای شیء Math
شیء Math در JavaScript
با استفاده از شیء Math در JavaScriptمی توانید کارهای مربوط به ریاضیات را انجام داد.
تمام متدها و خصوصیات مربوط به Math را می توانید بدون ایجاد شیء و مستقیماً با استفاده از Math بعنوان یک شیء استفاده نمایید. Math یک سازنده (constructor) نیست.
نحوه استفاده
var x = Math.PI; // Returns PI
var y = Math.sqrt(16); // Returns the square root of 16برای کسب اطلاعات بیشتر در مورد شیء Math در JavaScript به لینک روبرو مراجعه فرمایید: آموزش JS-شیء Math
تمام خصوصیت های شیء Math
متد توضیحات E این متد، عدد اولر را برمی گرداند(حدود 2.718).
LN2 این متد، لگاریتم طبیعی 2 را برمی گرداند(حدود 0.693).
LN10 این متد، لگاریتم طبیعی 10 را برمی گرداند(حدود 2.302).
LOG2E این متد، لگاریتم E در مبنای 2 را برمی گرداند(حدود 1.442).
LOG10E این متد، لگاریتم E در مبنای 10 را برمی گرداند(حدود 0.434).
PI این متد، عدد پی را برمی گرداند(حدود 3.14).
SQRT1_2 این متد، ریشه ی دوم 1/2 را برمی گرداند(حدود 0.707).
SQRT2 این متد، ریشه ی دوم 2 را برمی گرداند.
تمام متدهای شیء Math
متد توضیحات abs(x) این متد، قدر مطلق x را برمی گرداند.
acos(x) این متد، arccos(آرک کسینوس) x را بر می گرداند.
asin(x) این متد، arcsin(آرک سینوس) x را به رادیان، برمی گرداند.
atan(x) این متد، arctan(آرک تانژانت)،x را بصورت یک مقدار عددی، بین PI/2- و PI/2 رادیان برمی گرداند.
atan2(y,x) این متد، آرک تانژانت(arctan) خارج قسمتِ آرگومان هایش را برمی گرداند.
ceil(x) این متد، مقدار سقف x را برمی گرداند. سقف x در واقع کوچکترین عدد صحیحِ بزرگتر یا مساوی x است.
cos(x) این متد، کسینوس x را به رادیان برمی گرداند.
exp(x) این متد، مقدار Ex را برمی گرداند.
floor(x) این متد، جزء صحیح x را برمی گرداند. جزء صحیح x در واقع بزرگترین عدد صحیحِ کوچکتر یا مساوی با x است(مقدار کف x).
log(x) این متد، لگاریتم طبیعی x(در مبنای E) را برمی گرداند.
max(x,y,z,...,n) این متد، بزرگترین عدد را برمی گرداند.
min(x,y,z,...,n) این متد، کوچکترین عدد را برمی گرداند.
pow(x,y) این متد، x را به توان y رسانده و حاصل را برمی گرداند.
random() این متد، یک عدد تصادفی بین 0 و 1 را برمی گرداند.
round(x) این متد، x را به نزدیک ترین عدد صحیح گرد می کند.
sin(x) این متد، سینوس x را به رادیان برمی گرداند.
sqrt(x) این متد، جذر x را برمی گرداند.
tan(x) این متد، تانژانت x را برمی گرداند.
کلیه متدهای شیء RegExp
شیء RegExp در JavaScript - عبارات منظم در JavaScript
با استفاده از شیء RegExp می توانید، الگوی بکار رفته در کاراکترها را تعریف نمایید.
عبارات منظم را می توانید در توابع search و یا replace بکار ببرید.
نکته: برای فهمیدن آسان تر عبارات منظم، توصیه می کنیم، از سایت بسیار کاربردی زیر استفاده نمایید:
نحوه استفاده
/pattern/modifiers;مثال:
var patt = /beyamooz/iتوضیح مثال:
- محتوای متغیر patt شامل یک عبارت منظم است.
- beyamooz الگوی ماست و شاید بخواهید در یک عبارت آنرا جستجو کنیم.
- i یک modifier یا یک اصلاحگر است و مشخص می کند که عملیات جستجو به حروف بزرگ و کوچک، حساس نباشد (case-insensitive)
برای کسب اطلاعات بیشتر درباره عبارات منظم در JavaScript به لینک روبرو مراجعه فرمایید: آموزش JS-شیء RegExp
Modifiers
از modifier ها برای مشخص کردن تطابق های غیر حساس به حروف بزرگ و کوچک و همچنین مشخص کردن تطابق سراسری استفاده می شود.
Modifier توضیحات i مشخص کردن تطابق غیر حساس به حروف بزرگ و کوچک.
g مشخص کردن یک تطابق سراسری(global). (پیدا کردن تمامی تطابق ها به جای توقف، با یافتن اولین تطابق).
m مشخص کردن تطابق چند خطی.
Brackets
از براکت ها برای یافتن یک محدوده از کاراکترها استفاده می شود:
Expression توضیحات [abc] از این عبارت، برای پیدا کردن کاراکترهای بین براکت ها استفاده می شود.
[^abc] از این عبارت، برای پیدا کردن کاراکترهایی که بین براکت نیست، استفاده می شود.
[0-9] از این عبارت، برای یافتن تمام اعداد بین براکت ها، استفاده می شود.
[^0-9] از این عبارت، برای یافتن تمام اعدادی که بین براکت ها نیستند، استفاده می شود.
(x|y) از این عبارت، برای یافتن تمام جایگزین های مشخص شده، استفاده می شود.
Metacharacters
Metacharacter(متا کاراکتر) ها کاراکتر هایی با یک معنی خاص هستند:
Metacharacter توضیحات . پیداکردن یک کاراکتر تکی. \w پیداکردن کاراکترهایی که در کلمه ها به کار می روند.
\W پیدا کردن کاراکترهایی که در کلمه ها به کار نمی روند.
\d پیدا کردن یک عدد(digit).
\D پیدا کردن یک کاراکتر که عدد نیست.
\s پیدا کردن یک فاصله سفید.
\S پیدا کردن کاراکترهایی که فاصله سفید نیستند.
\b پیدا کردن یک تطابق در ابتدا یا انتهای یک کلمه.
\B پیدا کردن یک تطابق، غیر از ابتدا یا انتهای یک کلمه.
\0 پیداکردن یک کاراکتر NUL.
\n پیدا کردن یک کاراکتر خط جدید(new line).
\f پیدا کردن یک کاراکتر form feed.
\r پیدا کردن یک کاراکتر carriage return.
\t پیدا کردن یک کاراکتر tab.
\v پیدا کردن یک کاراکتر tab عمودی.
\xxx پیدا کردن کاراکتر مشخص شده به وسیله ی یک عدد اکتال xxx.
\xdd پیدا کردن کاراکتر مشخص شده به وسیله ی یک عدد هگزادسیمال dd.
\uxxxx پیدا کردن کاراکتر یونیکد مشخص شده به وسیله ی یک عدد هرگزادسیمال xxxx.
Quantifiers
Quantifier توضیحات n+ رشته ای که حداقل شامل یک n است را به عنوان تطابق برمی گرداند.
n* رشته ای که شامل 0 یا تعداد بیشتری n است، را بعنوان تطابق برمی گرداند.
n? رشته ای که شامل تعداد 0 یا 1، n است را، بعنوان تطابق برمی گرداند.
n{X} رشته ای که شامل دنباله ای از n به تعداد X می باشد را بعنوان تطابق برمی گرداند.
n{X,Y} رشته ای که شامل، X تا Y از n است را بعنوان تطابق برمی گرداند.
n{X,} رشته ای که شامل حداقل X تا n است را بعنوان تطابق برمی گرداند.
n$ رشته ای که در آخر آن n است، را بعنوان تطابق برمی گرداند.
^n رشته ای که در ابتدای آن n وجود دارد، را بعنوان تطابق برمی گرداند.
?=n رشته ای که به دنبال آن رشته ی مشخص شده ی n وجود دارد را بعنوان تطابق برمی گرداند.
?!n رشته ای که به دنبال ان رشته ی مشخص شده ی n وجود ندارد، را به عنوان تطابق برمی گرداند.
RegExp Object Properties
متد توضیحات constructor از این متد، برای برگرداندن تابع سازنده ی شیء RegExp استفاده می شود.
global از این متد، برای چک کردن اینکه آیا اصلاحگر g ست شده است یا نه، استاده می شود.
ignoreCase از این متد، برای چک کردن اینکه آیا اصلاحگر i ست شده است یا نه استفاده می شود.
lastIndex این متد، اندیس بعد از تطابق را برمی گرداند.
multiline از این متد، برای چک کردن اینکه آیا اصلاحگر m ست شده است یا نه استفاده می شود.
source این متد، متن الگوی RegExp را برمی گرداند.
RegExp Object Methods
متد توضیحات compile() بد دانسته شده در ورژن 1.5. یک عبارت منظم را کامپایل می کند.
exec() از این متد برای تست کردن و یافتن یک تطابق در یک رشته و برگرداندن اولین تطابق استفاده می شود.
test() از این متد برای تست کردن یک تطابق و برگرداندن trueیا false استفاده می شود.
toString() از این متد برای برگرداندن مقدار رشته ی یک عبارت منظم استفاده می شود.
متغیرهای JavaScript
متغیرها، ظرفی برای ذخیره اطلاعات اند:
آیا جبر را از زمان مدرسه به یاد دارید؟
x=5, y=6, z=x+y
آیا به یاد می آورید که یک حرف (مانند x) می تواند برای نگهداری یک مقدار (مثل 5) به کار رود و شما می توانید طبق اطلاعات بالا مقدار z را برابر 11 ارزیابی کنید.
این حروف، متغیر نامیده می شوند و آنها را می توان برای نگهداری مقادیر (x=5) و یا عبارات (z=x+y) استفاده کرد.
متغیرهای JavaScript
مانند جبر، متغیرهای JavaScriptنیر برای نگهداری مقادیر و یا عبارات به کار می روند.
متغیرها می توانند اسمی کوتاه داشته باشند مانند X و یا کمی توصیفی باشند مانند Carname
قواعد نامگذاری متغیرهای JavaScript:
- نام متغیرها به حروف کوچک و بزرگ حساس (case sensitive) هستند. (y و Y دو متغیر متفاوت اند)
- نام متغیر می تواند با حروف و یا آندرلاین و یا $ شروع شود.
توجه: چون جاوا اسکریپت Case-sensitive است، نام متغیرهای آن نیز Case-sensitive است.انواع داده در JavaScript
در متغیرهای JavaScript می توان، انواع دیگر داده، مانند: متن را نیز ذخیره نمود. ("علی احمدی"=person)
در JavaScript یک متن مانند "علی احمدی" یک رشته نامیده می شود.
در JavaScript انواع مختلف متغیر وجود دارد، اما در حال حاضر، فقط به متغیرهای عددی و رشته ای می پردازیم.
زمانی که یک مقدار رشته ای را به یک متغیر انتساب می دهید، باید آنرا در کوتیشن یا دابل کوتیشن (' یا ") قرار دهید.
زمانی که یک عدد را به یک متغیر انتساب می دهید، نیازی به کوتیشن نیست. اگر آنرا در کوتیشن قرار دهید با آن متغیر، مانند یک رشته برخورد خواهد شد.
مثال (متغییرهای JavaScript)
var pi=3.14;خودتان امتحان کنید »
var person="John Doe";
var answer='Yes I am!';مثال
مقدار یک متغیر در طول اجرای اسکریپت می تواند تغییر کند. شما می توانید به یک متغیر از طریق نام آن برای تغییر یا نمایش مقدارش دستیابی پیدا کنید.
این مثال به شما چگونگی دسترسی و مقداردهی یک متغیر را نشان خواهد داد.
اعلان (ایجاد) متغیرهای JavaScript
در JavaScript ایجاد متغیر بیشتر اوقات به اعلان متغیر معروف است.
شما می توانید متغیبرهای JavaScript را با کلمه کلیدی var اعلان کنید:
var x;
var carname;بعد از تعریف به صورت بالا متغیرها خالی هستند(هنوز هیچ اطلاعاتی داخل آنها نیست)، اگر چه شما می توانید آنها را موقع تعریف مقداردهی نمایید.
var x=5;
var carname="Volvo";بعد از اجرای دستورات بالا، متغیر x مقدار 5 و carname مقدار "volvo" را در خود نگه می دارد.
توجه:اگر یک متغیر JavaScript را بعد از مقدار دهی، دوباره اعلان کنید، مقدار اولیه اش را از دست نخواهد داد.تعریف چندین متغیر، در یک دستور
می توانید چندین متغیر را در یک دستور اعلان نمایید. فقط دستور را با var شروع کنید و متغیرها را با کاما از هم جدا نمایید:
var lastname="Doe", age=30, job="carpenter";اعلان ها، می توانند در چندین خط باشند:
var lastname="Doe",
age=30,
job="carpenter";Value = undefined
در برنامه های کامپیوتری، اغلب متغیرها بدون مقدار اعلان می شوند این متغیرها مقدار undefinedرا خواهند داشت.
بعد از اجرای دستور زیر، متغیر carname مقدار undefinedرا خواهد داشت:
var carname;متغیر های محلی (LOCAL) در JavaScript
متغیرهایی که داخل یک تابع اعلان شده اند، تنها داخل همان تابع، قابل دسترسی اند. (متغیرهای با قلمرو محلی)
شما می توانید در توابع مختلف، متغیرهای محلی با نام های یکسان داشته باشید. (متغیرهای محلی تنها بوسیله تابعی که آنها را اعلان کرده است شناخته می شوند)
متغیرهای محلی بمحض اینکه عملیات تابع تکمیل شد، حذف می شوند.
در فصل های بعدی، درباره توابع بیشتر خواهید آموخت.
متغیر های عمومی (Global) در JavaScript
متغیرهایی که خارج از توابع اعلان شده اند، عمومی می شوند، و در تمام اسکریبت و توابع داخل یک صفحه به آنها دسترسی خواهد بود.
زمانی که یک صفحه وب را ببندید، متغیرهای عمومی حذف خواهند شد.
مقداردهی متغیرهای اعلان نشده
اگر به متغیری که هنوز اعلان نشده مقداری را اختصاص دهید، آن متغیر به طور خودکار اعلان خواهد شد.
مثال:
x=5;
carname="Volvo";اگر متغیبرهای x و carname پیش از این وجود نداشته باشند، به طور خودکار، به عنوان متغیرهای عمومی اعلان خواهند شد(البته اگر دستورات بالا خارج از توابع باشد)
محاسبات در JavaScript
همانند جبر ، شما می توانید عملگرهای محاسباتی را با متغیرهای JavaScript به کار ببرید.
شما با انواع عملگرهای جاوا اسکریپت در فصل های بعدی بیشتر آشنا خواهید شد.
مثال های پایه در JavaScript
چند مثال پایه ای در JavaScript
چاپ یک متن با استفاده از JavaScript
تغییر محتوای عناصر HTML
یک فایل JavaScript خارجیدستورات و توضیحات (Comments) در JavaScript
دستورات JavaScript
بلوک بندی دستورات در JavaScript
توضیحات یک خطی
توضیحات چند خطی
استفاده از توضیحات یک خطی برای جلوگیری از اجرا
استفاده از توضیحات چند خطی برای جلوگیری از اجرامتغییرها در JavaScript
اعلان، مقدار دهی و نمایش یک متغییر
دستورات شرطی در JavaScript
دستور If
دستور If...else
ایجاد یک لینک تصادفی
دستور Switchپنجره های Popup در JavaScript
پنجره پیغام (Alert)
یک پنجره پیغام، دو خطی
پنجره Confirm
پنجره Promptتوابع در JavaScript
صدا زدن یک تابع
تابعی با یک پارامتر ورودی
تابعی با دو پارامتر ورودی
تابعی که یک مقدار را برمی گرداند
تابعی با چند پارامتر ورودی که یک مقدار را بر می گرداندحلقه ها در JavaScript
حلقه For
حلقه ای برای چاپ تگ های <h1> تا <h6>
حلقه While
حلقه Do While
Break a loop
دستورات Break و continue
حلقه for...inرویدادها در JavaScript
رویداد onclick
رویداد onmouseoverمدیریت خطاها در JavaScript
دستور try...catch
دستور try...catch همراه با یک پنجره confirm
رویداد onerrorچند مثال پیشرفته در JavaScript
ایجاد یک cookie برای خوش آمدگویی
دریافت یک پیغام بعد از چند ثانیه
تغییر محتوای یک TextBox در زمان های مختلف
نمایش ثانیه شمار در یک TextBox
نمایش ثانیه شمار در یک TextBox همراه با یک دکمه توقف
ایجاد یک ساعت دیجیتال
ایجاد مستقیم یک نمونه از یک شیء
ایجاد یک سازنده (Constructor)مثال های مربوط به DOM
در مثال های زیر، JavaScriptبا استفاده از مدل DOM، می تواند به تمام عناصر صفحه HTML دسترسی داشته باشد.
شیء Document
()document.write - نوشتن یک متن در خروجی
()document.write - نوشتن تگ های HTML در خروجی
length - برگرداندن تعداد لینک های داخل صفحه
innerHTML - برگرداندن متن اولین لینک استفاده شده در صفحه
length - برگرداندن تعداد فرم های استفاده شده در یک صفحه
name - برگرداندن مقدار خصوصیت name فرم
length - برگرداندن تعداد عکس های استفاده شده در صفحه
id - برگرداندن id اولین عکس در صفحه
length - برگرداندن تعداد لینک های یک صفحه
id - برگرداندن id اولین لینک در صفحه
document.cookie - برگرداندن نام و مقدار کل Cookieی ها
domain - برگرداندن نام دامنه
lastModified - برگردان زمان آخرین باری که صفحه اصلاح شده
referrer - برگرداندن URL صفحه
title - برگرداندن عنوان صفحه
URL - برگرداندن کل URL صفحه
open - باز کردن یک صفحه جدید در فریم جاری و نوشتن متن داخل آن
open - باز کردن یک صفحه در پنجره جدید و نوشتن متن داخل آن
تفاوت بین write و writeln
innerHTML - نمایش محتوای یک عنصر با id مشخص
length - نمایش تعداد عناصری که name یکسانی دارند
length - نمایش تعداد یک tag خاص در صفحهشیء Anchor (لینک)
charset - برگرداندن و یا تنظیم خصوصیت charset در یک لینک
href - برگرداندن مقدر خصوصیت href یک لینک
hreflang - برگرداندن و تنظیم خصوصیت hreflang
name - برگردان مقدار خصوصیت name یک لینک
rel - برگرداندن مقدار خصوصیت rel لینک
target - تغییر مقدار خصوصیت target لینک
type - برگرداندن مقدار خصوصیت type لینکشیء Button
disabled - غیرفعال کردن یک دکمه
name - برگرداندن خصوصیت name یک دکمه
type - برگرداندن خصوصیت type یک دکمه
value - برگرداندن متن نمایش داده شده روی یک دکمه
id - برگرداندن id فرمی که شامل یک دکمه استشیء Form
value - برگرداندن مقادیر تنظیم شده عناصر داخل یک فرم
acceptCharset - برگرداندن مقدار خصوصیت accept-charset در یک فرم
action - برگرداندن مقدار خصوصیت action در یک فرم
enctype - برگرداندن مقدار خصوصیت enctype در یک فرم
length - برگرداندن تعداد عناصر داخل یک فرم
method - برگرداندن متد تنظیم شده در فرم برای ارسال اطلاعات به سرور
name - برگرداندن نام فرم
target - برگرداندن مقدار خصوصیت target در یک فرم
reset - خالی کردن و یا به حالت اول برگرداندن عناصر داخل فرم
submit - استفاده از یک دکمه معمولی برای ارسال فرم به سرورشیء Frame/IFrame
align - ترازبندی یک iframe
backgroundColor - تغییر رنگ پس زمینه یک iframe
frameBorder - برگردان مقدار تنظیم شده برای خصوصیت frameborder
frameBorder - حذف لبه های یک iframe
height/width - تغییر عرض و ارتفاع یک iframe
longDesc - برگردان مقدار خصوصیت longdesc در یک iframe
marginHeight - برگردان مقدار خصوصیت marginheight در یک iframe
marginWidth - برگردان مقدار خصوصیت marginwidth در یک iframe
name - برگردان نام یک iframe
scrolling - برگردان و یا تنظیم خصوصیت scrolling در یک iframe
src - تغییر آدرس یک iframeشیء Image
align - ترازبندی عکس...
alt - برگرداندن متن جایگزین یک عکس
border - اضافه کردن لبه به عکس
height/width - تغییر عرض و ارتفاع یک عکس
hspace/vspace - تنظیم فاصله افقی و عمودی عکس از عناصر مجاور
longDesc - برگرداندن مقدار خصوصیت longdesc یک عکس
lowsrc - ایجاد یک لینک برای نمایش یک عکس در حالت با کیفیت پایین تر
name - برگرداندن نام یک عکس
src - تغییر آدرس یک عکس
useMap - برگرداندن مقدار تنظیم شده برای خصوصیت usemap در یک عکسشیء Event
onblur - زمانی که کاربر TextBox را ترک می کند، کاراکترهای داخل آن به حروف بزرگ تبدیل می شود
onchange - زمانی که محتوای TextBox تغییر داده شود...
onclick - زمانی که کاربر روی دکمه کلیک کند...
ondblclick - زمانی که کاربر روی متن دابل کلیک کند...
onerror - اگر زمان بارگذاری عکس، خطایی رخ دهد...
onfocus - زمانی که مکان نما روی TextBox قرار می گیرد...
onkeydown - قبل از رها کردن دکمه ی کیبورد...
onkeypress - قبل از رها کردن دکمه ی کیبورد...
onkeyup - بعد از رها کردن دکمه ی کیبورد...
onload - بلافاصله بعد از اینکه صفحه بارگذاری شد...
onload - بلافاصله بعد از اینکه عکس بارگذاری شد...
onmousedown + onmouseup - قبل از رها کردن کلیک موس/بعد از رها کردن کلیک موس...
onmousedown - قبل از رها کردن یکی از دکمه های موس، متوجه شوید کدام یک از دکمه های موس را کلیک کرده اید...
onmousedown - قبل از رها کردن کلیک موس، متوجه شوید که روی کدام عنصر کلیک کرده اید...
onmousemove + onmouseout - با حرکت موس، مختصات X و Y ظاهر می شود...
onmouseover + onmouseout - با قرار گرفتن و خروج موس از روی تصویر...
onresize - با تغییر اندازه پنجره مرورگر...
onselect - بعد از انتخاب متن داخل TextBox، پیغامی ظاهر می شود...
onunload - قبل از اینکه پنجره مرورگر بسته شود...
onkeyup - بعد از رها کردن یکی از کلیدهای کیبورد، شماره آن کلید، نمایش داده می شود....
onmousedown - بعد از فشردن کلیک موس، مختصات اشاره گر نسبت به Frame، نمایش داده می شود...
onmousedown - بعد از فشردن کلیک موس، مختصات اشاره گر نسبت به صفحه مونیتور نمایش داده می شود...
onmousedown - اگر همزمان با فشردن کلیک موس، دکمه Shift نیز فشرده شده باشد...
onmousedown - با فشردن کلیک موس، نوع رویداد که همان onmousedown است نمایش داده می شود...شیء Option و Select
disabled - فعال و غیرفعال کردن Dropdown List
id - برگرداندن شناسه (ID) فرمی که شامل یک Dropdown List است
length - برگرداندن تعداد گزینه های یک Dropdown List
size - تبدیل Dropdown List به MultiLine List
multiple - فعال و غیر فعال کردن حالت چند انتخابه در MultiLine List
options - نمایش همه ی گزینه های یک Dropdown List در یک پنجره Alert
selectedIndex - نمایش شماره (Index) گزینه انتخاب شده در یک Dropdown List
text - تغییر متن گزینه انتخاب شده در یک Dropdown List
remove - حذف گزینه انتخاب شده در یک Dropdown Listشیء Table
border - تغییر ضخامت لبه های بیرونی یک جدول
cellSpacing - تنظیم فاصله محتوای سلول ها از لبه - cellPadding و فاصله سلول ها با یکدیگر
frame - تنظیم اینکه کدام یک از لبه های بیرونی جدول نمایش داده شود
rules - تنظیم اینکه کدام یک از لبه های داخلی جدول نمایش داده شود
innerHTML - نمایش محتوای ردیف اول یک جدول در یک پنجره
innerHTML - نمایش محتوای یک سلول از جدول
()createCaption - ایجاد - Caption برای یک جدول
()deleteRow - حذف یک ردیف از جدول
()insertRow - اضافه کردن ردیف به یک جدول
()insertCell - اضافه کردن سلول به یک ردیف از جدول
align - میزان کردن محتوای سلول های یک ردیف بصورت افقی
vAlign - میزان کردن محتوای سلول های یک ردیف بصورت عمودی
align - میزان کردن محتوای یک سلول مشخص به صورت افقی
vAlign - میزان کردن محتوای یک سلول مشخص به صورت عمودی
innerHTML - تغییر محتوای یک سلول
colSpan - ادغام کردن سلول های یک ردیفمثال های مربوط به اشیاء
در JavaScriptچندین شیء توکار (built-in) مانند: رشته، تاریخ، آرایه و... وجود دارد. در زیر مثال هایی از چگونگی استفاده از آنها آمده است.
شیء String
پیدا کردن طول یک رشته
در این مثال، متد ()indexOf، اولین مکان رخداد رشته "welcome" را در شیء str، برمی گرداند
در این مثال، اگر پارامتر ورودی متد ()match، در شیء str یافت شد، مقدار یافت شده را برمی گرداند وگرنه مقدار null را برمی گرداند
در این مثال، متد ()replace، مقدار پارامتر "Microsoft" را در شیء str جستجو می کند و تمام آنها را با مقدار "Beyamooz.com" جایگزین می کندشیء Date
چگونه از متد ()Date برای چاپ کردن تاریخ جاری استفاده کنیم
برگرداندن تعداد میلی ثانیه های گذشته از تاریخ 01/01/1970 تا امروز
چگونه از متد ()setFullYear برای تنظیم یک تاریخ دلخواه استفاده کنیم
چگونه با استفاده از متد ()toUTCString تاریخ جاری را به یک رشته تبدیل کنیم (بر طبق UTC)
چگونه با استفاده از متد ()getDay و یک آرایه، روز جاری را چاپ کنیم
نمایش یک ساعتشیء Array
اتصال دو آرایه - concat()
اتصال سه آرایه - concat()
تمام عناصر آرایه در یک متغییر - join()
حذف آخرین عنصر آرایه - pop()
اضافه کردن یک عنصر جدید به انتهای آرایه - push()
معکوس کردن ترتیب عناصر آرایه - reverse()
حذف اولین عنصر آرایه - shift()
برش و انتخاب یک قسمت از آرایه - slice()
مرتب کردن آرایه بر اساس حروف الفبا و صعودی - sort()
مرتب کردن آریه عددی و صعودی - sort()
مرتب کردن آرایه عددی و نزولی - sort()
اضافه کردن یک عنصر جدید در مکان 2 یک آرایه - splice()
تبدیل یک آرایه به یک رشته - toString()
اضافه کردن یک عنصر جدید به ابتدای یک آرایه - unshift()شیء Boolean
به ازای چه مقادیری شیء Boolean با true یا false تنظیم می شود
شیء Math
چگونه از تابع ()round برای گرد کردن اعداد استفاده کنیم
چگونه از تابع ()random برای برگرداندن یک عدد بین 0 و 1 استفاده کینم
برگداندن بزرگترین عدد
برگرداندن کوچکترین عدد
تبدیل سلسیوس به فارنهایتمثال های مربوط به مرورگر
مدل BOM یا (Browser Object Model) به JavaScriptاین اجازه را می دهد تا با مرورگر صحبت کند. در زیر مثال هایی در این باره آورده شده است.
شیء Window
نمایش یک پنجره Alert
نمایش یک پنجره Alert دو خطی
نمایش یک پنجره Confirm و مشخص کردن کلیک کاربر
نمایش یک پنجره Prompt
ایجاد یک پنجره pop-up
باز کردن یک پنجره جدید با کلیک روی یک دکمه
باز کردن یک پنجره جدید و کنترل ظاهر آن
باز کردن چندین پنجره جدید
باز کردن یک پنجره جدید و قرار دادن آن در زیر پنجره های موجود دیگر (blur)
باز کردن یک پنجره جدید بر روی پنجره های موجود دیگر (focus)
بستن یک پنجره
چک کردن اینکه پنجره جدید، بسته شده است یا خیر
برگرداندن نام پنجره
نوشتن یک متن در والد یک پنجره
حرکت پنجره، نسبت به مکان جاریش
حرکت پنجره، به یک مکان مشخص
پرینت صفحه جاری
تغییر اندازه یک پنجره (Pixel)
باز کردن یک پنجره جدید و تغییر اندازه آن به یک اندازه مشخص
Scroll کردن پنجره، نسبت به موقعیت فعلی
Scroll کردن پنجره، به یک مکان مشخصشیء Timing
یک مثال ساده
یک ثانیه شمار، با دکمه های "Start" و "Stop" با استفاده از متدهای ()setTimeout و ()clearTimeout
یک ساعت دیجیتال با دکمه "Stop" با استفاده از متدهای ()setInterval و ()clearIntervalشیء Navigator
همه اطلاعات مربوط به مرورگر بازدید کننده
شیء Screen
همه اطلاعات مربوط به مونیتور بازدید کننده
شیء History
برگرداندن تعداد صفحات بازدید شده با توجه به لیست تاریخچه
ایجاد کلید back در یک صفحه
ایجاد کلید forward در یک صفحه
بارگذاری یک URL مشخص از لیست تاریخچه مرورگرشیء Location
برگرداندن hostname و port صفحه جاری
برگرداندن URL کامل صفحه جاری
برگرداندن مسیر صفحه جاری روی سرور
برگرداندن Protocol استفاده شده در صفحه جاری
بارگذاری یک صفحه جدید
بارگذاری مجدد صفحه جاری
جایگزین کردن صفحه جاری با یک صفحه جدید
خارج شدن از یک frameمحاسبات ریاضی در JavaScript
شیء Math، برای محاسبات ریاضی استفاده می شود.
()round
چگونه از تابع ()round برای گرد کردن اعداد استفاده کنیم.()random
چگونه از تابع ()random برای برگرداندن یک عدد بین 0 و 1 استفاده کینم.()max
برگداندن بزرگترین عدد()min
برگرداندن کوچکترین عددشیء Math
شیء Math، برای محاصبات ریاضی استفاده می شود.
شیء Math شامل چندین خصوصیت و متد برای محاصبات ریاضی است.
نحوه استفاده از خصوصیت ها و متدهای شیء Math
var x=Math.PI;
var y=Math.sqrt(16);توجه:Math یک سازنده (constructor) نیست. تمام خصوصیت ها و متدهای شیء Math را می توانید بدون ایجاد آن، صدا بزنید.خصوصیت های شیء Math
JavaScript هشت خصوصیت برای شیء Math فراهم نموده است:
- E
- PI
- square root of 2
- square root of 1/2
- natural log of 2
- natural log of 10
- base-2 log of E
- base-10 log of E
نحوه استفاده:
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10Eمتد های شیء Math
علاوه بر خصوصیت هایی که برای شیء Math در دسترس است، چندین متد نیز برای آن وجود دارد.
در مثال زیر، از متد ()round برای گرد کردن عدد "4.7" به نزدیک ترین عدد صحیح استفاده شده است:
document.write(Math.round(4.7));خروجی کد بالا:
5در مثال زیر، از متد ()random برای برگرداندن یک عدد، بین 0 و 1 استفاده شده است:
document.write(Math.random());خروجی کد بالا:
0.6982122087815306در مثال زیر، از متد()floor و ()random برای برگرداندن یک عدد صحیح بین 0 و 10 استفاده شده است:
document.write(Math.floor(Math.random()*11));خروجی کد بالا:
6مرجع کامل شیء Math
برای مشاهده یک مرجع کامل از خصوصیت ها (Property) و متدهای (Method) مربوط به شیء Math، به لینک زیر مراجعه نمایید:
