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

سلام بر دوستان عزیزم ...

امروز با مقاله ای دیگر از سری مقاله های آموزش طراحی سایت همراه شما هستیم. در این مقاله با هم و در کنار هم می آموزیم که چطور می توانیم متود dste در جاوا اسکریپت را بکار گرفته و تنظیمات لازم برای آن را نیز پیاده سازی کنیم...

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

شی date در جاوا اسکریپت به برنامه نویس این امکان را می دهد که تاریخ و زمان را در صفحات وب مدیریت کند.

 

قالب یا فرمت زمان و تاریخ در جاوا اسکریپت

تاریخ را در جاوا اسکریپت می توان یا به صورت رشته (string) نوشت، مطابق دستور زیر :

Mon Jun 08 2015 16:06:13 GMT+0430 (Iran Daylight Time)

 

و یا آن را به صورت عدد قالب دهی کرده و نمایش داد.

1433763373015

نمایش تاریخ

در این بخش با استفاده از یک اسکریپت، تاریخ را درون المان با شناسه یا id "demo" نمایش می دهیم.

مثال 1 :

document.getElementById("demo") = Date();

در این اسکریپت مقدار Date() به محتوای (innerHTML) المان با شناسه ی "demo" تخصیص داده می شود.

 

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

شی date همان طور که پیشتر نیز ذکر شد امکان مدیریت و کار با تاریخ را فراهم می کند. تاریخ متشکل از سال، ماه، روز، ساعت، دقیقه، ثانیه و یک هزارم ثانیه می باشد. شی date با استفاده از سازنده new Date() ایجاد می گردد(منظور از سازنده همان constructor است). چهار روش مختلف برای راه اندازی و شروع تاریخ وجود دارد که به شرح زیر است :

 

new Date() 
        new Date(milliseconds) 
        new Date(dateString)
        new Date(year،‎ month،‎ day،‎ hours،‎ minutes،‎ seconds،‎ milliseconds)‎

سازنده یا constructor new Date() یک شی جدید date با زمان و تاریخ جاری ایجاد می کند.

 

مثال 2 :

    var d = new Date();
    document.getElementById("demo") = d;

سازنده ی new Date(date string)، یک شی جدید date از تاریخ و زمان تعیین شده می سازد.

 

مثال 3 :

    var d = new Date("October 13, 2014 11:13:00");
    document.getElementById("demo") = d;

سازنده ()new Date Number یک شی جدید date از زمان صفر (zero time) محاسبه کرده و عدد مورد نظر را به آن اضافه می کند. منظور از زمان صفر / zero time در واقع یک ژانویه ی سال 1970 و ساعت هماهنگ جهانی UTC 00:00:00 می باشد. عدد مورد نظر بر حسب یک هزارم ثانیه مشخص می شود.

مثال 4 :

    var d = new Date(86400000);
document.getElementById("demo") = d;

 

که نتیجه بصورت زیر خواهد بود :

Fri Jan 02 1970 03:30:00 GMT+0330 (Iran Standard Time)‎

 

توجه :

تمام محاسبات براساس میلی ثانیه با زمان شروع 00:00:00 01/01/1970 و طبق زمان جهانی (UTC) می باشد. یک روز شامل 86، 400، 000 میلی ثانیه است.

 

سازنده ی (7)new Date Numbers، یک شی جدید date با تاریخ و زمان مشخص شده ایجاد می کند. هفت رقم داخل پرانتز سال، ماه، ساعت، دقیقه، ثانیه و هزارم ثانیه را به همین ترتیب ذکر شده مشخص می کند.

 

مثال 5 :

 var d = new Date(99, 5, 24, 11, 33, 30, 0);
 document.getElementById("demo") = d;

می توان چهار پارامتر پایانی را از حذف کرد.

 

مثال 6 :

 var d = new Date(99, 5, 24);
 document.getElementById("demo") = d;

نکته : جاوا اسکریپت ماه ها را از 0 تا 11 می شمارد، بدین معنا که ژانویه 0 و دسامبر ماه 11 در نظر گرفته می شود.

متدهای شی date

هنگامی که یک شی date ایجاد می شود، متدهای جاوا اسکریپت به شما اجازه می دهند تعدادی عملیات معین روی آن انجام دهید. متدهای شی date قابلیت بدست آوردن و تنظیم (get & set) تاریخ و زمان را یا با زمان محلی و یا زمان جهانی فراهم می آورد.

 

نمایش تاریخ

هنگامی که یک شی date را در HTML نمایش می دهید، این شی به صورت خودکار و به وسلیه ی متد toString() به یک رشته تبدیل می شود.

 

مثال 7 :

< p id="demo">< /p>
‎< script>
    d = new Date();
    document.getElementById("demo") = d;
‎< /script>‎

 

که یکسان است با :

< script>
    var d = new Date();
    document.getElementById("demo") = d.toString();
< /script>

 

متد toUTCString() یک تاریخ را به رشته ی UTC (یک استاندارد برای نمایش تاریخ) تبدیل می کند.

 

مثال 8 :

< script>
    var d = new Date();
    document.getElementById("demo") = d.toUTCString();
< /script>

متد toDateString() یک تاریخ را به فرمت های خواناتری تبدیل می کند.

 

مثال 9 :

< script>
    var d = new Date();
    document.getElementById("demo") = d.toDateString();
< /script>

که نتیجه بصورت زیر خواهد بود :

Tue Jun 09 2015

 

توجه : شی date (از نوع) ایستا (static) است و نه پویا (dynamic)، بدین معنا که زمان و ساعت کامپیوتر همچنان تغییر می کند اما اشیا date به همان صورتی که اول ایجاد شدند باقی مانده و تغییر نمی کنند.

قالب های مختلف تنظیم تاریخ در جاوا اسکریپت

در کل سه فرمت مختلف تنظیم تاریخ در جاوا اسکریپت وجود دارد که به ترتیب زیر می باشد. ISO Dates (ایزو 8601 عناصر داده - قالب‌های تبادل - تبادل اطلاعات - نمایش تاریخ‌ها و زمان‌ها یک استاندارد بین المللی درباره تبادل داده‌های مرتبط با تاریخ و زمان است).

Long Dates
Short Dates

ترکیب نحوی (syntax) ایزو 8601 (روز روز- ماه ماه – سال سال سال سال) نوین ترین و همچنین ارجح ترین روش برای نوشتن و فرمت دهی تاریخ محسوب می گردد.

مثال 10 :

< script>
    document.getElementById("demo") = new Date("2015-03-25");
< /script>

و یا با ترکیب نحوی " ماه ماه – سال سال سال سال " بدین تریتب نوشت : 2014-12

 

مثال 11 :

< script>
    document.getElementById("demo") = new Date("2015-03");
< /script>

و یا با ترکیب نحوی " سال سال سال سال " بدین ترتیب : 2014

 

مثال 12 :

document.getElementById("demo") = new Date("2015");

و یا بدین ترتیب : 2014-12-24T12:00:00

 

مثال 13 :

document.getElementById("demo") = new Date("2015-03-25T12:00:00");

توجه داشته باشید که T در رشته ی date در مثال بالا نشانگر ساعت هماهنگ جهانی یا همان UTC می باشد.

 

نکته : ساعت هماهنگ جهانی (UTC) و ساعت گرینویچ یا ساعت جهانی (GMT) هر دو یکسان هستند.فرمت long date اغلب بدین ترتیب نگارش می شود : " سال سال سال سال روز روز ماه ماه ماه ". ترکیب نحوی این فرمت به شرح زیر می باشد.

 

مثال 14 :

document.getElementById("demo") = new Date("Mar 25 2015");

اما می توان ترتیب ماه، سال و روز را مطابق میل تغییر داد.

 

مثال 15 :

document.getElementById("demo") = new Date("25 Mar 2015");

 

مثال 16 :

document.getElementById("demo") = new Date("2015 Mar 25");

اسم ماه ها را می توان به طور کامل نوشت و یا در صورت تمایل تنها حروف اول آن را لحاظ کرد، برای مثال بجای January نوشت jan.

 

مثال 17 :

document.getElementById("demo") = new Date("January 25 2015");

 

مثال 18 :

document.getElementById("demo") = new Date("Jan 25 2015");

ویرگول و کوچک بزرگی حروف (اسم ماه مورد نظر) کاملا نادیده گرفته می شود.

 

مثال 19 :

document.getElementById("demo") = new Date("2015, JANUARY, 25");

قالب (فرمت) short date اغلب بدین صورت نگارش می شود : " سال سال سال سال / روز روز / ماه ماه ".

 

مثال 20 :

document.getElementById("demo") = new Date("03/25/2015");

می توان از کاراکترهای "/" یا "-" به عنوان تفکیک کننده ی سال، ماه و روز استفاده کرد.

 

مثال 21 :

document.getElementById("demo") = new Date("03-25-2015");

جاوا اسکریپت این ترکیب نحوی یا نحوه ی نگارش تاریخ را نیز می پذیرد : " روز روز / ماه ماه / سال سال سال سال ".

 

مثال 22 :

document.getElementById("demo") = new Date("2015/03/25");

نکته : ماه در هر دو فرمت short date و ISO پیش از روز درج می شود.

 

جاوا اسکریپت همچنین اجازه ی نگارش تاریخ به صورت کامل (با full format) را به برنامه نویس می دهد. به مثال زیر توجه کنید.

 

مثال 23 :

document.getElementById("demo") =
new Date("Wed Mar 25 2015 09:56:24 GMT+0100 (W. Europe Standard Time)");

جاوا اسکریپت خطاهای مربوط به اسم روز و پرانتز را نادیده می گیرد.

مثال 24 :

 document.getElementById("demo") =
        new Date("Fri Mar 25 2015 09:56:24 GMT+0100 (Tokyo 
Time)");

 

با مقاله های جدید و متنوع در زمینه آموزش طراحی سایت همراه ما باشید ....

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

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

 

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

 

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

آموزش طراحی سایت : زبان جاوا اسکریپت فقط یک نوع متغیر عددی دارد. متغیرهای عددی می توانند از نوع عددی یا اعشاری باشند.

مثال:

var x = 34.00; // A number with decimals

var y = 34; // A number without decimals‎

اعداد بسیار کوچک یا کوچک را می توان با نماد علمی نوشت

مثال:

var x = 123e5; // 12300000

var y = 123e-5; // 0.00123‎

اعداد جاوا اسکریپت همیشه 64 بیتی و با ممیز شناور (در مبنای 10) هستند. برخلاف بسیاری از زبان های برنامه نویسی، جاوا اسکریپت انواع عددی از قبیل : integer (عدد صحیح)، short، long و floating-point تعریف نمی کند و این نوع اعداد در جاوا اسکریپت استفاده نمی شوند. در جاوا اسکریپت اعداد همیشه به صورت ممیز شناور با دو رقم اعشار (double precision floating-point number) ذخیره می شوند که در حقیقت دنبال رو استاندارد بین المللی IEEE 754 می باشد. در این نوع قالب دهی یا فرمت اعداد در 64 بیت ذخیره می گردند، به گونه ای که کسر (fraction) در بیت های 0 تا 51، نما یا توان (exponent) در بیت های 52 تا 62 و علامت (sign) در بیت 63 ذخیره می گردد.

 

دقت اعشار (precision)

اعداد صحیح integer در حداکثر 15 رقم و همیشه به صورت دقیق مطرح می شوند.

 

 

مثال:

 

نمونه یک

<script>

function myFunction() {

var x = 999999999999999;

var y = 9999999999999999;

document.getElementById("demo").innerHTML = x + "<br>" + y;

}

</script>

حداکثر تعداد اعشار، 17 رقم است، اما حساب ممیز شناور همیشه 100% دقیق نیست.

 

نمونه دو

<script>

function myFunction() {

var x = 0.2 + 0.1;

document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;

}

</script>

به منظور حل مشکل بالا، انجام عمل ضرب و تقسیم کمک زیادی می کند.

مثال:

 

نمونه سه

function myFunction() {

var x = (0.2 * 10 + 0.1 * 10) / 10;

document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;

}

 

آموزش طراحی سایت : اعداد شانزده شانزدهی (hexadecimal)

جاوا اسکریپت ثابت های عددی (اعداد ثابتی) را که با 0x شروع می شوند به عنوان اعداد در مبنای شانزده در نظر می گیرد (تفسیر می کند).

مثال:

 

نمونه چهار

function myFunction() {

document.getElementById("demo").innerHTML = "0xFF = " + 0xFF;

}

توجه:

هیچگاه یک عدد را با صفر مقدم ننویسید (مانند این مثال 07(.

بعضی از ویرایش های جاوا اسکریپت یک عدد را در صورتی که با صفر مقدم نوشته شوند، به صورت octal / هشت هشتی تفسیر می کند. به صورت پیش فرض، جاوا اسکریپت اعداد را به صورت اعشاری و در مبنای 10 نمایش می دهد، اما شما می توانید با استفاده از تابع toString() اعداد را به صورت مبنای 16، مبنای 8 یا مبنای 2 (دودئی) (به عنوان خروجی) نمایش دهید.

مثال:

 

نمونه پنج

function myFunction() {

var myNumber = 128;

document.getElementById("demo").innerHTML = "128 = " +

myNumber + " Decimal, " +

myNumber.toString(16) + " Hexadecimal, " +

myNumber.toString(8) + " Octal, " +

myNumber.toString(2) + " Binary."

}

 

Infinity (مقدار بی نهایت)

چنانچه عددی را که بزرگتر از بیشینه ی حد ممکن اعداد در جاوا اسکریپت است محاسبه کنید، مقدار infinity برگردانده می شود.

مثال:

 

نمونه شش

function myFunction() {

var myNumber = 2;

var txt = "";

while (myNumber != Infinity) {

myNumber = myNumber * myNumber;

txt = txt + myNumber + "<br>";

}

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

}

در صورت تقسیم عددی بر 0 نیز مقدار بی نهایت برگردانده می شود.

مثال:

 

نمونه هفت

function myFunction() {

var x = 2 / 0;

var y = -2 / 0;

document.getElementById("demo").innerHTML = x + "<br>" + y;

}

توضیح : infinity یک عدد است : typeOf infinity یک عدد برمی گرداند.

مثال:

 

نمونه هشت

function myFunction() {

document.getElementById("demo").innerHTML = typeof Infinity;

}

عبارت NaN- عبارت رزرو شده ی Not a Number

عبارت NaN یک کلمه ی رزرو شده (reserved word) است که بیان می کند یک مقدار از نوع عدد نیست. چنانچه سعی کنید با رشته ی غیر عددی عملیات محسابه ی انجام دهید، جاوا اسکریپت عبارت رزرو شده ی Not a Number را بر می گرداند.

 

نمونه نه

document.getElementById("demo").innerHTML = 100 / "Apple"

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

مثال:

 

نمونه ده

document.getElementById("demo").innerHTML = 100 / "10";

می توانید از تابع سراسری (global function) isNaN() برای کشف این مسئله که آیا مقدار یک عدد است یا خیر استفاده کنید.

مثال:

 

نمونه یازده

var x = 100 / "Apple";

document.getElementById("demo").innerHTML = isNaN(x);

اگر در محاسبات ریاضی از NaN استفاده کنید، نتیجه نیز NaN خواهد بود.

مثال:

 

نمونه دوازده

var x = NaN;

var y = 5;

document.getElementById("demo").innerHTML = x + y;

 

نمونه سیزده

var x = NaN;

var y = "5";

document.getElementById("demo").innerHTML = x + y;

دستور NaN یک عدد است : typeOf NaN عدد بازمی گرداند.

مثال:

 

نمونه چهارده

document.getElementById("demo").innerHTML = typeof NaN;

اعداد می توانند شی باشند. به طور معمول اعداد مقادیر اولیه ی هستند که از literal ها ایجاد می گردند.

var x = 123‎

اما اعداد را می توان با استفاده از کلیدواژه ی new به عنوان شی (object) تعریف کرد، بدین ترتیب

var y = new Number(123)‎

مثال:

 

نمونه پانزده

document.getElementById("demo").innerHTML = typeof x + "<br>" + typeof y;

از ایجاد شی number خودداری کنید، زیرا که سرعت اجرا را کاهش داده و عوارض جانبی فراوانی را منجر می شوند. عملگر == برای اعدادی بکار می رود که از لحاظ مقدار برابر باشند.

مثال:

 

نمونه شانزده

var x = 500; // x is a number

var y = new Number(500); // y is an object

document.getElementById("demo").innerHTML = (x == y);

 

توجه داشته باشید که در صورت استفاده از عملگر === دیگر اعداد با مقدار یکسان مساوی یا برابر محسوب نمی شوند زیرا که این عملگر انتظار دارد اعداد هم از نظر نوع و هم از نظر مقدار با هم برابر باشند.

 

نمونه هفده

var x = 500; // x is a number

var y = new Number(500); // y is an object

document.getElementById("demo").innerHTML = (x === y);

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

مثال:

 

نمونه هجده

var x = 500; // x is a number

var y = new Number(500); // y is an object

document.getElementById("demo").innerHTML = (x === y);

 

خواص (properties) و متدهای مربوط به اعداد در جاوا اسکریپت

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

 

مثال:

 

نمونه نوزده

document.getElementById("demo").innerHTML = Number.MAX_VALUE;

خاصیت های مربوط به اعداد در جاوا اسکریپت متعلق به دبرگیرنده یا wrapper شی number هستند که خود Number نامیده می شوند. دسترسی به خاصیت های نام برده تنها از این طریق ممکن می باشد.

Number.MAX_VALUE‎

استفاده از myNumber.MAX_VALUE در جایی که myNumber یک متغیر، عبارت یا مقدار است، باعث برگردانده شدن undefined می شود.

مثال:

 

نمونه بیست

var x = 6;

document.getElementById("demo").innerHTML = x.MAX_VALUE;

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

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

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

 

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

از رشته (string) به منظور ذخیره سازی و دستکاری نوشته یا متن در جاوا اسکریپت استفاده می شود. رشته در جاوا اسکریپت اصولا جهت ذخیره ی یک سری کاراکتر بکار می رود، مانند این مثال : "John Doe". رشته می تواند هر نوشته ی داخل علامت نقل و قول باشد. امکان استفاده از هر دو نوع " " یا ' ' وجود دارد.

مثال:

 

نمونه یک

<script>

    var carName1 = "Volvo XC60";

    var carName2 = 'Volvo XC60';

    document.getElementById("demo").innerHTML =

    carName1 + "<br>" + carName2;

</script>

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

مثال:

 

نمونه دو

var answer1 = "It's alright";

var answer2 = "He is called 'Johnny'";

var answer3 = 'He is called "Johnny"';

document.getElementById("demo").innerHTML =

answer1 + "<br>" + answer2 + "<br>" + answer3;

 

طول رشته (string length)

جهت بدست آوردن طول یک رشته، کافی است از خاصیت (property) length بهره ببرید.

مثال:

 

نمونه سه

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

document.getElementById("demo").innerHTML = txt.length;

 

کارکترهای ویژه ی (Special Characters) در آموزش طراحی سایت

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

مثال:

var y = "We are the so-called "Vikings" from the north."‎

بدین معنا که رشته به صورت زیر کوتاه شده و بقیه ی آن درنظر گرفته نمی شود.

‎"We are the so-called ".‎

جهت اجتناب از بروز مشکلاتی از این دست، باید از کاراکتر"\ " استفاده کنید. علامت (\) برای وارد کردن کاراکترهای ویژه مانند: (")، (') و یا رفتن به خط جدید در یک رشته، استفاده می شود.

مثال:

 

نمونه چهار

var x = 'It\'s alright';

var y = "We are the so-called \"Vikings\" from the north.";

 

document.getElementById("demo").innerHTML = x + "<br>" + y;

جدول زیر تمامی کاراکترهایی که امکان درج آن ها در رشته با استفاده از (\) فراهم می آید را فهرست کرده.

 

 

شکستن خطِ کدهای طولانی (قرار دادن کد در خط بعدی)

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

مثال:

 

نمونه پنج

<h1>My Web Page</h1>

 

<p>

The best place to break a code line is after an operator or a comma.

</p>

 

<p id="demo">false</p>

 

<script>

document.getElementById("demo").innerHTML =

"Hello Dolly.";

</script>

همچنین می توان یک خط کد را از وسط یک رشته ی متنی (text string) قطع کرد و بقیه ی آن را در خط بعدی قرار داد، این امر با استفاده از کاراکتر" \ " امکان پذیر می شود.

مثال:

 

نمونه شش

<script>

document.getElementById("demo").innerHTML = "Hello\

Dolly.";

</script>

توجه:

استفاده از کاراکتر مذکور به گونه ی که تشریح شد یک استاندارد ECMAScript (JavaScript) نیست. برخی از مرورگرها فاصله ی قبل از کاراکتر \ را نمی پذیرند.

روش امن تر و پرکاربرد تر، به هم وصل کردن رشته های شکسته شده توسط " + " می باشد.

مثال:

 

نمونه هفت

<script>

document.getElementById("demo").innerHTML = "Hello" +

"Dolly.";

</script>

اجازه ی نصف کردن (شکستن) خط کد با استفاده از کاراکتر \ به شما داده نمی شود.

مثال:

 

نمونه هشت

<script>

document.getElementById("demo").innerHTML = \

"Hello Dolly.";

</script>

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

var firstName = "John"‎

اما می توان رشته ها را با استفاده از کلید واژه ی new به عنوان شی تعریف کرد.

var firstName = new String("John")‎

مثال:

 

نمونه نه

<script>

var x = "John"; // x is a string

var y = new String("John"); // y is an object

 

document.getElementById("demo").innerHTML =

typeof x + "<br>" + typeof y;

</script>

توجه:

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

اگر از عملگر == استفاده کنید، رشته های (که مقادیر یکسان دارند) یکسان تلقی می گردند.

مثال:

 

نمونه ده

<script>

var x = "John"; // x is a string

var y = new String("John"); // y is an object

document.getElementById("demo").innerHTML = (x == y);

</script>

اما چنانچه از عملگر === استفاده کنید، رشته هایی که فقط مقادیر یکسان دارند دیگر کاملا یکسان محسوب نمی شوند زیرا که عملگر ذکر شده انتظار دارد رشته ها از نظر مقدار و نوع با هم یکی باشند.

مثال:

 

نمونه یازده

<script>

var x = "John"; // x is a string

var y = new String("John"); // y is an object

document.getElementById("demo").innerHTML = (x === y);

</script>

حتی بدتر اشیا هستند که نمی توان آن ها را با هم مقایسه کرد.

مثال:

 

نمونه دوازده

<script>

var x = new String("John"); // x is an object

var y = new String("John"); // y is an object

document.getElementById("demo").innerHTML = (x == y);

</script>

مهم : اشیا را نمی توان با هم مقایسه کرد.

 

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

مقادیر اولیه مانند "John Doe" قادر به گرفتن خصوصیت و متد نیستند (زیرا که این مقادیر اولیه شی محسوب نمی شوند). اما در جاوا اسکریپت این امکان برای مقادیر اولیه وجود دارد که متد و خصوصیت دریافت کنند، زیرا که جاوا اسکریپت هنگام اجرای متدها و خاصیت ها (property) با مقادیر اولیه مانند شی برخورد می کند.

 

خاصیت های شی string

خاصیت های شی string

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

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

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

 

آموزش رخدادادها event در جاوا اسکریپت

در HTML رخدادها، اتفاقاتی هستند که برای عناصر (HTML) روی می دهند. هنگامی که از جاوا اسکریپت در صفحات HTML استفاده می کنید، جاوا اسکریپت به محض اجرای (روی دادن) رخدادها واکنش نشان می دهند.

 

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

رخداد HTML ممکن است چیزی باشد که هم از طرف مرورگر و هم از طرف کاربر روی می دهد. نمونه هایی از رخدادهای HTML به ترتیب زیر می باشند. بار گذاری یک صفحه ی وب HTMLبه پایان رسیده یکی از فیلدهای ورودی (input field) HTML تغییر یافته یا اصلاح شده یک دکمه ی HTML روی صفحه کلیک شده اغلب پس از اینکه رویدادی (event) رخ می دهد، عملیات خاصی را می خواهیم پیاده کنیم. جاوا اسکریپت به مجرد اینکه رخدادی را شناسایی کند، اجازه ی اجرای کد مورد نظر را به برنامه نویس می دهد. HTML به خصیصه های event handler (کنترل گر و مدیریت کننده ی رخداد ها) که به کد جاوا اسکریپت (javascript code) الحاق شده اند اجازه ی متصل یا ضمیمه شدن به عناصر HTML را می دهد.

 

با تک کوتیشن (' ')

<some-html-element some-event='some JavaScript'>

 

با دابل کوتیشن (" ")

<some-html-element some-event="some JavaScript">

در مثال زیر خصیصه (attribute) onClick (به همراه کد)، به المان دکمه (تگ </button>) افزوده می شود.

مثال:

 

نمونه یک

<button onclick="getElementById('demo').innerHTML=Date()">The time is?</button>

همان طور که در مثال بالا مشاهده می کنید، کد جاوا اسکریپت محتوای المان مربوط را به وسیله ی شناسه ی "demo" تغییر می دهد. حال توجه خود را به نمونه ی بعدی جلب کنید که در آن کد محتوای المان خود را با استفاده از this.innerHTML تغییر می دهد.

مثال:

 

نمونه دو

<button onclick="this.innerHTML=Date()">The time is?</button>

نکته:

کد جاوا اسکریپت معمولا چندین خط ادامه دارد. رایج تر این است (بیشتر می بینید) که خصیصه ی رخدادها (event attribute) توابع را فراخوانی کنند.

مثال:

 

نمونه سه

<script>

function displayDate() {

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

}

</script>

 

رخدادهای معمول و پرکاربرد HTML

 

جاوا اسکریپت چه نقشی را ایفا می کند؟

اداره کننده ی رخدادها Event handler ها به منظور کنترل، بررسی، تایید درستی ورودی کاربر (user input) و عملیاتی که توسط کاربر انجام می شود و همچنین عملیات مرورگر مورد استفاده قرار می گیرد. کارهایی که باید با هر بار بارگذاری صفحه، انجام شود. کارهایی که باید با بسته شدن صفحه / هنگامی که صفحه بسته می شود، انجام گیرد. عملیاتی که باید پس از اینکه کاربر یک دکمه را فشار داد، پیاده شوند. محتوا (content) که باید به هنگام وارد شدن داده توسط کاربر، بررسی و تایید درستی شود و غیره..... روش های مختلفی هست که از طریق آن ها می توان به جاوا اسکریپت امکان همکاری و انجام عملیات با رخداد ها را داد، از جمله خصیصه های رخداد HTML خود می توانند (به طور) مستقیم کد جاوا اسکریپت را اجرا کنند. خصیصه های رخداد HTML می توانند توابع جاوا اسکریپت را صدا بزنند.(فراخوانی کنند) برنامه نویس می تواند توابع اداره کننده ی رخداد خود را به المان های HTML تخصیص دهد. برنامه نویس می تواند از ارسال، مدیریت و دستکاری رخدادها جلوگیری کند و غیره.....

 

 

آموزش حوزه ی دسترسی در جاوا اسکریپت / JavaScript Scope

 

در جاوا اسکریپت توابع (functions) و اشیا (objects) نیز متغیر تلقی می شوند. در زبان مبتنی بر اشیا جاوا اسکریپت، scope به مجموعه ی از متغیرها، اشیا و توابع گفته می شود که شما به آن ها دسترسی دارید. حوزه یا scope جاوا اسکریپت توابع هستند و اینscope ها داخل تابع تغییر یافته و تعریف می شوند.

 

متغیرهای محلی جاوا اسکریپت

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

مثال:

 

نمونه یک

<script>

myFunction();

document.getElementById("demo").innerHTML =

"I can display " + typeof carName;

 

function myFunction() {

var carName = "Volvo";

}

</script>

 

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

 

متغیرهای سراسری / عمومی (global variables)

متغیری که بیرون یک تابع تعریف شود، متغیر Global (سراسری) نامیده می شود. یک متغیر سراسری دارای حوزه ی دسترسی سراسری است، بدین معنا که کلیه ی اسکریپت ها و توابع موجود در یک صفحه ی وب امکان دستیابی به آن را دارند.

مثال:

 

نمونه دو

var carName = "Volvo";

myFunction();

 

function myFunction() {

document.getElementById("demo").innerHTML =

"I can display " + carName;

}

اگر به متغیری که هنوز تعریف یا اعلان نشده مقداری تخصیص دهیم، آن متغیر خودکار یک متغیر سراسری (global) تلقی می گردد. در نمونه کد ذیل با اینکه carName داخل یک تابع تعریف شده، اما یک متغیر سراسری تلقی می گردد (زیرا که متغیر مورد نظر از پیش اعلان نگردیده است).

مثال:

 

نمونه سه

<script>

myFunction();

document.getElementById("demo").innerHTML =

"I can display " + carName;

 

function myFunction() {

carName = "Volvo";

}

</script>

 

طول عمر متغیرها (Lifetime of varabiles)

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

 

آرگومان های تابع (function arguments)

آرگومان (پارامتر) های یک تابع به عنوان متغیرهای محلی داخل آن تابع عمل می کنند.

 

متغیرهای سراسری در HTML

حوزه دسترسی سراسری (global scope) در جاوا اسکریپت شامل کل محیط جاوا اسکریپت می شود (از هرجای جاوا اسکریپت یا نقطه ی صفحه می توان به متغیرها دسترسی پیدا کرد). در HTML، حوزه ی عمومی یا سراسری (Global Scope) شی window را شامل می شود: تمامی متغیرهای سراسری متعلق به شی window هستند و از این رو می توان از هر نقطه ی از شی window به متغیرهای عمومی دسترسی پیدا کرد.

مثال:

 

نمونه چهار

<script>

myFunction();

document.getElementById("demo").innerHTML =

"I can display " + window.carName;

 

function myFunction() {

carName = "Volvo";

}

</script>

توجه:

آیا می دانستید که متغیرها (یا توابع) سراسری می تواند متغیرها و توابع متعلق به شی window را بازنویسی / overwrite کنند؟ هر تابعی، حتی خود شی window، قادر است متغیرها و توابع سراسری را بازنویسی کند.

در قسمت بعد رشته ها در جاوا اسکریپت را فرا می گیرید

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

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

• قسمت اول آموزش جاوا اسکریپت
• آموزش عملگر های جایگزین در جاوا اسکریپت
• آموزش انواع داده در جاوا اسکریپت-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‎

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

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

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

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

• قسمت اول آموزش جاوا اسکریپت
• آموزش متغیرها در جاوا اسکریپت
• شناسه های جاوا اسکریپت
• آموزش محاسبه در جاوا اسکریپت
• آموزش عملگرهای محاسباتی جاوا اسکریپت

 

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

 

آموزش عملگر های جایگزین در جاوا اسکریپت

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

 

عملگر جایگزین یا انتساب / assignment operator (=) یک مقدار به متغیر تخصیص می دهد.

 

تخصیص مقدار

var x = 10;‎

عملگر += یک مقدار را به متغیر اضافه می کند.

 

مثال تخصیص مقدار

var x = 10;

x += 5;‎

عملگر -= یک مقدار را از متغیر کسر می کند.

مثال:

var x = 10;

x -= 5;‎

عملگر*= عملیات ضرب را روی یک متغیر انجام می دهد.

مثال:

var x = 10;

x *= 5;‎

عملگر /= یک متغیر را تقسیم می کند.

مثال:

var x = 10;

x /= 5;‎

عملگر %= باقی مانده ی تقسیم را به متغیر تخصیص می دهد.

مثال:

var x = 10;

x %= 5;‎

 

آموزش انواع داده در جاوا اسکریپت-data types

نوع داده دسته بندی ای از انواع تایپ‌های موجود مانند اعداد صحیح (integer)، بولی (boolean) و... است که ویژگی‌هایی از جمله : مقادیر قابل پذیرش توسط متغیر، عملیات قابل اجرا بر روی متغیر، معنای داده و حافظه مورد نیاز برای ذخیره متغیر را تعین می ‌کند. انواع داده : رشته، عدد، بولی، آرایه، شی (object)

 

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

جاوا اسکریپت می تواند data type های گوناگونی مانند : اعداد (نوع عددی)، رشته (نوع رشته ی)، آرایه (از نوع آرایه) و از نوع object (شی).

var length = 16; // Number

var lastName = "Johnson"; // String

var cars = ["Saab"‎،‎ "Volvo"‎،‎ "BMW"]; // Array‎

var x = {firstName:"John"‎،‎ lastName:"Doe"}; // Object

 

مفهوم نوع داده

در برنامه نویسی، نوع داده مفهوم بسیار مهمی است. برای اینکه بتوان روی متغیرها عملیات انجام داد، باید چیزی درباره ی نوع آن دانست. بدون نوع داده، کامپیوتر قادر به فهم و محاسبه صحیح و امن داده نیست.

var x = 16 + "Volvo";‎

آیا عاقلانه به نظر می رسد که "Volvo" را به عدد 16 اضافه کنیم؟ آیا نتیجه ی صحیح و منطقی بدست می دهد و یا در نتیجه ی عملیات خطا برمی گرداند (ارور می دهد)؟ جاوا اسکریپت مثال بالا را اینگونه پردازش می کند.

var x = "16" + "Volvo";  ‎

در صورتی که عملوند operand / دوم یک رشته باشد، جاوا اسکریپت عملوند اول را نیز رشته محسوب می کند.

مثال:

 

نمونه یک

<script>

var x = 16 + "Volvo";

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

</script>

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

 

نمونه دو

<script>

var x = 16 + 4 + "Volvo";

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

</script>

 

مثال جاوا اسکریپت

 

نمونه سه

<script>

var x = "Volvo" + 16 + 4;

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

</script>

در مثال اول، جاوا اسکریپت 16 و 4 را به عنوان رقم یا عدد درنظر می گیرد تا اینکه به "Volvo" می رسد.(که یک رشته تلقی می گردد) حال در مثال دوم، از آنجایی که عملوند اول یک رشته است، دیگر عملوندها نیز به مثابه ی رشته درنظر گرفته می شوند. جاوا اسکریپت دارای نوع داده ی پویا (dynamic type) است. جاوا اسکریپت نیز دارای نوع داده ی پویا است، بدین معنا که یک متغیر را می توان به عنوان نوع های مختلف بکار برد.

مثال:

var x; // Now x is undefined

var x = 5; // Now x is a Number

var x = "John"; // Now x is a String

 

رشته ها در جاوا اسکریپت (متغیر رشته ای)

در آموزش طراحی سایت یک رشته string / (یا همان رشته ی مبتنی بر متنtext string / ) متشکل است از یک سری کاراکتر مانند این مثال "John Doe" که یک رشته محسوب می شود. رشته ها باید حتماً داخل علامت نقل و قول نوشته شوند. برای این منظور می توان از هر دو کاراکتر " " و ' ' بهره گرفت.

مثال:

var carName = "Volvo XC60"; // Using double quotes

var carName = 'Volvo XC60'; // Using single quotes‎

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

مثال:

 

نمونه چهار

<script>

var person;

document.getElementById("demo").innerHTML =

person + "<br>" + typeof person;

</script>

 

اعداد در جاوا اسکریپت (متغیرهای عددی)

جاوا اسکریپت تنها یک نوع عدد دارد، به عبارتی دیگر اعداد را می توان با اعشار (decimal) یا بدون اعشار بکار برد / متغیرهای عددی در جاوا اسکریپت یا به صورت اعشاری و دهدهی نوشته می شوند و یا به صورت عدد صحیح نمایش داده می شوند.

مثال:

var x1 = 34.00; // Written with decimals

var x2 = 34; // Written without decimals

اعدادی که بیش از حد بزرگ یا کوچک هستند را می توان با نماد علمی scientific notation / نوشت.

var y = 123e5; // 12300000‎

var z = 123e-5; // 0.00123‎

 

نوع داده ی بولی (متغیر بولی) در جاوا اسکریپت / Boolean

متغیرهای بولی تنها می توانند دو مقدار true یا false را داشته باشند.

var x = true;‎

var y = false;‎

متغیرهای بولی برای آزمودن و تست یک شرط بکار می رود.

 

آرایه ها (arrays) در جاوا اسکریپت

در آموزش طراحی سایت آرایه ها در جاوا اسکریپت داخل کروشه یا همان کاراکتر [] قرار می گیرند. آیتم های یک آرایه توسط ویرگول از هم جدا می شوند. کد زیر آرایه ی به نام cars که شامل سه آیتم (اسم اتومبیل) می باشد را ایجاد (تعریف) می کند.

مثال:

 

نمونه پنج

<script>

var car = "";

document.getElementById("demo").innerHTML =

"The value is: " +

car + "<br>" +

"The type is:" + typeof car;

</script>

اندیس یا شاخص آرایه از صفر آغاز می گردد، بدین معنا که آرایه ی اول [0]، دومین [1] و به همین ترتیب ادامه پیدا می کند.

 

اشیا (objects) در جاوا اسکریپت

در جاوا اسکریپت اشیا داخل کاراکتر {} (آکولاد) قرار داده و تعریف می شوند. خصوصیت های اشیا در جاوا اسکریپت داخل آکولاد به صورت جفت اسم : مقدار (name:value pairs) نوشته شده و توسط ویرگول از هم جدا می گردند.

مثال:

 

نمونه شش

<script>

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

var person = null;

document.getElementById("demo").innerHTML = typeof person;

</script>

شی (person) در مثال فوق دارای چهار خصوصیت می باشد : firstName، lastName، age وeyeColor.

 

عملگر typeof

می توان با استفاده از عملگر typeof نوع یک متغیر جاوا اسکریپت را بدست آورد / عملگر ذکر شده نوع متغیر را برمی گرداند.

مثال:

typeof "John" // Returns string

typeof 3.14 // Returns number

typeof false // Returns boolean

typeof [1‎،‎2‎،‎3‎،‎4] // Returns object‎

typeof {name:'John'‎،‎ age:34} // Returns object

نکته:

در جاوا اسکریپت، آرایه در واقع یک نوع شی محسوب می گردد. بنابراین typeof [1,2,3,4] در نتیجه نوع object را برمی گرداند.

 

Undefined (تعریف نشده)

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

مثال:

var person;                  // Value is undefined،‎ type is undefined

هر متغیری را می توان با تنظیم مقدار آن روی undefined تهی کرد، همچنین نوع آن undefined یا تعریف نشده درنظر گرفته می شود.

مثال:

person = undefined;          // Value is undefined،‎ type is undefined

 

مقادیری تهی / empty values

یک مقدار تهی هیچ گونه ارتباطی با مقدار تعریف نشده (undefined) ندارد. یک متغیر رشته ی تهی (empty string variable) هم مقدار و هم نوع آن تعریف شده هستند.(دارای نوع و مقدار است)

مثال:

var car = "";                // The value is ""‎،‎ the typeof is string

 

مقدار null

مقدار Null در جاوا اسکریپت به معنای تهی یا "nothing" است. متاسفانه در زبان برنامه نویسی بیان شده نوع داده ی null یک شی حساب می شود. با تنظیم مقدار یک شی روی null می توان آن شی را تهی کرد / تخصیص null به شی می توان آن را تهی کرد.

مثال:

var person = null; // Value is null،‎ but type is still an object

همچنین می توان برای تهی کردن یک شی آن را undefined مقداردهی کرد.

مثال:

 

نمونه هفت

<script>

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

var person = undefined;

document.getElementById("demo").innerHTML = typeof person;

</script>

در مثال زیر تفاوت بین undefined و null تشریح شده

typeof undefined // undefined

typeof null // object

null === undefined // false

null == undefined // true

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

 

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

معرفی زبان برنامه نویسی تحت وب JavaScript

جاوا اسکریپت (JavaScript) زبان برنامه نویسی HTML و وب است.
با استفاده از برنامه نویسی می توان کامپیوتر را قادر به انجام کارها یا وظایف مورد نظر کرد.
یادگیری این زبان اسکریپتی بسیار آسان و در عین حال لذت بخش است.
جاوا اسکریپت از آموزش طراحی سایت در حال حاضر یکی از محبوب ترین و پرکاربردترین زبان های برنامه نویسی است.

جاوا اسکریپت JavaScript قادر است محتوای HTML را تغییر دهد

یکی از متدهای زبان طراحی وب HTML، تابع getElementById() است.
این مثال با استفاده از متد بالا، یک المان HTML را با شناسه ی"demo" یافته و محتوای المان (innerHTML) را به "Hello JavaScript" تغییر می دهد.

 

مثال:

document.getElementById("demo") = "Hello JavaScript"‎

جاوا اسکریپت قادر است استایل های (HTML(Style را تغییر دهد (CSS)

اصلاح استایل (style) یک المان HTML، در واقع همان تغییر خصیصه ی یک HTML است.

مثال:

 

document.getElementById("demo").style.fontSize = "25px"‎

یکی از کاربرد های زبان جاوا اسکریپت اعتبار سنجی ورودی (input) است.

توجه:

لازم به ذکر است که زبان JavaScript یک زبان اسکریپتی ساده برای وب و HTML است مبتنی بر اشیا که توسط NetScape تولید و عرضه شده‌ است. این زبان، یک زبان شی‌گرا است که بر اساس استاندارد ECMA-262 Edition 3 نوشته شده‌ است در حالی که زبان برنامه نویسی Java یک زبان برنامه نویسی شی گرای قدرتمند و کارامد برای برنامه سازی ویژه ی محیط ها و پلت فرم های گوناگون می باشد.

مرور کلی بر زبان جاوا اسکریپت

جاوا اسکریپت JavaScript زندگی خود را با نام Live Script آغاز نمود، اما شرکت Netscape نام آن را، احتمالا به دلیل هیجانی که می توانست از سوی زبان Java به خود بگیرد، به JavaScript تغییر داد. جاوا اسکریپت برای اولین بار در مرورگر Netscape 2.0 با عنوان Live Script به کار گرفته شد.
جاوا اسکریپت یک زبان سبک و مفسر، همراه با قابلیت های شی گرایی (Object Oriented) است که به شما این امکان را داده تا به صفحات ایستاتیک و ساده HTML ، حالت واکنش گرا و تعاملی بدهید.
به طور کلی می توان جاوا اسکریپت را در موارد زیر خلاصه کرد.
جاوا اسکریپت یک زبان سبک و مفسر می باشد (معنای مفسر این است که برنامه دستورات را به صورت خط به خط خوانده و در پایان هر خط آن را اجرا می کند. بر خلاف کامپایلر که ابتدا کل دستورات را خوانده و اشکال یابی کرده، سپس آنها را یکباره اجرا می کند).
این زبان برای ساخت نرم افزارهای میانی شبکه ( واسط ) استفاده می شود.
جاوا اسکریپت یک زبان مکمل برای HTML می باشد.
این زبان یک پلتفرم باز می باشد.
جاوا اسکریپت یک زبان طرف کاربر (Client Side) است .
زبان جاوا اسکریپت یک زبان طرف مشتری (Client Side) می باشد، به این معنی که دستورات آن در کامپیوتر کاربر و در مرورگر وی اجرا می شود. دستورات جاوا اسکریپت را مستقیما می توان درون اسناد HTML وارد کرده و یا آنها را در یک فایل مجزا قرار داد و سپس آن فایل را به صفحه HTML پیوند زد.
وجود زبان جاوا اسکریپت باعث می شود تا صفحات HTML از حالت Static و ساده درآمده و بتوانند با کاربر ارتباط برقرار کرده، مرورگر را کنترل نموده و به صورت پویا محتویات HTML تولید و به صفحه اضافه کنند.
کدهای سمت کلاینت جاوا اسکریپت، قابلیت انجام بسیاری از کارهایی که توسط کد های سمت سرور انجام می شوند را دارا هستند. برای مثال، می توانید کد جاوا اسکریپتی نوشته تا مقدار ورودی کاربر در یک کادر متن را کنترل نموده و در صورتی که وی یک آدرس ایمیل با فرمت صحیح را وارد کرده باشد، اجازه ارسال فرم و اطلاعات درون آن را بدهد.
کد های جاوا اسکریپت در صورتی که کاربر تمامی مقادیر مورد نیاز را به درستی در فرم وارد نموده باشد، پس از Submit فرم در صفحه، اجرا می شوند.
جاوا اسکریپت می تواند اعمال کاربر، مثل فشردن یک دکمه فرمان، کلیک بر روی یک لینک و... را تشخیص داده و دستورات مورد نظر را پس از انجام این رخدادها، اجرا کند.

مزایای استفاده از جاوا اسکریپت

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

کاهش عملکرد و درگیر نمودن سرور :

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

پاسخ سریع و لحظه ای به کاربر :

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

بالا رفتن قدرت تعامل با کاربر :

به وسیله جاوا اسکریپت می توانید کدهایی طراحی نموده تا به سرعت به انجام اعمالی مثل کلیک کاربر، عبور موس از روی یک منطقه و یا زدن دکمه های کیبورد، واکنش نشان دهید.

رابط کاربری قوی تر :

به وسیله جاوا اسکریپت می توانید اجزایی مثل منو های بازشو، اسلایدشوها و... را طراحی نموده و به سایت خود، رابط کاربری قوی تری بدهید.

محدودیت در کار با جاوا اسکریپت

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

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

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

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

... ، در صفحات وب HTML تعریف می شوند.
می توانید کدهای جاوا اسکریپت خود را که در تگ تعریف نموده اید، در هر جای صفحه وب مورد نظرتان قرار دهید، اما بهترین روش این است که آنها را در تگ ابتدای صفحه (تگ <head>) بگنجانی
تگ به مرورگر اعلام می کند که کلیه دستورات درون این تگ را به صورت مفسر خوانده و اجرا کند. بنابراین ساده ترین کد جاوا اسکریپت می تواند به صورت زیر در صفحه تعریف شود.

تگ JavaScript دو خاصیت مهم زیر را می تواند داشته باشد.

مفهوم Language :

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

مفهوم Type :

این خاصیت نیز نوع دستورات تعیین شده در اسکریپت را تعیین می کرده که رایج ترین مقدار برای آن “ text/javascript “ می باشد. به معنای اینکه به زبان جاوا اسکریپت و به صورت متنی هستند.
بنابراین تگ JavaScript شما در حالت کاملتر بایستی به صورت زیر باشد.

وجود فاصله ( جای خالی ) بین کاراکترها و رفتن به خط بعدی را در دستورات جاوا اسکریپت

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

به کار بردن کاراکتر ; اختیاری است

معمولا هر خط کد یا دستور در جاوا اسکریپت، همانند آنچه در C++ یا Java دیده اید، با یک کاراکتر ; به پایان می رسد. اما در جاوا اسکریپت، چنانچه هر کد دستوری شما در یک خط جدا Line باشد، می توانید از به کار بردن کاراکتر; خودداری کنید. برای مثال در قطعه کد زیر، می توانید از به کار بردن ; در پایان هر دستور اجتناب نمایید.

 

بهتر است عادت کرده از ; در کدهای خود استفاده نمایید.

جاوا اسکریپت یک زبان حساس به بزرگ یا کوچک بودن حروف می باشد. این بدان معناست که که کلمات کلیدی زبان، نام متغیرها یا توابع و هر واژه دیگری بایستی با رعایت بزرگ یا کوچک بودن حروف نوشته شوند.
بنابراین کلمات Time، TIME و یا TiMe در این زبان با هم متفاوت می باشند.

قرار دادن توضیحات کدنویسی (comment) در جاوا اسکریپت

از توضیحات یا کامنت ها، برای تشریح کدهای خود و یا غیر فعال کرد موقت آنها استفاده می کنیم. این دستورها و متون توسط موتور جاوا اسکریپت اجرا نشده و خروجی بر روی صفحه ندارند.
زبان جاوا اسکریپت از روشی همانند زبان C++ برای قرار دادن توضیحات در کدهای خود استفاده کرده و قانون های کلی زیر را داراست.
هر متنی که بین یک // و پایان یک خط دستور قرار بگیرد، یک توضیح حساب می شود.
هر متنی که بین یک /* و */ قرار بگیرد، توضیح حساب شده و می تواند حتی شامل چندین خط دستور باشد.
جاوا اسکریپت، از کاراکتر ویژه زبان HTML جهت توضیحات پشتیبانی می کند. این کاراکتر به صورت

 

محل قرارگیری دستورات جاوا اسکریپت

دستورات JavaScript را می توان در بخش های < body >
و همچنین
< head >
یک سند HTML جای گذاری کرد.

تگ< script >

در HTML، کدهای جاوا اسکریپت را باید بین تگ های < script > و < /script > درج کرد (وارد کرد).

مثال:

 

< script >

document.getElementById("demo") = "My First JavaScript"

< /script >

نکته:

در مثال های پیشین خصیصه ی typeبرای تگ< script >بکار برده شده مانند این نمونه

 

< script type="text/javascript" >

در 5 ،HTMLکلیه ی مرورگر های موجود زبان پیش فرض اسکریپت نویسی JavaScript می باشد و از این رو نیازی به خصیصه ی (attribute) type نیست.

توابع و رخدادهای JavaScript

یک تابع / function در جاوا اسکریپت در واقع یک ساختمان یا مجموعه (block) ای از کدها است، که درست زمانی که لازم است اجرا می شوند.
برای مثال، یک تابع ممکن است زمانی اجرا شود که رخدادی / event معین روی دهد درست مثل زمانی که کاربر موس را کلیک می کند.

قرار دادن کدهای جاوا اسکریپت در بخش< head >یا< body >

می توان هر تعداد اسکریپت که لازم است در سند HTML قرار داد.
اسکریپت ها را می توان در بدنه ی HTML یا قسمت < body >قرار داد و یا آن ها را در بخش< head >صفحه HTML گنجاند.

نکته:

توصیه می کنیم تمامی کدهای خود را در یک مکان واحد نگه دارید.

قراردهی کد جاوا اسکریپ در بخش< head >

در این مثال، یک تابع جاوا اسکریپت در بخش (بین تگ باز و بسته ی) < head > صفحه ی HTML قرار داده می شود.
زمانی که روی دکمه کلیک می کنید تابع فراخوانده (invoke) می شود.

مثال:

 

< !DOCTYPE html >

< html >

< head >

< script >

function myFunction() {

document.getElementById("demo") = "Paragraph changed."

}

< /script >

< /head >

< body >

< h1 >My Web Page< /h1 >

< p id="demo" >A Paragraph< /p >

< button type="button" ="myFunction()" >Try it< /button >

< /body >

< /html >

جای گذاری کدهای جاوا اسکریپت در بدنه ی HTML / قسمت < body >

در این مثال، یک تابع جاوا اسکریپت بین تگ های باز و بسته ی < body > صفحه ی HTML قرار داده می شود.
تابع مربوطه با کلیک روی تنها یک دکمه فراخوانده می شود.

مثال:

 

< !DOCTYPE html >

< html >

< body >

< h1 >My Web Page< /h1 >

< p id="demo" >A Paragraph< /p >

< button type="button" ="myFunction()" >Try it< /button >

< script >

function myFunction() {

document.getElementById("demo") = "Paragraph changed."

}

< /script >

< /body >

< /html >

توصیه می شود اسکریپت ها (Script) را در پایین (انتهای) المان < body > قرار دهید. این کار در حقیقت به بارگذاری هر چه بهتر صفحه کمک می کند، زیرا که نمایش HTML با بارگذاری اسکریپت ها مسدود نمی گردد.

قراردادن اسکریپت ها در فایل های خارجی

همچنین می توان اسکریپت ها را در فایل های خارجی جای گذاری کرد.
اسکریپت های خارجی (external scripts) زمانی بیشترین کارایی را دارند که یک کد یکسان در بسیاری از صفحات وب بکار گرفته شده است.
فایل های جاوا اسکریپت همگی دارای پسوند .jsهستند.
جهت استفاده از یک اسکریپت که در فایل خارجی قرار داده شده باشد، کافی است اسم فایل اسکریپت را داخل خصیصه ی src (source) در تگ < script > قرار دهید.

مثال:

 

< !DOCTYPE html >

< html >

< body >

< script src="myScript.js" >< /script >

< /body >

< /html >

می توانید ارجاع (reference) به اسکریپت خارجی را مطابق میل خود در تگ های < head > یا < body > قرار دهید.
اسکریپت مربوطه درست همانگونه عمل خواهد کرد که گویی دقیقاً همان جایی که تگ < script > قرار گرفته، جای گذاری شده.

توجه:

اسکریپت های خارجی نمی توانند دربردارنده ی تگ های < script > باشند.

مزایای استفاده از خاصیت قراردهی کدهای جاوا اسکریپت در فایل های خارجی

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

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