Java Script
پنجره های ارتباط با کاربر
سه نوع پنجره در جاوااسکریپت وجود دارند که می توانید توسط آنها پیغامی را در صفحه برای کاربر نمایش دهید و یا اطلاعاتی برای تأیید آنها بفرستید و یا اینکه اطلاعاتی را از آنها بخواهید. آنها پنجره های کوچکی هستند که چون خیلی سریع در صفحه بالا آمده و در مقابل کاربر ظاهر می شوند، به آنها popup گفته می شود.
این پنجره ها عبارتند از: پنجره alert ، پنجره confirm و پنجره prompt .
پنجره Alert
پنجره alert ، حاوی یک اخطاریه برای کاربر است که در آن هشداری داده می شود تا کاربر متوجه کاری که می کند باشد. دستور این پنجره به صورت زیر است:
alert (" text")
این پنجره فقط دارای یک دکمه OK است که کاربر بعد از خواندن آن اخطاریه با زدن دکمه ok ، پنجره را می بندد.
<html>
<head>
<"script type="text/javascript" type="text/javascript>
function alertbox(){
alert ( " This is an Alert box!")
}
< /script>
< /head>
<body>
<form>
<"input type="button" onclick="alertbox ( )" value="Click here>
< /form>
< /body>
</html>
دقت کنید که در این نوع پنجره یک علامت مثلث زرد که نشان دهنده علامت اخطار هم هست، ظاهر می شود.
پنجره Confirm
این مدل پنجره ، همانطور که از اسمش پیداست برای گرفتن تأیید از کاربر اجرا می شود. این پنجره دارای دو دکمه OK و Cancel می باشد که با زدن دکمه OK توسط کاربر مقدار true بازگردانده می شود و با زدن Cancel مقدار false برگردانده می شود. دستور این پنجره به این صورت است:
confirm ( " text")
این پنجره برای مواقعی خوب است که شما نیاز به جواب کاربر برای ادامه مطلبی یا چیزی دارید، در صورتیکه کاربر تأیید کند آن مطلب ادامه پیدا می کند و در غیر اینصورت همانجا متوقف خواهد شد.
<html>
<head>
<"script type="text/javascript" type="javascript>
function confirmbox()
{
var button = confirm (" press a button.")
) if (button == true
{
document.write (" You pressed OK button.")
}
else
{
document.write (" You pressed Cancel button.")
}
}
</script>
< /head>
<body onload="confirmbox ()">
< /body>
< /html>
در این اسکریپت ما ابتدا یک تابع در قسمت head تعریف کردیم سپس دستور confirm را در یک متغیر بنام button ذخیره کردیم تا بتوانیم برای این متغیر شرطی را تعیین کنیم. همانطور که گفتیم اگر کاربر دکمه OK را بزند، مقدار true برگردانده می شود پس شرط را بر این روال گرفتیم که اگر مقدار true بازگردانده شد متنی در صفحه چاپ شود و در غیر اینصورت متنی دیگر نوشته شود. سپس این تابع را در تگ بدنه و در رویداد onload قرار دادیم تا به محض باز شدن صفحه پنجره confirm اجرا شود. رویداد onload را در بخش بعدی یاد خواهید گرفت.
پنجره prompt
از این پنجره زمانی استفاده می شود که شما نیاز داشته باشید تا اطلاعاتی را از کاربر دریافت کنید و آنرا در جایی مناسب بازگردانید. معمولاً اجرای این پنجره هنگام باز شدن صفحه وب است و دارای دو قسمت یا دو پارامتر می باشد:
prompt ( "text or question", " default value")
در قسمت اول یک متن که معمولاً سؤال است را وارد می کنید تا در پنجره ظاهر شود و در قسمت دوم یک مقدار پیش فرض برای راهنمایی کاربر وارد می کنید که معمولاً آن قسمت را خالی می گذارند تا کاربر آن مقدار را وارد نماید. البته اگر هم شما مقدار پیش فرض را وارد نمایید، باز کاربر قادر به وارد کردن مقدار میباشد.
<html>
<head>
<"script type="text/javascript>
function promptbox()
{
var name=prompt("Please enter your name", "name...")
if (name!=null && name!="")
}
") document.write("Hello " + name + " and welcome to this page
}
}
< /script>
< /head>
<" () body onload="promptbox>
< /body>
< /html>
مانند مثال قبل عمل کردیم با این تفاوت که این بار از دستور prompt استفاده شده است. فقط به یک نکته دقت کنید که در دستور شرط ما متغیر name را نا مساوی با مقدار null قرار دادیم. null به معنی هیچ چیز میباشد و در اینجا آنرا بکار گرفتیم تا اگر کاربر بعد از باز شدن پنجره دکمه cancel را زد و یا هیچ اسمی وارد نکرد تغییری در صفحه ایجاد نشود. شما می توانید یکبار آنرا حذف کنید و نتیجه اجرای کد را ببینید.
در حال حاضر شما سه نوع پنجره ارتباط با کاربر را فرا گرفتید که دو مدل اول بیشترین کاربرد را در کدنویسی شما خواهند داشت.
رویدادها و حوادث
رویدادها و یا حوادث در جاوااسکریپت، کدهای کوتاهی هستند که بین اقدامات انجام شده توسط کاربر مانند کلیک کردن موس و اسکریپت، ارتباط برقرار می کنند. یعنی هنگامیکه کاربر بر روی دکمه های موس فشار می آورد، رویدادها به اسکریپت این موضوع را می فهمانند تا اسکریپت برای آن حرکت عکس العملی در نظر بگیرد.
این اقدامات شامل حرکاتی است مانند کلیک کردن دکمه های موس، قرار گرفتن نشانگر موس بر روی یک نقطه از صفحه، فشردن کلیدهای کیبورد، انتخاب یا تغییر در اجزای یک فرم، فشردن دکمه های فرم و یا باز و بستن یک صفحه وب.
در کل رویدادها باعث می شوند تا جاوااسکریپت اینگونه حرکات را شناسایی و درک کند.
رویدادها مانند بقیه خصوصیات تگهای اچ تی ام ال هستند که باید در میان تگها قرار گیرند و آنها را برابر با یک کد کوتاه جاوااسکریپت و یا اسم یک تابع تعریف شده باید قرار داد.
در صفحات قبل با بعضی از رویدادها آشنا شدید و حالا در اینجا کلیه آنها را یاد خواهید گرفت. لازم بذکر است که، همه رویدادها در تمام مرورگرها اجرا نمی شوند.
رویدادهای موس
زمانیکه می خواهید جاوااسکریپت نسبت به حرکات موس، عکس العمل نشان دهد از این رویدادها استفاده می کنید. به سورس کد مثالها دقت کنید تا با کاربرد آنها بیشتر آشنا شوید.
onClick برای کلیک کردن دکمه چپ موس توسط کاربر.
onDblClick رویداد برای دوبار کلیک دکمه چپ موس.
onMouseDown فشار آوردن بر روی دکمه چپ موس.
onMouseUp رها کردن دکمه موس پس از فشردن آن.
onMouseOver قرار گرفتن نشانگر موس بر روی یک چیزی.
onMouseOut خارج شدن موس از روی یک چیزی.
رویدادهای کیبورد
در این رویدادها، جاوااسکریپت نسبت به فشردن یک کلید بر روی کیبورد توسط کاربر، عکس العمل نشان خواهد داد.
onKeyPress فشردن یک کلید کیبورد.
onKeyDown مانند رویداد بالا برای فشردن یک کلید.
onKeyUp رها کردن یک کلید فشرده شده.
رویدادهای فرم
این رویدادها مربوط به عملیاتی است که کاربر بر روی اجزای فرم انجام می دهد. البته ممکن است بعضی از این رویدادها بر روی متنهای عادی در صفحه هم عکس العمل نشان دهند اما بیشترین کاربرد را در فرمها دارند.
onFocus هنگامیکه توسط موس و یا دکمه Tab کیبورد بر روی یکی از اجزای فرم متمرکز شوید.
onBlur هنگامیکه تمرکز از روی یکی از اجزای فرم خارج شود.
onSelect انتخاب کردن یک متن در صفحه یا در یک فرم.
onChange تغییر در اجزای فرم، مانند تغییر متن در کادر متنی.
onSubmit فشردن دکمه تأیید یک فرم.
onReset فشردن دکمه reset یا همان پاک کردن اطلاعات فرم.
رویدادهای یک صفحه
یکسری از رویدادها هم مربوط به صفحات وب می باشد، مانند لود شدن صفحه یا بستن آن.
onLoad تکمیل شدن یک صفحه وب یا یک تصویر در مرورگر.
onUnload بستن مرورگر یا خروج از یک صفحه وب.
onResize تغییر اندازه پنجره مرورگر.
یک رویداد دیگر هست که می توان هم برای یک صفحه و هم برای یک عکس بکار برد:
onError این رویداد زمانی اجرا می شود که یک عکس به هر دلیلی لود نشود یعنی در جای خود قرار نگیرد.
معمولاً برای رویدادها، ابتدا یک تابع تعریف می شود تا هنگام نوشتن رویداد در یک تگ اچ تی ام ال، نظم برقرار باشد و از شلوغی تگ جلوگیری شود. بیشترین کاربرد این رویدادها در تأیید اعتبار فرمها و پرسشنامه ها می باشند که در یک بخش مجزا آنرا توضیح خواهم داد.
شئ ها در جاوااسکریپت
Javascript Objects
در بخشهای قبل با بعضی از object ها یا همان شئ های جاوااسکریپت مانند، شئ Date و آرایه ها آشنا شدید. در این صفحه قصد داریم در مورد شئ های دیگر در جاوااسکریپت صحبت کنیم.
شئ جاوااسکریپت چیست؟
وظیفه شئ ها را می توان شبیه به متغیر ها دانست اما شئ ها بسیار کامل تر از متغیرها هستند چون آنها می توانند اطلاعات بیشتری را در خود ذخیره کنند و همچنین تفاوت دیگری هم که با متغیرها دارند اینست که متغیرها باید تعریف شوند تا جاوااسکریپت آنها را بشناسد اما بعضی از شئ ها در جاوااسکریپت ساخته و تعریف شده اند. این شئ های از قبل تعریف شده را درون ساخت یا Built-in می گویند مانند شئ Date . البته همانطور که میدانید باید همین اشیاء هم در ابتدای کد یکبار دیگر با دستور new تعریف شوند:
mydate = new Date()
name = new Array()
پس فراموش نکنید که از این دستور برای شروع یک object استفاده کنید.
کلیه شئ ها دارای خصوصیات و متدهای شناخته شده برای جاوااسکریپت هستند که آنها را با گذاشتن یک نقطه بعد از خود شئ بکار می بریم و می توانیم مقادیر مختلفی را برای آنها در نظر بگیریم.
انواع اشیاء
به غیر از شئ های درون ساخت Date و Array که در صفحات قبل با آنها آشنا شدید، شئ های درون ساخت دیگر جاوااسکریپت عبارتند از شئ String و Math و شئ هایی که مربوط به HTML DOM می شوند. در بخش های بعدی به ترتیب به توضیح هر کدام از این اشیاء خواهیم پرداخت.
دستور with
در این دستور شما می توانید یک شئ را به همراه خصوصیات و متدهایش بصورت پیش فرض در اسکریپت خود تعریف کنید. این دستور به نوعی کد شما را راحت تر و خلاصه تر می کند و مانند توابع فقط اسم تعیین شده را در کدها بکار می برید که جاوااسکریپت کلیه خصوصیات و متدهای آنرا برایش در نظر خواهد گرفت. قالب دستور with به شکل زیر است:
with ( name){
.... javascript code ....
}
روش ساخت یک شئ
در بالا صحبت از یک سری اشیاء شد که جاوااسکریپت از قبل با آنها آشناست اما گاهی اوقات نیاز هست که یک شئ را خودتان تعریف کنید تا بهتر بتوانید اسکریپت خود را مدیریت کنید. البته توسط دستور with هم می توانید اینکار را انجام دهید، به این صورت که اسم شئ مورد نظر را بجای name در الگوی بالا بنویسید و خصوصیت و متد آنرا در خطوط بعدی بین { } تعریف کنید.
اما اگر بخواهید یک شئ را در اسکریپت خود بسازید نیاز به دو چیز دارید، ابتدا یک تابع سازنده که به آن Constructor می گویند و در آن نوع شئ تعیین می شود، سپس به نمونه شئ که از آن تابع استفاده می کند و به آن Instance می گویند که توسط دستور new تعریف می شود. این مطلب ممکن است کمی گیج کننده باشد اما به مثال زیر توجه کنید تا کاملاً به ساخت شئ توسط خودتان تسلط پیدا کنید.
می خواهیم یک شئ برای اتومبیل تعریف کنیم که خصوصیاتی مانند اسم، رنگ و مدل را داشته باشد. برای اینکار ابتدا یک تابع باید تعریف کنیم بنام car و خصوصیات آنرا به عنوان پارامترهایش در پرانتز بنویسیم و سپس این پارامترها را بر اساس خصوصیاتش مقداردهی می کنیم:
function Car ( name, model, color){
this.name = name
this.model = model
this.color = color
}
به عبارت this دقت کنید، این یک دستور جاوااسکریپت است و به شئ که در حال تعریف آن هستیم، اشاره دارد و در حقیقت به مفسر جاوااسکریپت می فهماند که این خصوصیت شئ تعریف شده با این مقدار است و شما باید از این دستور استفاده کنید تا خصوصیت یک شئ را برایش تعریف کنید و مقدار آنها را هم مانند بالا مشخص کنید.
حالا باید یک شئ جدید برای آن بسازید که این شئ جدید را در متغیری بنام mycar ذخیره می کنیم:
mycar = new Car ( "Corvette", "Z06", "Red")
این خط کد به جاوااسکریپت می فهماند که یک شئ بنام mycar دارای خصوصیات اسم که Corvette و مدل Z06 و رنگ Red می باشد. شما می توانید هر شئ دیگر که بخواهید با دستور new بسازید:
thecar = new Car ( "BMW", "Z4", "Silver")
الان می خواهیم از شئ اول اسم ماشین و از شئ دوم رنگ را در صفحه چاپ کنیم:
document.write ( mycar.name + "</br>")
document.write ( thecar.color)
بعد از اینکه خصوصیاتی برای یک شئ تعریف کردید حالا نوبت به متدهای شئ ساخته شده، می رسد. در اینجا متدی که تعریف می کنیم برای کلیه ماشینها می توانیم بکار بریم. الگوی کلی یک متد به شرح زیر است:
object.methodname( ) = function_name
object شئ است که ساختیم، methodname نام متدی است که شما در نظر می گیرید و function name هم اسم تابعی که باید بسازید. سپس هر کجا که لازم بود از متد استفاده کنید ابتدا شئ و سپس با گذاشتن یک نقطه متد را به همراه پرانتز می نویسید که اگر این متد پارامتری هم داشت باید آنرا داخل پرانتز معین کنید.
متدی که می خواهیم برای شئ Car بسازیم را باید ابتدا بصورت یک تابع تعریف کنیم:
function displaycar(){
var result = " I like " + this.name + " " + this.model + " with " + this.color + " color."
document.write ( result)
}
حالا با استفاده از دستور this این تابع را به عنوان متد شئ Car تعریف می کنیم:
function Car ( name, model, color){
this.name = name
this.model = model
this.color = color
this.displaycar = displaycar
}
بعد از تعریف توابع، شئ را توسط دستور new می سازیم و متد را اجرا می کنیم:
mycar = new Car ( "Corvette", "Z06", "Red ")
mycar.displaycar()
دستور prototype
در طول اسکریپت شما، ممکن است به جایی برسید که نیاز داشته باشید یک خصوصیت و یا یک متد دیگر برای شئ ساخته شده در خارج از آن توابع تعریف شود که با استفاده از دستور prototype می توانید آنها را تعریف کنید. الگوی این دستور به این صورت می باشد:
object.prototype.method or property = value
کلیه دستورات بالا را توسط توابع و آرایه می توانید انجام دهید اما تعریف کردن شئ در اسکریپت های طولانی بسیار راحت تر و سریع تر از نوشتن بقیه دستورات می باشد.
در صفحات بعدی، با شئ های درون ساخت string ، math و همچنین شئ های مربوط به HTML DOM آشنا خواهید شد.
شئ رشته های متنی
String Object
شئ رشته یا String
شئ String یکی دیگر از شئ های درون ساخت جاوااسکریپت میباشد و برای کار کردن روی متنها استفاده می شود. رشته های متنی عبارتند از کلیه کاراکترهایی که بتوان توسط کیبورد تایپ کرد و تا زمانی که این کاراکترها بین دو علامت " " قرار بگیرند، جاوااسکریپت آنها را در شئ String ذخیره خواهد کرد.
البته شما می توانید یک رشته متنی را بصورت خیلی ساده در یک متغیر ذخیره کنید و نیازی هم به این شئ نداشته باشید، مانند کد زیر:
mytxt = "This is a string."
شئ String دارای خصوصیات و متدهایی است که توسط آنها می توانید تسلط بیشتری روی رشته های متنی داشته باشید.
مطابق تمام اشیاء در جاوااسکریپت، ابتدا باید این شئ را توسط دستور new تعریف و در یک متغیر ذخیره کنید:
mytxt = new String ( "This is a string.")
خصوصیت شئ String
این شئ دارای خصوصیت length می باشد که اشاره به طول یک رشته دارد و توسط این خاصیت، شما می توانید تعداد کاراکترهای بکار رفته در یک رشته متنی را بدست آورید. توجه داشته باشید که برای استفاده از خصوصیات و متدهای این شئ، تفاوتی نمی کند که شما به چه شکلی یک رشته را تعریف کنید.
اگر بخواهیم طول شئ بالا را محاسبه کنیم، باید بصورت زیر عمل کنیم:
document.write ( mytxt.length)
بعد از اجرای این کد باید عدد 17 در صفحه چاپ شود. ناگفته نماند که جاوااسکریپت فضای خالی بین کلمات را هم به عنوان یک کاراکتر، محاسبه می کند.
متدهای شئ String
همانطور که میدانید برای تعریف یک متد، ابتدا شئ را نوشته سپس یک نقطه می گذاریم و متد مورد نظر را به همراه پرانتز می نویسیم که اگر این متد پارامتری هم داشت باید آنرا داخل پرانتز بنویسیم. الگوی کلی تعریف متد برای شئ String بصورت زیر است:
object.methodname()
اکنون می پردازیم به معرفی متدهای این شئ. دقت کنید بعضی از این متدها در مرورگر اینترنت اکسپلورر اجرا نمی شوند. فراموش نکنید که به سورس کد مثالها هم دقت کنید.
anchor این متد رشته را بصورت آنکر در صفحه در می آورد که کد اچ تی ام ال آن به این صورت خواهد بود:
<"a name="anchor_name />
big متن را بصورت ضخیم و بزرگ ذخیره می کند.
blink این متد، متن را بصورت چشمک زن در می آورد ولی در مرورگر IE اجرا نمی شود.
bold یک رشته را بصورت bold در می آورد.
charAt توسط این متد، می خواهید که بطور مثال کاراکتر پنجم از یک رشته را اعلام کند. دقت کنید که اولین کاراکتر در یک رشته شماره صفر است.
charCodeAt شماره موقعیت کاراکتر در یک رشته را میدهید و جاوااسکریپت یونیکد آن را برمیگرداند. اولین کاراکتر مانند بالا صفر میباشد.
concat دو یا چند رشته را به هم پیوند میدهد.
fixed متن چاپ شده در صفحه بصورت حروف تایپی خواهد بود.
fontcolor تغییر رنگ فونتها که اسم رنگ یا کد هگز را به عنوان پارامتر در پرانتز باید معین کنید.
fontsize تعیین سایز فونت ها که سایز را باید در پرانتز بنویسید.
fromCharCode یونیکد را میدهید و جاوااسکریپت کاراکتر برمیگرداند.
indexOf این متد دو پارامتر دارد که الگوی آن به صورت زیر است:
StringObject.indexOf ( searchvalue, fromindex)
توسط این متد می توانید یک حرف و یا یک کلمه را در داخل یک رشته جستجو کنید که اگر یک حرف باشد شماره موقعیت آنرا در رشته برمیگرداند و اگر کلمه باشد، فقط شماره موقعیت اولین کاراکتر آن کلمه را برمیگرداند. اگر هم پیدا نکند عدد منفی یک را برمیگرداند. حرف و کلمه مورد نظر برای جستجو را در پارامتر اول باید معین کنید و مشخص کردن این پارامتر هم اجباری است و می توانید از جایی که جاوااسکریپت جستجو را باید شروع کند در پارامتر دوم معین کنید که این پارامتر اختیاری است. فراموش نکنید که موقعیت کاراکتر اول هر رشته عدد صفر میباشد و همچنین حروف بزرگ با حروف کوچک هم فرق دارند.
italics کاراکترهای یک رشته به صورت ایتالیک نوشته می شوند.
link برای ساختن لینک بکار می رود.
match مانند متد indexOf عمل می کند با این تفاوت که هر کلمه را جستجو کنید، اگر پیدا کند همان کلمه را برمیگرداند و اگر پیدا نکند مقدار null برمیگرداند.
replace این متد کاراکترهایی را جستجو می کند و به محض پیدا کردن اولین کاراکترهای همانند، کاراکترهای دیگری را جایگزین می کند. این متد دارای دو پارامتر می باشد، در پارامتر اول کلمه یا کاراکتری که لازم است پیدا شود را مشخص می کنید و سپس در پارامتر دوم جایگزین آنرا تعیین می کنید. الگوی این متد به صورت زیر است:
Stringobject.replace( /findString/ , "newString")
این متد هم مانند بقیه متدها به حروف بزرگ و کوچک حساس است که اگر می خواهید جاوااسکریپت تفاوتی قائل نشود باید به این صورت عمل کنید:
Stringobject.replace( /findString/i , "newString")
اگر می خواهید کلمه یا کاراکتر را در کل رشته پیدا و جایگزین کند، باید به صورت زیر عمل کنید:
Stringobject.replace( /findString/g , "newString")
در صورت نیاز می توانید از مخلوط آن دو استفاده کنید:
Stringobject.replace( /findString/gi , "newString")
search این متد فقط در رشته جستجو می کند و به محض پیدا کردن کلمه مورد نظر عدد موقعیت اولین کاراکتر آن کلمه را بر میگرداند و اگر پیدا نکند عدد منفی یک را نمایش میدهد. دارای یک پارامتر هست که کلمه مورد نظر برای جستجو را در آن مشخص می کنید و اگر هم مانند مثال بالا حرف i اضافه کنید از بزرگی و کوچکی حروف صرفنظر می کند.
Stringobject.search( /findString/i)
slice توسط این متد می توانید یک قسمت از رشته را جدا کنید. این متد دارای دو پارامتر میباشد که پارامتر اول باید نوشته شود و در آن عدد کاراکتری را که جداسازی از آنجا باید شروع شود را معین می کنید و در پارامتر دوم عدد کاراکتر پایانی را و اگر آنرا مشخص نکنید جاوااسکریپت تا انتهای رشته را در نظر میگیرد.
Stringobject.slice( start, end)
small اندازه حروف کوچک می شود.
split تبدیل یک رشته به آرایه. یعنی بین کلمات یک رشته علامت کاما گذاشته و آنها را مانند آرگومان های آرایه مرتب می کند. دارای دو پارامتر است که در پارامتر اول مدل علامت گذاری معین می شود. اگر از "" استفاده کنید بدون فاصله، مابین کلیه کاراکترهای رشته، کاما می گذارد و اگر از " " با فاصله استفاده کنید، در آن رشته بدنبال فاصله ها می گردد و علامت گذاری میکند یعنی بین کلمات کاما می گذارد. در پارامتر دوم هم که اختیاری است می توانید تعداد تکرار کاما را تعیین کنید.
strike بر روی رشته خط می کشد.
sub رشته مورد نظر را پایین تر از خط نشان میدهد.
sup رشته مورد نظر را بالاتر از خط نشان میدهد.
substr تقریباً مانند متد slice عمل میکند که در پارامتر اول عدد کاراکتر را برای شروع جداسازی معین می کنید ولی در پارامتر دوم تعداد انتخاب کاراکتر بعد از نقطه شروع را مشخص میکنید که اگر آن را ننویسید تا انتهای متن انتخاب خواهد شد و اگر مقادیر پارامترها را منفی دهید نقطه شروع از انتهای رشته تعیین میشود.
toLowerCase کلیه حروف انگلیسی داخل یک رشته را به حروف کوچک انگلیسی تبدیل می کند.
toUpperCase کلیه حروف تبدیل به حروف بزرگ خواهد شد.
خب دوستان با کلیه متدهای یک رشته هم آشنا شدید. بعضی از آنها کاربرد زیادی دارند و بعضی از آنها هم شبیه به یکدیگر هستند که برای راحتی کار همه آنها بیان شده است. در صفحه بعد می پردازیم به یکی دیگر از شئ های درون ساخت جاوااسکریپت.
شئ Math
شئ Math هم یکی دیگر از اشیای درون ساخت جاوااسکریپت است که شامل یکسری مقادیر ثابت و همچنین توابعی برای انجام عملیات ریاضی در صفحات وب میباشد.
برای ساختن این شئ نیازی به دستور new نیست چون این شئ برای مفسر جاوااسکریپت، کاملاً شناخته شده است.
این شئ هم مانند بقیه اشیاء دارای خصوصیات و متدهایی است که ابتدا به معرفی چند متد پرکاربرد از این شئ می پردازیم و سپس با بقیه آنها آشنا خواهیم شد.
خلق اعداد تصادفی، Random number
شئ Math دارای یک متد مفید برای خلق اعداد تصادفی بنام random است که الگوی آن بصورت زیر میباشد:
Math.random()
در متد بالا، جاوااسکریپت بین عدد یک و صفر، یک عددی را انتخاب می کند که این عدد اعشاری است.
هرگاه نیاز داشتید که این متد بین صفر و یک عدد بزرگتر از یک، عدد تصادفی پیدا کند باید طبق الگوی زیر عمل کنید:
Math.random ( ) * num
که بجای num عدد مورد نظر را می نویسید.
گرد کردن اعداد اعشاری
همانطور که از اسم این متد پیداست، برای گرد کردن یک عدد اعشاری استفاده می شود که البته همین متد را به سه مدل می توان تعریف کرد:
برای گرد کردن یک عدد اعشاری به عدد صحیح بعد از خود باید به شکل زیر عمل کنید:
Math.ceil ( num)
برای گرد کردن یک عدد اعشاری به عدد قبل:
Math.floor ( num )
و برای گرد کردن عدد اعشاری به نزدیک ترین عدد:
Math.round ( num)
بهتر است برای خلق اعداد تصادفی، این دو متد گفته شده را با هم ترکیب کنید تا اعداد صحیح بدست بیایند.
دو متد دیگر وجود دارد که می توانند بین اعداد تعیین شده، بزرگترین و کوچکترین عدد را پیدا کنند:
Math.max ( num, num,…)
Math.min ( num, num,…)
خصوصیات شئ Math
این شئ دارای خصوصیات و ثابتهایی است که برای محاسبات عملیات پیچیده ریاضی بکار می رود:
Math.E این خصوصیت مقدار ثابت عدد Euler را بر میگرداند که تقریباً برابر است با 2.7182
Math.PI مقدار ثابت عدد پی که تقریباً برابر است با 3.14
Math.LOG2E لگاریتم عدد Euler بر مبنای دو. تقریباً برابر است با 1.4426
Math.LOG10E لگاریتم E بر مبنای ده. تقریباً برابر است با 0.4342
Math.LN2 لگاریتم دو بر مبنای E. تقریباً برابر است با 0.6931
Math.LN10 لگاریتم ده بر مبنای E. تقریباً برابر است با 2.3025
Math.SQRT2 جذر عدد دو. تقریباً برابر است با 1.4142
Math.SQRT1_2 جذر یک دوم. تقریباً برابر است با 0.7071
توسط این خصوصیات دیگر لازم نیست که شما این اعداد را به خاطر بسپارید و فقط کافی است در صورت نیاز، این خصوصیات را در اسکریپت خود وارد کنید.
متدهای شئ Math
متدهایی هم که در زیر لیست شده اند، کاربرد کمتری نسبت به متدهای ذکر شده در ابتدای این بخش دارند.
abs قدرمطلق بر میگرداند.
acos آرک کسینوس نقطه x که یک عدد میان منفی یک و یک باید باشد؛ خارج از این اعداد مقدار NaN بر گردانده می شود. آرک کسینوس عدد یک برابر با صفر است و منفی یک برابر با عدد پی.
asin آرک سینوس نقطه x که یک عدد میان منفی یک و یک ؛ خارج از آن مقدار NaN بر گردانده می شود.
atan آرک تانژانت نقطه x .
atan2 آرک تانژانت زاویه تتا بین دو نقطه x و y .
cos کسینوس یک زاویه را بر میگرداند.
exp مقدار Ex را بر میگرداند که E همان عدد ثابت Euler است و x هم یک مقدار عددی.
log لگاریتم یک عدد بر مبنای عدد E .
pow این متد توان را برای یک عدد محاسبه می کند و دارای دو پارامتر است که در اولی عدد مشخص می شود و در پارامتر دوم مقدار عددی توان را تعیین می کنید.
sin سینوس یک مقدار عددی را محاسبه می کند.
sqrt ریشه عدد مربع شده را برمی گرداند.
tan عددی بر می گرداند که نشان دهنده تانژانت یک زاویه است.
شئ های مربوط به HTML DOM
در بخشهای قبل با شئ های درون ساخت جاوااسکریپت آشنا شدید. در این صفحه قصد داریم شئ های مربوط به HTML DOM را توضیح دهیم. ابتدا اجازه دهید در مورد DOM یک توضیحی بدهم که اصلاً DOM چی هست؟
تعریف DOM
DOM مخفف سه کلمه Document Object Model می باشد. در بعضی جاها برگردان فارسی آنرا مدل شئ سند می گویند. متنی که در زیر آمده تعریف DOM بر اساس W3C است:
" The Document Object Model is a platform- and language -neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web. "
اما به زبان ساده، DOM رابطه بین عناصر HTML مانند متن ها، عکس ها و غیره را با همان سند اچ تی ام ال بیان می کند. این یک فرآیندی است که به برنامه ها و اسکریپت ها اجازه دسترسی به محتوا و ساختار داخلی پنجره مرورگر را میدهد تا آنها بتوانند بصورت آزادانه تغییراتی ایجاد کنند که نتیجه این تغییرات در صفحه وب نمایان شود. در همین رابطه زبانی بنام DHTML بوجود آمد که با ترکیب کردن عناصر اچ تی ام ال با استایل شیت و اسکریپتها می تواند محتوای اسناد وب را بصورت متحرک و پویا درآورد. در اینجا پویا بودن فقط به این منظور نیست که متنها حرکت کنند و از یک طرف وارد بشوند و از طرف دیگر خارج؛ ممکن است لینکها هر بار شما را به یک سایتی پیوند دهند و یا عکس ها مرتب تغییر کنند، کلاً هر تغییری که نیاز به کدنویسی مجدد برای آن سند را نداشته باشد، منظور پویا بودن را می رساند.
سلسله مراتب اشیاء DOM
جاوااسکریپت، شئ هایی دارد که می توانند بطور مستقیم با خود مرورگر ارتباط برقرار کنند و همچنین شئ هایی که با صفحه وب در ارتباط هستند. در کل می توان این اشیاء را به دو دسته اصلی تقسیم کرد، دسته اول که BOM گفته می شود یعنی Browser Object Model شئ هایی که با پنجره مرورگر می توانند ارتباط برقرار کنند و دسته دوم DOM که با Document یعنی همان سند اچ تی ام ال. تمامی این اشیاء بر اساس یک سلسله مراتبی این ارتباط را برقرار می کنند که در رأس آنها شئ window می باشد. برای دیدن این سلسله مراتب اینجا را کلیک کنید.
همانطور که در شکل مشاهده کردید از شئ window تا شئ Document جزو دسته BOM می باشند و اشیاء بعد از Document در دسته DOM قرار می گیرند. ناگفته نماند که در حال حاضر کمتر صحبت اصطلاح BOM می شود و کلاً این مجموعه را DOM می گویند.
شما باید این سلسله مراتب را برای استفاده اشیاء آن، رعایت کنید. این سلسله مراتب را می توان به شجره نامه تشبیه کرد و شما مجبور هستید برای صدا کردن هر شخص آنرا با نام پدرش بیاورید و در بعضی جاها حتی نام پدر بزرگ هم لازم است، بطور مثال: علی فرزند محمد یا علی فرزند محمد فرزند حسین. در اینجا هم پدر اصلی Window می باشد وپدر بعدی Document است که فرزندهای آن همان عناصر اچ تی ام ال میباشند و سپس Form و در آخر هم Select که تنها یک فرزند دارد. برای استفاده از آنها باید ابتدا اسم پدر و سپس اسم فرزند را نوشت و در آخر هم خصوصیت و یا متد آن فرزند که همه اینها با یک نقطه از هم باید جدا شوند. بطور مثال اگر میخواهید یک فرم را بنام form1 صدا بزنید تا با آن ارتباط برقرار کنید باید به شکل زیر عمل شود:
window.document.form1
مانند همه اشیاء در جاوااسکریپت ، این شئ ها هم دارای خصوصیات و متدهایی هستند که بعد از رعایت کردن سلسله مراتب با گذاشتن یک نقطه می توانید آنها را بنویسید. مانند:
window.history.go (-1)
که اگر این شئ را در یک لینک قرار دهید با کلیک کردن بر روی آن، کاربر به صفحه قبل بازگشت داده می شود.
در جدول زیر شئ های اصلی این سلسله مراتب لیست شده است.
هنوز توضیحات همه آنها کامل نشده است. در اسرع وقت تکمیل و در اختیار شما قرار خواهند گرفت.
این شئ مستقیماً با پنجره مرورگر در ارتباط است که معمولاً خصوصیات و متدهای این شئ در تگهای body و frameset بکار می روند. window
این شئ شامل اطلاعاتی در رابطه با مرورگر کاربر است که توسط خصوصیات و متدهای آن این اطلاعات ذخیره تا مورد استفاده قرار گیرند. navigator
برای کار کردن بر روی فریمهای اچ تی ام ال. frame
دسترسی و ارتباط با کلیه عناصر اچ تی ام ال مانند، متنها فرمها عکسها و غیره. document
شامل اطلاعاتی در مورد URL یا همان آدرس اینترنتی صفحه ای که در حال نمایش است. location
این شئ دارای اطلاعاتی برای رجوع کاربر به صفحاتی که قبل از آن صفحه مشاهده شده و بر عکس. history
اطلاعات صفحه مرورگر کاربر را بر می گرداند مانند اندازه طول و عرض. screen
نکات مهم برای اسکریپت نویسی
قسمت مقدماتی آموزش جاوااسکریپت به پایان رسید و همانطور که مشاهده کردید دستورات این زبان، توضیح داده شد تا با استفاده از آنها بتوانید اسکریپتهایی برای صفحات وب خود بنویسید و یا اگر با اسکریپتی برخورد کردید، کاملاً آنرا درک کنید و مطابق نیاز خود آن را اصلاح کنید. فراموش نکنید که این دستورات و کدها را مرتب تمرین کرده و اسکریپتهای جدید و ساده برای خود بسازید تا این زبان در ذهن شما قرار گیرد. بهترین راه به خاطر سپردن دستورات جاوااسکریپت خلق کدهایی برای خودتان و دیگران است.
هرگاه خواستید که اسکریپتی خلق کنید، ابتدا آنرا در ذهن خود بررسی کنید که این اسکریپت چه کاری باید انجام دهد و چه نتیجه ای را می خواهید از آن بگیرید، سپس افکارتان را روی کاغذ پیاده کنید با جزئیات کامل که چه اطلاعاتی را باید دریافت کنید و توسط چه دستوراتی آنرا پیش ببرید و در آخر چه نتیجه ای باید بدهد.
هنگام خلق یک اسکریپت نکاتی را باید در نظر داشته باشید:
سعی کنید بعد از هر خط علامت ; را بگذارید تا پایان آن خط مشخص شود.
document.write ( " text string");
document.write ( myFunction);
--------------------------------------------------------------------------------
جاوااسکریپت case sensetive است یعنی به حروف کوچک و بزرگ حساس است و بین آنها فرق می گذارد. در جاوااسکریپت myFunction با myfunction تفاوت دارد.
--------------------------------------------------------------------------------
دقت کنید کلیه علامتها مانند پرانتز، آکلاد و کروشه در هر جا که می نویسید باید دوباره آنها را ببندید.
( { [ ..... ] } )
--------------------------------------------------------------------------------
جاوااسکریپت فاصله های اضافی را در نظر نمی گیرد، پس شما می توانید برای خوانا بودن کد خود فاصله هایی را اضافه کنید. دو خط زیر تفاوتی با هم ندارند:
var name="value";
var name = " value" ;
--------------------------------------------------------------------------------
در نظر داشته باشید که یک خط کد جاوااسکریپت حتماً باید در یک خط نوشته شود و نمی توانید ادامه آنرا در خط بعدی بنویسید، مگر اینکه به انتهای صفحه برسید و خود به خود به ابتدای خط بعد هدایت شوید. اما در میان رشته های متنی با گذاشتن علامت \ می توانید به خط بعد رفته و ادامه دهید.
document.write ( " Hello\
my friends.")
--------------------------------------------------------------------------------
شما می توانید جلوی کدهای خود یک توضیح و یا یک نظریه را وارد کنید تا برای مراجعتهای بعدی یک سر نخی داشته باشید و سریع متوجه بشوید که آن قسمت از اسکریپت، چه کاری را انجام می دهد و یا اینکه شما یک اسکریپت برای یک فرد مبتدی می سازید و می خواهید بعضی از قسمتهای کد را توضیح دهید که برای این منظور ها می توانید در هر خط از اسکریپت که می خواهید علامت // گذاشته و سپس آن توضیح را بنویسید.
document.write( " text " ) ; // your comment
اگر هم نظریه یا توضیح شما بیشتر از چند کلمه است می توانید به صورت زیر عمل کنید:
/* This is a comment
block. It contains
several lines*/
MaH NaZ