If-for-switch

שפת JavaScript – הפעם נלמד תנאים כגון: if, for, switch.

ניצור HTML קובץ

<!DOCTYPE html>
<html>

<head>
 <link rel="stylesheet" href="mystyle.css"> 
 <script type="text/javascript" src="MyJavaScript.js"></script>
 <title>Welcome to JS and HTML</title>
</head>

<body>

 <input type="text" placeholder="Type something..." id="myInput">
 <button type="button" onclick="getInputValue();">Get Value</button>

</body>
</html>

וקובץ JS

function getInputValue(){

var inputValue = document.getElementById("myInput").value;
document.write("Your input value:</br>"+"<b>"+inputValue+"</b>");
}

הסבר:

בקובץ HTML הוספנו שדה להכנסת נתונים, אשר מקבלת ערך מסוג טקסט או מספר (text).
בנוסף הגדרנו מה יהיה כתוב בתוך השדה הזה לפני שמקלידים משהו בתוך השדה – Type something

והגדרנו ID בשם myInput לצורך זיהוי של השדה הזה בתוך JS קובץ וגם קובץ CSS

<body>

 <input type="text" placeholder="Type something..." id="myInput">

</body>

אבל אנחנו גם רוצים להוסיף כפתור(button), כף שבלחיצה(onclick) על הכפתור תהיה פעולה.

למעשה בלחיצה על הכפתור תקרא פונקציה בשם ()getInputValue שאותה תקף נגדיר בקובץ JS.

<body>

 <input type="text" placeholder="Type something..." id="myInput">
 <button type="button" onclick="getInputValue();">Get Value</button>

</body>

בקובץ JS הדרנו פונקציה בשם ()getInputValue ובתוך הפונקציה משתנה inputValue אשר מקבל את ערך משדה בקובץ HTML לפי ID ששווה ל-myInput.

בסוף אנו מדפיסים ב-BODY את המשתנה inputValue

* <br/> זה ירידת שורה
* <b> כל משהו בתוך תג b יהיה בולט
* סימן + מקשר בין מחרוזת Your input value למשתנה inputValue

הערה: כל תג HTML כגון <br/>, <b> או מחרוזת Your input value … יש לשים בין הגרשיים
אבל משתנים כגון inputValue יש להשיר ללא גרשיים בתוך ()document.write

function getInputValue(){
var inputValue= document.getElementById("myInput").value;
document.write("Your input value:</br>"+"<b>"+inputValue+"</b>");
}

בסופו של דבר נקבל:

if

קובץ HTML

<!DOCTYPE html>
<html>

<head>
 <link rel="stylesheet" href="mystyle.css"> 
 <script type="text/javascript" src="MyJavaScript.js"></script>
 <title>Welcome to JS and HTML</title>
</head>

<body>

 <input type="text" placeholder="Type something..." id="myInput">
 <button type="button" onclick="getInputValue();">Get Value</button>

</body>
</html>

בואו נשנה קצת את הקובץ JS, ונוסיף תנאי אשר ידפיס ZERO אם inputValue שווה לאפס
או כל כל משתנה אחר

function getInputValue(){
var inputValue= document.getElementById("myInput").value;

if (inputValue== 0) 
 document.write("ZERO"); 
else 
 document.write("Your value: "+inputValue);
}

לדוגמה:

switch

קובץ HTML

<!DOCTYPE html>
<html>

<head>
 <link rel="stylesheet" href="mystyle.css"> 
 <script type="text/javascript" src="MyJavaScript.js"></script>
 <title>Welcome to JS and HTML</title>
</head>

<body>

 <input type="text" placeholder="Type something..." id="myInput">
 <button type="button" onclick="getInputValue();">Get Value</button>

</body>
</html>

נניח משתמש מקליד מספר אחד – inputValue=1.

ב-SWITCH בודקים אם:

inputValue=0 התשובה לא => לכן case 0 לא מאתים.

inputValue=1 התשובה כן => לכן case 1 מאתים.
זאת אומרת מדפיסים מספר 1.

דרך אגב, אם משתמש היה מקליד מספר 2,3,4,5…..כל מספר חוץ מ-0 או 1
לפי SWITCH היינו מדפיסים משהו רשום (בdefault).

קובץ JS

function getInputValue()
{ 
  var inputValue= document.getElementById("myInput").value; 

   switch (inputValue) 
   { 
    case 0: document.write("0"); 
     break; 
     case 1: document.write("1"); 
     break; 
     default: document.write(inputValue); 
    }
 }

for

בקובץ HTML נקרא לפונקציה ()printI אשר נמצאת בקובץ JS

<!DOCTYPE html>
<html>

<head>
 <link rel="stylesheet" href="mystyle.css"> 
 <script type="text/javascript" src="MyJavaScript.js"></script>
 <title>Welcome to JS and HTML</title>
</head>

<body>
<script>printI()</script>
</body>
</html>

הדפסת מספרים מ-1 ועד 10

בהתחלה משתנה i=0, לאחר מכן i=1, …לאחר מכן i=9,
מה קורה כאשר i=10 אז תנאי i < 10 לא יתקיים שזה אומר i=9 ערך מקסימלי.

כאשר כל פעם מדפיסים i+1 זה אומר מ-1 עד 10

קובץ JS

function printI()
{ 
 for (var i = 0; i < 10; i++) 
 { 
  document.write((i+1)+" "); 
 }
}

do-while

בקובץ HTML נקרא לפונקציה ()printI אשר נמצאת בקובץ JS

<!DOCTYPE html>
<html>

<head>
 <link rel="stylesheet" href="mystyle.css"> 
 <script type="text/javascript" src="MyJavaScript.js"></script>
 <title>Welcome to JS and HTML</title>
</head>

<body>
<script>printI()</script>
</body>
</html>

נגדיר משתנה i=10

נכנס לתוך הלולאה ונדפיס i שזה 10
לאחר מכן, i יורד באחד ונקבל i=9
ואז בודקים האם מתקיים תנאי  i > 0 מכיוון ש 0<9 אז ממשיכים שוב לולאה הבא

נכנס לתוך הלולאה ונדפיס i שזה 9
לאחר מכן, i יורד באחד ונקבל i=8
ואז בודקים האם מתקיים תנאי  i > 0 מכיוון ש 0<8 אז ממשיכים שוב לולאה הבא.

כאשר כל פעם מדפיסים את ה-i שזה:
10,9,8,7,6,5,4,3,2,1

וכך עד ש i=0 כאשר i=0 אז תנאי i > 0 לא מתקיים ולכן יוצאים מלולאה.

קובץ JS

var i=10;

do {
document.write(i+" ");
i--;
} while (i > 0);

דילוג לתוכן