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

מתוך ויקיספר, אוסף הספרים והמדריכים החופשי
קפיצה לניווט קפיצה לחיפוש
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

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


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