להתחיל לכתוב Java Script ב-10 דק'. לא מסובך כמו שחשבתם

כפי שתיארתי בפוסט הראשון, java script הוא החלק "המבצע". אתם כבר זוכרים ש html הוא התוכן, הסמנטיקה, css הוא העיצוב, ומה שנשאר הוא החלק המבצע, זה שמוציא את הפעולות לפועל, שגורם להן לקרות.

 

באמצעות שפת הסקריפט הזו נוכל לשנות אלמנטים, מאפיינים ועוד.

אני מצרפת לכם מספר לינקים מגניבים שבהם תוכלו לראות JS במלוא תפארתו  (וגם תוכלו לשחק פינג-פונג בזמנכם החופשי…) כאן:
http://demos.bonsaijs.org/

 

https://codepen.io/dissimulate/pen/KrAwx

 

אז אחרי שהשתעשענו קצת.. ;-) אפשר לחזור לHard core!

 

איך כותבים JS?

 

באמצעות הJS אנחנו נותנים לדפדפן שלנו רשימת פעולות שהוא צריך להוציא לפועל, זאת אומרת פקודות, הצהרות - ובאנגלית Statements.

כל statement שנכתוב, נפריד באמצעות ; (semicolon).

 

String

 

כאשר נרצה לכתוב כל דבר שהוא מילים, רשימת אותיות, משפט וכו', נכתוב אותו בתוך 'סטרינג'.

על מנת להגדיר מילה או משפט כ string נשתמש בגרש בודד או בגרשיים כפולות.

לדוגמא: 'Youre here'

או "youre here"

 

בתוך הגרשיים נוכל להשתמש בגרשיים נוספים, כל עוד הם לא זהים לגרשיים שעוטפים את ה string.

לדוגמא:

"you’re here”

כל מה שנמצא בתוך הstring הוא zero based - מה זה אומר?

  

האות הראשונה נמצאת במיקום האפס, האות השנייה נמצאת במיקום 1, האות השלישית נמצאת במיקום 2 וכו'..

 (השתדלו לזכור את זה, נראה אותו מופיע בעוד הרבה פעמים בהמשך..)

 

אחרי שעשינו את ההקדמה הנחמדה הזו,

בואו נתחיל לצלול קצת ביחד.

 

objects

מה, מו, מי, כמה, למה

 

מבוא לאובייקטים

 

אובייקטים – רשימה של פריטים שאינה מסודרת בסדר כרונולוגי מסוים.

אובייקטים הם 'פריט' כלשהו שניתן לקחת ולפרק אותו למשתנים, כמו כלב: לכלב יש גיל, גזע, צבע, וכו'..

כל פריט ברשימה הזו נכתב בצורה הבאה:

מפתח : ערך

key : value

כאשר רשימה של כמה פריטים כאלו – נעטפת בשם אובייקט.

 

יצירת אובייקט:

 

כדי ליצור אובייקט נשתמש בsyntax הבא: var objectname = { };

כאשר רשימת הפריטים תכנס בתוך {}ובין כל פריט לפריט הבא, יפריד פסיק.

כל value יעטף בגרשיים כפולים ( " ) או בגרש בודד ( ' ) (כראוי ל string).

לדוגמא:

אובייקט בשם "כלב", יכלול פריטים כמו : גזע, גיל, צבע, שם ועוד.

ויכתב כך:

var dog = {name : ‘daisy’,

breed: ‘Labrador’,

color: ‘white’,

age: ‘4’};

 

 

 

לאחר שהגדרנו אובייקט, נרצה לגשת אליו ולמשוך ממנו נתונים;  

לדוגמא, אם הגדרנו את האובייקט "כלב" עכשיו נרצה למשוך ממנו נתונים כגון: בן כמה הכלב? איך קוראים לו? מה הצבע שלו?

 

לצורך כך ניתן להשתמש בשתי דרכים; הדרך הראשונה היא:

obj-name.key

for e.g: dog.age

והדרך השניה הינה:

obj-name[‘key’]

for e.g: dog [‘name’]

 

 

 

 

אובייקטים, כמו כל דבר בחיים, יכולים להשתנות מפעם לפעם ולכן כאשר נרצה לשנות או לעדכן ערך (value) של פריט בתוך אובייקט, נשתמש באחת מהדרכים הבאות:

 

1. שינוי של value בתוך פריט קיים, כדוגמת עדכון גיל הכלב (האובייקט שלנו) תתבצע כך:

 

obj-name. key= new-value

for e.g: dog.age = 7;

 

 

 

2. הוספה של פריט חדש לתוך האובייקט, כדוגמת משקל הכלב (האובייקט), תתבצע  כך:

 

obj-name.new-key = new-value

for e.g: dog.weight = 25;

 

דוגמאות לשינוי פריט קיים באובייקט (גיל הכלבה) והוספת פריט חדש בתוך האובייקט (משקל הכלבה):

 
 

3. מחיקת פריט קיים מתוך אובייקט תתבצע כך:

delete obj-name.key;

for e.g: delete dog.age;

 

 

 

 

Window object

 

כל אובייקט קיים או אחד שיצרנו, נמצא תחת אובייקט ה"אב" – window (חלון של דפדפן).

 

Document Object Model (DOM)

  נכון, זה מסקרן.. אבל תצטרכו לחכות לפוסט הבא. :-)

 

 

מקווה שעד כה הצלחתי לפשט את הדברים שפעם נראו כל כך מסובכים, כל כך 5 יחידות במתמטיקה או תואר באסטרופיזיקה..

 

גם אם כן, וגם אם לא, אתם מוזמנים להגיב כאן או לפנות אליי באופן פרטי עם הצעות, שאלות ובקשות.

אשמח לשוחח אתכם !

 

בהצלחה,

יעל