6 - Js Basics

Javascript Basics
‫שי תבור‬
shay.tavor@gmail.com
www.shaytavor.com
‫היסטוריה קצרה‬
‫• בשנים הראשונות של האינטרנט‪ ,‬כל פעולה לוגית‬
‫בדף האינטרנט – החל מוולידציה של שדות קלט‬
‫ועד שליפת נתונים מה‪ – DB-‬נעשתה בשרת‪.‬‬
‫• בעולם בו עיקר התקשורת נעשה דרך מודמים‬
‫טלפוניים עם רוחב פס צר מאוד‪ ,‬הפניה לשרת‬
‫עבור כל פעולה יצרה זמני המתנה ארוכים‬
‫ומתסכלים אצל המשתמשים‪.‬‬
‫• בשנת ‪ 1995‬חברת ‪ Netscape‬ביקשה למצוא דרך‬
‫לקצר את זמני ההמתנה ע"י שפת צד לקוח‬
‫פשוטה שתבצע בדיקות קלט ותחסוך את‬
‫הקריאות לשרת‪.‬‬
‫‪shay.tavor@gmail.com‬‬
‫‪www.shaytavor.com‬‬
‫היסטוריה קצרה‬
‫• בשנת ‪ 1995‬יצאה הגרסה הראשונה של ‪ JS‬יחד‬
‫עם הדפדפן ‪.Netscape Nevigator 2.0‬‬
‫• שם השפה – ‪ JavaScript‬נבחר כדי לנצל את‬
‫הפופולריות הרבה ששפת ג'אווה זכתה לה באותה‬
‫תקופה למרות שהקשר בין השפות רופף‪.‬‬
‫• ב‪ 1997-‬השפה הוגשה כמועמדת לתקן רשמי‬
‫ומאז תוקננה מספר פעמים והסינטקס שלה‬
‫התקבע והפך פורמלי ויציב יותר‪.‬‬
‫מרכיבי השפה‬
‫• השפה מורכבת משלושה מודולים עיקריים‪:‬‬
‫– ‪ – Core‬כולל את התחביר‪ ,‬טיפוסי נתונים‪ ,‬מילים‬
‫שמורות‪ ,‬אופרטורים‪ ,‬אובייקטים וכו'‪.‬‬
‫– )‪ – Document Object Model (DOM‬זהו ‪ API‬שממפה‬
‫את דף האינטרנט בשלמותו לעץ כך שניתן "לטייל" עליו‬
‫ולבצע עליו מניפולציות‪.‬‬
‫– )‪ – Browser Object Model (BOM‬זהו ‪ API‬שמאפשר‬
‫גישה לתכונות של חלון הדפדפן עצמו כך שהאפליקציה‬
‫יכולה לתקשר עם הדפדפן גם מחוץ לגבולות התצוגה‬
‫של האפליקציה‪.‬‬
‫הרצת קוד ‪JS‬‬
‫• סביבת ההרצה של ‪ JS‬היא הדפדפן‪.‬‬
‫• קוד ‪ JS‬נטען בתוך דף ‪ HTML‬ע"י הדפדפן‪ ,‬ושם‬
‫הוא רץ‪.‬‬
‫• ישנן שתי דרכים להוסיף קוד ‪ JS‬לדף ‪:HTML‬‬
‫– תגית ‪ script‬בדף‪Tag it .‬‬
‫– כתיבת קובץ חיצוני וקישורו לדף‪ .‬مفضل نستعمل هاي الطريقة‬
‫תגית ‪script‬‬
‫• בתוך תגית ‪ script‬בדף ‪ HTML‬ניתן לשלב קוד ‪:JS‬‬
‫>‪<script‬‬
‫;)”!‪alert(“Hello‬‬
‫>‪</script‬‬
‫• הקוד בתוך התגית מפורש מלמעלה למטה‪.‬‬
‫• שאר תוכן הדף (ה‪ )HTML-‬לא יעובד כל עוד לא‬
‫הסתיים חלק ה‪.script-‬‬
‫קישור לקובץ חיצוני‬
‫• בתוך תגית ‪ script‬בדף ‪ HTML‬ניתן להוסיף תכונה‬
‫שמציינת את מיקום קובץ הקוד‪:‬‬
‫>”‪<script type=“text/javascript” src=“MyScript.js‬‬
‫>‪</script‬‬ ‫منضيف هاد تاج للكود ‪ Js‬جوا‪html‬عشان ندخل اللغتين سوا‬
‫• קבצי ג'אווהסקריפט מסתיימים בדר"כ ב‪ js-‬אבל‬

‫זאת לא חובה‪.‬‬
‫• חובה לסגור את תגית ה‪ script-‬אחרת הקוד לא‬
‫יעבוד‪.‬‬
‫הרצה דרך הדפדפן‬
‫• כל הדפדפנים המודרנים מספקים כיום כלי פיתוח‬
‫למתכנתים‪.‬‬
‫• בין היתר‪ ,‬ניתן להשתמש ב‪ console-‬של הדפדפן‪,‬‬
‫בו ניתן להריץ פקודות ‪.JS‬‬
‫‪prints‬‬
‫תחביר השפה‬
‫התחביר של ‪ JS‬דומה בהרבה נקודות לזה של‬ ‫•‬
‫ג'אווה ו ‪:C‬‬
‫השפה היא ‪.case sensitive‬‬ ‫•‬
‫הערות חד שורתיות מסומנות ע"י ‪//‬‬ ‫•‬
‫הערות רב שורתיות מסומנות ע"י ‪/* */‬‬ ‫•‬
‫בסוף פקודה רושמים נקודה‪-‬פסיק;‬ ‫•‬
‫בלוקים נתחמים ע"י סוגריים מסולסלים‪}{ .‬‬ ‫•‬
‫שמות של משתנים ופונקציות יכולים להיות‬ ‫•‬
‫מורכבים מאותיות‪ ,‬מספרים‪ ,‬קו תחתון וסימן ‪.$‬‬
‫משתנים‬
.let ‫• הגדרת משתנה נעשית ע"י המילה‬
let x;
:‫• משתנה יכול להכיל כל טיפוס של מידע‬
let x = “hi”; // string
x = 4; // number (string)
x = 5.9; // number (float)
x = true; // boolean
www.shaytavor.com
‫קבועים‬
‫• הגדרת קבוע נעשית ע"י המילה ‪.const‬‬
‫;‪const x = 2‬‬
‫• אי אפשר לשנות את ערכו של הקבוע‪:‬‬
‫שגיאה ;‪x += 5‬‬
‫משתנים – סימון ישן‬
‫• ניתן להגדיר משתנה גם ע״י המילה ‪:var‬‬
‫;‪var x‬‬
‫• בחלק מהמקומות עוד אפשר למצוא את צורת‬
‫הרישום הזאת למרות שהיא נחשבת לישנה ועדיף‬
‫להשתמש ב‪.let-‬‬
‫‪typeof‬‬
‫• האופרטור ‪ typeof‬מאפשר לקבל את סוג הנתון‬
‫שנמצא במשתנה כרגע (חשוב בעיקר כי כאמור‬
‫משתנה יכול להכיל סוגים שונים של נתונים)‪:‬‬
‫;”‪let x = “hello‬‬
‫;)‪console.log(typeof x‬‬ ‫‪// string‬‬
‫;‪x = 3.9‬‬
‫;))‪console.log(typeof(x‬‬ ‫‪// number‬‬
‫אפשר לכתוב ‪ typeof x‬וגם )‪ – typeof(x‬שתי הצורות נכונות‪.‬‬

‫‪undefined‬‬
‫• משתנה לא מאותחל מקבל את הערך המיוחד‬
‫‪:undefined‬‬
‫;‪let x‬‬ ‫בגלל שהוא משתנה עדיין לא מוגדר ما اعطيناه قيمه‬ ‫بسس‬
‫‪Not defined‬‬
‫;))‪console.log(typeof(x‬‬ ‫היא שגיאת ריצה ‪// undefined‬‬
‫• אפשר להפוך משתנה ללא מאותחל‪:‬‬
‫;”‪let x = “hello‬‬
‫;‪x = undefined‬‬
‫• האופרטור ‪ typeof‬יחזיר ‪ undefined‬גם על‬
‫משתנה שלא הוגדר‪.‬‬
‫המרה למספרים‬
‫• ניתן להמיר מחרוזות למספרים ע"י הפונקציה‬
int ‫ ل‬double/floar ‫ بيقلب ال‬:parseInt
let n1 = parseInt(“11”); // n1 = 11
let n2 = parseInt(“12.3”); // n2 = 12
let n3 = parseInt(“14abc”); // n3 = 14
let n4 = parseInt(“abc”); // n4 = NaN Not a number
let n5 = parseInt(“1abc”); // n5 = 1
www.shaytavor.com
‫המרה למחרוזות‬
‫• מחרוזת מייצג אוסף תווים‪ .‬ניתן לייצג מחרוזת עם‬
‫גרשיים או גרש בודד‪.‬‬
‫;’‪let s1 = “abc”, s2 = ‘abc‬‬
‫• כל טיפוס נתונים מכיל את הפונקציה ‪toString‬‬
‫שממירה אותו למחרוזת‪:‬‬
‫;‪let x = 123‬‬
‫”‪console.log(x.toString()); // “123‬‬
‫;‪x = true‬‬
‫”‪console.log(x.toString()); // “true‬‬
‫השוואות‬
‫• האופרטור == משמש להשוואת ערכים‪.‬‬
‫• האופרטור מבצע המרות של האופרנדים במידה‬
‫והם לא מאותו טיפוס‪:‬‬
‫)”‪if(5 == “5‬‬ ‫‪// true‬‬
‫)‪if(false == 0‬‬ ‫‪// true‬‬
‫)”‪if(6 != “6‬‬ ‫‪// false‬‬
‫שוויון זהותי‬
‫• האופרטור === משמש להשוואת ערכים‪.‬‬
‫• האופרטור לא מבצע המרות של האופרנדים‬
‫במידה והם לא מאותו טיפוס‪:‬‬
‫)”‪if(5 === “5‬‬ ‫‪// false‬‬
‫‪if(false === 0) // false‬‬
‫)”‪if(6 !== “6‬‬ ‫‪// true‬‬
‫פונקציות‬
:‫• הגדרת פונקציה‬
function functionName(parameters) {
function body
}
!‫שימו לב שלא מציינים ערך חוזר בחתימת הפונקציה‬
www.shaytavor.com
function sayHello() {
console.log(“Hello”);
}
:‫הקריאה לפונקציה נעשית ע"י ציון שמה‬

sayHello();
www.shaytavor.com
function power(x, y) {
let res = 1;
for(let i = 1; i <= y; i++)
res *= x;
return res;
}
‫ ניתן‬,‫כיוון שהפונקציה לא מציינת מה טיפוסי הארגומנטים‬
:‫להעביר לה כל סוג של פרמטר‬
power(2, 3); // 8
power(2.2, 3); // 10.648
power(2, 2.9); // 4 int ‫ النه‬٢ ‫ ل‬2.9 ‫رجع‬
power(“a”, 3); // NaN

www.shaytavor.com
‫פרמטרים לפונקציות‬
‫• בג'אווהסקריפט‪ ,‬הפונקציה מקבלת את‬
‫הפרמטרים שלה בתור מערך בשם ‪. arguments‬‬
‫• לכן‪ ,‬לא משנה כמה ארגומנטים הגדרנו בחתימת‬
‫השיטה וכמה ארגומנטים נעביר באמת‪:‬‬
‫;)‪power(2, 3, 5‬‬ ‫‪// 8‬‬
‫;)‪power(3‬‬ ‫‪// 1‬‬
‫‪arguments‬‬
‫אפשר לגשת ל‪ arguments-‬מהפונקציה‪.‬‬ ‫•‬
‫למשל‪ ,‬נכתוב פונקציה בשם ‪.superPower‬‬ ‫•‬
‫אם הפונקציה תקבל פרמטר אחד‪ ,‬היא תחזיר את‬ ‫•‬
‫הפרמטר בריבוע‪ .‬بتعمله تربيع‬
‫אם הפונקציה תקבל שני פרמטרים‪ ,‬היא תחזיר‬ ‫•‬
‫את הראשון בחזקת השני‪ .‬منعمل األول اس الثاني‬
function superPower() {
if(arguments.length == 1)
return arguments[0] * arguments[0];
else if(arguments.length == 2)
return power(arguments[0], arguments[1]);
}
superPower(3); // 9
superPower(3, 3); // 27
superPower(2, 3, 4); // undefined
www.shaytavor.com
‫העמסה‬
‫• בגלל העובדה שלפונקציות ב‪ JS-‬אין באמת‬
‫חתימה‪ ,‬וניתן להעביר להן כל מספר של‬
‫פרמטרים‪ ,‬אין משמעות להעמסה בשפה‪.‬‬
‫• אם מוגדרות שתי פונקציות עם אותו השם‪,‬‬
‫האחרונה שהוגדרה היא זאת שתופעל‪.‬‬
By Value ‫העברת פרמטרים‬
‫) עוברים‬object-‫• כל סוגי הטיפוסים (חוץ מ‬
:by value ‫לפונקציות‬
function add(num) {
num += 10;
}
let num = 5;
add(num);
console.log(num); // 5
www.shaytavor.com
‫‪Execution Context‬‬
‫הקשר ההרצה (‪ Execution Context‬או ‪)Context‬‬ ‫•‬
‫מגדיר עבור משתנה או פונקציה לאיזה מידע יש‬
‫להם גישה‪.‬‬
‫לכל הקשר יש מרחב זיכרון משלו שבתוכו מוגדרים‬ ‫•‬
‫משתנים‪.‬‬
‫כאשר כל הקוד בהקשר מסתיים‪ ,‬ההקשר נמחק‬ ‫•‬
‫יחד עם כל המידע שבתוכו‪.‬‬
‫ההקשר הגלובלי הוא ההקשר החיצוני ביותר‪.‬‬ ‫•‬
‫בדפדפן ההקשר הזה נקרא ‪.window‬‬ ‫•‬
‫‪Execution Context‬‬
‫• כאשר קוד רץ בהקשר מסוים‪ ,‬יש לו גישה לכל‬
‫המידע שנמצא בהקשר זה‪ ,‬וכן בכל ההקשרים‬
‫שמעליו (המכילים אותו)‪:‬‬
‫;‪let x = 1‬‬
‫{ )(‪function f‬‬
‫;‪let y = 2‬‬
‫שני המשתנים נגישים מתוך הפונקציה ‪console.log(x + “, “ + y); //‬‬
‫}‬
‫;)‪console.log(x‬‬ ‫המשתנה נגיש בהקשר הגלובלי ‪//‬‬
‫;)‪console.log (y‬‬ ‫‪// not defined‬‬

6 - Js Basics

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

6 - Js Basics

Uploaded by

Copyright:

Available Formats

Javascript Basics

‫• קבצי ג'אווהסקריפט מסתיימים בדר"כ ב‪ js-‬אבל‬

‫אפשר לכתוב ‪ typeof x‬וגם )‪ – typeof(x‬שתי הצורות נכונות‪.‬‬

:‫הקריאה לפונקציה נעשית ע"י ציון שמה‬

power(“a”, 3); // NaN

You might also like