צור קשר
מאמרים אחרונים
מהי שפת ג'אווה סקריפט
כאשר מציגים דף אינטרנט בדפדפן, באים לעזרתנו 3 חלקים: HTML, CSS, Java Script.
שלושת החלקים האלו משתלבים זה בזה, כאשר כל חלק אחראי על דבר אחר ומשלים את הפעילות של החלקים האחרים.
HTML - זוהי שפת תגיות אשר מפרטת את האלמנטים השונים על המסך (תפריט, כפתור, כותרת, תמונה וכו').
CSS - אלו הגדרות עיצוב שמסבירות איך לסגנן כל אלמנט שב-HTML (רקע אדום, פינות עגולות, פונט David וכו').
JavaScript (או בקיצור JS) - שפת צד-לקוח, המאפשרת פעולות מתקדמות (שימוש במערכים, לולאות, התניות וכו').
אם אין לכם עדין את הידע הבסיסי ב-HTML וב-CSS, מומלץ להתחיל מהמדריך ל-HTML5 כאן לפני שמתקדמים לג'אווה סקריפט.
יש לשים לב: לא לבלבל בין שפת ג'אווה סקריפט לשפת ג'אווה. הקשר היחיד בין שתיהן הוא דמיון בשם. התחביר של שתי השפות שונה לחלוטין והן משמשות למטרות שונות לחלוטין זו מזו.
נראה דוגמה לקטע קוד שמשלב את 3 האלמנטים יחד:
<!DOCTYPE html>
<html>
<head>
<style>
body{direction:ltr;}
h1{color:#ff0000;font-size:32px;font-weight:bold;text-align:center;}
#mul{color:#0000ff;font-size:20px;text-align:center;}
#mul div{display:inline-block;width:40px;}
</style>
<script>
function mulTable() {
for (var i=1; i<=10; i++) {
for (var j=1; j<=10; j++) {
document.write("<div>" + (i*j) + "</div>");
}
document.write("<br />");
}
}
</script>
</head>
<body>
<h1>Multiplication table</h1>
<div id="mul">
<script>mulTable();</script>
</div>
</body>
</html>
ראשית, נסביר את מבנה הקוד שהבאנו בדוגמה:
המעטפת של הקוד זה HTML עם תגיות html, head, body כרגיל.
בחלק של ה-head, שילבנו תגית style ובתוכה הגדרות עיצוב (CSS) וכן תגית script ובתוכה הגדרות קוד ג'אווה סקריפט.
גם בחלק של ה-body שילבנו תגית script עם קוד ג'אווה סקריפט.
ההבדל הוא שבחלק של ה-head ישנן הגדרות בלבד (לרבות איתחול משתנים, הכרזה על פונקציות וכו') ובחלק ה-body נמצא החלק הביצועי שמפעיל את הדברים.
שנית, נסביר מה הקוד עושה:
קוד זה, מציג על המסך את לוח הכפל.
בחלק של ה-head מוגדרת הפונקציה mulTable בג'אווה סקריפט אשר מחשבת ומדפיסה על המסך את לוח הכפל.
בחלק של ה-body מוצגים על המסך כותרת h1, וכן תגית div עם מאפיין id בשם mul שבתוכה מפעילים את הפונקציה mulTable.
כדי להפעיל את הקוד שהצגנו, אפשר פשוט להעתיקו לקובץ בשם mul.html ולפתוח אותו בדפדפן (הקלקה כפולה על הקובץ, או גרירה שלו על האייקון של הדפדפן).
שפת צד שרת מול שפת צד לקוח
כאשר אנו נכנסים לעמוד כלשהו באינטרנט, יש 2 מחשבים שמשתפים פעולה כדי להציג לנו את אותו העמוד: המחשב שבו מופעל הדפדפן (כלומר המחשב שלכם) והמחשב שבו נמצא הקוד (כלומר שרת האחסון שמכונה גם "ענן").
במילים אחרות, יש 2 צדדים לכל עמוד אינטרנטי: צד הלקוח (מופעל על ידי הדפדפן) וצד השרת (מופעל על ידי תוכנת השרת, כגון APACHE).
הקוד שרשמנו (שכולל את כל 3 החלקים: HTML, CSS, JS) רץ כולו בצד הלקוח. למעשה, כל קוד שכתוב ב-HTML, ב-CSS וב-JS רץ תמיד אך ורק בצד הלקוח.
התפקיד של השרת הוא לחולל את הקוד. כלומר, לעשות איזשהו עיבוד (נניח, משיכת הנתונים מבסיס הנתונים) ולייצר לנו את העמוד האינטרנטי (שכולל HTML, CSS, JS) שאותו יפעיל הדפדפן.
לדוגמה: קוד שכתוב בשפת PHP שהיא שפת צד-שרת, יכול לבצע משיכה של תוכן של עמוד מסויים מבסיס הנתונים שעל השרת ולחולל קוד HTML+CSS+JS שמציג את העמוד הזה. הקוד שנוצר בצד השרת נשלח לדפדפן ושם הוא מופעל.
איך להפעיל קוד ג'אווה סקריפט
כדי להפעיל קוד שאתם רושמים, יש מספר שיטות:
שיטה אחת, היא לעטוף את קוד ה-JS ב-HTML (כפי שעשינו בדוגמה לעיל), לשמור כקובץ ואז להפעילו בדפדפן. את קובץ ה-HTML אפשר להפעיל ישירות בדפדפן (כפי שהפעלנו את הקובץ mul.html), או שאפשר גם להעלותו לשרת אחסון ואז לגשת אליו באמצעות כתובת https אינטרנטית.
שיטה שניה, היא להפעיל את קוד ה-JS ישירות מה-console של הדפדפן. ה-console הוא סוג של טרמינל שבו ניתן להכניס פקודות JS והדפדפן יבצע אותן.
להפעלת ה-console:
1. פותחים את הדפדפן, כגון כרום, פיירפוקס, Edge
2. פותחים עמוד ריק בלשונית חדשה (הקלקה על סימן ה + בשורת הלשוניות שבראש העמוד בדפדפן)
3. מקליקים עם המקש הימני של העכבר על העמוד הריק
4. בתפריט שנפתח בוחרים את האפשרות האחרונה "Inspect" או "בדוק מרכיב" (בדפדפנים שונים יתכן כיתוב שונה)
5. בחלון שיפתח לנו (ככל הנראה יוצמד לתחתית של הדפדפן, אבל אפשר להפרידו משם באמצעות גרור-שחרר) נבחר בתפריט באפשרות console
6. לבדיקה שאנו במקום הנכון, ננסה להפעיל את הפקודה alert("Hello World") ונראה אם תקפוץ לנו ההודעה על המסך
כשנרצה לבדוק קוד שאנו כותבים, נוכל להשתמש בפונקציה console.log על מנת להדפיס לתוך ה-קונסול.
דוגמה להדפסה ל-console:
<script>
var n = 2+3;
console.log(n);
</script>בדוגמה זו, הגדרנו את הערך של n שיהיה שווה לחישוב 2+3. כדי לוודא שאכן הערך של n שווה למה שאנו מצפים (הערך 5), הדפסנו אותו ב-console.
