آموزش طراحی سایت-آموزش توابع و اشیا درجاوا اسکریپت

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

• قسمت اول آموزش جاوا اسکریپت
• آموزش عملگر های جایگزین در جاوا اسکریپت
• آموزش انواع داده در جاوا اسکریپت-data types
• رشته ها در جاوا اسکریپت
• آرایه ها (arrays) در جاوا اسکریپت
• اشیا (objects) در جاوا اسکریپت

حال با ادامه دوره آموزش طراحی سایت همراه باشید

 

 

آموزش توابع (functions) درجاوا اسکریپت

تابع (function) در جاوا اسکریپت عبارت است از یک مجموعه یا بلوکی از کدهای داخل آکولاد {} که برای انجام وظیفه ی (task) خاصی طراحی شده اند. یک تابع زمانی اجرا می شود که چیزی (مانند رویداد onclick) آن را صدا زده یا فرابخواند.

مثال:

 

نمونه یک

<script>

function myFunction(a, b) {

return a * b;

}

document.getElementById("demo").innerHTML = myFunction(4, 3);

</script>

 

سینتکس یا دستور نحوی تابع در جاوا اسکریپت در آموزش طراحی سایت

نحوه ی تعریف یک تابع در زبان جاوا اسکریپت بدین ترتیب می باشد : در مرحله ی اول کلیدواژه ی function را تایپ می کنیم، سپس یک اسم و به دنبال آن پرانتز () را قرار می دهیم. اسم تابع می تواند دربردارنده ی حروف، اعداد، خط زیرین / underscore و همچنین علامت دلار باشد، در حقیقت همان قواعدی که برای متغیرها رعایت می شود. می توان اسم پارامترها را داخل پرانتز جای گذاری کرده و آن ها را با ویرگول از هم جداسازی کرد، مشابه این نمونه : ...) (parameter1,parameter2, کدی که باید توسط تابع اجرا گردد، داخل آکولاد {} قرار می گیرد.

function name(parameter1‎،‎ parameter2‎،‎ parameter3) {

‎ code to be executed

‎}‎

پارامتر parameter / پارامترهای تابع همان / nameاسامی هستند که در تعریف تابع لیست شده اند.

آرگومان Argument / آرگومان های تابع نیز همان value / مقادیر حقیقی هستند که هنگامی که تابع فراخوانده می شود این مقادیر واقعی به آن (تابع) داده می شوند. داخل تابع، آرگومان ها به عنوان متغیرهای محلی (local variables) مورد استفاده قرار می گیرند.

توجه:

تابع در حقیقت همان زیر روال (subroutine) یا رویه (procedure) در دیگر زبان های برنامه نویسی است.

 

فراخوانی تابع / Function invocation

کد داخل تابع زمانی اجرا می شود که چیزی تابع یا function را صدا بزند. زمانی که یک رویداد یا event رخ می دهد.(برای مثال زمانی که کاربر روی دکمه ی کلیک می کند) هنگامی که از کد جاوا اسکریپت فراخوانی می شود. و یا به صورت خودکار که به آن self invoked گفته می شود و تابع طی آن خودش را به صورت اتوماتیک صدا می زند.

 

دستور return

هنگامی که جاوا اسکریپت به return statement (دستور return) می رسد، تابع اجرای کدها را متوقف می کند. چنانچه تابع از یک دستور (statement) فراخوانی شود، در آن صورت جاوا اسکریپت باز گشته تا کد را پس از دستور فراخوان (invoking statement / دستوری که تابع را صدا زده بود) اجرا کند. دستور return برای برگداندن یک مقدار مشخص در توابع، بکار گرفته می شود. توابع اغلب یک return value / مقدار بازگشتی محاسبه کرده و بازمی گردانند، به عبارتی دیگر تابع مقدار بازگشتی را به فراخوان یا صدا زننده (caller) برمی گرداند.

مثال:

حاصل ضرب دو عدد را محاسبه کرده و نتیجه را برمی گرداند.

 

نمونه دو

function myFunction(a, b) {

return a * b;

}

document.getElementById("demo").innerHTML = myFunction(4, 3);

 

 

چرا باید از توابع (functions) استفاده کنیم؟

می توان کدها را مجددا مورد استفاده قرار داد : یکبار کد را تعریف کنید و آن را بارها بکار ببرید. می توان یک کد را بارها استفاده نمود و هر بار یک آرگومان متفاوت برای آن در نظر گرفت و از این طریق نتایج گوناگون بدست آورد.

مثال:

 

تبدیل فارنهایت به سلسیوس

 

نمونه سه

function toCelsius(f) {

return (5 / 9) * (f - 32);

}

document.getElementById("demo").innerHTML = toCelsius(32);

 

عملگر () تابع را فراخوانی می کند. با استفاده از مثال بالا می توان دریافت که toCelsius به شی تابع (function object) ارجاع می دهد و toCelsius() به نتیجه ی تابع اشاره دارد.

مثال:

دسترسی به تابع بدون استفاده از عملگر () باعث می شود که بجای نتیجه، تعریف تابع برگردانده شود.

 

نمونه چهار

function toCelsius(f) {

return (5 / 9) * (f - 32);

}

document.getElementById("demo").innerHTML = toCelsius;

//document.getElementById("demo").innerHTML = toCelsius(32);

 

 

استفاده از توابع به عنوان متغیر

در زبان جاوا اسکریپت می توان توابع را به همان شیوه ی که متغیرها را استفاده می نمایید، بکار ببرید.

مثال:

می توانید از این نمونه

var text = "The temperature is " + toCelsius(32) + " Centigrade";‎

بجای

 

var x = toCelsius(32);

var text = "The temperature is " + x + " Centigrade";‎

استفاده کنید.

 

نمونه پنج

document.getElementById("demo").innerHTML =

"The temperature is " + toCelsius(32) + " Centigrade";

 

function toCelsius(fahrenheit) {

return (5 / 9) * (fahrenheit - 32);

}

 

 

آموزش اشیا متدها و خصوصیات javascript در آموزش طراحی سایت

 

اشیا، متدها، خصوصیات

در جهان واقع اتومبیل یک object یا شی محسوب می شود. یک اتومبیل دارای property یا خصوصیت هایی از قبیل وزن، رنگ و همچنین توابع یا method هایی از قبیل : start و stop دارد.

 

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

 

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

پیش تر آموختیم که متغیرها در واقع ظرف هایی برای ذخیره ی مقادیر داده محسوب می شوند. کد زیر یک مقدار ساده (Fiat) به متغیری به نام car تخصیص می دهد.

 

نمونه یک

<script>

var car = "Fiat";

document.getElementById("demo").innerHTML = car;

</script>

شیا نیز متغیر (variable) هستند، با این تفاوت که می توانند مقادیر زیادی را در خود جای دهند. به عنوان مثال، توجه خود را به نمونه ی زیر جلب کنید که در آن چندین مقدار متفاوت (Fiat ,500 , white) به متغیری به نام car اختصاص داده شده.

 

نمونه دو

<script>

var car = { type: "Fiat", model: 500, color: "white" };

document.getElementById("demo").innerHTML = car.type;

</script>

همان طور که مشاهده می کنید مقادیر به صورت جفت های اسم : مقدار (name:value pairs) نوشته شده اند.

توجه:

اشیا جاوا اسکریپت در حقیقت ظرف هایی برای مقادیر نام گذاری شده (named variables) هستند.

 

خصوصیات اشیا (object properties)

جفت های اسم : مقدار (name:values pairs) خصوصیات یا properties یک شی در جاوا اسکریپت اطلاق می گردند.

var person = {firstName:"John"‎،‎ lastName:"Doe"‎،‎ age:50‎،‎ ‎eyeColor:"blue"};‎

 

 

متدهای یک شی (object methods)

متدها در واقع عملیاتی هستند که می توان روی شی انجام داد. متدها به عنوانfunction definitions یا تعریف تابع در خصوصیات (property) ذخیره می گردند (می توان متدها را مانند تعریف یک تابع داخل خصوصیت ذخیره کرد).

 

توجه:

اشیا جاوا اسکریپت ظرف هایی برای نگهداری مقادیر نام گذاری شده (که خصوصیت یا property خوانده می شود) و متدها هستند.

 

تعریف یا ایجاد شی در جاوا اسکریپت

یک شئ جاوا اسکریپت را می توان با object literal(نوشته ی متنی) تعریف کرد.

مثال:

var person = {firstName:"John"‎،‎ lastName:"Doe"‎،‎ age:50‎،‎ ‎eyeColor:"blue"};‎

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

مثال:

 

نمونه سه

<script>

var person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" };

 

document.getElementById("demo").innerHTML =

person.firstName + " is " + person.age + " years old.";

</script>

 

دسترسی به خصوصیت های اشیا

از دو طریق می توان به خصوصیت اشیا دسترسی پیدا کرد.

objectName.propertyName‏ ‏

یا

objectName[propertyName]‎

مثال:

person.lastName;‎

مثال2:

person["lastName"];‎

 

دسترسی به متدهای یک شی

می توان با استفاده از دستور نحوی (syntax) زیر به متد یک شی دسترسی پیدا کرد.

objectName.methodName()

مثال:

name = person.fullName();‎

چنانچه سعی کنید به خصوصیت / property، fullName بدون عملگر () دسترسی پیدا کنید، در آن صورت تعریف تابع / function definition به عنوان نتیجه بازگردانده می شود.

مثال:

name = person.fullName;

توجه داشته باشید که هیچگاه نباید رشته ها (strings)، اعداد (numbers)، بولی ها (Booleans) را به عنوان شی تعریف کنید! چنانچه متغیری را در جاوا اسکریپت با کلیدواژه ی "new"تعریف کنید، آن متغیر به عنوان یک شی ایجاد می گردد.

var x = new String(); // Declares x as a String object

var y = new Number(); // Declares y as a Number object

var z = new Boolean(); // Declares z as a Boolean object‎

از اشیا بولی، عددی، رشته ای اجتناب کنید، زیرا که کد را پیچیده تر ساخته و سرعت اجرا را کاهش می دهد.

آموزش طراحی سایت ادامه دارد