JavaScript

היסטוריה

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

דוגמה לתוכנית JavaScript

התוכנית המופיעה להלן כתובה בשפת JavaScript, והיא בודקת האם מספר שהועבר אליה הוא מספר ראשוני. הסימן "//" מציין שהטקסט שמימינו אינו חלק מקוד התוכנית, אלא הוא הערה שמטרתה להסביר את התוכנית למתכנת הקורא אותה. התוכנית מחולקת לשתי פונקציות, האחת בודקת האם מספר נתון הוא ראשוני, והשנייה מטפלת בדיאלוג עם המשתמש: קבלת המספר לבדיקה (קלט) והצגת תוצאות הבדיקה (פלט).
<input type="text" id="primetest" value="" /><input type="button" onClick="communicate()" value="Check" /><script type="text/javascript">function get_factor(n){
 let sr = Math.sqrt(n)
 // try to find a factor that is not 1.
 for (let 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.
 let i = document.getElementById("primetest").value; // get checked number, using DOM.
 // is it a valid input?
 if ( isNaN(i) || (i <= 0) || (Math.floor(i) !== i) ) {
 alert("The checked object should be a whole positive number");
 return
 }
 let 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

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

JavaScript Manipulation

בדפדפנים ישנים ופחות מאובטחים, ניתן להזריק ולהריץ קוד שלא מוזכר כלל בקוד מקור, בכל דף אינטרנט שמופיע בדפדפן. שיטה זו נקראת JavaScript manipulation.
ב־JavaScript manipulation מכניסים את פקודות הסקריפט בשורת הכתובת של הדפדפן, ולרוב הוא מיועד להשפיע על ה־DOM.
דוגמה:
javascript: alert(document.cookie);
בדוגמה זו נקפיץ באמצעות הפקודה alert תיבת הודעה עם העוגיות ששמורות במחשב לדף זה.
על מנת להגן מפני התקפות הינדוס חברתי (social engineering), השימוש בשיטה זו נחסם בדפדפנים המודרניים. כך לדוגמה, במוזילה פיירפוקס החל מגרסה 6, קוד שהוזרק בשיטה זו לא יתייחס לתוכן הדף, ומשכך, לא יתאפשר לו להשפיע על ה־DOM. בגוגל כרום ובאינטרנט אקספלורר מגרסה 9 ומעלה, כאשר מדביקים כתובות כאלה בשורת הכתובת, הפרוטוקול (javascript:) מושמט מהכתובת המודבקת, ובכך מנטרל את השפעתו של הקוד.
הדבקת הקוד מהדוגמה הקודמת בשורת הכתובת ידביק את הקוד הבא -
alert(document.cookie);
עם זאת, במרבית הדפדפנים המתקדמים קיימים כלי פיתוח ייעודיים, בהם ניתן לבצע JavaScript manipulation בהיקף נרחב.

ייבוא קובצי JS

ניתן גם לייבא את הסקריפט מתוך קובץ, במקום לכתוב הכל בדף HTML, באמצעות הפרמטר src (קיצור של source) בתגית script.
דוגמה:
<script type="text/javascript" src="filename.js"></script>
כאשר filename.js הוא קובץ ה .js אליו מפנים.
קובץ ה־.js מכיל את כל הפקודות המופיעות בתוך התגית <script> ושהדפדפן יריץ.
כמו כן, קובץ JavaScipt יכול לייבא קבצים נוספים שאינם מוצהרים במסמך ה־HTML בצורתו ההתחלתית. לדוגמה:
var myScript = document.createElement("script"); // יצירת אלמנט סקריפט חדשmyScript.type = "text/javascript"; // קביעת סוג הסקריפטmyScript.src = "filename.js"; // קבע את הקובץ שיש לייבאdocument.head.appendChild(myScript); // הכנס את האלמנט למסמך, על־מנת להריץ אותו
בדוגמה זו, ארבע שורות אלה, הכלולות באחד הסקריפטים הקיימים בדף, יוצרות אלמנט script חדש, המייבא את הקובץ "filename.js", ומוסיפות אותו למסמך ה־HTML (לסוף אלמנט ה־head של המסמך).