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

JavaScript

התחלת העבודה

הוראת תנאי

אובייקטים

מערכים

לולאות

פונקציות

אובייקט המסמך

אוביקטים נוספים

JavaScript למתקדמים

ספריות



גרסה להדפסה

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

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


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