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

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

آموزش طراحی سایت از صفر تا 100
آموزش طراحی سایت

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

آموزش طراحی سایت از صفر تا 100

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

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

دستورات شرطی (conditional statements)

گاهی اوقات به هنگام نوشتن یک اسکریپت یا کد، برنامه نویس نیاز دارد که تصمیم های متفاوتی با توجه به نتایج مختلف بگیرد، برای نیل به این هدف برنامه نویس از دستورات شرطی کمک می گیرد. دستورات شرطی زبان جاوا اسکریپت به شرح زیر می باشد.
دستور if - از این ساختار در مواقعی که می خواهیم در صورت بر قرار بودن شرط معینی دستور مشخصی اجرا شود، استفاده می کنیم . چنانچه شرط تعیین شده صحیح یا برقرار نبود، هیچ دستوری اجرا نخواهد شد. دستور else - از این ساختار زمانی استفاده می کنیم که می خواهیم در صورت بر قرار بودن شرط، دستور معینی اجرا شود و در صورت عدم بر قراری آن شرط، دستور یا مجموعه ای از دستورات دیگر اجرا گردند.
دستور else if : اگر شرط درست باشد دستور مقابل if اجرا می شود در غیر این صورت دستور مقابل else اجرا می گردد (در صورت غلط بودن شرط اول، شرط دیگری را برای امتحان کردن مشخص می کند).
دستور Switch : برای گزینش و اجرای یک دستور از میان چندین دستور مختلف بکار می رود.

دستور شرطی if

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

آموزش طراحی سایت دستور نگارش (syntax)

نکته:
توجه داشته باشید که دستور شرطی if با حروف کوچک نوشته می شود. نوشتن آن با حروف بزرگ If یا IF باعث ایجاد خطا می شود.
مثال:
در صورتی که زمان هنوز مرز ساعت 18:00 را رد نکرده، رشته ی "Good day" را نشان بده.
if (hour < 18)
{
greeting = "Good day";
‎}

نمونه یک

if (new Date().getHours() < 18) {
document.getElementById("demo").innerHTML = "Good day!";
}

امتحان کنید:

<body>
<p>Display "Good day!" if the hour is less than 18:00:</p>
<p id="demo">Good Evening!</p>
<script>
if (new Date().getHours() < 18) {
document.getElementById("demo").innerHTML = "Good day!";
}
</script>
</body>

دستور شرطی else

از این ساختار زمانی استفاده می کنیم که می خواهیم در صورت بر قرار بودن شرط، دستور معینی اجرا شود و در صورت عدم بر قراری آن شرط، دستور یا مجموعه ای از دستورات دیگر اجرا گردند.
دستور if (شرط) { قطعه کدی که در صورت برقرار بودن شرط باید اجرا گردد
دستور } else {
قطعه کدی که در صورت غلط یا برقرار نبودن شرط اول اجرا می گردد {
اگر زمان از مرز ساعت 18 نگذشته، رشته ی "Good day" را نشان بده و در غیر این صورت "Good evening" را
if (hour < 18) {
‎ greeting = "Good day";
‎} else {
‎ greeting = "Good evening";
‎}‎
نتیجه:

نمونه دو

function myFunction() {
var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
}

امتحان کنید:

body>
<p>Click the button to display a time-based greeting:</p>
<button type="Button" onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
}
</script>
</body>

دستور شرطی else if

اگر شرط درست باشد دستور مقابل if اجرا می شود در غیر این صورت دستور مقابل else اجرا می گردد (در صورت غلط بودن شرط اول، شرط دیگری را برای امتحان کردن مشخص می کند).

دستور نگارش

دستور if (شرط اول) { قطه کدی که در صورت صحیح بودن شرط اول باید اجرا گردد
دستور } else if (شرط دوم) { قطعه کدی که در صورت غلط بودن شرط اول و صحیح بودن شرط دوم باید اجرا شود
دستور } else { قطعه کدی که در صورت غلط بودن هر دو شرط اول و دوم باید اجرا شود }
مثال:
در صورتی که زمان حاضر مرز ساعت 10:00 را پشت سر نگذاشته، رشته ی "Good morning" نمایش داده می شود و چنانچه زمان از ساعت 20:00 عبور نکرده رشته ی "Good day" و در غیر این صورت نیز "Good evening".
if (time < 10) {
‎ greeting = "Good morning";
‎} else if (time < 20) {
‎ greeting = "Good day";
‎} else {
‎ greeting = "Good evening";
‎}‎
نتیجه:

نمونه سه

function myFunction() {
var greeting;
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
}

امتحان کنید:

<body>

<p>Click the button to get a time-based greeting:</p>

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

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

<script>
function myFunction() {
var greeting;
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
}
</script>
آموزش طراحی سایت ادامه دارد


آموزش طراحی سایت دوره آموزش طراحی سایت دوره طراحی سایت آموزش جاوا اسکریپت آموزش جاوااسکریپت فیلم آموزش طراحی سایت فیلم آموزش جاوا اسکریپت
افشین چهارشنبه 28 آبان 1399 ساعت 15:04
0 نظر

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

امروز با پست جدیدی از سری پست های آموزش طراحی سایت همراه شما هستیم. در این پست آرایه ها در جاوا اسکریپت را مورد بررسی قرار می دهیم.
آرایه ها (در جاوا اسکریپت) چندین متغیر را در قالب تنها یک متغیر ذخیره می کنند یا به عبارتی دیگر آرایه یک متغیر خاص است که می توانید به طور همزمان چندین مقدار (بیش از یک مقدار) را در آن ذخیره نمایید. در این بخش با استفاده از یک اسکریپت، آرایه ها را داخل تگ <p> با شناسه "demo"نمایش می دهیم. همان طور که در مثال زیر مشاهده می کنید، اولین خط ، آرایه ای به نام cars ایجاد می کند. دومین خط المانی که شناسه ی آن "demo"می باشد را یافته سپس آرایه را در "innerHTML" آن المان نمایش می دهد.
مثال:

نمونه یک

<p id="demo">Saab,Volvo,BMW</p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

خودتان امتحان کنید. یک آرایه ایجاد کرده و مقادیری به آن تخصیص دهید.

نمونه دو

var cars = ["Saab", "Volvo", "BMW"];
فاصله و انتهای خط (line break) از هیچ اهمیتی برخوردار نیستند. یک تعریف (declaration) می تواند در چندین خط ادامه داشته باشد.
مثال:

نمونه سه

var cars = [
"Saab",
"Volvo",
"BMW"
];
توجه:
توجه داشته باشید که هیچ گاه پس از آخرین المان (در مثال بالا "BMW") ویرگول قرار ندهید، زیرا ممکن است در مرورگرهای مختلف نتایج متفاوتی ارائه دهد.

آرایه چیست ؟

در آموزش طراحی سایت شی آرایه یک نوع خاص از متغیر هاست که می تواند چندین داده را در قالب یک نام در خود ذخیره کند. آرایه مجموعه ای از متغیرهایی از یک نوع داده ای با نام یکسان است، که هر کدام از اعضای آن توسط یک شمارنده یا شاخص (index)، از یکدیگر تمیز داده می شوند. به عنوان مثال فرض کنید فهرستی از اقلام یا آیتم ها (برای مثال لیستی از اسم ماشین ها) را دارید که هر یک در متغیر ی مجزا ذخیره می گردد.
var car1 = "Saab";‎
var car2 = "Volvo";‎
var car3 = "BMW";‎
چنانچه بخواهیم درون آیتم های فوق حلقه زده (آن ها را تکرار کرده) و ماشین مورد نظر را پیدا کنیم چه اتفاقی رخ می دهد؟ اگر تعداد ماشین ها 3 تا نه بلکه 300 تا بود چه اتفاقی رخ می داد؟ این مسئله با بهره گیری از آرایه حل می شود. یک آرایه همان طور که پیش تر ذکر کردیم قادر است چندین مقدار را تحت نام یکسان در خود ذخیره کرده و از طریق اندیس به آن مقادیر دسترسی پیدا کند.

ایجاد آرایه

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

دستور نگارش (syntax)

var array-name = [item1, item2, ...];‎
مثال:
var cars = ["Saab", "Volvo", "BMW"];‎

استفاده از کلید واژه ی new

مثال زیر نیز یک آرایه ایجاد کرده و به آن مقادیری را تخصیص می دهد.
مثال:

نمونه چهار

var cars = new Array("Saab", "Volvo", "BMW");
نکته:
دو مثال بالا هر دو یک کار یکسان را انجام می دهند. نیازی به استفاده از new Array() وجود ندارد. برای آسانی، قابلیت خوانایی بیشتر و نیز افزایش سرعت اجرا توصیه می کنیم از نمونه ی اول استفاده کنید.

دسترسی به المان های آرایه

برای دسترسی به المان مورد نظر در آرایه از شماره ی اندیس کمک می گیریم. دستور زیر نحوه ی دسترسی به مقدار اولین المان را نمایش می هد.
var name = cars[0];‎
دستور زیر اولین المان را اصلاح می کند.
cars[0] = "Opel";‎
توجه:
دقت داشته باشید که [0] اولین المان محسوب می گردد و [1] دومین شمارنده ی آرایه ها در جاوا اسکریپت از صفر آغاز می شود.

امکان داشتن چندین شی مختلف در یک آرایه

در آموزش طراحی سایت متغیر در جاوا اسکریپت می تواند یک شی باشد. در حقیقت آرایه یک نوع خاص شی محسوب می گردد، به این خاطر هم می توانید متغیرهایی از نوع های مختلف در یک آرایه داشته باشیم. می توان اشیا (object)، توابع (function) یا آرایه (array) در دل آرایه ی دیگر قرار داد.
myArray[0] = Date.now;‎
myArray[1] = myFunction;‎
myArray[2] = myCars;

آرایه یک شی است

آرایه یک نوع خاص شی است. عملگر (operator) typeof در جاوا اسکریپت (برای آرایه) "object" بازمی گرداند. آریه برای دسترسی به المان های خود از شماره کمک می گیرد. به عنوان مثال person[0] المان John را باز می گرداند.
Arrayمثال:

نمونه پنج

var person = ["John", "Doe", 46];
اشیا با استفاده از اسم (name) به اعضای ("member") خود دستیابی پیدا می کنند. برای مثال person.firstName المانJohn را بازیابی می کند.
objectمثال:

نمونه شش

var person = {firstName:"John", lastName:"Doe", age:46};

خواص property ها (خواص) و method های (توابع) مربوط به آرایه

اگر به مثال زیر دقت کنید متوجه می شوید که length property تعداد المان های موجود در cars را برمی گرداند و تابع sort()، cars را به ترتیب حروف الفبا مرتب سازی (sort) می کند.
مثال:
var x = cars.length; // The length property returns ‎the number of elements in cars
var y = cars.sort(); // The sort() method sort cars in ‎alphabetical order

تشریح خاصیت length

دستور length property یک آرایه، طول یا تعداد المان های موجود در یک آرایه را باز گردانی می کند.
مثال:

نمونه هفت

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // the length of fruits is 4

افزودن المان جدید به یک آرایه

آسان ترین روش برای افزورن یک element جدید به آرایه، استفاده از تابع (method) push می باشد.
مثال:

نمونه هشت

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // adds a new element (Lemon) to fruits

همچنین می توان این کار را با بهره گیری از length property انجام داد.
مثال:

نمونه نه

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits

ایجاد یک حلقه در آرایه (تکرار المان های یک آرایه به تعداد دفعات معین)

در loop for مجموعه دستورالعمل ها به تعداد معلوم و مورد نیاز، تکرار می شوند. یکی از بهترین روش های تکرار المان های یک آرایه استفاده از حلقه ی بیان شده است.
مثال:

نمونه ده

var index;
var fruits = ["Banana", "Orange", "Apple", "Mango"];
for (index = 0; index < fruits.length; index++) {
text += fruits[index];
}

آرایه ی شرکت پذیر چیست (associative arrays)؟

بسیاری از زبان های برنامه نویسی کنونی از آرایه های با اندیس های نام گذاری شده پشتیبانی می کنند. آرایه هایی که اندیس های آن ها نام گذاری شده، آرایه های شرکت پذیر یا (hashes) associative arrays نامیده می شوند. جاوا اسکریپت از آرایه هایی که دارای named index (اندیس نام گذاری شده) هستند پشتیبانی نمی کند. در عوض این زبان از قابلیت numbered indexes (اندیس های شماره گذاری شده) پشتیبانی می کند.
مثال:

نمونه یازده

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length; // person.length will return 3
var y = person[0]; // person[0] will return "John"
توجه:
در صورت استفاده از آرایه ی نام گذاری شده، جاوا اسکریپت آرایه را به یک object استاندارد باز تعریف می کند. پس از آن تمامی متدها و خواص مربوط به آرایه نتایج نا صحیح و غیر مجاز تولید می کنند.
مثال:

نمونه دوازده

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length will return 0
var y = person[0]; // person[0] will return undefined

تشریح تفاوت بین آرایه (array) و شی (object)

همان طور که پیش تر شرح داده شد، در جاوا اسکریپت آرایه ها از اندیس های شماره دار استفاده می کنند. اشیا (object) نیز از اندیس های نام دار (named indexes) استفاده می کنند.

چه زمانی باید از array استفاده کرد و چه زمانی از object؟

جاوا سکرپیت JavaScript از آرایه های شرکت پذیر (associative array) پشتیبانی نمی کند. اگر می خواهید اسم المان ها از نوع رشته (نوشته یا متن) باشد، در آن صورت به طور حتم باید از object استفاده کنید. چنانچه مایلید اسم المان از نوع عددی یا شماره باشد، باید از array استفاده کنید. تا حد ممکن سعی کنید از بکار گیری constructor (سازنده) پیش فرض و توکار ()JavaScript،new Array خودداری کنید. بجای استفاده از روش منسوخ بالا می توانید از روش نوین [] بهره بگیرید. هر دو دستور کاملا متفاوت نام برده، آرایه ای تهی به نام points ایجاد می کنند.
var points = new Array(); // Bad
var points = []; // Good ‎
بار دیگر هر دو دستور آرایه ای ایجاد می کنند که دربردارنده ی 6 عدد است.

نمونه سیزده

var points = new Array(40, 100, 1, 5, 25, 10) // Bad
var points = [40, 100, 1, 5, 25, 10]; // Good
استفاده از کلیدواژه ی new برای ایجاد آراِیه ی جدید به دلیل طولانی و پیچیده تر کردن کد منسوخ تلقی تلقی می گردد.
var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)
ببینید در صورت حذف کردن یکی از المان ها چه اتفاقی رخ می دهد!

نمونه چهارده

var points = new Array(40);       // Creates an array with 40 undefined elements !!!!!

چگونه یک آرایه را تشخیص دهیم؟

یکی از سوال هایی که به طور متدوال مطرح می شود این است که چگونه می توان تشخیص داد آیا یک متغیر آرایه هست یا خیر؟ یکی از مشکل هایی که با آن مواجه می شویم، این است که عملگر typeof "object" باز می گرداند.

نمونه پانزده

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits; // typeof returns object
عملگر مزبور به این خاطر "object" برمی گرداند که یک JavaScript array یا آرایه ی جاوا اسکریپت خود یک شی است. جهت رفع این مشکل توصیه می کنیم isArray() function خود را ایجاد کنید.

نمونه شانزده

function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
تابع function (تابع) بالا همیشه در صورتی که آرگومان مورد نظر یک آرایه باشد، مقدار true باز می گرداند و یا اگر بخواهیم دقیق تر توضیح بدیم اگر نوع ورودی تابع از نوع "[object array]" باشد مقدار صحیح (true) برمی گرداند.
آموزش طراحی سایت ادامه دارد

آموزش طراحی سایت دوره طراحی سایت کتاب طراحی سایت دوره آموزش طراحی سایت آموزش جاوااسکریپت فیلم آموزش جاوا اسکریپت
افشین سه‌شنبه 20 آبان 1399 ساعت 11:14
0 نظر

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

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

متدهای شی date به برنامه نویس اجازه ی بدست آوردن و تنظیم (مقدار) تاریخ و زمان را می دهد.

متدهای get (برگرداندن مقدار تاریخ و زمان)

  • متد ()getDate : شماره ی روز جاری را در ماه جاری برمی گرداند (1-31)
  • متد ()getDay : شماره ی روز جاری در هفته را برمی گرداند (0-6)
  • متد ()getFullYear : شماره ی (چهار رقمی) سال جاری را بر می گرداند (سال سال سال سال)
  • متد ()getHours : مقدار ساعت را برمی گرداند (0-23)
  • متد ()getMilliseconds : مقدار (شماره ی) میلی ثانیه را برمی گرداند (0-999)
  • متد ()getMinutes : شماره ی دقیقه را در یک متغیر زمانی برمی گرداند (0-59)
  • متد ()getMonth : مقدار ماه (شماره ی ماه جاری) را برمی گرداند (0-11)
  • متد ()getSeconds : شماره ی ثانیه ی جاری را بر می گرداند (0-59)
  • متد ()getTime : هزارم ثانیه هایی که از تاریخ یک ژانویه ی سال 1970 تا کنون سپری شده را برمی گرداند

 

متد ()getTime در جاوا اسکریپت

این تابع تعداد ثانیه های سپری شده از تاریخ اول ژانویه سال 1970 تا به امروز را بر می گرداند : 01.01.1970

مثال 1 :

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

 

تابع ()getFullYear در جاوا اسکریپت

این تابع شماره ی سال جاری را (به صورت چهار رقمی) بر می گرداند.

مثال 2 :

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

 

تابع ()getDay در جاوا اسکریپت

شماره ی روز جاری در هفته را برمی گرداند (6-0).

مثال 3 :

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

 

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

می توان با استفاده از آرایه ای از اسم ها و تابع ()getDay، روزهای هفته را با اسم شان برگرداند.

مثال 4 :

< script>
var d = new Date();
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
document.getElementById("demo") = days[d.getDay()];
< /script>

 

متد های تنظیم تاریخ در جاوا اسکریپت

  • متد ()setDate : از این متد برای تغییر مقدار عددی تاریخ روز در یک متغیر زمانی استفاده می شود (مقدار روز را به صورت عددی تنظیم می کند) (1-31).
  • متد ()setFullYear : شماره یا مقدار سال و در صورت نیاز روز و ماه را تنظیم می کند.
  • متد ()setHours : مقدار ساعت را تنظیم می کند (0-23).
  • متد ()setMilliseconds : مقدار عددی میلی ثانیه (هزارم ثانیه) را تنظیم می کند (0-999).
  • متد ()setMinutes : مقدار عددی دقیقه در یک متغیر زمانی را تنظیم می کند (0-59).
  • متد ()setMonth : به منظور اصلاح و تنظیم شماره / مقدار ماه بکار می رود (0-11).
  • متد ()setSeconds : مقدار ثانیه را تنظیم می کند (تغییر مقدار عددی ثانیه در یک متغیر زمانی) (0-59).
  • متد ()setTime : محاسبه و ایجاد یک تاریخ جدید ، به واسطه ی اضافه یا کم کردن تعداد مشخصی هزارم ثانیه به تاریخ اول ژانویه سال 1970 استفاده می شود / مقدار زمان را از تاریخ یک ژانویه ی سال 1970 بر حسب میلی ثانیه محاسبه و تنظیم می کند).

 

تابع ()setFullYear در جاوا اسکریپت

این متد شی date را روی تاریخ مشخصی تنظیم می کند، در مثال زیر تاریخ به ژانویه ی 14، 2020 تنظیم شده است.

مثال 5 :

< script>
var d = new Date();
d.setFullYear(2020, 0, 14);
document.getElementById("demo") = d;
< /script>

 

متد ()setDate در جاوا اسکریپت

تابع ()setDate روز ماه مربوطه را تنظیم (مقداردهی) می کند (31-1).

مثال 6 :

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

 

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

مثال 7 :

< script>
var d = new Date();
d.setDate(d.getDate() + 50);
document.getElementById("demo") = d;
< /script>

 

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

 

ورودی date – تجزیه parse date

چنانچه یک رشته ی معتبر date به صورت رشته یا string دارید که می خواهید به میلی ثانیه تبدیل شود، در آن صورت می توانید از متد Date.parse() استفاده کنید. تابع ()Date.parse تعداد میلی ثانیه های (سپری شده) بین تاریخ مورد نظر و تاریخ اول ژانویه ی سال 1970 را برمی گرداند.

مثال 8 :

 < script>
var msec = Date.parse("March 21, 2012");
document.getElementById("demo") = msec;
< /script>

 

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

مثال 9 :

< script>
var msec = Date.parse("March 21, 2012");
var d = new Date(msec);
document.getElementById("demo") = d;
< /script>

 

مقایسه تاریخ ها با یکدیگر

تاریخ ها را می توان به راحتی با یکدیگر مقایسه کرد. مثال زیر تاریخ امروز را با تاریخ January 14، 2100 مقایسه می کند.

مثال 10 :

var today, someday, text;
today = new Date();
someday = new Date();
someday.setFullYear(2100, 0, 14);
if (someday > today) {
text = "Today is before January 14, 2100."
} else {
text = "Today is after January 14, 2100."
}
document.getElementById("demo") = text;

 

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

آموزش طراحی سایت آموزش جاوااسکریپت دوره آموزش طراحی سایت متد های تاریخ در جاوا اسکریپت طراحی سایت
افشین سه‌شنبه 29 مهر 1399 ساعت 16:53
0 نظر

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

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

امروز با مقاله ای دیگر از سری مقاله های آموزش طراحی سایت همراه شما هستیم. در این مقاله با هم و در کنار هم می آموزیم که چطور می توانیم متود 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 میلی ثانیه است.

سازنده ی numbers)7new date (، یک شی جدید 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 در نظر گرفته می شود.

 


متدهای شی data

هنگامی که یک شی 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)");

 

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

آموزش طراحی سایت طراحی سایت آموزش جاوااسکریپت دوره آموزش طراحی سایت کار با تاریخ در جاوا اسکریپت
افشین چهارشنبه 23 مهر 1399 ساعت 15:26
0 نظر

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

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

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


نمونه 1 :

    function myFunction() {
        document.getElementById("demo").innerHTML = Math.random();
    }


شی Math خود دارای سازنده (constructor) نیست. لازم نیست هیچ متدی ابتدا یک شی math ایجاد کند.


توابع ()Math.min و ()Math.max

متدهای ()Math.min و ()Math.max را می توان برای بدست آوردن مقدار بیشینه (بزرگترین عددی که به عنوان پارامتر ارسال شده) و کمینه (کوچکترین عددی که به عنوان پارامتر ارسال شده) از میان مجموعه ای از آرگومان ها بکار برد.


نمونه 2 :

 function myFunction() {
document.getElementById("demo") =
 Math.min(0, 150, -2230, 20, -8, -200);
 }


نمونه 3 :

function myFunction() {
   document.getElementById("demo") =
Math.max(0, 150, 30, 20, -8, -200);
}


تابع ()Math.random

یک عدد تصادفی بین 0 و 1 را به عنوان خروجی (output) برمی گرداند.


نمونه 4 :

Math.random();              // returns a random number‎

تابع ()math.random همیشه عددی کوچکتر از 1 بر می گرداند.


تابع ()Math.round

یک عدد را به نزدیکترین عدد صحیح (integer) گرد می کند(به عنوان مثال عدد x را گرد کرده و به نزدیکترین عدد صحیح به آن تبدیل می کند).


نمونه 5 :

function myFunction() {

    document.getElementById("demo") = Math.round(4.4);

    document.getElementById("demo1") = Math.round(4.7);


}


تابع ()Math.ceil

در آموزش طراحی سایت می آموزید که این متد یک عدد را به بالا گرد کرده و نزدیکترین عدد صحیح (integer) به آن را برمی گرداند.


نمونه 6 :

function myFunction() {
  document.getElementById("demo") = Math.round(4.4);
}

توابع ()Math.floor و ()Math.random را می توان به طور همزمان برای برگرداندن یک عدد تصادفی بین 0 و 10 مورد استفاده قرار داد.


تابع ()Math.floor

یک عدد را به پایین گرده کرده و نزدیکترین عدد صحیح به آن را برمی گرداند.


نمونه 7 :

function myFunction() {
document.getElementById("demo") = Math.floor(4.7);
}


توابع ()Math.floor و ()Math.random را می توان به طور همزمان برای برگرداندن یک عدد تصادفی بین 0 و 10 مورد استفاده قرار داد.


function myFunction() {
    document.getElementById("demo") =
    Math.floor(Math.random() * 11);
}


ثابت های ریاضی

جاوا اسکریپت در کل 8 ثابت ریاضی دارد که با استفاده شی math می توان به آن ها دسترسی پیدا کرد.


function myFunction() {
    document.getElementById("demo") =
    Math.E + "
" +
    Math.PI + "
" +
    Math.SQRT2 + "
" +
    Math.SQRT1_2 + "
" +
    Math.LN2 + "
" +
    Math.LN10 + "
" +
    Math.LOG2E + "
" +
    Math.LOG10E + "
"
}


آموزش طراحی سایت : توابع شی math را می توان بصورت زیر فهرست کرد.

1. abs(x) =

قدر مطلق عدد x را برمی گرداند.


2. acos(x) =

آرک کوسینوس عدد x را بر حسب رادیان برمی گرداند.


3. asin(x) =

آرک سینوس عدد x را بر حسب رادیان برمی گرداند.


4. atan(x) =

آرک تانژانت عدد x را به صورت مقدار عددی بین رادیان های clip_image002 - و clip_image002[1] برمی گرداند.


5. atan2(y,x) =

آرک تانژانت خارج قسمت آرگومان های عدد x را برمی گرداند یا به عبارت ساده تر این متد آرک تانژانت عدد x را بر می گرداند.


6. ceil(x) =

عدد x رو به بالا گرد کرده و نزدیک ترین عدد صحیح (integer) به آن را بر می گرداند.


7. cos(x) =

کسینوس x را بر حسب رادیان برمی گرداند.


8. exp(x) =

مقدار عدد Ex را برمی گرداند.


9. floor(x) =

مقدار x را رو به پایین گرد کرده و نزدیک ترین عدد صحیح به آن را بر می گرداند.


10. log(x) =

لگاریتم طبیعی x را بر مبنای عدد e بر می گرداند.


11. max(x,y,z,...,n) =

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


12. min(x,y,z,...,n) =

کوچکترین عدد که به عنوان پارامتر پاس داده شده را بر می گرداند.


13. pow(x,y) =

مقدار x را به توان y رسانده و حاصل آن را برمی گرداند.


14. ()random =

یک عدد تصادفی بین 0 و 1 را به عنوان خروجی برمی گرداند.


15. round(x) =

مقدار x را به نزدیک ترین عدد صحیح به آن گرد می کند.


16. sin(x) =

مقدار سینوس x را بر حسب رادیان برمی گرداند.


17. sqrt(x) =

جذر یا ریشه ی دوم عدد x را برمی گرداند.


18. tan(x) =

تانژانت یک زاویه را برمی گرداند / مقدار تانژانت x را بازمی گرداند.


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

آموزش طراحی سایت طراحی سایت آموزش جاوااسکریپت شی ریاضی در جاوا اسکریپت آموزش متد ریاضی در جاوا اسکریپت دوره آموزش طراحی سایت
افشین جمعه 18 مهر 1399 ساعت 15:48
0 نظر