משתמש:דוד ל.ט./JavaScript
שגיאות פרמטריות בתבנית:שפת תכנות
פרמטרים ריקים [ שנה, אתר ] לא מופיעים בהגדרת התבנית
| פרדיגמות | מרובת פרדיגמות: תכנות מונחה-אירועים, פונקציונלי, ואימפרטיבי (כולל מונחה־עצמים, ומונחה דגמי-אב) |
|---|---|
| מפתח | נטסקייפ |
| הושפעה על ידי | Java, Awk, Perl, Self |
| השפיעה על | jscript |
| סיומת | .js |
JavaScript (בעברית: ג'אווה סקריפט) היא שפת תכנות עילית מפורשת. היא מאופיינת גם כדינמית, בעלת טיפוסיות חלשה, מונחה-דגמי אב (Prototype), ומרובת פרדיגמות.
JavaScript היא אחת משלושת טכנולוגיות הליבה של מארג האינטרנט, לצידם של הHTML והCSS. היא מאפשרת לדפי האינטרנט להיות אינטראקטיביים ולכן היא חלק בסיסי ביישום רשת. הרוב המוחלט של אתרי האינטרנט משלבים שפה זו, וכל דפדפני האינטרנט הגדולים כוללים מנוע הרצה של JavaScript משלהם, שמפרש את הקוד ומבצע אותו.
כשפה מרובת פרדיגמות, JavaScript תומכת בסגנון תכנות מונחה-אירועים, פונקציונלי, ואימפרטיבי (כולל מונחה־עצמים, ומונחה דגמי-אב). היא כוללת API לטיפול בטקסט, מערכים, תאריכים, ביטויים רגולריים, ועבודה בסיסית עם DOM, אבל לא כולל ממשק לפעולות קלט/פלט עם התקני רשת, אחסון, או גרפיקה, והיא מסתמכת על הסביבה בה היא מוטבעת (כמו הדפדפן למשל) כדי לבקש פעולות אלו.
אף שJavaScript בראשית דרכה הייתה כמיושמת רק בדפדפנים עבור צד-לקוח של אתרי אינטרנט, הרי שכיום היא מוטמעת במגוון גדול של יישומיי תוכנה, החל מתכונות כדוגמת שרת HTTP, ומסד נתונים, וכלה בתוכנות שולחניות כמו מעבדי תמלילים ומסמכים, וכסביבת ריצה היא גם משמשת לכתיבת אפליקציות שולחניות ואפליקציות מובייל.
למרות קווי הדמיון הנראים בין JavaScript לבין Java, לרבות השם, שתי השפות נבדלות מאוד זו מזו בתכנון. הקשר היחידי שיש ביניהם הוא שJavaScript הושפעה תחבירית מJava.
היסטוריה
השפה פותחה על ידי חברת נטסקייפ בשנת 1995, ויושמה לראשונה בדפדפן נטסקייפ 2.0. הגרסה הייתה JavaScript 1.0. שמה המקורי היה LiveScript, והוא שונה ל-JavaScript מטעמים של פופולריות וניסיון לעניין את חברת סאן. בנוסף לכתיבת תסריטים בצד הלקוח (בדפדפן), מאפשרת JavaScript כתיבת תסריטים גם בצד השרת, לתפעול בשרת אינטרנט. השפה מזכירה את שפת ActionScript שמיוחדת לפלאש. קיימת גרסה תקנית של השפה הקרויה ECMAScript.
חברת מיקרוסופט פיתחה שפה מתחרה להפעלה בדפדפן בשם VBScript, אך לא הצליחה ביעד זה (היא הצליחה יותר בשימושים אחרים של השפה, כולל כתיבת תסריטים בצד השרת - ASP). בנוסף יצאה מיקרוסופט עם גרסה משלה של שפת JavaScript, והיא קרויה JScript. דבר זה גורם עד היום לבעיות רבות בקרב מפתחי האינטרנט, בין אם בגלל מפתחים המעלימים עין מהעובדה שהם מתכנתים ב־JScript בלבד, ומתעלמים מדפדפנים אחרים המפענחים את JavaScript הרגילה – ובין בגלל מפתחי אתרים הנאלצים להתמודד עם חוסר התמיכה של הדפדפן אינטרנט אקספלורר של מיקרוסופט בחלקים תקניים מ־JavaScript.
בדפי אינטרנט
סביבת הריצה הוותיקה והנפוצה ביותר של JavaScript היא ללא ספק דפדפני האינטרנט.
ניתן לכלול בדף הHTML את קוד הJavaScript עצמו או קישור לדף אחר שמכיל אותו, שני הדרכים נעשות ע"י התגית script. הדפדפן קורא את קוד הJavaScript בעזרת מנוע JavaScript (נקרא גם "מפרש JavaScript") ומבצע אותו. רוב הדפדפנים חושפים אובייקטים המייצגים את אלמנטי הדף וגם אובייקטים בעזרתם ניתן לבצע בקשות אינטרנט, אובייקטים אלה נקראים Web Api.
שימושים נפוצים
ראה גם Dynamic HTML וAJAX
הרוב המוחלט של דפי האינטרנט עושים שימוש בשפת JavaScript. השימוש הנפוץ בJavaScript בדפי אינטרנט בא להוסיף יכולת דינמיות לדפים. את דפי האינטרנט כותבים בתחביר HTML שמאפשר הצגת תוכן מעוצב, אך ללא כל התנהגות (תגובה לאירועים למשל כמו פעולות המשתמש). JavaScript מוסיפה יכולת התנהגות ותגובה, ומעשירה את הHTML להיות דינמי (נקרא גם Dynamic HTML).
דוגמאות שימוש בJavaScript:
- טעינת תוכן חדש לדף או שליחת תוכן לשרת באמצעות AJAX ללא צורך בטעינת הדף (למשל בפורום או ברשת חברתית תיתכן שליחת הודעה חדש ללא מעבר לדף אחר או טעינת אותו דף שוב).
- הנפשת אלמנטים בדף, הוספתם והסרת מהדף, שינוי גודלם והזזתם וכדומה.
- תוכן אינטראקטיבי: משחק, השמעת אודיו ווידאו.
- אימות ערכי קלט בטפסי אינטרנט לוודא שהם קבילים לפני שליחתם לשרת
- ליקוט מידע על פעילות המשתמש והרגלי הגלישה שלו ושליחתו (בדרך כלל לאתרים אחרים). דפי אינטרנט עושים זאת לעיתים קרובות לניתוח הגלישה באתר, לשם התאמת פרסומות מותאמות אישית ועוד.
בגלל שקוד הJavaScript מתבצע בדפדפן - שפועל במחשב המשתמש (ולא על השרת המרוחק שם מאוחסן האתר), הדפדפן יכול להגיב מהר לפעולות המשתמש, ובכך לגרום לאתר או לאפליקציה להיות חיים יותר. בנוסף, לJavaScript יש יכולות בלעדיות שלא יכולות להיות מושגות ע"י טפסי אינטרנט רגילים, כמו שליטה על אירועי הקשות מקלדת. אפליקציות כמו Gmail מנצלות תכונות אלו: רוב הלוגיקה של היישום כתובה בJavaScript ורץ בדפדפן, ששולח בעת הצורך בקשות לשרת. המגמה הנרחבת של שימוש בAJAX מנצלת את הכח הזה.
דוגמאות
דוגמת דף HTML מינמלי עם קוד JavaScript שמוסיף התנהגות לכפתור (בעת הלחיצה על הכפתור תופיע הודעה ולאחר מכן יתווסף אלמנט למסמך).
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<button id="hellobutton">Hello</button>
<script>
document.getElementById('hellobutton').onclick = function() {
alert('Hello world!'); // Show a dialog
var myTextNode = document.createTextNode('Some new words.');
document.body.appendChild(myTextNode); // Append "Some new words" to the page
};
</script>
</body>
</html>
document וalert הם חברים באובייקט ששמו window שהוא מהWeb Apis שהדפדפן חושף לשפה.
היבטי אבטחה
JavaScript יחד עם הDOM מבוצעים במחשב הלקוח ובכך מספקים פוטנציאל לתוקפים להפעלת קוד זדוני במחשב של הגולשים בדף שהקוד או ההתנהגות המזיקה הוכנסו בו.
הדפדפנים מתמודדים עם הבעיה ע"י דיכוי יכולת דף האינטרנט והקוד שלו בשתי דרכים עיקריות: הראשונה היא "ארגז חול": הגבלת יכולת הפעולה של דף האינטרנט לעניין האינטרנט בלבד ולא לחרוג לפעולות מחשב כלליות (כדוגמת גישה למערכת הקבצים), שנית, מדיניות "מקור זהה" (same origin policy), שמונעת מדף אינטרנט לקבל נתונים מדף אינטרנט של אתר אחר.
עם זאת, גם בדפדפני אינטרנט מודרניים, ישנם כמה סוגיות אבטחה עימם מפתחי אתרים וגולשים צריכים להתמודד:
חולשות מסוג Cross-site
אלו הם סוגי פרצות שמאפשרים לתוקפים לעקוף את מדיניות "מקור זהה" (same origin policy) של הדפדפן. במסגרת מדיניות זו, כאשר נעשית בקשת HTTP מתוך דף אתר אחד לאתר שונה (בכתובת, יציאה או פרוטוקול), הדפדפן חוסם את התשובה שהתקבלה ולא מעביר אותה לדף המבקש. מדיניות זו מונעת גניבת נתונים ע"י בעל אתר זדוני שפונה למשל לאתר הבנק אליו המשתמש מחובר כעת.
למדיניות הזו יש כמה פירצות:
- XSS: לעיתים התוקף יכול לשתול אלמנטי HTML ואף קוד באתר הזר, מדיניות "אותו מקור" תאפשר לקוד לגשת לכל נתון באותו אתר, שכן המקור זהה. בדרך כלל זה נגרם ע"י תכנון לקוי של מפתחי האתר, ולעיתים נדירות ע"י חולשה בדפדפן.
- CSRF: כאמור מדיניות "מקור זהה" חוסמת את התשובה בפני מקור שונה, אבל הבקשה כן מבוצעת (הסיבה לכך היא בגלל שבפרוטוקול הHTTP ישנה אפשרות לתשובה לאפשר גישה לאתר מסויים למרות שאינו "מקור זהה"). עצם ביצוע הבקשה יכול לעשות נזק, כמו שליחת בקשה לבנק לבצע העברה בנקאית מחשבון המותקף לחשבון התוקף. ההגנה מהתקפה זו אפשרית ע"י תכנון נכון של מפתחי האתר. הם צריכים לחייב לכל בקשה רגישה פרמטרים כאלו שהתוקף לא יוכל לנחש, כמו שדה נסתר עם מזהה סודי, זה מונע מהתוקף לבנות בקשה שתעבוד אצל לקוח אחר, או בדיקת כותרת הReffer (כותרת HTTP בה הדפדפן מספק לשרת את הדף ממנו בוצעה הבקשה) שאינה מכילה אתר זר.
- JavaScript hijacking ("חטיפת" JavaScript). מדיניות "מקור-זהה" מוחרגת עבור תכנים מסוג תמונות, CSS, וסקריפטים. אלא שבמקרה של סקריפטים עם מידע אישי (מה שנפוץ מאוד בפורמט JSON למשל), התוקף יכול להציב באתר שלו תגית סקריפט לאתר הזר, ולקבל ע"י זהות הגולש תוכן שמיועד עבורו. מפתחי האתרים מתגוננים מתקיפה זו ע"י החזרת נתונים בפורמט JSON אך ורק בבקשות מסוג POST, או בדיקת הReffer. עוד הגנות בקבצי JSON הם הפיכתו לקוד בלתי תקף (תחבירית), או לבלתי ניתן להרצה (למשל ע"י הוספת לולאה אין סופית בתחילתו).
אמון שגוי בסביבת צד הלקוח
תוכן הדף האינטרנט והקוד חשוף בפני הגולש, וגולש מתוחכם יכול לשנותו בעצמו או ע"י כלי תוכנה.
לכן אין להסתמך על אימות שלא נעשה בצד השרת. למשל אם הגולש מתבקש להזין ערך חובה לבדוק את חוקיותו בצד השרת גם עם ישנה בדיקה כזו בהתנהגות הדפדפן או ע"י קוד JavaScript.
כמו כן הקוד צריך להיות חף ממידע רגיש כמו סיסמאות או מידע שחושף את אופן העבודה של צד השרת באופן שיכול להקל על פורצים לתקוף אותו.
איפיוני השפה
השפה תומכת בתחביר הסטנדרטי של שפת C, מבחינת אופרטורים, מבני בקרה ופקודות, ומבדילה בין אותיות גדולות לקטנות (case-sensitive). כמו ברוב שפות התסריט טיפוסי השפה מקושרים לערכים ולא למשתנים, משתנה X יכול להפוך במהלך הריצה ממספר למחרוזת לפי ההשמה.
השפה מבוססת "תכנות מונחה דגמי אב" (Prototypes), שהוא סוג (לא נפוץ) של תכנות מונחה-עצמים. השפה בעיקרה היא שפה מבוססת אובייקטים (אפילו טיפוס בוליאני [Boolean] הוא למעשה אובייקט). האובייקטים בשפה הם מערכים אסוציאטיביים. תכנות מונחה עצמים אפשרי, אבל לא בדרך המקובלת של הגדרת מחלקה שאיננה קיימת בשפה, אלא באמצעות יצירת אובייקט והצמדת מאפיינים אליו. כל מאפיין באובייקט יכול לתפקד כמשתנה או פונקציה. ישנם שלשה סוגי אובייקטים: אובייקטים של השפה כמו משתנים (כמו אובייקט תאריכי Date ואובייקט מחרוזתי), אובייקטים של הדפדפן (כמו אובייקטי window ו-document), ואובייקטים שיוצר המשתמש. השפה תומכת בהרחבת מתודות של אובייקטים טבעיים בשפה כמו למשל מחרוזות או Date באמצעות Prototyping.
השפה היא גם שפה מונחת אירועים (Events), כך שמהלך ריצת התוכנית מבוסס על אירועים שמתרחשים בזמן ביצועה. לכל אובייקט קיים אוסף אירועים הייחודי לו, והדרך הנפוצה היא לכרוך פונקציית של המשתמש עם אירוע של אובייקט מובנה להלן רשימת האירועים:
| תיאור | אירוע |
|---|---|
| בעת טעינה | onload |
| בעת לחיצה | onclick |
| בעת סגירת דף | onabort |
| בעת סגירת חלון | OnUnload |
| בעת עזיבת אובייקט | OnBlur |
| בעת שינוי אובייקט | onchange |
| בעת לחיצה | onclick |
| בעת בחירה | onselect |
| בעת משלוח | onsubmit |
| בעת שגיאה | onerror |
| בעת מעבר עכבר | onmouseover |
| בעת עזיבת סימן העכבר את האובייקט | onmouseout |
השפה תומכת בתכנות פונקציונאלי. פונקציה בשפה היא אזרחית ממחלקה ראשונה, ולמעשה כל פונקציה היא אובייקט בעצמה. השפה מאפשרת השמה של פונקציות למשתנים, העברה של פונקציה כארגומנט, והגדרת פונקציות אנונימיות. השפה מתממשקת באופן טבעי עם ממשק DOM, המייצג מסמכי HTML ו־XML תוך שימוש במתודולוגיה של תכנות מונחה-עצמים. לשפה תמיכה מובנית בביטוי רגולרי.
דוגמה לתוכנית JavaScript
התוכנית המופיעה להלן כתובה בשפת JavaScript, והיא בודקת האם מספר שהועבר אליה הוא מספר ראשוני. הסימן "//" מציין שהטקסט שמימינו אינו חלק מקוד התוכנית, אלא הוא הערה שמטרתה להסביר את התוכנית למתכנת הקורא אותה. התוכנית מחולקת לשתי פונקציות, האחת בודקת האם מספר נתון הוא ראשוני, והשנייה מטפלת בדיאלוג עם המשתמש: קבלת המספר לבדיקה (קלט) והצגת תוצאות הבדיקה (פלט).
<input type="text" id="primetest" value="" />
<input type="button" onClick="communicate();" value="Check" />
<script type="text/javascript">
function get_factor(n)
{
var sr = Math.sqrt(n);
// try to find a factor that is not 1.
for (var i=2; i<=sr; i+=1) {
if (n%i == 0) // is n divisible by i?
return i;
}
return 1; // n is a prime.
} // End of get_factor function.
function communicate()
{ // communicate with the user.
var i = document.getElementById("primetest").value; // get checked number, using DOM.
// it is a valid input?
if ( isNaN(i) || (i <= 0) || (Math.floor(i) != i) ) {
alert("The checked object should be a whole positive number");
return;
}
var factor = get_factor(i);
if (factor == 1)
alert(i + " is a prime");
else
alert(i + " is not a prime, " + i + "=" + i/factor +"x"+ factor);
} // End of communication function
</script>
ראו גם
קישורים חיצוניים
- Javascript - באתר W3Schools, אתר ללימוד שפות אינטרנט רבות. (באנגלית)
- JavaScript Manipulation
- מדריך ללימוד השפה, אתר אית"ן
- מדריך לימוד השפה, אתר וובמסטר
- JavaScript לא פולשני מידע טכני
קטגוריה:שפות תכנות מונחות עצמים
קטגוריה:עיצוב אתרי אינטרנט
קטגוריה:פיתוח יישומי ווב
קטגוריה:ארצות הברית: המצאות
*