آموزش جامع جاوا اسکریپت

اردیبهشت 91

این مطالب رو بنده و دوستم همراه با یکدیکر نوشته ایم هر کسی هم که این مطالب رو کپی کرده غیر قانونی و غیر شرعی است (که چقدر هم در ایران اهمین می دهند ......... )

-----

بعد یه سوال:

من از کپی کردن مطالب چه سودی قراره ببرم؟!

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

**حجت جان در مورد کپی مطالب واست یه پیام فرستادم بخونش جوابشو *حتما* برام بفرست ببینم بالاخره به یه نظر می رسیم یا نه****

ویرایش شده در تیر 91 توسط Pooyan Afzali

اردیبهشت 91

سه نوع پنجره در جاوااسکريپت وجود دارند که مي توانيد توسط آنها پيغامي را در صفحه براي کاربر نمايش دهيد و يا اطلاعاتي براي تأييد آنها بفرستيد و يا اينکه اطلاعاتي را از آنها بخواهيد. آنها پنجره هاي کوچکي هستند که چون خيلي سريع در صفحه بالا آمده و در مقابل کاربر ظاهر مي شوند، به آنها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 را زد و يا هيچ اسمي وارد نکرد تغييري در صفحه ايجاد نشود. شما مي توانيد يکبار آنرا حذف کنيد و نتيجه اجراي کد را ببينيد.

در حال حاضر شما سه نوع پنجره ارتباط با کاربر را فرا گرفتيد که دو مدل اول بيشترين کاربرد را در کدنويسي شما خواهند داشت.

بای

اردیبهشت 91

رويدادها و يا حوادث در جاوااسکريپت، کدهاي کوتاهي هستند که بين اقدامات انجام شده توسط کاربر مانند کليک کردن موس و اسکريپت، ارتباط برقرار مي کنند. يعني هنگاميکه کاربر بر روي دکمه هاي موس فشار مي آورد، رويدادها به اسکريپت اين موضوع را مي فهمانند تا اسکريپت براي آن حرکت عکس العملي در نظر بگيرد.

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

در کل رويدادها باعث مي شوند تا جاوااسکريپت اينگونه حرکات را شناسايي و درک کند.

رويدادها مانند بقيه خصوصيات تگهاي اچ تي ام ال هستند که بايد در ميان تگها قرار گيرند و آنها را برابر با يک کد کوتاه جاوااسکريپت و يا اسم يک تابع تعريف شده بايد قرار داد.

رويداد و کد استفاده شده به صورت زير است:

<span onMouseOver="alert('Salam doost e man')">

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

رويدادهاي موس

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

onClick براي کليک کردن دکمه چپ موس توسط کاربر.

onDblClick رويداد براي دوبار کليک دکمه چپ موس.

onMouseDown فشار آوردن بر روي دکمه چپ موس.

onMouseUp رها کردن دکمه موس پس از فشردن آن.

onMouseOver قرار گرفتن نشانگر موس بر روي يک چيزي.

onMouseOut خارج شدن موس از روي يک چيزي.

رويدادهاي کيبورد

در اين رويدادها، جاوااسکريپت نسبت به فشردن يک کليد بر روي کيبورد توسط کاربر، عکس العمل نشان خواهد داد.

onKeyPress فشردن يک کليد کيبورد.

onKeyDown مانند رويداد بالا براي فشردن يک کليد.

onKeyUp رها کردن يک کليد فشرده شده.

رويدادهاي فرم

اين رويدادها مربوط به عملياتي است که کاربر بر روي اجزاي فرم انجام مي دهد. البته ممکن است بعضي از اين رويدادها بر روي متنهاي عادي در صفحه هم عکس العمل نشان دهند اما بيشترين کاربرد را در فرمها دارند.

onFocus هنگاميکه توسط موس و يا دکمه Tab کيبورد بر روي يکي از اجزاي فرم متمرکز شويد.

onBlur هنگاميکه تمرکز از روي يکي از اجزاي فرم خارج شود.

onSelect انتخاب کردن يک متن در صفحه يا در يک فرم.

onChange تغيير در اجزاي فرم، مانند تغيير متن در کادر متني.

onSubmit فشردن دکمه تأييد يک فرم.

onReset فشردن دکمه reset يا همان پاک کردن اطلاعات فرم.

رويدادهاي يک صفحه

يکسري از رويدادها هم مربوط به صفحات وب مي باشد، مانند لود شدن صفحه يا بستن آن.

onLoad تکميل شدن يک صفحه وب يا يک تصوير در مرورگر.

onUnload بستن مرورگر يا خروج از يک صفحه وب.

onResize تغيير اندازه پنجره مرورگر.

يک رويداد ديگر هست که مي توان هم براي يک صفحه و هم براي يک عکس بکار برد:

onError اين رويداد زماني اجرا مي شود که يک عکس به هر دليلي لود نشود يعني در جاي خود قرار نگيرد.

معمولاً براي رويدادها، ابتدا يک تابع تعريف مي شود تا هنگام نوشتن رويداد در يک تگ اچ تي ام ال، نظم برقرار باشد و از شلوغي تگ جلوگيري شود. بيشترين کاربرد اين رويدادها در تأييد اعتبار فرمها و پرسشنامه ها مي باشند که در يک بخش مجزا آنرا توضيح خواهم داد.

gift

اردیبهشت 91

در بخشهاي قبل با بعضي از 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 آشنا خواهيد شد.

اردیبهشت 91

شئ رشته يا 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 توسط اين متد مي توانيد يک قسمت از رشته را جدا کنيد. اين متد داراي دو پارامتر ميباشد که پارامتر اول بايد نوشته شود و در آن عدد کاراکتري را که جداسازي از آنجا بايد شروع شود را معين مي کنيد و در پارامتر دوم عدد کاراکتر پاياني را و اگر آنرا مشخص نکنيد جاوااسکريپت تا انتهاي رشته را در نظر ميگيرد.

[left]Stringobject.slice( start, end )[/left]

small اندازه حروف کوچک مي شود.

split تبديل يک رشته به آرايه. يعني بين کلمات يک رشته علامت کاما گذاشته و آنها را مانند آرگومان هاي آرايه مرتب مي کند. داراي دو پارامتر است که در پارامتر اول مدل علامت گذاري معين مي شود. اگر از "" استفاده کنيد بدون فاصله، مابين کليه کاراکترهاي رشته، کاما مي گذارد و اگر از " " با فاصله استفاده کنيد، در آن رشته بدنبال فاصله ها مي گردد و علامت گذاري ميکند يعني بين کلمات کاما مي گذارد. در پارامتر دوم هم که اختياري است مي توانيد تعداد تکرار کاما را تعيين کنيد.

strike بر روي رشته خط مي کشد.

sub رشته مورد نظر را پايين تر از خط نشان ميدهد.

sup رشته مورد نظر را بالاتر از خط نشان ميدهد.

substr تقريباً مانند متد slice عمل ميکند که در پارامتر اول عدد کاراکتر را براي شروع جداسازي معين مي کنيد ولي در پارامتر دوم تعداد انتخاب کاراکتر بعد از نقطه شروع را مشخص ميکنيد که اگر آن را ننويسيد تا انتهاي متن انتخاب خواهد شد و اگر مقادير پارامترها را منفي دهيد نقطه شروع از انتهاي رشته تعيين ميشود.

toLowerCase کليه حروف انگليسي داخل يک رشته را به حروف کوچک انگليسي تبديل مي کند.

toUpperCase کليه حروف تبديل به حروف بزرگ خواهد شد.

خب دوستان با کليه متدهاي يک رشته هم آشنا شديد. بعضي از آنها کاربرد زيادي دارند و بعضي از آنها هم شبيه به يکديگر هستند که براي راحتي کار همه آنها بيان شده است. در صفحه بعد مي پردازيم به يکي ديگر از شئ هاي درون ساخت جاوااسکريپت.

اردیبهشت 91

شئ 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 . اين عدد به عدد E معروف است.

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 مقدار E^x را بر ميگرداند که E همان عدد ثابت Euler است و x هم يک مقدار عددي.م

log لگاريتم يک عدد بر مبناي عدد E .

pow اين متد توان را براي يک عدد محاسبه مي کند و داراي دو پارامتر است که در اولي عدد مشخص مي شود و در پارامتر دوم مقدار عددي توان را تعيين مي کنيد.

sin سينوس يک مقدار عددي را محاسبه مي کند.

sqrt جذر يک عدد را برمي گرداند.

tan عددي بر مي گرداند که نشان دهنده تانژانت يک زاويه است.

اردیبهشت 91

در بخشهاي قبل با شئ هاي درون ساخت جاوااسکريپت آشنا شديد. در اين صفحه قصد داريم شئ هاي مربوط به 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 صدا بزنيد تا با آن ارتباط برقرار کنيد بايد به شکل زير عمل شود:

[left]window.document.form1[/left]

مانند همه اشياء در جاوااسکريپت ، اين شئ ها هم داراي خصوصيات و متدهايي هستند که بعد از رعايت کردن سلسله مراتب با گذاشتن يک نقطه مي توانيد آنها را بنويسيد. مانند:

[left]window.history.go (-1)[/left]

که اگر اين شئ را در يک لينک قرار دهيد با کليک کردن بر روي آن، کاربر به صفحه قبل بازگشت داده مي شود.

اردیبهشت 91

نکات مهم برای اسکريپت نويسی

قسمت مقدماتي آموزش جاوااسکريپت به پايان رسيد و همانطور که مشاهده کرديد دستورات اين زبان، توضيح داده شد تا با استفاده از آنها بتوانيد اسکريپتهايي براي صفحات وب خود بنويسيد و يا اگر با اسکريپتي برخورد کرديد، کاملاً آنرا درک کنيد و مطابق نياز خود آن را اصلاح کنيد. فراموش نکنيد که اين دستورات و کدها را مرتب تمرين کرده و اسکريپتهاي جديد و ساده براي خود بسازيد تا اين زبان در ذهن شما قرار گيرد. بهترين راه به خاطر سپردن دستورات جاوااسکريپت خلق کدهايي براي خودتان و ديگران است.هرگاه خواستيد که اسکريپتي خلق کنيد، ابتدا آنرا در ذهن خود بررسي کنيد که اين اسکريپت چه کاري بايد انجام دهد و چه نتيجه اي را مي خواهيد از آن بگيريد، سپس افکارتان را روي کاغذ پياده کنيد با جزئيات کامل که چه اطلاعاتي را بايد دريافت کنيد و توسط چه دستوراتي آنرا پيش ببريد و در آخر چه نتيجه اي بايد بدهد.هنگام خلق يک اسکريپت نکاتي را بايد در نظر داشته باشيد: سعي کنيد بعد از هر خط علامت ; را بگذاريد تا پايان آن خط مشخص شود.

[left]document.write ( " text string " );
document.write ( myFunction ) ;[/left]

جاوااسکريپت case sensetive است يعني به حروف کوچک و بزرگ حساس است و بين آنها فرق مي گذارد. در جاوااسکريپت myFunction باmyfunction تفاوت دارد.

دقت کنيد کليه علامتها مانند پرانتز، آکلاد و کروشه در هر جا که مي نويسيد بايد دوباره آنها را ببنديد.

[left]( { [ ..... ] } )[/left]

جاوااسکريپت فاصله هاي اضافي را در نظر نمي گيرد، پس شما مي توانيد براي خوانا بودن کد خود فاصله هايي را اضافه کنيد. دو خط زير تفاوتي با هم ندارند:

[left]var name="value";
var name = " value " ;[/left]

در نظر داشته باشيد که يک خط کد جاوااسکريپت حتماً بايد در يک خط نوشته شود و نمي توانيد ادامه آنرا در خط بعدي بنويسيد، مگر اينکه به انتهاي صفحه برسيد و خود به خود به ابتداي خط بعد هدايت شويد. اما در ميان رشته هاي متني با گذاشتن علامت \ مي توانيد به خط بعد رفته و ادامه دهيد.

[left]document.write ( " Hello \
my friends! " ) ;[/left]

شما مي توانيد جلوي کدهاي خود يک توضيح و يا يک نظريه را وارد کنيد تا براي مراجعتهاي بعدي يک سر نخي داشته باشيد و سريع متوجه بشويد که آن قسمت از اسکريپت، چه کاري را انجام مي دهد و يا اينکه شما يک اسکريپت براي يک فرد مبتدي مي سازيد و مي خواهيد بعضي از قسمتهاي کد را توضيح دهيد که براي اين منظور ها مي توانيد در هر خط از اسکريپت که مي خواهيد علامت // گذاشته و سپس آن توضيح را بنويسيد.

document.write( " text " ) ;   //  your comment

اگر هم نظريه يا توضيح شما بيشتر از چند کلمه است مي توانيد به صورت زير عمل کنيد:

/* This is a comment
block. It contains
several lines */

لازم بذکر است که اين توضيحات و نظريات در صفحه نمايش داده نمي شوند.

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

[left]<script language="javascript" type="text/javascript">
javascript code......
</script><noscript> Your browser does not support javascript.</noscript>[/left]

]

:auizz3ffy9vla57584x

اردیبهشت 91

سلام خدمت همگی.

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

امیدوارم مورد استقبال همتون قرار گرفته باشه ...... .

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

و اگه به نظرتون خوب و جامع بود اون رو مهم کنه.

موفق و موید باشید:auizz3ffy9vla57584x:auizz3ffy9vla57584x:25:

حجت مردانه زاده · اردیبهشت 91

طبق درخواست شما، تاپیک قفل شد..

موفق باشیدو سربلند

ورود

آموزش جامع جاوا اسکریپت

35 پست در این موضوع

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

خانه

فعالیت ها