Javascript Archives - בדיקות תוכנה -QA

שילוב של CSS ו-JS

הערות ל-CSS ו-JS כותבים כך /* COMMENT */

הערות ל-HTML כותבים כך <!– Write your comments here –>

קודם כל בואו נראה את הקובץ mystyle.css

יש לנו צבע רקע שחור לכל HTML עמוד.

בנוסך:

הגדרנו צבע טקסט לאלמנט-testID כצהוב.
צבע טקסט לאלמנט-testID2 כלבן.
רוחב של myDiv שווה ל-25% מרוחב העמוד HTML ועם קן צהוב מסביב.
בנוסף הגדרנו צבע רקע פנימי ל-myDiv – ירוק.
באדום הגדרנו צבע של הטקסט בתג p בתוך ה-myDiv.

/* Black background */
body {
background-color: black;
}

/* yellow color for the selector #testID */
#testID {
color:yellow;
}

/* WHITE color for the CLASS .testID2 */
.testID2 {
color:white;
}

/* DIV */
.myDiv {
 width:25%; 

 /* outset yellow-line 5px*/
 border: 5px outset yellow;
 background-color: green;
 text-align: center;
}

/* tag p inside div will be red*/
.myDiv p {
 color:red;
}

בקובץ HTML הגדרנו תג p:
פעם כ-id selector שזה Test 1 
ופעם כ-CLASS NAME שזה Test 2

בנוסף הגדרנו DIV כ-CLASS NAME שזה <div class="myDiv">

ובתוך ה-DIV הגרנו כותרת <h2> וגם טקסט עם תג

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="C:\HTML-CSS-JS/mystyle.css">
<title>Java Script</title>
</head>
<body>
 <!-- Write your comments here -->

 <!-- Color defended by ID SELECTOR -->
 <p id="testID">Test 1 </p>

 <!-- Color defended by CLASS NAME -->
 <p class="testID2">Test 2 </p>

 <div class="myDiv">
   <h2>TITLE</h2>
   <p>Just text in DIV...</p>
 </div>

</body>
</html>

שינוי HTML Elements בעזרת JavaScript

בדוגמה קודמת נוסיף כפתור כך שבלחיצה על הכפתור
תרוץ פוטנציה ()changeColor אשר נמצת בקובץ MyJavaScript.js

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="C:\HTML-CSS-JS/mystyle.css">
 <script type="text/javascript" src="MyJavaScript.js"></script>
<title>Java Script</title>
</head>
<body>
 <!-- Write your comments here -->

 <!-- Color defended by ID SELECTOR -->
 <p id="testID">Test 1 </p>

 <!-- Color defended by CLASS NAME -->
 <p class="testID2">Test 2 </p>

 <div class="myDiv">
   <h2>TITLE</h2>
   <p>Just text in DIV...</p>
 </div>

 </br>
<button type="button" onclick="changeColor()"> Change color!</button>

</body>
</html>

תג מסמל ירידת שורה, כך שהטקסט הבא יתחיל בשורה הבאה.

נגדיר פוטנציה ()changeColor בקובץ JS
ואז נשנה את הצבעים:

דרך getElementById נשנה Test1 מצהוב לאדום
דרך getElementsByClassName נשנה Test2 מלבן לכחול.
חשוב לציין שמכיוון שgetElementsByClassName מחזיר מערכך של כל אלמנטים
לפי תג testID2 ואנחנו צריך רק את הראשון, לכן בחרנו [document.getElementsByClassName('testID2')[0
כנ"ל יהיה שינוי הצבע של רקע עבור myDiv לכחול.

function changeColor () {
document.getElementById('testID').style.color = 'red';
document.getElementsByClassName('testID2')[0].style.color = 'blue';
document.getElementsByClassName('myDiv')[0].style.backgroundColor = "blue";
}

תוצאה:

לפני לחיצת כפתור כפתור:

לאחר לחיצת כפתור כפתור:

כל כבוד לכם!!!

בזה נגמר הקורס מבוא לשפת JavaScript ו-HTML, אני מקווה שהקורס הזה נתן לכם רקע התחלתי בJS, HTML.

DOM – HTML

שפת JavaScript – הפעם נלמד על DOM.

Document Object Model of the HTML page.

Finding HTML Elements

מציאת אלמנט לפי id.

הגדרנו אלמנת בתג p עם id שווה ל-testID

ואז דרך JS מוצאים את אלמנת עם id שווה ל-testID ומדפיסים Founded

<!DOCTYPE html>
<html>
<head>
<title>Java Script</title>
</head>
<body>

<p id="testID"></p>

<script>
document.getElementById("testID").innerHTML ="Founded";
</script>

</body>
</html>

מציאת אלמנט לפי Tag Name.

ניתן למצוא אלמנט לפי Tag Name שלו:

document.getElementsByTagName(name)

בדוגמה הזאת יש 4 שורות עם תג

בתוך JS נגדיר משתמה X אשר מוצאת כל אלמנטים שיש להם תג 
כלומר יש לנו מערך:

X={Test 1 ,Test 2 ,Test 3 ,Selected: }

לדוגמה: [x[1 זה Test 2 

בנוסף נגדיר משתנה Y אשר מוצא אלמנת לפי id ששווה ל-testID

<!DOCTYPE html>
<html>
<head>
<title>Java Script</title>
</head>
<body>

<p>Test 1 </p>
<p>Test 2 </p>
<p>Test 3 </p>
<p id="testID">Selected: </p>

<script>
var x = document.getElementsByTagName("p");
var y = document.getElementById("testID");
y.innerHTML += x[1].innerHTML;
</script>

</body>
</html>

בצבע אדום מודגש y.innerHTML += x[1].innerHTML שזה אומר יש להוסיף ל-y את משהו כתוב ב-[x[1 שזה Selected: Test 2

לסיכום נקבל:

מציאת אלמנט לפי Class Name

document.getElementsByClassName(name)

בדוגמה הזאת, אנחנו מוצאים אלמנט לפי CLASS:
testIDclass2, testIDclass1
ומוצאים את התוכן רצוי מתוך המערך, כי יש שני מחלקות עם אותו שם – testIDclass2.

ב-JS הגדרנו משתנה X אשר מקבל מערך של המחלקה testIDclass2

X={Test 2 , Test 3 }

בנוסף הגדרנו משתנה Y שזה Selected: 

<!DOCTYPE html>
<html>
<head>
<title>Java Script</title>
</head>
<body>

<p class="testIDclass1">Test 1 </p>
<p class="testIDclass2">Test 2 </p>
<p class="testIDclass2">Test 3 </p>
<p id="testID">Selected: </p>

<script>
var x = document.getElementsByClassName("testIDclass2");
var y = document.getElementById("testID");
y.innerHTML += x[0].innerHTML;
y.innerHTML += x[1].innerHTML;
</script>

</body>
</html>

בצע כחול מוגדר ב-JS

y.innerHTML += x[0].innerHTML;
y.innerHTML += x[1].innerHTML;

זה אומר שיש להוסיף לתוכן של-Y את ערכים שבמערך X שזה Test 2 ו-Test 3

ואז נקבל:

Events

שפת JavaScript – הפעם נלמד על events ו-button.

שינוי טקסט בקליק

בלחיצה על הטקסט Let's change it – click. יקרה event בשם onclick
ואז ישתנה הטקסט ל-Clicked!

<!DOCTYPE html>
<html>
<head>
<title>Java Script</title>
</head>
<body>

<p onclick="this.innerHTML='Clicked!'">Let's change it - click.</p>
</body>
</html>

עוד דוגמה ל-Event

נגדיר פונקציה ב JS קובץ:

function funChange() {
document.getElementById("testID").innerHTML = "Added";
}

ואז בלחיצה על הכפתור יתאסף הטקסט Added לתג testID

*בעזרת תג button מוצג כפתור

<!DOCTYPE html>
<html>
<head>
<title>Java Script</title>
<script type="text/javascript" src="MyJavaScript.js"></script>
</head>
<body>


<button onclick="funChange()">Let's change it - click</button>

<p id="testID"></p>


</body>
</html>

זאת אומרת מקובץ HTML בלחיצה על על הכפתור התרחש event
אשר קרא לפונקציה ()funChange
ובעזרת פונקציה ()funChange הוסף את הטקסט Added לתג testID

באופן דומה ניתן לתפוס EVENTS במקום onclick כגון:

onmouseover – כאשר עוברים עם העכבר מעל אלמנט.
onmouseout – משתמש עוזב אלמנט.
onload – כאשר עמוד HTML נטען.

Objects

שפת JavaScript – הפעם נלמד אובייקטים.

הגדרת אובייקט person עם מאפיינים בקובץ JS

לאובייקט person יש מספר מאפיינים:
– firstName
– lastName
– dateSignup
– fullName מקבלים מפונקציה אנונימית אשר מחזירה מחרוזת firstName+lastName

function printI(){

var person = {
firstName: "Shalom",
lastName : "Rochkind",
dateSignup : 2018,
fullName : function() {
return this.firstName + " " + this.lastName;
}

};

document.getElementById("testID").innerHTML ="First name is: " + person.firstName + ", Last Name is " + person.lastName + ", date signup " + person.dateSignup + "</br>" + person.fullName();

}

מילה שמורה this ב-JS מדגישה שיש לקחת פרמטר מאובייקט עצמו שזה firstName ו-lastName

מטרה של פונקציה אנונימית זה להחזיר משהו מסוים והיא תמיד ללא שם.
במקרה שלנו – אנחנו מחזירים this.firstName + " " + this.lastName

הדפסת מאפיינים של אובייקט PERSON ל-HTML ושינוי טקסט "Let's change it."

לכל מאפיין של האובייקט person ניגשים בצורה:
person.firstName – שזה שם פרטי
person.lastName – שם משפחה

בקובץ HTML נגדיר את התג "id="testID ונקרא לפונקציה ()printI

<!DOCTYPE html>
<html>
<head>
<title>Java Script</title>
<script type="text/javascript" src="MyJavaScript.js"></script>
</head>
<body>

<p id="testID">Let's change it.</p>
<script>printI()</script>
</body>
</html>

בנאי ב-JavaScript

קובץ JS

אותה דוגמה רק עם בנאי:
בקובץ JS הוגדר אובייקט Person עם מאפיינים ב

* firstName
* lastName
* dateSignup
* NameChange

אבל יש כאן כמה הבדלים!

בדוגמה קודמת אובייקט person היה מוגדר כך

var person = { 
firstName: "Shalom", 
lastName : "Rochkind", 
dateSignup : 2018, 
fullName : function() { 
return this.firstName + " " + this.lastName; 
}

בדוגמה הזאת אובייקט person מקבל פרמטרים (firstName,lastName,dateSignup) ולא מוגדר מראש.

בנוסף הגדרנו פונקציה אנונימית (בכחול) אשר מקבלת פרמטר newName
ואז מחליפים את firstName ב-newName

function printI(){

 function Person(firstName,lastName,dateSignup) 
 { 
 this.firstName = firstName; 
 this.lastName = lastName; 
 this.dateSignup = dateSignup; 
 this.NameChange = function (newName) 
 { 
  this.firstName = newName; 
 } 
 }

בהמשך נגדיר אובייקט person לפי Person
אשר מקבל פרמטרים:

firstName=Shalom

lastName=Rochkind

2018=dateSignup

var person = new Person("Shalom","Rochkind",2018);

ואז מדפיסים מאפיינים של אובייקט,
כאשר פניה למאפיין מתבצעת דרך נקודה
– לדוגמה: person.firstName פניה ל-firstName

בנוסף בהתחלה הגדרנו firstName=Shalom
וכזכור יש לנו פונקציה אנונימית אשר עושה שינוי לשם באובייקט person:

this.NameChange = function (newName) { 
this.firstName = newName; 
}

לכן בעזרת ("person.NameChange("Daniel אנו משנים את firstName מ-Shalom ל-Daniel
ואז מדפיסים שוב.

document.getElementById("testID").innerHTML ="First name is: " + person.firstName + ", Last Name is " + person.lastName + ", date signup " + person.dateSignup + "</br>" + person.fullName();

person.NameChange("Daniel");

document.getElementById("testIDchanged").innerHTML ="First name is: " + person.firstName + ", Last Name is " + person.lastName + ", date signup " + person.dateSignup + "</br>" + person.fullName();

לסיכום קובץ JS שלנו יהיה:

function printI(){

 function Person(firstName,lastName,dateSignup) 
 { 
 this.firstName = firstName; 
 this.lastName = lastName; 
 this.dateSignup = dateSignup; 
 this.NameChange = function (newName) 
 { 
  this.firstName = newName; 
 } 
 } 

  var person = new Person("Shalom","Rochkind",2018); 

  document.getElementById("testID").innerHTML ="First name is: " + person.firstName + ", Last Name is " + person.lastName + ", date signup " + person.dateSignup + "</br>";

 person.NameChange("Daniel"); 

document.getElementById("testIDchanged").innerHTML ="First name is: " + person.firstName + ", Last Name is " + person.lastName + ", date signup " + person.dateSignup + "</br>"; 


}

ובקובץ HTML

הערה: הוספנו עוד תג testIDchanged להדפסה של מאפיינים של האובייקט
לאחר שינוי firstName

<!DOCTYPE html>
<html>
<head>
<title>Java Script</title>
<script type="text/javascript" src="MyJavaScript.js"></script>
</head>
<body>

<p id="testID">Let's change it.</p>
<p id="testIDchanged">Let's change it.</p>
<script>printI()</script>
</body>
</html>

Parameters & functions

שפת JavaScript – הפעם נלמד פרמטרים ופונקציות.

בקובץ 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>

בקובץ JS יש לנו קריאה לפונקציה myFunc מתוך הפונקציה ()printI ושימוש במשתנה גלובלי global .

הגדרנו משתנה גלובלי: var global = 15

מה זה משתנה גלובלי?
משתנה גלובלי זה משתנה אשר זמין גם מחוץ לפונקציות וגם בתוך הפונקציות.

לדוגמה במקרה שלנו יש שתי פונקציות ()printI ו-()myFunc אז משתנה global יהיה זמין גם מחוץ לפונקציות האלו וגם בתוך הפונקציות.

הערה: יש לשים לב שמתוך קובץ HTML יש קריאה לפונקציה ()printI ומתוך פונקציה ()printI יש קריאה לפונקציה ()myFunc

var global = 15;

function printI(){
  document.write(global+"<br />");//15 
  myFunc();//now global=16
  document.write("NEW Global:"+global);//16

}

function myFunc() { 
 global++;//15++=16 
}

שימוש בפונקציות מובנות של שפת JavaScript

ראינו איך יוצרים את הפונקציות, אבל ב-JS יש גם פונקציות מוכנות לשימוש.

בקובץ 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>

קובץ JS

לדוגמה חישוב PI נעשה דרך Math.PI…

ועוד כמה דוגמאות דוגמאות של הפונקציות מוכנות.

function printI(){

var text = "PI = " + Math.PI;
text += "</br> |-7| = " + Math.abs(-7);
text += "</br> sin(0.3) = " + Math.sin(0.3);
document.write(text+"</br>");

var str = "Some straing";
document.write(str+"</br>");

var text = "Length srting " + str.length;
text += "</br> LOW: " + str.toLowerCase();
text += "</br> UP: " + str.toUpperCase();
text += "</br> FROM 1 up to 5 (included) " + str.substring(0, 4);
text += "</br>THIRD SYMVOL: " + str.charAt(2);
document.write(text+"</br>");

}

עוד דוגמה של פונקציות

כתיבה לתוכן המסמך בעזרת innerHTML ו-getElementById.

ניצור תחילה את הקובץ 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>
<p id="testID"></p>
<script>printI()</script>
</body>
</html>

בקובץ JS נגדיר פונקציה אשר מקבלת שני ערכים X ו-Y ומחזריה את המכפלה של X*Y.

בנוסף מדפיסים על המסך את התוצאה של המכפלה הזאת בקובץ HTML איפה שיש תג "testID" (הדגשתי את זה בכחול)

function printI(){

function myfun(x, y) { 
  return x * y; 
} 

document.getElementById("testID").innerHTML = myfun(5, 5);

}

Arrays

שפת JavaScript – הפעם נלמד מערכים – Array.

הגדרה והדפסה של מערך

בקובץ 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>

בקובץ JS נגדיר משתנה arr אשר מכיל 4 איברים:
0, 1, "str", false

var arr = new Array(0, 1, "str", false);

ואז מריצים לולאה כאשר בהתחלה i=0 לאחר מכן i=1
וכך עד i < arr.length

 for (var i = 0; i < arr.length; i++) 
  { 
     document.write("arr["+i+"]" +" = " + arr[i] + "<br />"); 
   }

ומכיוון שאורך המערך זה מספר איברים במערך arr נקבל
i < 4. זאת אומרת יש לנו הדפסה:

i=0 זה 0=[0]arr
ירידת שורה.

i=1 זה 1=[1]arr
ירידת שורה.

וכך עד i < 4

function printI() { 
 var arr = new Array(0, 1, "str", false);
 for (var i = 0; i < arr.length; i++) {
 document.write("arr["+i+"]" +" = " + arr[i] + "<br />");
 }
}

הגדרה והדפסה מערך דו ממדי

בקובץ 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>

בקובץ JS נגדיר שלושה משתנים מסוג מערך
arr_3, arr_2 , arr_1

בעזרת הגדרה מסוג ()var arr = new Array
זה מאפשר לנו ליצור מערך בכל אורך מראש.

הערות ב-JS:
אם צריך הערות בקוד(ללא הרצת) אז משתמשים בזה:
//
או

/* */
//one line comment

/*
COMMENT TEXT

COMMENTS
*/

אז:

function printI() { 
var arr_1 = new Array();
var arr_2 = new Array();
var arr_3 = new Array();
for (var i = 0; i < 2; i++) 
 arr_1[i] = i;//arr_1[0]=0,arr_1[1]=1
for (var i = 0; i < 3; i++) 
 arr_2[i] = i * 2;//arr_2[0]=0,arr_1[1]=2,arr_1[2]=4
for (var i = 0; i < 4; i++) 
 arr_3[i] = i * 3;//arr_3[0]=0,arr_1[1]=3,arr_1[2]=6,arr_1[3]=9

var arr = new Array(arr_1, arr_2, arr_3);

/*
arr={
{0,1},
{0,2,4},
{0,3,6,9}
}
*/
for (var i = 0; i < arr.length; i++) {
 for (var j = 0; j < arr[i].length; j++)
   document.write(arr[i][j] + " ");
document.write("<br />");
}



}

הסבר:

בעזרת שלושה לולאות כל אחד ממערכים יקבל ערכים (הערות בירוק).

for (var i = 0; i < 2; i++) 
  arr_1[i] = i;//arr_1[0]=0,arr_1[1]=1 
for (var i = 0; i < 3; i++) 
  arr_2[i] = i * 2;//arr_2[0]=0,arr_1[1]=2,arr_1[2]=4 
for (var i = 0; i < 4; i++) 
  arr_3[i] = i * 3;//arr_3[0]=0,arr_1[1]=3,arr_1[2]=6,arr_1[3]=9

לאחר מכן נגדיר עוד מערך בשם arr שכל שורה של המערך הזה יהיה מערך בפני עצמו.
למעשה:

var arr = new Array(arr_1, arr_2, arr_3);

שורה ראשונה של המערך arr זה מערך arr_1
שורה שניה של המערך arr זה מערך arr_2
שורה שלישית של המערך arr זה מערך arr_3

למעשה קבלנו מערך דו-מימדי:

//*
arr={
{0,1},
{0,2,4},
{0,3,6,9}
}
*//

ובסוף יש הדפסת מערך,
כאשר מדפיסים לפי שורה (שורה אחרי שורה).
בנוסף לאחר סיום הדפסה של כל שורה ושורה יש הדפסת ירידת שורה!

document.write("<br />");

כאשר i=0 אז מדפיסים שורה ראשונה
כאשר i=1 אז מדפיסים שורה שנייה
כאשר i=3 אז מדפיסים שורה שלישית

בנוסף (ראה צבע כחול בקוד למעטה) עוברים בכל שורה על עמודה אחרי עמודה.

// arr={arr_1,arr_2,arr_3}=>arr.length=3
for (var i = 0; i < arr.length; i++)
{ 
 for (var j = 0; j < arr[i].length; j++) 
    document.write(arr[i][j] + " "); 
document.write("<br />"); 
}

איך יודעים כמה עמודות יש בכל שורה?
תשובה לפי זה: arr[i].length:

בשורה ראשונה i=0 יש 2 עמודות =arr[0].length

{0,1}//arr[0][0]=0,arr[0][1]=1

בשורה שנייה i=1 יש 3 עמודות =arr[1].length

{0,2,4}//arr[1][0]=0,arr[1][1]=2,arr[1][2]=4

בשורה שלישית i=2 יש 4 עמודות =arr[2].length

 {0,3,6,9}//arr[2][0]=0,arr[2][1]=3,arr[2][2]=6,arr[2][3]=9

לסיכום קוד JS

function printI() { 
var arr_1 = new Array();
var arr_2 = new Array();
var arr_3 = new Array();
for (var i = 0; i < 2; i++) 
 arr_1[i] = i;//arr_1[0]=0,arr_1[1]=1
for (var i = 0; i < 3; i++) 
 arr_2[i] = i * 2;//arr_2[0]=0,arr_1[1]=2,arr_1[2]=4
for (var i = 0; i < 4; i++) 
 arr_3[i] = i * 3;//arr_3[0]=0,arr_1[1]=3,arr_1[2]=6,arr_1[3]=9

var arr = new Array(arr_1, arr_2, arr_3);

/*
arr={
{0,1},
{0,2,4},
{0,3,6,9}
}
*/
for (var i = 0; i < arr.length; i++) {
 for (var j = 0; j < arr[i].length; j++)
   document.write(arr[i][j] + " ");
document.write("<br />");
}



}

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

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

הערה: כל תג HTML כגון , או מחרוזת 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);

מבוא ל-HTML/CSS ו-JS

שפת JavaScript – הפעם נלמד איך ניתן להדפיס טבלה.

אבל לפני הכל נלמד קצת HTML וCSS
בואו נסתכל על הקוד הזה:

<!DOCTYPE html>
<html>

 <head>
 <title>Welcome to HTML</title>
 </head>

 <body>
 Shalom people!
 </body>

</html>

הסבר:

 <title>Welcome to HTML</title>

כותרת לעמוד HTML שלנו "Welcome to HTML"

כל משהו בתוך ה-body רואים בתוכן הדף

<body> 

 Shalom people! 

</body>

במקרה שלנו זה טקסט Shalom people!

הוספת טבלה

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="C:\HTML-CSS-JS/mystyle.css">

<title>Welcome to HTML</title>
</head>
<body>

 <table>

  <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>City</th>
       <th>Age</th>
 </tr>

 <tr>
     <td>Wulf</td>
     <td>Rapoport</td>
     <td>Netanya</td>
     <td>38</td>
 </tr>

 <tr>
     <td>Rachel</td>
     <td>Rochkind</td>
     <td>Jerusalem</td>
     <td>31</td>
  </tr>

 </table>


</body>
</html>

הוספת קוד CSS

table, th, td {
border: 1px solid black;
width:25%;
}

הסבר:

ב-head הוספנו קישור לקוד של ה-CSS

<head>

<link rel="stylesheet" href="C:\HTML-CSS-JS/mystyle.css">

</head>

מה זה CSS?

תשובה: CSS זה Cascading Style Sheets או במילים פשוטות דרך CSS ניתן לשלוט בעיצוב של העמוד HTML שלנו כגון (צבע הרקע, צבע של טקסט…ועוד).

אז כל בקרה על העיצוב של עמוד HTML שלנו נמצאת בקוד אשר נמצא בקובץ mystyle.css
בקישור: C:\HTML-CSS-JS/mystyle.css

בנוסף ב-Body אנחנו בנינו את הטבלה

<body>

 <table>

  <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>City</th>
       <th>Age</th>
 </tr>

 </table>


</body>

<tr></tr> כל משהו בתוך <tr> יהיה בתוך השורה.
<th></th> כל משהו בתוך <th> יהיה בתוך העמודה

מסכימים שזה לא נראה כמו טבלה?

למה?
תשובה – חסר כאן עיצוב… זה הזמן לגשת אל הקובץ CSS שלנו

<head>

<link rel="stylesheet" href="C:\HTML-CSS-JS/mystyle.css">

</head>

mystyle.css

table, th, td {
border: 1px solid black;
width:25%;
}

תגים: table, th,td יקבלו עיצוב אשר מוגדר בסוגריים.

border: 1px solid black – קו שחור ברוחב 1px מסביב לתא.

width:25% הגדרה של רוחב הטבלה.

לאחר הוספת CSS נקבל

עכשיו נוסיף עוד שתי שורות (עבור שני אנשים)

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="C:\HTML-CSS-JS/mystyle.css">

<title>Welcome to HTML</title>
</head>
<body>

 <table>

  <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>City</th>
       <th>Age</th>
 </tr>

 <tr>
     <td>Wulf</td>
     <td>Rapoport</td>
     <td>Netanya</td>
     <td>38</td>
 </tr>

 <tr>
     <td>Rachel</td>
     <td>Rochkind</td>
     <td>Jerusalem</td>
     <td>31</td>
  </tr>

 </table>


</body>
</html>

הדפסת טבלה בעזרת JS

לצורך הרצת JavaScript צריך קודם כל להתקין שרת וירטואלי XAMPP

לאחר התקנת XAMPP יש ליצור תיקיה (תת תיקיה בתוך תיקיה htdocs)

בתוך תיקיה יש ליצור שלושה קבצים:

index.html – עמוד HTML שלנו
mystyle.css – עיצוב של עמוד HTML
MyJavaScript – קובץ JS

עכשיו יש להעפיל Apache וגם אפשר MySQL

נחזור לקובץ HTML , כאן בכחול יש קריאה לקובץ JS אשר ידפיס את הטבלה.

מכיוון שהדפסה באה מקובץ MyJavaScript.js אז לא צריך יותר את HTML קוד בתוך תג body

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Java Script</title>
<link rel="stylesheet" href="mystyle.css">
<script type="text/javascript" src="MyJavaScript.js"></script>
</head>

<body>
</body>
</html>

MyJavaScript.js:

הדפסת טבלה, באופן דומה כמו בHTML אלא שכאן משתמשים לצורך הדפסה ב:
document.write

document.write("<table><tr><th>Firstname</th><th>Lastname</th><th>City</th><th>Age</th></tr><tr><td>Wulf</td><td>Rapoport</td><td>Netanya</td><td>38</td></tr><tr><td>Rachel</td><td>Rochkind</td><td>Jerusalem</td><td>31</td></tr></table>");

הסבר:

בעזרת document.write ניתן להדפיס מילים ואפילו קוד HTML כמו שאנחנו עשינו עם הטבלה (אותו קוד HTML של הטבלה)

לדוגמה
document.write("Hi JavaScript");//Hi JavaScript

ואז יש לגשת בקישור http://localhost/Your-folder ונקבל:

קטגוריה: Javascript

שילוב של CSS ו-JS

הערות ל-CSS ו-JS כותבים כך **/* COMMENT */**

שינוי HTML Elements בעזרת JavaScript

כל כבוד לכם!!!

DOM – HTML

Finding HTML Elements

מציאת אלמנט לפי id.

מציאת אלמנט לפי Tag Name.

מציאת אלמנט לפי Class Name

Events

שינוי טקסט בקליק

עוד דוגמה ל-Event

Objects

בנאי ב-JavaScript

Parameters & functions

שימוש בפונקציות מובנות של שפת JavaScript

עוד דוגמה של פונקציות

Arrays

הגדרה והדפסה של מערך

הגדרה והדפסה מערך דו ממדי

If-for-switch

if

switch

for

do-while

מבוא ל-HTML/CSS ו-JS

הוספת טבלה

הדפסת טבלה בעזרת JS

הערות ל-CSS ו-JS כותבים כך /* COMMENT */

שינוי HTML Elements בעזרת JavaScript

כל כבוד לכם!!!

Finding HTML Elements

מציאת אלמנט לפי id.

מציאת אלמנט לפי Tag Name.

מציאת אלמנט לפי Class Name

שינוי טקסט בקליק

עוד דוגמה ל-Event

בנאי ב-JavaScript

שימוש בפונקציות מובנות של שפת JavaScript

עוד דוגמה של פונקציות

הגדרה והדפסה של מערך

הגדרה והדפסה מערך דו ממדי

if

switch

for

do-while

הוספת טבלה

הדפסת טבלה בעזרת JS

הערות ל-CSS ו-JS כותבים כך **/* COMMENT */**