آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 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>
آموزش طراحی سایت-آرایه ها در جاوا اسکریپت
امروز با پست جدیدی از سری پست های آموزش طراحی سایت همراه شما هستیم. در این پست آرایه ها در جاوا اسکریپت را مورد بررسی قرار می دهیم.
آرایه ها (در جاوا اسکریپت) چندین متغیر را در قالب تنها یک متغیر ذخیره می کنند یا به عبارتی دیگر آرایه یک متغیر خاص است که می توانید به طور همزمان چندین مقدار (بیش از یک مقدار) را در آن ذخیره نمایید.
در این بخش با استفاده از یک اسکریپت، آرایه ها را داخل تگ <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) برمی گرداند.
آموزش طراحی سایت-تبدیل سه بعدی در CSS3
در این مقاله از آموزش طراحی سایت به بررسی تبدیل سه بعدی در CSS3 می پردازیم و متدهای مورد نیاز برای این تبدیل را همراه با هم تمرین می کنیم..
در CSS3 این امکان برای شما فراهم می شود که به المان های خود جلوه سه بعدی اعمال کنید (آن ها را به صورت سه بعدی قالب دهی کنید).
در جدول زیر، ویرایشی از مرورگرهای مختلف که خاصیت تبدیل سه بعدی را پشتیبانی می کنند، ارائه شده :
توابع تبدیل سه بعدی در CSS3
مبحث پیش رو متدهای تبدیل سه بعدی را در CSS3 برای شما تشریح می کند :
- rotateX()
- rotateY()
- rotateZ()
متد rotateX()
به کمک متد ()rotateX می توان عنصر مورد نظر را بر حول محور X آن، به میزان درجه تعریف شده، چرخاند.
div {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
متد rotateY()
متد مزبور یک المان را حول محور Y بر اساس درجه ی تعیین شده می چرخاند.
div {
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
متد rotateZ()
تابع مذکور یک المان را حول محور Z آن بر اساس درجه ی معین می چرخاند.
div {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
جدول زیر کلیه ی خاصیت های مربوط به transform در CSS3 را فهرست می کند :
- خاصیت transform : جلوه دو بعدی و سه بعدی به عنصر مربوطه اعمال می کند.
- خاصیت transform-origin : به شما اجازه می دهد تا موقعیت عنصر تبدیل شده را تغییر دهید.
- خاصیت transform-style : تعیین می کند چگونه المان های تودرتو (nested) در فضای سه بعدی پردازش و نمایش داده شود.
- خاصیت perspective : نحوه نمایش عناصر سه بعدی را مشخص می کند (دور نما).
- خاصیت perspective-origin : تعریف کننده ی محل قرار گیری المان سه بعدی از پایین.
- خاصیت backface-visibility : هنگامی را در اثر چرخش، پشت عنصر نمایان می شود (جلوی آن نمایان نیست)، تعیین می کند که المان نمایش داده شود یا خیر.
- تابع (matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n : کلیه تبدیل های سه بعدی را دربر می گیرد.
- تابع (translate3d(x,y,z : انتقال (حرکت) سه بعدی عنصر را مقدار دهی می کند.
- تابع (translate X(x : یک انتقال سه بعدی را تعریف کرده و فقط مقدار محور X را بکار می برد (حرکت سه بعدی، در جهت محور X تعریف می کند).
- تابع (translate Y(y : یک حرکت سه بعدی، در جهت محور Y تعریف می کند.
- تابع (translate Z(z : یک حرکت سه بعدی، در جهت محور Z تعریف می کند.
- تابع (scale3d(x,y,z : یک تغییر اندازه سه بعدی (مقیاس بندی سه بعدی)، تعریف می کند.
- تابع (scale X(x : یک تغییر اندازه سه بعدی، در طول محور X تعریف می کند.
- تابع (scale Y(y : یک تغییر اندازه سه بعدی، در امتداد محور Y تعریف می کند.
- تابع (scale Z(z : یک تغییر اندازه سه بعدی، در جهت محور Z تعریف می کند.
- تابع (rotate3d(x,y,z,angle : چرخش سه بعدی را تعریف می کند.
- تابع (rotate X(angle : چرخش عنصر را در امتداد محور X تعریف می کند.
- تابع (rotate Y(angle : چرخش سه بعدی در طول محور Y تعریف می کند.
- تابع (rotate Z(angle : یک چرخش سه بعدی در امتداد محور Z تعریف می کند.
- تابع (perspective (n : یک دورنمای سه بعدی (perspective) برای المان تبدیل شده تعریف می کند.
با دیگر مقاله های مرتبط با آموزش طراحی سایت همراه ما باشید..
آموزش طراحی سایت-آموزش Flickerplate در جی کوئری
امروز با مقاله دیگری از سری مقاله های آموزش طراحی سایت همراه شما هستیم. در این مقاله به آموزش افزونه Flickerplate در JQuery می پردازیم.
پلاگین Flickerplate یک کامپوننت از جاوا اسکریپت است که اجازه حرکت بین بخش های مختلف را به ما می دهد. جهت نصب توسط ترمینال میتوانید از دستور زیر استفاده کنید.
bower install flickerplate
لینک های زیر را در پروژه قرار دهید :
< head >
< link href="css/flickerplate.css" rel="stylesheet" type="text/css" >
< /head >
< body >
/* Your content goes here */
< script src="js/min/flickerplate.js" >< /script >
< /body >
قطعه کد زیر طریقه استفاده از این پلاگین را نمایش می دهد :
< div class="flicker-example" >
< ul >
< li data-background="image-url.jpg" >
< div class="flick-title" >Example Heading< /div >
< div class="flick-sub-text" >Sub Text< /div >
< /li >
< li data-background="image-url.jpg" >
< div class="flick-title" >Example Heading< /div >
< div class="flick-sub-text" >Sub Text< /div >
< /li >
< /ul >
< /div >
< script >
new flickerplate({
selector: '.flicker-example'
});
< /script >
آپشن های پلاگین FlickerPlate در JQuery
مثالی از پلاگین FlickerPlate
new flickerplate({
selector: '.flicker-example',
animation: 'transition-fade',
autoFlick: false,
dotAlignment: 'right',
theme: 'dark'
});
اگر قصد دارید پلاگین شما با قابلیت حرکت به صورت لمسی نیز باشد، از کتابخانه Hammer استفاده کنید :
< body >
/* Your content goes here */
< script src="js/min/hammer-v2.0.3.js" >< /script >
< script src="js/min/flickerplate.js" >< /script >
< /body >
با مقاله های دیگر در زمینه آموزش طراحی سایت همراه ما باشید ...