نوشته‌ها

photo_2016-01-18_02-03-32

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

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

برای تعریف آرایه ابتدا کلمه var را نوشته سپس نام آرایه را می نویسیم سپس علامت = را قرار می دهیم و درون [] مقدار دهی می کنیم. و برای نمایش کافیست ابتدا نام آرایه را نوشت و سپس شماره خانه ای که قرار است نمایش داده شود را می نویسیم.

نکته:شماره خانه ها از 0 شروع می شود.

 

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

مثال:

<!DOCTYPE html>
<html>
<body>

<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>
</html>

در خروجی دکمه ای نمایش داده می شود که با کلیک بر روی آن زمان را بررسی می کند اگر کوچک تر از 18 باشد Good day را نمایش می دهد و در غیر این صورت Good evening را نمایش می دهد.
برای بررسی با تعداد شرط بالا باید از switch استفاده کرد که به این صورت استفاده می شود:

<!DOCTYPE html>
<html>
<body>

<p id=”demo”></p>

<script>
var day;
switch (new Date().getDay()) {
case 0:
day = “Sunday”;
break;
case 1:
day = “Monday”;
break;
case 2:
day = “Tuesday”;
break;
case 3:
day = “Wednesday”;
break;
case 4:
day = “Thursday”;
break;
case 5:
day = “Friday”;
break;
case 6:
day = “Saturday”;
break;
}
document.getElementById(“demo”).innerHTML = “Today is ” + day;
</script>

</body>
</html>

خروجی مثال بالا نام روز را در صفحه نمایش می دهد.یعنی ابتدا شماره روز را به switch می دهد و سپس با بررسی ها نام روز را نمایش می دهد.

نحوه تعریف switch به این صورت است:

switch (چیزی که قرار است بررسی شود ) {
case 0:
بررسی می کند آیا برابر 0 است یا خیر
break;
case 1:
بررسی می کند آیا برابر 1 است یا خیر
break;
case 2:
بررسی می کند آیا برابر 2 است یا خیر
break;
}

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

مثال:

<!DOCTYPE html>
<html>
<body>

<p id=”demo”></p>

<script>
var cars = [“BMW”, “Volvo”, “Saab”, “Ford”];
var text = “”;
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + “<br>”;
}

document.getElementById(“demo”).innerHTML = text;
</script>

</body>
</html>

خروجی: BMW
Volvo
Saab
Ford

نحوه استفاده از حلقه for:

for (i = 0; i < cars.length; i++) {
text += cars[i] + “<br>”;
}

ابتدا کلمه for را می نویسیم و سپس مقدار اولیه می دهیم و ; را درج می کنیم.سپس شرط حلقه را می نویسیم که در مثال بالا شرط حلقه این است که به تعداد اطلاعات متغیر cars کار می کند.و دوباره علامت ; را درج می کنیم.حال به حلقه باید بگوییم که چند واحد چند واحد به مقدار اولیه اضافه کند.که در مثال بالا i++ به معنی این است که یک واحد یک واحد به i اضافه کند.

حال درون حلقه هرچیزی را که می خواهیم به نمایش در آید می نویسی که در مثال بالا گفته شده مقدار خانه ی i ام آرایه cars را نمایش دهد.
نحوه تعریف حلقه while:
مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
var text = “”;
var i = 0;
while (i < 10) {
text += “<br>The number is ” + i;
i++;
}
document.getElementById(“demo”).innerHTML = text;
}
</script>

</body>
</html>

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

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9

 

photo_2016-01-18_02-03-32

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

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

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

که در این روش باید به اشیا  شناسه یا id بدهیم تا مشخص کنیم متن کدام شی تغییر کند.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>What Can JavaScript Do?</h1>

<p id=”demo”>JavaScript can change HTML content.</p>

<button type=”button”
onclick=”document.getElementById(‘demo’).innerHTML = ‘Hello JavaScript!'”>
Click Me!</button>

</body>
</html>

در مثال بالا متنی نمایش داده می شود که به تگ <p> آی دی به نام demo داده شده و زمانی که روی دکمه کلیک می شود متتن را تغیید می دهد.

<button type=”button”
onclick=”document.getElementById(‘demo’).innerHTML = ‘Hello JavaScript!'”>
Click Me!</button>

در خط بالا یک دکمه ایجاد می شود و در onclick دکمه با کد document.getElementById گفته می شود سندی با آی دی (‘demo’) را زمانی که دکمه فشار داده شد با کد innerHTML محتوای آی دی demo را تغییر بده.

Click Me! متن روی دکمه است.و ‘Hello JavaScript!'” متنی است که به جای محتوای قبلی آی دی demo قرار می گیرد.

جاوا اسکریپت یکی از 3 زبانی است که همه توسعه دهندگان وب باید یاد بگیرند:

1. HTML برای تعریف محتوای صفحات وب

2. CSS برای مشخص کردن طرح صفحات وب

3. JavaScript برنامه نویسی رفتار صفحات وب

خب با نوشتن تگ scriptشروع می کنیم!

نوشتن جاوا اسکریپت در تگ <script>:

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

مزایای نوشتن جاوا اسکریپت در تگ <script>:

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

مثال:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>
</head>

<body>

<h1>JavaScript in Head</h1>

<p id=”demo”>A Paragraph.</p>

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

</body>
</html>

برای نوشتن جاوا اسکریت در تگ <script> باید از دستور function استفاده کنید و یک نام به آن بدهید.و هرجا خواستید این عملکرد اجرا شود کافیست نام function را بنویید.

یعنی در <button type=”button” onclick=”myFunction()”>Try it</button> گفته شده که وقتی روی دکمه کلیک شد function به نام myFunction اجرا شود تا متن موجود در آی دی demo تغییر کند.
شما می توانید تگ <script> را حتی در <body> بنویسید.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript in Body</h1>

<p id=”demo”>A Paragraph.</p>

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

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>

</body>
</html>

نوشتن جاوا اسکریپت به صورت یک فایل جداگانه:

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

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>External JavaScript</h1>

<p id=”demo”>A Paragraph.</p>

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

<p><strong>Note:</strong> myFunction is stored in an external file called “myScript.js”.</p>

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

</body>
</html>

در مثال بالا از فایل myScript.js کد های جاوا اسکریپت را می خواند.
کد های مربوط به فایل myScript.js:

function myFunction() {
document.getElementById(“demo”).innerHTML=”Paragraph changed.”;
}