JavaScript/גרסה להדפסה

JavaScript

התחלת העבודה מושגי יסוד שילוב במסמך HTML שורות קוד ראשונות הערות משתנים מחרוזת טקסט מספר הוראת תנאי התנאי if תנאי מורכב if-else הוראת switch אופרטורים תרגילים לחזרה אובייקטים אובייקט פונקציה בנאית וקלאסים מערכים מערך חד מימדי חיפוש ומיונים לולאות לולאת for לולאת while לולאת do-while לולאות מקוננות שימוש בפקודות break ו-continue זהירות מלולאה אין סופית פונקציות פונקציה שאינה מחזירה ערך פונקציה שמחזירה ערך פונקציה אנונימית וחץ אירועים אובייקט המסמך מבוא אובייקט המסמך אובייקט החלון אובייקט הכתובת אוביקטים נוספים אובייקט תאריך אובייקט Math JavaScript למתקדמים אסינכרוני - קולבק ופרומיס עבודה עם טפסים תסריטים עוגיות מערכים אסוציאטיבים ספריות מבוא לספריות מבוא לספריית Ext JS בינה מלאכותית TensorFlow.js גרסה להדפסה

JavaScript תהפוך את אתרכם לדינמי יותר. JavaScript היא שפת תיכנות צד-לקוח. במדריך זה תלמדו את השפה. דרוש ידע HTML קודם.

שפת JavaScript נמצאת בשימוש במיליארדי דפים ברשת התורמת לשיפור העיצוב, לתקיפות טפסים, זיהוי דפדפנים, יצירת אנימציות וכו'

JavaScript קלה ללמידה במדריך זה. המדריך מלווה בהסברים טובים ודוגמאות מרובות העוזרות בהבנת השפה. עיינו בתוכן הנמצא בצד שמאלי של הדף לניווט.

מבוא

JavaScript היא שפת תסריט. היא ידועה בעיקר כשפה המוטבעת בדפי HTML על מנת להציג דפים דינמיים, שמשולבת בהם תוכנה. בניגוד לשפות תיכנות שמתבצעים במחשב השרת, קוד ה-JavaScript שמשולב בדף HTML מבוצע על ידי הדפדפן ולכן הוא נקרא שפת תכנות בצד לקוח (Clint Side programming) ג'אווה-סקריפט נוחה מאוד לעבודה עם ה-DOM ולתפעול DHTML.

היסטריה

השפה נוצרה על־ידי חברת נטסקייפ בשנת 1995, ויושמה לראשונה בדפדפן נטסקייפ 2.0. הגרסה הייתה JavaScript 1.0. בנוסף לכתיבת תסריטים בצד הלקוח (בדפדפן) מאפשרת JavaScript כתיבת תסריטים גם בצד השרת, לתפעול בשרת אינטרנט. מבחינת שפה, וגם מבחינת התחביר שלה, מזכירה JavaScript את שפת ActionScript שמיוחדת לפלאש.

חברת מיקרוסופט יצאה בשפה מתחרה, VBScript, להפעלה בדפדפן, אך לא הצליחה ביעד זה (היא הצליחה יותר בשימושים אחרים של השפה, כולל כתיבת תסריטים בצד השרת - ASP). בנוסף יצאה מיקרוסופט עם גרסה משלה של שפת JavaScript, והיא קרויה JScript. דבר זה גורם עד היום לבעיות רבות בקרב מפתחי האינטרנט, בין אם בגלל מפתחים המעלימים עין מהעובדה שהם מתכנתים ב־JScript בלבד, ומתעלמים מדפדפנים אחרים המפענחים את JavaScript הרגילה – ובין בגלל מפתחי אתרים הסובלים לשווא בהתגברות על חוסר התמיכה של הדפדפן אינטרנט אקספלורר של מיקרוסופט בחלקים תיקניים מ־JavaScript.

מידע נוסף

JavaScript הוא תכנות מונחה עצמים, על כך תקראו כשתלמדו במדריך זה על האובייקטים.

שילוב במסמך HTML

על מנת לשלב Javascript בדף ה-HTML שלנו אנחנו צריכים להשתמש באלמנט script של HTML.

• ניתן לכתוב קוד JavaScript בתוך מסמך HTML, תהליך זה בעייתי לדפדפני ישנים. ולכן אם יש לכם דפדפן חדש (החל מ-Internet Explorer 5 או Firefox 2 או גרסאות חדשות של דפדפנים אחרים) אתם יכולים לכתוב פשוט (בזמן הלמידה):

<script language="javascript">
   ...קוד javascript
</script>

תעברו לפרק הבא ותנסו...

• ניתן להפריד את קוד ה-JavaScript מקוד HTML:

לכתוב את הקוד הבא בין תגי head או body במסמך HTML.

<script language="javascript" src="javascript_file.js"></script>

חובה להשתמש באלמנט סוגר, למרות שאין לאלמנט תוכן. ולפתוח דף חדש בשם: משהו.js (סיומת נקודה-js לקובץ, כמו שלעמוד HTML יש סיומת נקודה-html או נקודה-htm) בדוגמא זאת תפתחו דף חדש ולשמור בשם javascript_file.js ולכתוב בו.

   ...קוד javascript

הערה ליודעי CSS: הפרדה זו דומה להפרדת עיצוב מתוכן בעזרת אלמנט link שקורא ל-CSS, כך נוכל להשתמש באלמנט script על מנת לקרוא לקובץ Javascript, בלי שב-HTML שלנו תהיה שורת קוד Javascript אחת.

תמיכה בדפדפנים ישנים

ניתן לשלב Javascript בתוך קובץ ה-HTML עצמו, אך אז אנו נתקלים במספר בעיות.

<script language="javascript">
   ...קוד javascript
</script>

דפדפנים ישנים, עלולים לא להכיר את האלמנט script ולכן עלינו להסתיר את תוכן הקוד בהערות HTML

<script language="javascript">
<!--
   ...קוד javascript
-->
</script>

כאן לא תמו צרותינו. זוכרים שב-HTML אסור להשתמש במרכאות (") רגילות או כפולות, אלא להשתמש ביישויות בלבד? זה נכון גם כאן.

לא נכון

<script language="javascript">
<!--
  alert("Message")
-->
</script>

נכון

<script language="javascript">
<!--
  alert(&quot;Message&quot;)
-->
</script>

די מסורבל לא? זה בגלל שהתוכן של אלמנט script מוגדר כ-PCDATA (Parsed Content Data). ה-Parsed רוצה לומר שהוא מפרש את התוכן שבתוך ה-script קודם כל כ-HTML ורק אחר-כך כ-Javascript.

על מנת להימנע מזה, ניתן לומר לדפדפן שלא יפרש את התוכן כ-PCDATA אלא כ-CDATA. ב-CDATA מרכאות וסימני גדול קטן >< אינם מפוענחים כ-HTML.

נכון

<script language="javascript">
<!--
<![CDATA[
  alert("Message")
>]]
-->
</script>

כעת ניתן לכתוב רגיל. די מסובך לא? עדיף לשים את הקוד בקובץ אחר ולהיפטר מכל הסיבוך הזה...

שורות קוד ראשונות

בדרך כלל, כשמתחילים ללמוד שפת תיכנות, נוהגים להדפיס למסך המחשב: "שלום עולם!" (Hello World!).

שלום עולם!

קוד:

<script language="javascript">
document.write("Hello World")
</script>

תוצאה:

Hello World

הערות

משתמשים בהערות על מנת להקל על הבנת הקוד. בעת סריקת קוד JavaScript ע"י הדפדפן, הדפדפן מדלג על ההערות, והם לא מופיעים בפלט.

תחביר

• ניתן לכתוב הערה אחרי // באותה שורה.
• בין */ לבין /* ניתן לכתוב הערה. הערה מסוג זה ניתן לכתוב יותר משורה אחת.

דוגמאות

דוגמא א'

קוד:

<script language="javascript">
document.write("Hello World")// הדפסת שלום עולם
</script>

תוצאה: (טקסט הנכתב לאחר שני קווים נטויים לא מופיע)

Hello World

דוגמא ב'

קוד:

<script language="javascript">
/*
document.write("בדיקה: האם טקסט זה יופיע?")
*/
</script>

תוצאה: (לא מופיע כלום משום שכתבנו הערה)

משתנים

משתנה הוא מעין "קופסה" שמגדירים לה ערך וניתן להשתמש בה בעת הצורך.
קיימים ארבעה סוגי משתנים:

• מחרוזת טקסט (String)
• ערך בוליאני (true או false)
• ערך מספרי
• אפס (Null)

תחביר

• שם המשתנה חייב להתחיל באות לועזית או קו תחתי.
• שאר התווים, יכולים להיות אותיות לועזיות, מספרים ו/או קו תחתי בלבד.
• JavaScript מבחינה בין אותיות גדולות וקטנות. משתנה Car (עם אות גדולה) שונה ממשתנה car (אם אות קטנה). ולכן, אם למשל, תצהירו על משתנה Number ותתנו לו ערך מסוים, ותדפיסו את המשתנה number. לא יקרה דבר.

דוגמאות

דוגמא א'

קוד:

<script language="javascript">
var full_name = "Leonid Gilyadov" //full_name מצהיר על משתנה 
var person_age = 15
var person_married=false

document.write("My name is " + full_name + ". And I'm " + person_age
 + ". <br />and answer to question: Are you married? is " + person_married)
</script>

תוצאה:

My name is Leonid Gilyadov. And I'm 15 yers old.
and answer to question: Are you married? is false. 

דוגמא ב'

קוד:

<script language="javascript">
var a=1
var b=2

document.write(a+b)
</script>

תוצאה:

3

אופרטורים

אופרטורים הם סימנים אשר מקשרים משתנים או ערכים כדי לבצע פעולות.

אופרטור אריתמטי

הסבר

אופרטור אריתמטי הוא תו המסמן פעולה חשבונית.

אופרטור	תיאור	דוגמא	תוצאה
+	חיבור	a=1 b=2 a+b	3
-	חיסור	a=5 b=1 a-b	4
*	כפל	a=4 b=5 a*b	20
/	חילוק	a=50 b=5 a/b	10
%	מודולס (מחזיר שארית)	10%8	2
++	גידול	a=3 a++	4
--	הפחתה	a=3 a--	2

דוגמא

קוד:

<script language="javascript">
var a=3
var b=4
document.write(a + "ועוד" + b + "שווה" a+b + ".")// חיבור משתנים
</script>

תוצאה: (התוצאה מימין)

3 ועוד 4 שווה 7.

קיצורים

הסבר

אופרטור	דוגמא	זה כמו..
=+	x+=y	x=x+y
=-	x=-y	x=x-y
=*	x*=y	x=x*y
=/	x/=y	x=x/y
=%	x%=y	x=x%y

דוגמא

קוד:

<script language="javascript">
var x=2
var y=4 
x+=y // חיבור משתנים
document.write(x)// x הדפסת
</script>

תוצאה: (התוצאה מימין)

6

אופרטורי השוואה

הסבר

אופרטור	הסבר	דוגמא
==	שווה ל-	3==4 מחזיר false (שקר)
===	שווה ל- (שיוויון ערכי המשתנים וגם סוגי המשתנים)	a=1 "1"=b a===b מחזיר false (שקר) כי המשתנה הראשון הוא משתנה מספרי והשני הוא משתנה מחרוזת.
=!	לא שווה ל-	4=!3 מחזיר true (אמת)
<	גדול מ-	3<3 מחזיר false (שקר)
>	קטן מ-	3>2 מחזיר true (אמת)
=<	גדול או שווה ל-	7=<3 מחזיר false (שקר)
=>	קטן או שווה ל-	4=>7 מחזיר true (אמת)

דוגמא

קוד:

<script language="javascript">
var x=2
var y=4 
if(x<y) // אם התנאי קיים אז הפקודה שנמצאת בתוך הסוגריים המסולסלות תצא לפועל.
{
document.write("x < y")// הדפסת איקס קטן מ-וואי
}
</script>

תוצאה:

x < y

לולאות

אנו משתמשים בלולאות כשאנו רוצים שיבוצע קטע קוד מסוים מספר פעמים.

הלולאה while

תחביר והסבר

<script language="javascript">
while(condition)
{
command 
}
</script>

כל עוד מתקיים התנאי (condition), הדפדפן ידפיס את את הפקודה (command) הנמצאת בתוך הסוגריים המסולסלות. בדרך כלל, שמים אופרטור השוואה לתוך הסוגריים הרגילות המייצגות את התנאי (condition). ולתוך הסוגריים המסולסלות כותבים פקודה (command) כמו למשל, ("התאי מתקבל")document.write

בכל אופן, תראו את הדוגמאות, ואז תבינו טוב יותר במה מדובר.

דוגמא

קוד

<script language="javascript">
var a=1
while(a>=5) / כל עוד איי גדול או שווה ל-5 התנאי הנמצא בין הסוגריים המסולסלות יתקיים.
{
document.write("המספר כעת הוא" + a)
a++ / איי ועוד אחת
}
</script>

תוצאה

המספר כעת הוא 0
המספר כעת הוא 1
המספר כעת הוא 2
המספר כעת הוא 3
המספר כעת הוא 4
המספר כעת הוא 5

הלולאה do-while

קוד

<script type="text/javascript">
var i=0
do 
{
document.write("The number is " + i)
document.write("<br />")
i=i+1
}
while (i<3)
</script>

תוצאה

The number is 0
The number is 1
The number is 2

הלולאה for

קוד

<script language="javascript">
var i=0
for (i=0;i<=4;i++)
{
document.write("המספר הוא " + i)
document.write("<br />")
}
</script>

הסבר

i שווה ל-0, כל עוד i גדול או שווה ל-4, i יגדל ב-1.

תוצאה

המספר הוא 0
המספר הוא 1
המספר הוא 2
המספר הוא 3
המספר הוא 4

הפקודה break

קוד

<script language="javascript">
var i=0
for (i=0;i<=4;i++)
{
document.write("המספר הוא " + i)
document.write("<br />")
if (i==2){break}
}
</script>

הסבר

i שווה ל-0, כל עוד i גדול או שווה ל-4, i יגדל ב-1.
אם i שווה ל-2 אז הספירה תפסק.

תוצאה

המספר הוא 0
המספר הוא 1
המספר הוא 2

הפקודה continue

קוד

<script language="javascript">
var i=0
for (i=0;i<=4;i++)
{
document.write("המספר הוא " + i)
document.write("<br />")
if (i==2){continue}
}
</script>

הסבר

i שווה ל-0, כל עוד i גדול או שווה ל-4, i יגדל ב-1.
אם i שווה ל-2 אז הספירה תמשך אך, תדלג על 2.

תוצאה

המספר הוא 0
המספר הוא 1
המספר הוא 3
המספר הוא 4

התניה

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

דוגמאות

דוגמא א'

קוד

<script language="javascript">
var a=1 // הצהרה על משתנה איי בעל ערך מספרי 1

if(a<2) // בודקים אם איי קטן מ-2
{
 document.write("איי קטן משתיים")
}
</script>

תוצאה

איי קטן משתיים

דוגמא ב'

קוד

<script language="javascript">
if(document.bgColor=="white") //בדיקה אם הרקע בצבע לבן
{
document.write("הרקע בצבע לבן") 
}
</script>

תוצאה

הרקע בצבע לבן

else if

קוד

<script language="javascript">
var a=1
if(a==2) //בדיקה אם הרקע בצבע לבן
{
document.write("a שווה 2") 
}
else
{
document.write("a לא שווה 2") 
}
</script>

הסבר אם a שווה 2:

• תדפיס "a שווה 2"

אחרת (אם התנאי הראשון לא מתקבל):

• תדפיס "a לא שווה 2"

תוצאה

a לא שווה 2

משפט switch

תחביר והסבר

(הערה:שימו לב על הקוד הנמצא בצד שמאל)

switch(n) {
case 1:

 כאן נכתבת הפקודה שתתבצע אם n יהיה שווה 1

break
case 2:

 כאן נכתבת הפקודה שתתבצע אם n יהיה שווה 2

break
default:

 כאן נכתבת הפקודה שתתבצע אם n יהיה לא שווה ל1 ול2 כלומר לתנאים הקודמים.

}

פונקציות

פונקציה היא קטע קוד, שניתן לקרוא לו כשצריך והוא מבצע פעולה מסויימת. פונקציות יכולות לקבל פרמטרים, ולהחזיר ערכים.

מבוא לפוקציות

דוגמא

ניתן להגדיר פונקציות ב-JavaScript כמו בכל שפות התכנות. עושים זאת על-ידי שימוש במילה השמורה function.

function hello()
{
  alert("Hello!")
}

hello();

הסבר

• function - מילה שמורה להגדרת הפונקציה.
• hello - שם הפונקציה
• () - סוגריים - נשתמש בהם אחר-כך כדי להעביר פרמטרים, אך חובה להשתמש בהם גם אם אין פרמטרים.
• {} - סוגריים מסולסלים - מציינים את תחילת וסוף הפונקציה וחובה להשתמש בהם
• alert("Hello!") - קוד ה-Javascript שהפונקציה מבצעת.
• hello(); - קריאה לפונקציה.

פונקציה נהפכת בעצם לפקודה נוספת, ואנו יכולים להשתמש בה על ידי קריאה , כמו בשורה האחרונה בדוגמה.

פונקציות עם פרמטרים

תחביר והסבר

על מנת להגדיר פרמטרים לפונקציה, נכתוב את שמותיהם, מופרדים בפסיקים בתוך הסוגריים.

function mymessages(message1,message2)
{
  alert(message1);
  alert(message2);
}

הפונקציה הזו מקבלת שני פרמטרים: message1 ו- message2 ומציגה אותם למשתמש בזה אחר זה.

דוגמא

ניתן גם להורות לפונקציה להחזיר ערך.

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

function multiply(x,y)
{
  return x * y;
}
a = multiply(3,5); //15
b = multiply(6,-2); //-12
c = multiply(a,b); //-180
alert (c); // Alerts -180

הפונקציה מחזירה את המכפלה של שני המשתנים.

(תתקדמו לשיעור הבא ותבינו טוב יותר את הפונקציה!)