ללמוד ג'אווהסקריפט בעברית רן בר - זיק 1
ל ל מ ו ד ג ' אווהסקריפט בעברית רן בר- זיק מ ה ד ו ר ה : 2.0.0 כל הזכויות שמורות רן בר- זיק, 2019. 2
ס פ ר ז ה ה ו א יצירה המוגנת בזכויות יוצרים. אתה קיבלת רשיון לא- בלעדי, לא- ייחודי, אישי, בלתי נ י ת ן ל ה ע ב ר ה ) ל מ ע ט ע ל פ י ד י ן (, ובלתי ניתן להסבה לעשות שימוש אישי בספר זה לצרכים לימודיים בלבד. ה ס פ ר, א ת ל ה ע ת י ק ל ך א ס ו ר א ו ת ו ל פ ר ס ם א ו מ מ נ ו נ ג ז ר ו ת י צ י ר ו ת ל צ ו ר א ו ת ו, ל ש כ פ ל ב כ ל צ ו ר ה א ח ר ת. מ ו ת ר ל ך ל צ ט ט ק ט ע י ם ק צ ר י ם מ ה ס פ ר ב מ ס ג ר ת ה ג נ ת ש י מ ו ש ה ו ג ן, כ ל ו מ ר פ ס ק ה א ו ש ת י י ם, כ א ש ר אתה מפנה ל מ ק ו ר ומזכיר את רן בר- זיק כמחבר הספר. ה ד ו ג מ א ו ת ה מ ו ב א ו ת ל ה ש ת מ ש ל ך ו א ס ו ר ב ר- ז י ק, ר ן ש ל ב ב ע ל ו ת ה ן ז ה ב ס פ ר ת ו כ נ ו ת ב ת ו ך ב ה ן שתפתח. אם אתה ר ו צ ה להכניס אותן לפרויקט שלך, שלח מייל ונדבר על ז ה. 3
ע ר י כ ה ל ש ו נ י ת : י ע ל נ י ר הגהה : חנן קפלן עיצוב הספר והכריכה : טל סולומון ו ר ד י (tsv.co.il) הפקה: כריכה סוכנות ל ס ו פ ר י ם www.kricha.co.il 4
תוכן העניינים על הספר................................................................................................................ 11 על המחבר.............................................................................................................. 12 על העורכים הטכניים................................................................................................ 13 ד נ י א ל ש ט ר נ ל י כ ט............................................................................................................. 13. גיל פינק........................................................................................................................ 13. י ג א ל ס ט ק ל ו ב.................................................................................................................. 13. ת ו ם ב י ג ל א י י ז ן.................................................................................................................. 14. צ ח י נ מ נ י........................................................................................................................ 14. ע ל ג ' א ו ו ה ס ק ר י פ ט..................................................................................................... 15 א י ך ל ו מ ד י ם.............................................................................................................. 17 א ר ג נ ו לעצמכם סביבת עבודה מסודרת................................................................................ 17. קראו את הפרקים ל פ י ה ס ד ר.............................................................................................. 17. ק ר א ו כ ל פ ר ק פ ע מ י י ם ו כ ת ב ו ל ע צ מ כ ם א ת כ ל ה ד ו ג מ א ו ת.......................................................... 17. פתרו את התרגילים ל ד ו ג מ ה ב ס ו ף כ ל פ ר ק............................................................................ 18. ה ת י י ע צ ו ע ם א ח ר י ם.......................................................................................................... 18. ה ג י ע ו ל ס ד נ א ו ת ו ל מ י ט א פ י ם............................................................................................... 18. תרגלו, תרגלו, תרגלו........................................................................................................ 18. התקנת סביבת העבודה ו ד ר ך ה ל י מ ו ד............................................................................ 19 מ ש ת נ י ם................................................................................................................. 28 ט ק ס ט.................................................................................................................... 33 מ ס פ ר י ם................................................................................................................. 37 מ צ י א ת ה ש א ר י ת.............................................................................................................. 39. אופרטורים מקוצרים........................................................................................................ 41. סוגי מידע פרימיטיביים נ ו ס פ י ם................................................................................... 47 ב ו ל י א נ י.......................................................................................................................... 47. מ ש ת נ ה ל א מ ו ג ד ר............................................................................................................ 47. ר י ק............................................................................................................................... 48. 5
48......................................................................................................................... Symbol מ צ י א ת ה ס ו ג ש ל ה מ ש ת נ ה............................................................................................... 49.. ה ע ר ו ת.................................................................................................................... 53 ב ק ר ת ז ר י מ ה מ ש פ ט י ת נ א י....................................................................................... 56 אופרטורים השוואתיים נ ו ס פ י ם.......................................................................................... 59. א ו פ ר ט ו ר י ם ל ו ג י י ם............................................................................................................ 63. א ו פ ר ט ו ר ש ל י ל י................................................................................................................ 66. א ו פ ר ט ו ר ת נ א י................................................................................................................. 68. א ו פ ר ט ו ר י ם ה מ ש ו ו י ם ע ר כ י ם............................................................................................... 69. 79........................................................................................................... switch case ק ב ו ע י ם................................................................................................................... 88 ב ק ר ת ז ר י מ ה פ ו נ ק צ י ו ת............................................................................................ 91 פונקציה עם ארגומנטים................................................................................................... 95. ארגומנטים עם ערכים דיפולטיביים..................................................................................... 98. הפונקציה כאובייקט...................................................................................................... 100. 100...................................................................................................................... Hoisting 102....................................................................................................................... closure פונקציה אנונימית ופונקציית חץ...................................................................................... 105. פ ו נ ק צ י ה א נ ו נ י מ י ת כ מ ש ת נ ה............................................................................................ 106. פונקציה אנונימית שמבודדת מהסקופ הגלובלי................................................................... 107. א ו ב י י ק ט י ם............................................................................................................. 116 מחיקת מפתח.............................................................................................................. 122. ה כ נ ס ת פ ו נ ק צ י ה כ ע ר ך.................................................................................................... 122. אובייקט כקבוע............................................................................................................. 123. מ ע ר כ י ם................................................................................................................ 130 מ ע ר כ י ם ומחרוזות טקסט............................................................................................... 135.. 138........................................................................................................... ו- this new תבנית טקסט........................................................................................................ 146 ל ו ל א ו ת................................................................................................................. 151 ל ו ל א ת. for................................................................................................................... 151. ל ו ל א ה א י נ ס ו פ י ת............................................................................................................ 161. 6
ל ו ל א ת. while............................................................................................................... 161. ל ו ל א ת. do while.......................................................................................................... 163. לולאת. foreach........................................................................................................... 163. ל ו ל א ת. for of............................................................................................................... 166. לולאת. map................................................................................................................ 171. ל ו ל א ת. filter................................................................................................................ 174. ל ו ל א ת. sort................................................................................................................. 178. ל ו ל א ו ת ע ל א ו ב י י ק ט י ם..................................................................................................... 178. לולאות. for in.............................................................................................................. 178. 181................................................................................................................ Object.keys ג ' אווהסקריפט בסביבת ד פ ד פ ן.................................................................................. 190 ה ס ב ר כ ל ל י ע ל. HTML.................................................................................................... 190. מזהים של תגיות. HTML................................................................................................ 193. גישה אל תגיות באמצעות ג ' א ו ו ה ס ק ר י פ ט........................................................................... 193. אלמנטים של HTML מתורגמים ל א ו ב י י ק ט י ם ש ל ג ' א ו ו ה ס ק ר י פ ט............................................ 194. אירועים עם HTML ו ג ' א ו ו ה ס ק ר י פ ט................................................................................... 196. הצמדת אלמנטים של HTML לאלמנטים אחרים של HTML באמצעות ג ' א ו ו ה ס ק ר י פ ט................ 198. שינוי עיצוב.................................................................................................................. 200. ס ל ק ט ו ר י ם ש ל. DOM..................................................................................................... 201. א י ר ו ע י ם נ ו ס פ י ם............................................................................................................ 206. פ ע פ ו ע ש ל א י ר ו ע י ם........................................................................................................ 208. הצמדת אירועי ג ' א ו ו ה ס ק ר י פ ט ל א ל מ נ ט י ם ב- HTML.............................................................. 211. ד י ב א ג י נ ג............................................................................................................... 221 א ו ב י י ק ט י ם ג ל ו ב ל י י ם ו א ו ב י י ק ט י ם מ ו ב נ י ם...................................................................... 228 231...................................................................................................................... parseint 231............................................................................................................................ eval 232.......................................................................................................................... Math 233........................................................................................................................... Date 236........................................................................................................................... JSON 237................................................................................................................. settimeout ב י ט ו י י ם ר ג ו ל ר י י ם.................................................................................................... 244 7
ט י פ ו ל ב ש ג י א ו ת............................................................................................................. 252. 254......................................................................................................................... finally מ ב נ י נתונים מסוג Map ו- Set................................................................................... 258 258............................................................................................................................ Map 259.............................................................................................................................. Set תכנות אסינכרוני קולבקים.................................................................................... 264 274............................................................................................................. Promises ש ר ש ו ר ה ב ט ח ו ת............................................................................................................ 278. ק י ב ו ץ ה ב ט ח ו ת.............................................................................................................. 281. פ ו נ ק צ י י ת. async........................................................................................................... 284. 291................................................................................................................... AJAX מתודות של HTTP ו א ר ג ו מ נ ט י ם נ ו ס פ י ם.............................................................................................. 293. 297................................................................................................................. ES6 Classes ומה עכשיו?.......................................................................................................... 304 נ ס פ ח : Practices. Best.......................................................................................... 306 מ ה ז ה Best Practices ולמה כדאי ליישם אותם?............................................................... 306.. Best Practices שכל מפתח מקצועי צריך ל ה כ י ר................................................................. 307. בחירת שמות............................................................................................................................... 307.. 309............................................................................................................................ KISS 310............................................................................................................................ DRY ל א ל ה מ צ י א א ת ה ג ל ג ל.................................................................................................... 310. 311.................................................................... Make it work, make it right, make it fast ת י ע ו ד.......................................................................................................................... 312. נ י ה ו ל ג ר ס א ו ת............................................................................................................... 312. ל ב ק ש ע ז ר ה.................................................................................................................. 313. ב י ק ו ר ת ע מ י ת י ם Review. Code.................................................................................... 313. 314................................................................................................................ Tech Design Best Practices ו א ו ט ו מ צ י ה............................................................................................. 315. מ ה ז ה?linting............................................................................................................. 316. 317......................................................................................................................... ESLint רשימה של Best Practices והחוק הרלוונטי של. ESLint...................................................... 318. ב ל י מ ס פ ר י ק ס ם............................................................................................................................. 318. 8
השוואה קפדנית : ===.................................................................................................................... 319. ק ו ד ל א נ ג י ש.................................................................................................................................. 319. ח ל ו ק ה ל ח ל ק י ם ק ט נ י ם.................................................................................................................... 320. אורך מינימלי ו מ ק ס י מ ל י ל ש מ ו ת מ ש ת נ י ם........................................................................................... 320. ב ל י. eval...................................................................................................................................... 321. ב ל י מ ש ת נ י ם ש ל א ה ו צ ה ר ו............................................................................................................... 322. ואיכות קוד............................................................................. 323 9 נספח : בדיקות, י צ י ב ו ת ק צ ת ר ק ע...................................................................................................................................... 323. מבנה בדיקות............................................................................................................................... 324.. ב ד י ק ו ת י ח י ד ה............................................................................................................................... 325.. בדיקות קצה ל ק צ ה (End-to-End)................................................................................................... 326. בדיקות ממשקי משתמש Tests) (UI............................................................................................... 326.. ס פ ר י ו ת ופריימוורקים מומלצים........................................................................................................ 327. ס י כ ו ם........................................................................................................................................... 328. נ ס פ ח : Wix. Corvid by........................................................................................... 329 ה ק ד מ ה....................................................................................................................... 329. מה בונים?................................................................................................................... 329. איך מתחילים?.............................................................................................................. 330. ה צ ג ת נ ת ו נ י ם מ מ ס ד ה נ ת ו נ י ם ב א ת ר.................................................................................. 332. 333........................................................................................................................................ Dataset חיבור רכיבים למידע מהטבלה......................................................................................................... 334. הוספת משימה חדשה................................................................................................... 337. 337......................................................................................................................................... Events 339................................................................................................................................................ $w 340................................................................................................................................... wix-data ל ט ב ל ה...................................................................................... 340. wixdata.insert() הוספת רשומה שינוי סטטוס המשימה................................................................................................... 343. 344......................................................................................... 345 שליפת רשומה מהטבלה ע ד כ ו ן ר ש ו מ ה ב ט ב ל ה........................................................................................ wixdata.get() wixdata.update() מ ס פ ר ה מ ש י מ ו ת ש ל א ה ו ש ל מ ו......................................................................................... 346. 346............................................................................................................................. wixdataquery 349.............................................................................................................................. $w.onready() סינון המשימות ל פ י ס ט ט ו ס ה מ ש י מ ה................................................................................ 350. 351............................................................................................................................... wixdatafilter נ י ק ו י ה מ ש י מ ו ת ש ה ו ש ל מ ו............................................................................................... 354. 354................................................................................................................................ wix-window 355........................................................................................................ wixwindow.openlightbox() 356....................................................................................................... wixwindow.lightbox.close() 357.......................................................................... wixdata.bulkremove() מחיקת רשומה מהטבלה נ ס פ ח יצירת מסד נ ת ו נ י ם.............................................................................................. 359. 362............................................................................................................................ Sandbox Live
362................................................................................................................................. Permissions ס י כ ו ם.......................................................................................................................... 363. נ ס פ ח : ג ' א ו ו ה ס ק ר י פ ט מ ו נ ח ה ע צ מ י ם.......................................................................... 364 מ ה זה תכנות מונחה עצמים?.......................................................................................... 364. 370......................................................................................................... Prototype based 10
על הספר ה ס פ ר " ל ל מ ו ד ג ' א ו ו ה ס ק ר י פ ט ב ע ב ר י ת " ה ש פ ה א ת מ ל מ ד ג ' א ו ו ה ס ק ר י פ ט, ( JavaScript) ש פ ת ס ק ר י פ ט ק ל ה ו פ ש ו ט ה ללימוד שהפכה ל פ ו פ ו ל ר י ת מ א ו ד ע ם ה ש נ י ם. ה ס פ ר מ י ו ע ד ל ל א- מ ת כ נ ת י ם ש ר ו צ י ם ל ה ת נ ס ו ת ב ש פ ת ת כ נ ו ת ו ל מ ת כ נ ת י ם ב ג ' א ו ו ה ס ק ר י פ ט ש ר ו צ י ם ל ה ע מ י ק א ת ה י ד ע ה ת י א ו ר ט י ש ל ה ם. הספר מתחיל בלימוד בסיסי של משתנים ומגיע עד לימוד תכנות אסינכרוני ו- AJAX בספר. בכל פרק י ש ה ס ב ר י ם ת י א ו ר ט י י ם ל צ ד ד ו ג מ א ו ת ר ב ו ת ה מ מ ח י ש ו ת א ת ה ע ק ר ו נ ו ת ה ש ו נ י ם ש ה ו ס ב ר ו ב ו, ו ב ס ו פ ו תמצאו שאלות ד ו ג מ ה לתרגול עם הסברים מקיפים על הפתרונות. נ ו ס ף ע ל ה ס פ ר ק י י ם א ת ר ה מ כ י ל מ א ו ת ת ר ג י ל י ם ו פ ת ר ו נ ו ת א ש ר י ס י י ע ו ל כ ל ה ל ו מ ד י ם ל ה ש י ג ש ל י ט ה ב ע ק ר ו נ ו ת ה ש פ ה ובתחביר שלה. ה ס פ ר מ י ו ע ד ל ה ב י א אדם שלא מ כ י ר א ת ג ' א ו ו ה ס ק ר י פ ט ל נ ק ו ד ה ש ב ה ה ו א מ כ י ר ה י ט ב א ת ה ש פ ה ו א ת ה ת ח ב י ר ש ל ה ו י ו ד ע א י ך ל ה ש ת מ ש ב ה כ ד י ל פ ת ו ר ב ע י ו ת ב ס י ס י ו ת. ע ל ה ס פ ר י ס י י ע גם למתכנתים מנוסים יותר שמבקשים לחזק את הידע התיאורטי שלהם. י ש ב ו ה ס ב ר י ם י כ ו ל ו ת מ ת ק ד מ ו ת ה ש פ ה ש ל מ א ו ד ש ה ו ח ל ו, 2017 ב ש נ ת אסינכרוני, AJAX באמצעות fetch ו ת כ ו נ ו ת נ ו ס פ ו ת. ת כ נ ו ת ש ל י ו ת ר ט ו ב מ י מ ו ש כ מ ו 11
על המחבר ר ן ב ר- ז י ק ה ו א מ פ ת ח ת ו כ נ ה מ ש נ ת 1996 במגוון שפות ו פ ל ט פ ו ר מ ו ת ו ע ו ב ד כ מ פ ת ח ב כ י ר ב מ ר כ ז י פ י ת ו ח ש ל ח ב ר ו ת ר ב- ל א ו מ י ו ת, מ- HPE ו ע ד Verizon ח, ש ם ה ו א מ פ ת ב ט כ נ י ק ו ת מ ת ק ד מ ו ת ה ן ב צ ד ה ל ק ו ח, ה ן ב צ ד ה ש ר ת, ו ש ם ד ג ש ע ל בניית תשתית פ י ת ו ח נ כ ו נ ה, על שימוש ב- CI\CD ו כ מ ו ב ן ע ל אבטחת מידע. נ ו ס ף על ע ב ו ד ת ו כ מ פ ת ח ב מ ש ר ה מ ל א ה, ר ן ה ו א ע י ת ו נ א י ב" ה א ר ץ" ב מ ד ו ר ה מ ח ש ב י ם, ש ם ה ו א מ ס ק ר נושאים הקשורים ל ט כ נ ו ל ו ג י ה ולאבטחת מידע וכותב על אינטרנט ו ר ש ת ו ת. מ ש נ ת 2008 מ פ ע י ל ר ן א ת ה א ת ר " א י נ ט ר נ ט י ש ר א ל" internet-israel.com) (, ש ה ו א א ת ר ט כ נ י המכיל מדריכים, מאמרים והסברים על תכנות בעברית ו מ ת ע ד כ ן לפחות פעם בשבוע. ר ן נ ש ו י ל י ע ל ו א ב ל א ר ב ע ה י ל ד י ם : ע ו מ ר י, כ פ י ר, ד נ י א ל ו מ י כ ל. ר ץ ל מ ר ח ק י ם א ר ו כ י ם ו ח ו ב ב ט ו ל ק י ן מ ו ש ב ע. 12
ו מ ש ת ד ל( על העורכים הטכניים דניאל שטרנליכט ד נ י א ל ש ט ר נ ל י כ ט ה ו א מ פ ת ח Frontend מ א ז ג י ל, 14 ה מ י י ס ד ש ל ה מ י ז מ י ם Common Ninja ו- Open Source ד, צ ר כ ן כ ב ד ש ל ק ו There is a bot for that ג ם לתרום בחזרה ( ו נ כ ו ן ל ז מ ן כתיבת הספר מוביל את גילדת ה- Frontend בחברת אאוטבריין. נ ו ס ף ע ל כ ך, ד נ י א ל ה ק י ם ו מ ו ב י ל א ת ק ב ו צ ת ה ו ו ט ס א פ FEDs Community ש מ א ג ד ת מ פ ת ח י Frontend מחברות מובילות בארץ ו ב ע ו ל ם, ובה מעלים דיונים, מתייעצים ומשתפים לינקים, חדשות ועדכונים מעולם ה- Frontend. בעבר כתב בבלוג " ע י צ ו ב ג ר פ י ו ט כ נ ו ל ו ג י ה", וכיום הוא כותב בלוג טכני על טכנולוגיות Frontend ו ע ל.NodeJS ב ש א ר ה ז מ ן ה ו א נ ש ו י ל ר ו נ ה ו א ב א ל ה ד ר ול א י י ל ה מ ת ו ק י ם, מ ת ו פ ף, ג ו ל ש ס ק י, מ ש ח ק כ ד ו ר ס ל, צ ו פ ה בסדרות, קורא ספרי פנטזיה ו מ ת ח ו מ ד ק ל ם א ת כ ל ס ר ט י דיסני בעל פה. גיל פינק ג י ל פ י נ ק ה ו א ה ו א מ ו מ ח ה ל פ י ת ו ח ו ו ב, מ ע ר כ ו ת,Web Technologies Google Developer Expert.sparXys והמייסד של חברת Microsoft Developer Technologies MVP ע ו ר ך כיום הוא מייעץ לחברות ולארגונים שונים, שם הוא מסייע בפיתוח פתרונות מבוססי אינטרנט ו- SPAs. ה ר צ א ו ת ו ס ד נ א ו ת ל י ח י ד י ם ו ל ח ב ר ו ת ה מ ע ו נ י י נ י ם ל ה ת מ ח ו ת ב ת ש ת י ו ת, ב א ר כ י ט ק ט ו ר ה ובפיתוח מערכות ווב. הוא ג ם מ ח ב ר ש ל כ מ ה ק ו ר ס י ם ר ש מ י י ם ש ל מ י ק ר ו ס ו פ ט ) Official Microsoft, ( Course - MOC מ ח ב ר ה ס פ ר ש ל מ ש ו ת ף " Pro Single Page Application Development" (Apress) ו ש ו ת ף ב א ר ג ו ן ג י ל : http://www.gilfink.net ה כ נ ס ה ב י נ ל א ו מ י. AngularUP ל פ ר ט י ם ע ל נ ו ס פ י ם יגאל סטקלוב יגאל סטקלוב הוא מפתח Frontend ו- Stack Full טכנולוגי, מוביל ומנהל פיתוח מנוסה בעל ו ת ק ש ל יותר מעשור וחצי בתעשייה. כיום משמש מנכ " ל חברת.Webiya בעבר היה ממובילי תחום ה- Frontend בחברות Wix ו- Netcraft והוביל פרויקטי פיתוח ר ב י ם. י ג א ל פ ע י ל מ א ו ד ל מ ע ן ק ה י ל ת ה- Frontend ב א ר ץ ו ה ו א א ח ד מהיזמים וה מ א ר ג נ י ם ש ל כ נ ס ה- Frontend הבינלאומי הראשון בישראל, כנס.(YGLF) You Gotta Love Frontend 13
תום ביגלאייזן מפתח Frontend ו מ ע צ ב, נשוי, אב ל ש ת י י ם וגר בתל אביב. ת ו ם ה ת ח י ל א ת ד ר כ ו ב ת ח ו ם ה- Frontend בתחילת שנות ה א ל פ י י ם מ כ י ו ו ן פ ח ו ת צ פ ו י ב פ י ת ו ח אפליקציות בג ' אווהסקריפט לממירים של יס בסטארט- אפ קטן. אחרי שזה נסגר, עבד כעצמאי ו ב כ מ ה ס טא ר ט- א פ י ם, ה פ ך ל א ח ד ה מ ו מ ח י ם ה ר א ש ו נ י ם ב א ר ץ ל- HTML ו- CSS ו ל א ה י ה ב ק י א מ מ נ ו ב ב א ג י ם ש ל CSS ע ם rtl ב א ק ס פ ל ו ר ר. 6 ת ר ם לפרויקטים שונים ב ק ו ד פ ת ו ח, היה שותף ב ג י ו ר פ ל ט פ ו ר מ ת נ י ה ו ל ה ת ו כ ן ד ר ו פ ל ו ב נ ה א ת א ח ד ה ט מ פ ל ט י ם ה ע ב ר י י ם ה פ ו פ ו ל ר י י ם באותה תקופה. תום ג ם ע י צ ב את האייקונים שעדיין נמצאים בשימוש עד היום בנגן הווידיאו הפופולרי בקוד פתוח.VLC לפני קצת יותר משבע שנים נחת ב- Wix, ובחמש השנים האחרונות עומד בראש צוות קטן ומוכשר שמוביל את ת ח ו ם ה- Frontend ב מ ד י ה ו י ד י א ו, ת מ ו נ ו ת, ו ק ט ו ר י ם ו א נ י מ צ י ו ת ב פ ל ט פ ו ר מ ת ב נ י י ת האתרים של.Wix נ מ נ י צ ח י צ ח י נמני הוא מומחה בפיתוח, סרבר, אוטומציה ודב אופס מ ת מ ח ה ב טכ נ ו ל ו ג י ו ת ה ב א ו ת : Git, Java, Kotlin, Node.js,,#C Docker, Kubernetes, ו Terraform. Selenium, Appium, Cypress כיום הוא עובד בחברת הייטק בתחום התיירות. בנוסף, צחי מייעץ ומרצה לחברות וליחידים בנושאים ש ל CI/CD, Automation Development, Docker, Kubernetes ו ע ו ד. כ ר ג ע ה ו א ע ו ב ד ע ל ס ד ר ה ש ל ה ר צ א ו ת ב נ ו ש א Docker and Kubernetes צחי מאמין גדול בקוד פתוח ו ת ו ר ם לפרוייקטים שהוא משתמש בהם. 14
ראשי תיבות של( י ו צ ר ת פ ל א ש ( ש י ת פ ה פ ע ו ל ה ע ם א ר ג ו ן( ע ל ג ' א ו ו ה ס ק ר י פ ט ג ' אווהסקריפט החלה את צעדיה הראשונים ב- 1993 כשפה שפועלת בסביבת דפדפן ונועדה להעשיר ב ג ' א ו ו ה ס ק ר י פ ט. דפי HTML יכולנו ליצור אנימציות ו פ י ד ב ק ל מ ש ת מ ש י ם כ ל ד ב ר ש ה י ה ק ש ו ר ל א ת ר י א י נ ט ר נט ד י נ מ י י ם, ל מ ש ל ד ב ר י ם ש נ ר א י ם ה י ו ם מ א ו ד ט ר י ו ו י א לי י ם ו פ ש ו ט י ם כ מ ו ל ח י צ ה ע ל כ פ ת ו ר ש ע ו ש ה פ ע ו ל ה כ ל ש ה י ב ד ף. א ף ע ל פ י ש ה ה ת ח ל ה ש ל ה הי י ת ה צ נ ו ע ה, ב ר נ ד ו ן א יי ך, מ מ צ י א ה ש פ ה, י צ ר א ו ת ה מ ל כ ת ח י ל ה כ ש פ ה ג מ י ש ה מ א ו ד. ה ג מ י ש ו ת ה ז ו, ו ג ם ח ו ס ר ה ה ב נ ה ש ל ר ב י ם מ ה מ ת כ נ ת י ם שהשתמשו בה בנוגע לעקרונות הבסיסיים שלה, ג ר מ ו ל ל א מ ע ט מ ת כ נ ת י ם ב ש פ ו ת א ח ר ו ת ל ז ל ז ל ב ה. ג ם השם שלה ל א ס י י ע ל ת ד מ י ת. ה ש ם ג ' א ו ו ה ס ק ר י פ ט נ ק ב ע מסיבות שיווקיות ב ל ב ד JAVA ה י א שפת תכנות פופולרית, ו א נ ש י נטסקייפ חשבו שכך י ו סי פ ו ל ת ד מ י ת ה. ב פ ו ע ל ה ש ם ה ז ה ל א מ מ ש ע ז ר, ו א י ן כ מ ו ב ן ש ו ם ק ש ר ב י ן ג ' א ו ו ה ל ג ' א ו ו ה ס ק ר י פ ט. ע ל א ף ה ה ת ח ל ה ה ק ש ה, ג ' א ו ו ה ס ק ר י פ ט ה פ כ ה ל פ ו פ ו ל ר י ת מ א ו ד. ב ש נ ת, 1996 ח ב ר ת נ ט ס ק י י פ ה ע ב י ר ה א ת ה ש ל י ט ה ב ס ט נ ד ר ט י ם ש ל ה ש פ ה א ל א ר ג ו ן, ECMA א ר ג ו ן א י ר ו פ י ) ה י ו ם ב ינ ל א ו מ י ( ה מ ת מ ח ה ב ת ק י נ ה. ה מ ה ל ך ה ו ב י ל ל ש ח ר ו ר הספסיפיקציה של השפה, שידוע ב ש ם,ECMAScript ו ג ' א ו ו ה ס ק ר י פ ט " ה ת י י ש ר ה " ל פ י ה ת ק י נ ה ש ל. ECMAScript מ ש נ ת, 1997 ש נ ת ש ח ר ו ר, ECMAScript ג ' א ו ו ה ס ק ר י פ ט, כ פ י ש ה י א מ י ו ש מ ת ב ד פ ד פ נ י ם ש ו נ י ם, ע ו ק ב ת א ח ר ה ת ק י נ ה ש ל ECMAScript א, ש ה י ב ע צ ם " ת ו כ נ י ת ה מ ת א ר ", ו ג ' א ו ו ה ס ק ר י פ ט ע צ מ ה ה י א ה י י ש ו ם. ל כ ל ג ר ס ה י ש מספר משלה בצמוד ל מ י ל י ם ES. ( ECMAScript מ י ק ר ו ס ו פ ט ה ת נ ג ד ה ב ת ח י ל ה ל י י ש ו ם ה ש פ ה ויישמה שפה מ ש ל ה ב ש ם Jscript ב ד פ ד פ ן א י נ ט ר נ ט אקספלורר, שהייתה ב נ ו י ה ב ד ו מ ה ל ג ' א ו ו ה ס ק ר י פ ט. ל מ ר ו ת ה י ר י ב ו ת ה ג ד ו ל ה ב י ן א נ ש י מ י ק ר ו ס ו פ ט לאנשי ECMA העקרונות, שנוצרה כתוצאה מפיתוח שתי שפות שנשענות על שני תקנים מתחרים, של ג ' אווהסקריפט שולבו גם בגרסה של מיקרוסופט. הפופולריות של השפה עלתה כאשר מקרומדיה ששימשה את תוכנת פלאש שהייתה פופולרית מאוד אז., Actionscript ו ש י ל ב ה א ת ע ק ר ו נ ו ת ה ש פ ה ב ש פ ת ECMA ב ש נ ת 2008 נ פ ג ש ו א נ ש י מ י ק ר ו ס ו פ ט ו- ECMA ב א ו ס ל ו ו ה ח ל ו ב ש י ח ו ת ש ל ו ם. ב נ י ג ו ד ל ש י ח ו ת ש ל ו ם א ח ר ו ת ש ה ת ק י י מ ו ב א ו ס ל ו, ש י ח ו ת ה ש ל ו ם ה א ל ו ה ס ת י י מ ו ב ה צ ל ח ה. ת ק ן ES5 ג ' אווהסקריפט, שוחרר ויושם בכל הדפדפנים שהיו קיימים אז. ה ג ר ס ה ה ר ב י ע י ת ש ל, מאז, התפתחות השפה והתפוצה שלה הואצו ד ר מ ט י ת. ד פ ד פ ן כרום, שמריץ ג ' א ו ו ה ס ק ר י פ ט ב א ו פ ן י ו צ א ד ו פ ן, נ כ נ ס א ל ה ש ו ק ב ס ע ר ה ו א פ ש ר ל מ פ ת ח י ג ' א ו ו ה ס ק ר י פ ט ל כ ת ו ב סקריפטים שפועלים ע ל ה ע ו צ מ ת י ש לV מ נ ו ע 8 כ ר ו ם ו ל ה ר י ץ ג' א ו ו ה ס ק ר י פ ט ב מ ה י ר ו ת מ ס ח ר ר ת. ה ש י מ ו ש ב- AJAX ת ק ש ו ר ת אסינכרונית עם השרת נ כ נ ס לפעולה, החליף שיטות מיושנות כגון Long polling ו א פ ש ר ל א ת ר י ם ח ו ו י ו ת ל ס פ ק ש י מ ו ש י ו ת מ ד ה י מ ו ת ל מ ש ת מ ש י ם. ב ש נ י ם ה א ח ר ו נ ו ת, פ ר י י מ ו ו ר ק י ם ו ס פ ר י ו ת ג ' אווהסקריפט אפשרו פונקציונליות מורכבת מאוד וספריות אחרות אפשרו כתיבה של ג ' אווהסקריפט ג ם ל ט ל פ ו נ י ם נ י י ד י ם ו א פ י ל ו ב ק ל ו ת. הראשונות שבספריות ה א ל ו נ ק ר א ו MooTools ו- jquery ו ה ן א פ ש ר ו לכל מתכנת ל כ ת ו ב א פ ל י ק צ י ו ת ב ק ל ו ת. ה ס פ ר י ו ת ה א ח ר ו נ ו ת נ ק ר א ו ת ר י א ק ט, א נ ג ו ל ר ו- vue 15
ו הן מ א פ ש ר ו ת ל ב נ ו ת ת ו כ נ ו ת מ ו ר כ ב ו ת מ א ו ד ע ל ג ב י ה ד פ ד פ ן ) צ ד ה ל ק ו ח (. ג ' א ו ו ה ס ק ר י פ ט ל א נ ו ת רה מ ו ג ב לת ר ק לצד הלקוח, כ ל ו מ ר ל ד פ ד פ נ י ם ולמכשירי קצה אחרים; המימוש של ג ' א ו ו ה ס ק ר י פ ט ל צ ד השרת, הידוע ב כ י נ ו י ו node.js ך, ה פ ל פ ו פ ו ל ר י ג ם ב ש ר ת י ם. ג ' אווהסקריפט מריצה כ י ו ם א פ ל י ק צ י ו ת מ ו ר כ ב ו ת ג ם ב צ ד ה ש ר ת, ב מ י ו ח ד אפליקציות שצריכות ל ב צ ע ק ר י א ו ת ו ל ש ר ת מ י ל י ו נ י מ ש ת מ ש י ם. כ י ו ם א פ ש ר ל מ צ ו א ג ' א ו ו ה ס ק ר י פ ט ב כ ל מ ק ו ם: ב א ת ר י א י נ ט ר נ ט, באפליקציות של ט ל פ ו נ י ם נ י י ד י ם, באפליקציות המיועדות ל מ ח ש ב י ם ר ג י ל י ם ו כ מ ו ב ן בשרתים. הביקוש ל מ ת כ נ ת י ג ' א ו ו ה ס ק ר י פ ט נ מ צ א ב ש י א ו ו א י ן ז ה פ ל א א פ ש ר לעשות בשפה הזו המון ד ב ר י ם יישומיים כמעט מאפס. י ש כ ל כ ך ה ר ב ה ס פ ר י ו ת ו כ ל י ע ז ר, עד שכמעט בכל שבוע יוצאת ספרייה שימושית חדשה. ב ע ז ר ת ידע מועט א פ ש ר ל ע ש ו ת ה ר ב ה מ א ו ד. מ ה ש ח ש ו ב ה ו א ידע בסיסי בשפה. ב ש נ י ם האחרונות, תקן ES מ ת ע ד כ ן בכל שנה ו מ ת ו ו ס פ י ם אליו תכונות ו ש י מ ו ש י ם ח ד ש י ם. ס פ ר ז ה מ ע ו ד כ ן ל ג ר ס ה ה א ח ר ו נ ה ש ל. ECMAScript ח ש ו ב ל ז כ ו ר ש א ם ה ת ק ן מ ת ע ד כ ן, א י ן פ י ר ו ש ה ד ב ר ש ה ע ד כ ו ן ה ח ד ש מ ו פ י ע מ י י ד ב ד פ ד פ נ י ם ש מ ר י צ י ם ג ' א ו ו ה ס ק ר י פ ט א ו ב ש ר ת י ם ש מ ר י צ י ם ג ' א ו ו ה ס ק ר י פ ט, א ל א ל ו ק ח ז מ ן ע ד ש ה ע ד כ ו נ י ם ה ח ד ש י ם ב י ו ת ר ע ו ש י ם א ת ד ר כ ם א ל הדפדפנים /שרתים שכולנו משתמשים בהם. אם שמעתם מפתחי אינטרנט " מקטרים" על דפדפנים י ש נ י ם זו בדיוק הסיבה. ז ה ה מ נ י ע ל כ ת י ב ת ה ס פ ר. ה ב ן ש ל י, כ י ו ם מ ת כ נ ת ב ז כ ו ת ע צ מ ו, ניסה ללמוד ג ' אווהסקריפט מאפס ו ל א הצליח למצוא ספרים בעברית. החומר שיש כיום בעברית בנוגע לג ' אווהסקריפט הוא דל ומיושן. חלק מחוברות העזר הנמצאות בבתי הספר מתייחסות לתקנים שהפסיקו ל ה י ו ת ב ש י מ ו ש ב ש נ ת! 2007 ה ת י י ח ס ו ת א מ י ת י ת ל ת ק נ י ם ה ח ד ש י ם ביותר של השפה, שיצאו ב ש נ ת 2017, א י ן ב נ מ צ א ב ע ב ר י ת. ה ת ח ל ת י לכתוב הסברים עבור בני, ו מ פ ה לשם הבנתי שאני חייב לקחת את זה הלאה. ג ' א ו ו ה ס ק ר י פ ט ה י א ש פ ה ש ק ל ל ל מ ו ד. ב נ י ג ו ד ל ש פ ו ת א ח ר ו ת, ל א נ ד ר ש י ם ב ה ס ב י ב ת ש ר ת מ ו ר כ ב ת א ו כ ל י פיתוח שעולים כ ס ף. ל א נ ד ר ש ידע מקיף במדעי המחשב. כ ל ש צ ר י ך ה ו א ל פ ת ו ח Notepad ב מ ח ש ב, לפתוח דפדפן ו ל ה ת ח י ל ל ל מ ו ד ולפתח. צריך גם הדרכה נ כ ו נ ה ומשמעת עצמית. אני מקווה שבספר הזה תמצאו לפחות הדרכה נכונה. המשמעת העצמית עליכם. אני מאמין שככל שתתקדמו בספר תראו א ת פירות הלימודים, הניצוץ ב ע י נ י ים י ת ח ז ק ולא תצטרכו עוד משמעת ע צ מ י ת א ת ם פ ש ו ט ת ת א ה ב ו ב ג ' א ו ו ה ס ק ר י פ ט ב כ ל ל וב פ י ת ו ח ל ו ו ב ב פ ר ט. א ל ת ד ל ג ו ע ל ה פ ר ק ש ב ו א נ י מ ס ב י ר א י ך ל ל מ ו ד; זהו הפרק החשוב ביותר בספר. א נ י מ א ח ל ל כ ם ה צ ל ח ה ר ב ה, בין שאתם מ ת כ נ ת י ם ב ת ח י ל ת ד ר כ כ ם בין שאתם מ ת כ נ ת י ם ו ת י ק י ם שמשתמשים בספר כדי ל ש פ ר א ת ה י ד ע ש ל כ ם. רן בר- זיק 16
ל ו מ ד י ם א י ך ל א ל מ ד ת י מ ד ע י ה מ ח ש ב ב א ו נ י ב ר ס י ט ה א ו ב מ כ ל ל ה. ל מ ע ן ה א מ ת, ע ד ג י ל מ א ו ח ר מ א ו ד ל א ל מ ד ת י ת כ נ ו ת ב ע ז ר ת מ ד ר י ך. ר ו ב מ ה ש א נ י י ו ד ע ל מ ד ת י ללא הדרכה, ומכמה סיבות : הראשונה היא שכאשר ע ש י ת י א ת צ ע ד יי ה ר א ש ו נ י ם ב ת כ נ ו ת, ב ש נ ת 1996 ה, ה ח ו מ ר ש ה י ז מ י ן ב א י נ ט ר נ ט ה י ה ד ל מ א ו ד. ע ל ח ו מ ר ב ע ב ר י ת ל א ה י ה מ ה ל ד ב ר, וה ח ו מ ר ב א נ ג ל י ת ס י פ ק ב ד ר ך כ ל ל ר ק א ת ה ד ו ק ו מ נ ט צ י ה. א נ י ל א מ מ ש מ ת ג א ה ב כ ך; ל מ י ד ה ל ב ד ל ל א ה ד ר כ ה ה י א ל מ י ד ה מ א ו ד ל א י ע י ל ה. ה ד ר כ ה מ ש מ ע ה ל א ר ק מ ר צ ה מ נ ו ס ה, א ל א ג ם א ת ר אינטרנט שבו י ש ה ס ב ר מ ק י ף, פ ו ר ו ם א ו ק ב ו צ ה ב ר ש ת ח ב ר ת י ת ז ו א ו א ח ר ת ) ל א ר ק פ י י ס ב ו ק ), ש י ש ב הם א נ ש י ם מ נ ו ס י ם ש י כ ו ל י ם ל ס י י ע א ו ל ה פ נ ו ת ל ח ו מ ר י ע ז ר. ה י א ג ם מקום שבו אפשר ל ת ר ג ל ו ל ה ת נ ס ו ת. למרבה המזל, בימים אלו קיימים שלל חומרים, עזרה ו ס י ו ע. ג ם הספר הזה הוא הדרכה. לא תידרשו ל צ ל ו ל לתוך הדוקומנטציה של ECMAScript על מנת להבין את השפה, אבל גם בעזרת הספר תמצאו דרך טובה ל ל מ י ד ה. כיוון שרוב הזמן ל מ ד ת י ללא הדרכה, גיבשתי כמה עקרונות למידה שהכנסתי לספר הזה. אני ממליץ ל כ ם לעקוב אחריהם. א ר ג נ ו לעצמכם סביבת עבודה מסודרת הפרק הראשון ע ו ס ק בבניית סביבת העבודה והוא הפרק החשוב ב ס פ ר. א ר ג נ ו את המחשב שלכם וסדרו לעצמכם תיקייה מאורגנת שבה תשמרו את כל התרגולים. אם המחשב שלכם מקפיץ התראות של עדכוני ג ' אווה או משהו בסגנון דומה, טפלו בכך. ודאו שאתם י כ ו ל י ם ל הי כ נ ס לאתר הלימודי שמלווה את הספר ושהסיסמה שלכם תקינה ו פ ו ע ל ת. קראו את הפרקים לפי הסדר ה פ ר ק י ם ל א פ ו ז ר ו ב א ק ר א י א ל א ת ו כ נ נ ו ב ס ד ר מ ס ו י ם. א י ן ט ע ם ל ל מ ו ד AJAX ל פ נ י ש מ ב י נ י ם א י ך ת כ נ ו ת א ס י נ כ ר ו נ י עובד. אין טעם ללמוד תכנות אסינכרוני לפני שמבינים איך קולבקים ע ו ב ד י ם. ו א ם ג ם ז ה נ ש מ ע ל כ ם ג ' יבריש, סימן שאתם צריכים להתחיל מההתחלה. קראו כל פרק לפי הסדר. ק ר א ו כ ל פ ר ק פ ע מ י י ם ו כ ת ב ו לעצמכם את כל הדוגמאות ק ר א ו א ת ה פ ר ק פ ע ם א ח ת ק ר י א ה ש ו ט פ ת. ל א ח ר מ כ ן ק ר א ו א ו ת ו ש ו ב. ה פ ע ם ק ח ו א ת כ ל ד ו ג מ א ו ת ה ק ו ד, ה ע ת י ק ו א ו ת ן ל ס ב י ב ת ה ע ב ו ד ה ש ל כ ם ו ש ח ק ו ב ה ן! נ ס ו ל ש נ ו ת א ת ה ע ר כ י ם, ל ג ר ו ם ל ש ג י א ו ת, לכתוב קוד ד ו מ ה. אני מאמין שקוד ל ו מ ד י ם דרך הידיים ו ל א ר ק דרך הראש. חשוב ל ה ב י ן את התיאוריה ואת הרעיונות מ א ח ו ר י מ ה ש מ נ ס י ם ל ע ש ו ת, א ך ל ל א מ י מ ו ש, ה י ד ע ה ז ה י ת נ ו ו ן ו יי ע ל ם, ב ד י ו ק כ מ ו ב ש פ ת ד י ב ו ר. א ם לא תשתמשו ותתרגלו, גם הלימוד התיאורטי המעמיק ביותר לא יהיה שווה הרבה. הקריאה הראשונה 17
נ ו ע ד ה ל ל י מ ו ד ה ת י א ו ר י ה, ה ק ר י א ה ה ש ני י ה נ ו ע ד ה ל ת ר ג ו ל. ל י מ ו ד ש פ ה ה ו א ל א מ ר ו ץ! ק ח ו א ת ה ז מ ן, כ ת ב ו א ת כ ל דוגמאות הקוד ו נ ס ו לכתוב כאלו משלכם. פתרו את התרגילים ל ד ו ג מ ה ב ס ו ף כ ל פ ר ק ב ס ו ף כ ל פ ר ק י ש ת ר ג י ל י ם ל ד ו ג מ ה. נ ס ו ל פ ת ו ר א ו ת ם. א ל ת תי י א ש ו מ ה ר ו א ל ת ר ו צ ו א ל ה פ ת ר ו ן א ל א ש ב ר ו ק צ ת א ת ה ר א ש. ה צ ל ח ת ם ל פ ת ו ר? נ ה ד ר. ק ר א ו א ת ה פ ת ר ו ן ה מ ו צ ע ו א ת ה ה ס ב ר ו ר א ו א ם ה ם ד ו מ י ם לשלכם או שונים במקצת. י ש יותר מפתרון אפשרי אחד ל כ ל ב ע י ה... התייעצו עם אחרים י ש ל א מ ע ט ק ב ו צ ו ת ב ע ב ר י ת ) ב פ י י ס ב ו ק, א ב ל ל א ר ק ( ה מ י ו ע ד ו ת ל ל י מ ו ד ג ' א ו ו ה ס ק ר י פ ט ו ל ד י ו ן ב ה. מצאו את זו שהכי נ ו ח ל כ ם ב ה. א ל ת ה ס ס ו ל ש א ו ל ש ם ש א ל ו ת. ל א ה ב נ ת ם מ ש ה ו? ד ו ג מ ה כ ל ש ה י ל א הייתה מובנת? הפתרון ל ת ר ג י ל ל א ה י ה ב ר ו ר מ ס פ י ק? ש א ל ו ש ם, ו ב ע ב ר י ת. אל תהססו ל ק ר ו א, ל מ ש ל דיון על משמעות השפה, להשתתף בדיונים או ל ס י י ע למישהו שהידע שלו ד ל מ ש ל כ ם. א ל ת ש כ ח ו ל ה ב י ן א ת ר ו ח ה ד ב ר י ם ב ק ב ו צ ה ו ל א ל ה צ י ק א ו ל ה ע י ק. ר ו ב ה מ ש ת ת פ י ם בקבוצה הם אנשים עובדים שלאו ד ו ו ק א ז מ י נ י ם להודעות מיידיות. ה ג י ע ו ל ס ד נ א ו ת ו ל מ י ט א פ י ם ל א מ ע ט ח ב ר ו ת מ א ר ג נ ו ת ב ח י נ ם ס ד נ א ו ת, מ י ט א פ י ם ו מ פ ג ש י ם ש ב ה ם מ ת כ נ ת י ם מ צ י ג י ם א ת ג ' א ו ו ה ס ק ר י פ ט ומרצים עליה. כדאי מאוד ל ה ג י ע למפגשים האלו, ל א ר ק ע ל מ נ ת לשמוע את התכנים ו ל ה ש ת ת ף ב ס ד נ א ו ת א ל א ג ם ל ה כ י ר א נ ש י ם א ח ר י ם ב ת ע שי י ה. ע ם ח ל ק ם אתם תתכתבו ב ק ב ו צ ו ת ה פ י י ס ב ו ק ל ג ' א ו ו ה ס ק ר י פ ט. ק ה י ל ת מ פ ת ח י ה ג ' א ו ו ה ס ק ר י פ ט ב א ר ץ ה י א ק ה י ל ה מ א ו ד ש י ת ו פ י ת ו ק ר ו ב ה, ורבים בה מכירים ז ה א ת ז ה. תרגלו, תרגלו, תרגלו לא שווה ה ס פ ר ה ב א ל פ ר ק ת ע ב ר ו א ל ב ו. ו ש י מ ו ש מ ק י ף ת ר ג ו ל ב ל י ה ר ב ה לפני שתסיימו כ ל א ת התרגולים שקשורים לפרק שקראתם. ז ה לא קריטי, אלא סופר- קריטי. 18
כ ן,( ר י נ ד ו ר "," התקנת סביבת העבודה ודרך הלימוד ג ' א ו ו ה ס ק ר י פ ט י כ ו ל ה ל ר ו ץ ב ס ב י ב ת ש ר ת א ו ד ר ך ה ד פ ד פ ן. א י ך זה בדיוק עובד? ג ' א ו ו ה ס ק ר י פ ט נ מ צ את ב ק ו ב ץ מ ע ר כ ת ט ק ס ט. ח ל ו נ ו ת. ב ד י ו ק כ ן, ב ד פ ד פ ן ז ה כ מ ו מ ו ת ק ן ש א פ ש ר ש ל ו ק ח כ ל י ל י צ ו ר א ת ב א מ צ ע ו ת ק ו ב ץ כ ת ב ן ה ט ק ס ט ה ט ק ס ט ו מ ר י ץ ה ז ה ( Notepad) ו א ת א ו ת ו ב כ ל ש י ש ה פ ק ו ד ו ת ש נ מ צ א ו ת ב ת ו כ ו. א ם ה ד פ ד פ ן ה י ה א ד ם, ה ו א ה י ה פ ו ת ח א ת ק ו ב ץ ה ט ק ס ט ו ק ו ר א א ת מ ה ש י ש ב ת ו כ ו, ל מ ש ל: " ל ך י מ י נ ה ופתח את הדלת ", ועושה בדיוק מה שכתוב. הפעולה הזו נקראת בלשון הפופולרית מ ל ש ו ן render ב ל ע ז. ה ד פ ד פ ן ק ו ב ץ א ת ל ו ק ח ה ג ' א ו ו ה ס ק ר י פ ט ה ג ' א ו ו ה ס ק ר י פ ט י כ ו ל לעשות כל מיני ד ב ר י ם ולהציג או ל א להציג אותם. ק ו ב ץ א ו ת ו. ו מ ר י ץ א י ך ה ד פ ד פ ן ט ו ע ן א ת ק ו ב ץ ה ג ' א ו ו ה ס ק ר י פ ט? י ש כ מ ה ד ר כ י ם ל ע ש ו ת ז א ת, א ב ל כ ר ג ע א ר צ ה ל ל מ ד א ת כ ם א י ך ל כ ת ו ב ק ו ב ץ ג ' א ו ו ה ס ק ר י פ ט ו ל ר א ו ת א ו ת ו פ ו ע ל ע ל מ נ ת ל ה ב י ן א ת כ ל ל י ה ש פ ה ו ל כ ת ו ב מ ש ה ו ב א ו פ ן ר א ש ו נ י ב י ו ת ר. ה ח ל ק ה ח ש ו ב ו ה ק ש ה ב י ו ת ר ה ו א י צ י ר ת ס ב י ב ת ה ע ב ו ד ה, כ ל ו מ ר ס ב י ב ה ממוחשבת שבה א פ ש ר ל ה ק ל י ד ג ' א ו ו ה ס ק ר י פ ט ו ל ר א ו ת א ו תה ע ו ב דת. ס ב י ב ה ז ו ה י א ח ש ו ב ה מ א ו ד כ א ש ר ל ו מ ד י ם, כיוון שלימוד של שפת תכנות נ ע ש ה ר א ש י ת כו ל " דרך הידיים" וחשוב מאוד ל א ר ק ל ק ר ו א א ל א ג ם ל ת ר ג ל. ו כ ד י ל ת ר ג ל צריך סביבה שמאפשרת ל ה ק ל י ד פקודות שפה, ל ש מ ו ר ו ל ר א ו ת א ת ה פ ל ט. א נ י ש ב ו מ ד ג י ש : ה ת ק נ ת ה ס ב י ב ה ה י א ה ח ל ק ה ק ש ה ב י ו ת ר ב ת ח י ל ת ל י מ ו ד ש פ ה ח ד ש ה ו ג ם ה ח ש ו ב ב י ו ת ר. ל פ י כ ך כ ד א י ל ה י א ז ר ב ס ב ל נ ו ת, ל ק ח ת נ ש י מ ה א ר ו כ ה ו ל ז כ ו ר ש ד ו ו ק א ע כ ש י ו מתמודדים עם החלק הקשה ביותר. ה ב ה נ ת ח י ל ב ע ו ר ך ט ק ס ט ט ו ב. א מ נ ם א פ ש ר ל ה ש ת מ ש ב נ ו ט פ ד, א ב ל ה ו א ל א מ צ י ע צ ב י ע ת ק ו ד ל צ ו ר ך ע ז ר ה ה ז ח ו ת י צ י ר ת ו ל א ב ק ר י א ו ת ט ק ס ט ע ו ר כ י כ מ ה י ש ב ק ל ו ת. ה מ ו ת א מ י ם ב מ י ו ח ד ל כ ת י ב ת ג ' א ו ו ה ס ק ר י פ ט, ש א צ י י ן כ מ ה מ ה ם. ב ח ר ו ב ע ו ר ך ט ק ס ט א ח ד! ר ו ב ם ז ה י ם ל מ ד י ו מ כ י ל י ם י כ ו ל ת ע ר י כ ה בסיסית של CSS, HTML ו ג ' א ו ו ה ס ק ר י פ ט. ש י מ ו ל ב : מתכנתים מנוסים לא משתמשים בעורך הטקסט הפשוט אלא בעורך טקסט משוכלל י ו ת ר ש נ ק ר א IDE א ו Integrated Development Environment IDE סביבת פיתוח משולבת. הסביבה הזו מאפשרת השלמת קוד, מציינת שגיאות בכתיבה ו ג ם י כ ו ל ה להריץ את הקוד עצמו. מ ע ו ל ה כ ן ), ה ו א נ ת מ ך. Visual Studio Code י ד י ע ל מ י ק ר ו ס ו פ ט ו נ י ת ן ח י נ מ י, ה ו א ל ה ו ר ד ה מ ב ו ס ס פ ה : כ ת ו ב פ ת ו ח, ק ו ד ב ג ' א ו ו ה ס ק ר י פ ט. https://code.visualstudio.com/ אחרי ההתקנה תוכלו לפתוח את התוכנה, לבחור ב- File ו א ז לפתוח את התיקייה שבחרתם ו ל פ ת ו ח א ו ל י צ ו ר ב ה ק ב צ י ם. א נ י מ מ ל י ץ ל כ ם ב ח ו ם ל ה ו ר י ד א ת ע ו ר ך ה ק ו ד ה ז ה : ה ו א ח י נ מ י ל ח ל ו ט י ן ואינו מכביד על המחשב. 19
ה ק ו ד" IDE מ ו צ ל ח א ח ר ה ו א. Atom ג ם ה ו א ח י נ מ י ומבוסס קוד פתוח וגם הוא... כתוב בג ' אווהסקריפט. הוא נ ת מ ך ע ל י ד י ג י ט ה א ב ו נ י ת ן ל ה ו ר ד ה פ ה : https://atom.io/ א. ה ו ד י ד ו מ ה ל- Code Visual Studio ואחרי ההורדה וההתקנה שלו אפשר להפעיל אותו בקלות. עורך טקסט נוסף שנחשב ל א מ י ן וטוב הוא תוכנה חינמית ב ק ו ד פתוח שנקראת Notepad++ א. ה ו נ י ת ן ל ה ו ר ד ה ב ק י ש ו ר ה ב א : https://notepad-plus-plus.org/download ו ה ו א ב ס י ס י י ו ת ר מ ש נ י ק ו ד מ יו. שימוש ב- Code Visual Studio או ב- Atom הוא מומלץ י ו ת ר כ י ו ו ן ש י ש ב ו " השלמה אוטומטית" של פ ק ו ד ו ת נ פ ו צ ו ת ב ג ' א ו ו ה ס ק ר י פ ט, ד ב ר ה מ ק ל מ א ו ד א ת ה ל מ י ד ה. כ מ ו כ ן ה ו א מ צ י ג ש ג י א ו ת ב ק ו ד כ ב ר במהלך הכתיבה, עוד לפני ההרצה. הסביבה הטובה ביותר ללימוד היא יצירת קובץ HTML שטוען קובץ ג ' אווהסקריפט. קובץ HTML הוא קובץ שהדפדפן יודע לפרש ו ל ה צ י ג, ו ה ו א יכול לקרוא לקובץ ג ' אווהסקריפט באופן כזה שהדפדפן י ר נ ד ר אותו. כאמור, רינדור הוא הרצת הפקודות שנכתבות בקוד ג' א ו ו ה ס ק ר י פ ט ו ה צ ג ת ן ע ל ה מ ס ך א ו ב מ ק ו ם א ח ר. רינדור, מלשון render המחשב, הוא מונח מתחום מדעי ופירושו הוא " ה ר צ ה ". כ ש א נ י כ ו ת ב מ ר ו נ ד ר " ה פ י ר ו ש הוא שהקוד ר ץ ו מ צ י ג א ת ה ת ו צ א ו ת. י ש ל י צ ו ר ב מ ח ש ב ת י ק יי ה ז ה י כ ו ל ל ה י ו ת ב " ה מ ס מ כ י ם ש ל י" א ו ע ל ש ו ל ח ן ה ע ב ו ד ה ובתוכה ליצור קובץ ששמו source.js וקובץ ששמו.index.html ב ח ל ו נ ו ת י צ י ר ת ת י ק י ה נ ע ש י ת ב א מ צ ע ו ת : כ נ י ס ה א ל ס י י ר ה ק ב צ י ם, ב ח י ר ת ה מ ק ו ם ש ב ו ר ו צ י ם ל מ ק ם א ת ה ת י ק י ה. ל ח י צ ה ע ל ה מ ק ש ה י מ נ י ש ל ה ע כ ב ר ו א ז ב ח י ר ה ב " ח ד ש " ו ב " ת י ק י ה ". א ת ה ק ו ב ץ ע צ מ ו כ ד א י ל י צ ו ר באמצעות התוכנות Visual Studio Code או Atom א ו א פ י ל ו Notepad++. פ י ת ח ו א ת אחת התוכנות האלו ) א נ י מ מ ל י ץ ע ל ( Visual Studio Code נווטו אל התיקיה וביחרו ב- File ואז.New 20
ו ד א ו ש מ ע ר כ ת ש ל כ ם ה מ ק א ו ה ח ל ו נ ו ת ת ו מ כ ת ה ק ו ב ץ ש ם ב ת צ ו ג ת ה ס י ו מ ת כ ו ל ל ה מ ל א,.index.html.txt יהיה בעצם index.html ש ל ה ק ו ב ץ. א ח ר ת, ק ו ב ץ ה-) Extension) ב ק ו ב ץ ה- HTML כ ת ב ו א ת ה ק ו ד ה ב א : <!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <script src="./source.js"></script> </body> </html> ב ת ו ך ק ו ב ץ ה- source.js כ ת ב ו א ת ה ט ק ס ט ה ב א : document.write('hello World!'); אחרי ששמרתם את תוכן שני הקבצים, פ ת ח ו את הקובץ ב ד פ ד פ ן כ ר ו ם א ו ב פ י י ר פ ו ק ס ) ל א ב א ד ג ' (. א ם ה כו ל ת ק י ן, תראו שכתוב ע ל ה מ ס ך " World! "Hello כ ת ב ת ם א ת ה ג ' א ו ו ה ס ק ר י פ ט ה ר א ש ו ן ש ל כ ם! שימו לב : ז ה ה ש ל ב ה מ ו ע ד ב י ו ת ר ל פ ו ר ע נ ו ת, ש ע ל ו ל ל ה י ו ת מ ת ס כ ל מ א ו ד, א ב ל ה ו א ש ל ב ח ש ו ב ב י ו ת ר ו א ס ו ר ל ה ר י ם י ד י י ם ולהתייאש. אם פתחתם את הקובץ ו ד ב ר לא הופיע, נסו את הדברים הבאים : בדקו שאכן קראתם ל ק ב צ י ם index.html ו- source.js צריכה. הבדיקה להתבצע באמצעות הכפתור ה י מ נ י ש ל ה ע כ ב ר ב ח ל ו נ ו ת, כ ד י ל מ נ ו ע מ צ ב ש ב ו מ ע ר כ ת ה ה פ ע ל ה ה ו ס י פ ה ת ו ס פ ו ת ל ש מ ו ת ו-.index.html.txt נשמר בשם index.html ב ד ק ו ש א ת ם פ ו ת ח י ם א ת ה ק ב צ י ם ב ד פ ד פ ן כ ר ו ם א ו ב פ י י ר פ ו ק ס. ב ד ק ו ש א י ן ת ו ס פ י ם מ י ו ח ד י ם לדפדפנים שעלולים ל ח ס ו ם א ת ה ר צ ת ה ק ו ב ץ ע ל י ד י ה ר צ ה ש ל מ צ ב פ ר ט י ו ת. 21
בדקו שהקלדתם את הטקסט כשורה בקובץ source.js ל ל א רווחים או תווים מיוחדים. נסו להשתמש ב- Atom או ב- Code Visual Studio ש י מ ו ל ב ש א י ן ה ת ר א ו ת ע ל ש ג י א ו ת ה ק ל ד ה. כ א ן. ל מ ש ל מ ו ב א ת ד ו ג מ ה ש ל ש ג י א ת ה ק ל ד ה ש ב י צ ע ת י. א ם ק י ב ל ת ם ה ת ר א ה כ ז ו, ב ד ק ו ש ו ב ש ל א ט ע י ת ם ב ג ר ש ושלא הכנסתם רווחים מיותרים כמו בדוגמה הזו שבה י ש ש י מ ו ש ש ג ו י ב ג ר ש י ח י ד ואז בגרשיים. ע ד י ף להשתמש תמיד בגרש י ח י ד: ב- Code Visual Studio א ת ם א ם מ ש ת מ ש י ם ב- Atom, א ו ס ב י ב ת א מ ו ר ה ש ל כ ם ה ק ו ד כ ת י ב ת להיראות כך : ה ק ב צ י ם כ ל א ת ל ר א ו ת ת ו כ ל ו ש מ א ל מ צ ד ב ת י ק י י ה. ת י ק י י ה ל י צ ו ר כ ד א י מ י ו ח ד ת ב ש ם learnjavascript או בשם דומה ולא לשים את כל הקבצים בתיקייה משותפת כמו " המסמכים שלי". מ צ ד ימין תוכלו לצפות בתוכן הקבצים. בצילום המסך רואים את תוכן הקובץ index.html אם תקלידו. ד ב ר מ ה, ת ו כ ל ו ל ר א ו ת ש י ש ה ש ל מ ה א ו ט ו מ ט י ת ש ל ק ו ד,HTML ואם תקלידו בקובץ source.js שמכיל א ת ה ג ' א ו ו ה ס ק ר י פ ט ת ר א ו ש י ש ה ש ל מ ה א ו ט ו מ ט י ת ש ל פ ק ו ד ו ת ג ' א ו ו ה ס ק ר י פ ט. נ ו ס ף ע ל כ ך, ת ק ב ל ו ג ם ה ת ר א ה ע ל ק ו ד לא תקין. כיוון שאתם כבר מפתחי ג ' אווהסקריפט מקצועיים, כדאי שתלמדו להשתמש בקונסולה של הדפדפן. מ ד ו ב ר ב מ מ ש ק מ י ו ח ד ש מ א פ ש ר " ל ד ב ג" א ת ג ' א ו ו ה ס ק ר י פ ט. ה פ ו ע ל " ל ד ב ג" כ ו ו נ ת ו ל ה ס ת כ ל ע ל צפונות הרינדור ו ל ר א ו ת מ מ ש א ת ה פ ל ט ש ל ה ש פ ה א ו א ת ת ו צ א ו ת ה ה ר צ ה ש ל ה. כ ל ו מ ר מ ה ש כ ת ב נ ו. נשמע מסובך? י ש ל ה ב י ן א י ך ה ד פ ד פ ן מ נ ס ה ל ה ר י ץ א ת ה ק ו ד ש ל ו ) כאמור מה שנקרא "רינדור", מלשון ה ר צ ה, ב א נ ג ל י ת ( נ ו ס ף מ י ד ע ו ל ק ב ל ב ק ו נ ס ו לה ואף מפנה לשורה הבעייתית. ב מ ק ר ה " ז ו ר ק" כ ל ו מ ר נ כ ש ל, ש ה ו א ש ג י א ה צ ב ו ע ה ב א ד ו ם 22
ע ל מ נ ת ל ר א ו ת א ת ה ק ו נ ס ו ל ה, פ ת ח ו א ת כ ל י המפתחים של ה ד פ ד פ ן. ב כ ר ו ם ו ב פ י י ר פ ו ק ס ל ח צ ו + Ctrl Shift + i אם י ש ל כ ם ח ל ו נ ו ת א ו Cmd + Shift + i א ם י ש ל כ ם מ ק. א פ ש ר לעשות את ז ה ג ם ד ר ך התפריט העליון בשני הדפדפנים. לאחר פתיחת כלי המפתחים, לוחצים על ל ש ו נ י ת. Console ה ב ה נבדוק מה אפשר לעשות בעזרת הקונסולה. היכנסו אל source.js והחליפו את הטקסט ל : console.log('hello World!'); ט ע נ ו מ ח ד ש א ת ה ד ף ב א מ צ ע ו ת Ctrl + F5 ב ח ל ו נ ו ת א ו Cmd + R ב מ ק. ה ט ע י נ ה מ ח ד ש ח ש ו ב ה. ה ד פ ד פ ן ל א י ו ד ע ש ה ו כ נ ס ו ש י נ ו י י ם ב ק ו ב ץ ה ג ' א ו ו ה ס ק ר י פ ט, ו י ש ל ג ר ו ם ל ו ל ט ע ו ן מ ח ד ש א ת ק ו ב ץ ה ג ' א ו ו ה ס ק ר י פ ט ע ל מ נ ת ל ה ר י ץ את הפקודות החדשות. אחרי הטעינה מחדש הסתכלו ע ל ל ש ו נ י ת ה- Console. א ם ה כו ל ת ק י ן, ה מ ס ך י ה י ה ריק, אך בקונסולה תראו!Hello World י ש! ח ש ו ב : אל תדלגו ע ל ה ש ל ב ה ז ה. בכל שלבי ה ל י מ ו ד כ ד א י ל ה ש ת מ ש בקונסולה, שהיא ה ר ב ה י ו ת ר נ ו ח ה להצגה. אם משהו ל א ע ו ב ד, א נ א ב ד ק ו א ת ה ד ב ר י ם ה ב א י ם: ה א ם ה ש ל מ ת ם א ת ש ל ב ה ק ו ד? ה צ ל ח ת ם להציג Hello World על המסך? ה א ם ש מ ר ת ם א ת ה ק ו ב ץ לאחר השינויים? ה א ם ט ע נ ת ם מ ח ד ש ב א מ צ ע ו ת Ctrl + F5 א ת ה ד פ ד פ ן?.1.2.3 מדובר בסביבת העבודה הטובה ביותר ל ל י מ ו ד ג ' אווהסקריפט, אך יש סביבות עבודה נוספות. ברשת י ש א ת ר י ם ה מ א פ ש ר י ם ל כ ת ו ב ג ' א ו ו ה ס ק ר י פ ט י ש י ר ו ת, ל ה ר י ץ א ת ה ק ו ד ד ר כ ם ו ל ר א ו ת א ת ה ת ו צ א ו ת. אתר מפורסם וחשוב כזה הוא https://codepen.io/ ואפשר להקליד בו פקודות של ג ' א ו ו ה ס ק ר י פ ט. פתחו שם חשבון ו צ ר ו pen" חדש. בדקו שיש אפשרות להכניס קודי" CSS, HTML ו- JS בעצם, שהוא קיצור של ג 'אווהסקריפט. אפשר להכניס את הקוד ולראות את התוצאות על ג ב י ד ף מ ד ו מ ה א ו ע ל ג ב י הקונסולה של הדפדפן. מ כ א ן, דרך הלימוד תהיה פ ש ו ט ה ל מ ד י. א נ י א ס ב י ר על תכונות מסוימות של השפה ו א ת ן ד ו ג מ א ו ת. מ ו מ ל ץ ב ח ו ם ר ב ל ה ע ת י ק א ת ה ד ו ג מ א ו ת א ל ק ו ב ץ ה- source.js ולהריץ את הג ' אווהסקריפט כדי לראות א י ך זה עובד באמת. 23
ב ס ו ף כ ל פ ר ק י ש ת ר ג י ל י ם ל ת ר ג ו ל ע צ מ א י ו מ ו מ ל ץ מ א ו ד ל נ ס ו ת א ו ת ם ב ס ב י ב ת ה ע ב ו ד ה. א י- א פ ש ר ל ל מ ו ד ש פ ה ע ל י ד י ק ר י א ה תי א ו ר ט י ת ב ל ב ד ו ר צ ו י ל ת ר ג ל, ל ת ר ג ל, ל ת ר ג ל. א ת ה ת ר ג ו ל ע ו ש י ם ר ק ב ס ב י ב ת ע ב ו ד ה י צ י ב ה. ל פ י כ ך, א נ א אל תדלגו א ל ה פ ר ק ה ב א לפני שיש לכם סביבת ע ב ו ד ה י צ י ב ה. מומלץ מאוד לעבוד ב- code Visual studio החינמית. 24
מ ח ק ו א ת ה ט ק ס ט ש י ש ש ם, ת ר גי ל : ב מ ק ו ם World!" "Hello ג ר מ ו ל ק ו נ ס ו ל ה להדפיס את המילים Bahla"."Ahla פ ת ר ו ן : ה י כ נ ס ו ל ק ו ב ץ source.js והדביקו במקומו את : console.log('ahla Bahla'); ש מ ר ו א ת ה ק ו ב ץ, פ ת ח ו א ת ה ק ו ב ץ index.html שטוען את הקובץ, ע ל, Ctrl + Shift + i לחצו על הלשונית Console וראו את התוצאות.,source.js ורעננו את הדף. לחצו 25
I am new ת ר גי ל : ג ר מ ו לקובץ ה- HTML לטעון קובץ ג ' אווהסקריפט ששמו targil.js ו ש מ ד פ י ס ב ק ו נ ס ו ל ה :.file פ ת ר ו ן : צ ר ו ק ו ב ץ targil.js באותה תיקייה של הקובץ. index.html י ש ל ו ו ד א ש ז ה ש מ ו ה א מ י ת י ש ל ה ק ו ב ץ ושמערכת ההפעלה לא מצמידה לקובץ עם סיומת txt א ת. ז ה ע ו ש י ם ע ל ידי בדיקה בהגדרות התצוגה ש ל מ ע ר כ ת ה ה פ ע ל ה. פ ת ח ו א ת ק ו ב ץ ה- HTML ב ע ז ר ת ע ו ר ך ט ק ס ט ) מ ו מ ל ץ ל ה ש ת מ ש ב- Visual <!doctype html> <html> ושנו את שם קובץ הג ' אווהסקריפט ל- targil.js. (Studio Code <head> <meta charset="utf-8"> </head> <body> <script src="./targil.js"></script> </body> </html> console.log('i am new file'); ב ק ו ב ץ targil.js כתבו את השורה הזו : פ ת ח ו א ת ה ק ו ב ץ index.html ב ד פ ד פ ן ו ל ח צ ו Ctrl + Shift + i ע ל מ נ ת ל ה צ י ג א ת כ ל י ה מ פ ת ח י ם. בחרו את הלשונית Console ובחנו את התוצאה. 26
ללמוד ג'אווהסקריפט בעברית רן בר - זיק 27
מ ש ת נ י ם החלק הבסיסי והחשוב ביותר הוא המשתנה. מדובר ברכיב שיכול להכיל בתוכו מידע, ואפשר לשנותו זו הסיבה שהוא נ ק ר א " משתנה". משתנה בג 'אווהסקריפט מוגדר באופן הבא : let variant; variant = 'Hello World'; מ ה ק ו ר ה פ ה? י ש כ א ן ה ג ד ר ת מ ש ת נ ה ש ש מ ו variant ה. ה ה ג ד ר נעשית באמצעות המילה השמורה let מיוחדת. מילה שמורה היא מילה בשפה שהשימוש בה שמור למקרה מסוים. במקרה הזה, let שמורה אך ו ר ק להגדרת משתנים. ל א ח ר מ כ ן מ כ נ י ס י ם ע ר ך ל מ ש ת נ ה. ה פ ע ו ל ה ה ז ו נ ק ר א ת " ה צ ב ת ע ר ך " א ו " ה ש מ ה ", ו ה י א נ ק ר א ת כ ך מכיוון שהערך מוצב בתוך המשתנה. במקרה הזה מדובר בטקסט הכולל את המיליםWorld.Hello ש י מ ו ל ב : י ש ס י מ ן ";" ב ס ו ף כל שורה. ב ג ' א ו ו ה ס ק ר י פ ט מ ו ט ב ל ה צ י ב ס י מ ן ";" ב ס ו ף כל שורה כ ד י למנוע בעיות וכדי שהסקריפט יעבוד. הוא מסמן סוף שורה עבור מנוע הג ' אווהסקריפט שמרנדר את ה ס ק ר י פ ט, מ מ ש כ מ ו נ ק ו ד ה ב ס ו ף מ ש פ ט. ע ל א ף ש ל א כ ל מ נ ו ע מ ק פ י ד ע ל כ ך, א נ י מ מ ל י ץ ל כ ם : הקפידו תמיד ל ה ק ל י ד ; ב ס ו ף כ ל ש ו ר ה. א פ ש ר ל ק צ ר ולהציב את הערך מייד בהגדרת המשתנה: let variant = 'Hello World'; ה ב ה נ ב ד ו ק א ת ה מ ש ת נ ה ו א ת ה ע ר ך ש ל ו. א פ ש ר ל ה צ י ב א ת ה מ ש ת נ ה ה ז ה ב ת ו ך console.log כ פ י שלמדנו בפרק הקודם: let variant = 'Hello World'; console.log(variant); 28
א ם ת צ י צ ו ב ק ו נ ס ו ל ה, ת ר א ו ש מ ו ד פ ס ה מ ש פ ט World" "Hello. מ ד ו ע? כ י ו ו ן ש ז ה מ ה ש י ש ב ת ו ך המשתנה. מן הסתם, משתנה נ י ת ן ל ש י נ ו י. נ ס ו א ת ה ק ו ד ה ז ה : מ ה ל פ י ד ע ת כ ם יוצג בקונסולה? י ו צ ג version" I" am a new. let variant = 'Hello World'; variant = 'I am a new version'; console.log(variant); ל מ ה? כ י ו ו ן ש ה ע ר ך ה ק ו ד ם " נ ד ר ס " ע ל י ד י ה ע ר ך ה ח ד ש. ה כ נ ס ת ם ) כ ל ו מ ר ה צ ב ת ם ( ע ר ך ח ד ש ל ת ו ך המשתנה, ועכשיו מה שיש בתוכו השתנה. כשמציגים את המשתנה רואים את הערך החדש. י ש ה ב ד ל מ ה ו ת י ב י ן ה ג ד ר ת מ ש ת נ ה לבין הכנסת ערך ל ת ו כ ו. ה ג ד ר ת מ ש ת נ ה ה י א כ מ ו ב נ י י ת א ר ו ן א ו ק ו פ ס ה ואפשר בכל פעם ל ה כ נ י ס לתוכו ערך אחר. ש י מ ו ל ב : אחרי שמשתנה מסוים הוגדר, אי- אפשר להגדיר אותו מחדש. הקוד הבא : let variant = 'Hello World'; let variant = 'I am a new version'; console.log(variant); י ג ר ו ם לשגיאה הבאה : declared Identifier 'variant' has already been שמות המשתנים יכולים להיות מגוונים אך י ש ל ה ם כ מ ה כ ל ל י ם מ ח י י ב י ם. א פ ש ר ל ה ש ת מ ש ב כ ל א ו ת ש ה י א וב ס י מ נ י ם _ א ו $ ב ת ח י ל ת ה ש ם, ובכל האותיות ו ה מ ס פ ר י ם וב ס י מ נ י ם _ א ו $ ב ה מ ש ך ה ש ם. שמות תקינים myvar3 my_var $myvar myvar ש מ ו ת לא תקינים 3myVar מתחיל במספר my-var מ כ י ל א ת ה ת ו - ש א י נ ו ת ק י ן #myvar מ כ י ל א ת ה ת ו # ש א י נ ו ת ק י ן my var מ כ י ל ר ו ו ח ש י מ ו ל ב : א פ ש ר ל ה ש ת מ ש ב ע ב ר י ת בהגדרת המשתנים, אבל מומלץ שלא ל ע ש ו ת א ת ז ה ג ם כ י ו ו ן ש ה ק ו ד ש ל כ ם י ה י ה פ ח ו ת ק ר י א ו ג ם כ י ו ו ן ש ז ה ע ל ו ל ל ה ו ב י ל ל ה ת נ ה ג ו ת מ ו ז ר ה ו ל צ ר ו ת. א ת ן ל כ ם ט י פ : ב ע ו ל ם ה ת כ נ ו ת א ל ת ח פ ש ו צ ר ו ת כ י י ש מ ס פ י ק מ ה ן ג ם כ ך. ש י מ ו ל ב 2: ב ג ר ס א ו ת ק ו ד מ ו ת ש ל ג א ו ו ה ס ק ר י פ ט ה ש ת מ ש ו ב מ י ל ה ה ש מ ו ר ה var ל ה ג ד ר ת מ ש ת נ ה. בתקנים החדשים כבר לא מקובל להשתמש ב- var כיוון שלשימוש בו יש השלכות שנדון בהן בהמשך ה ס פ ר. ה ו א נשאר איתנו בעיקר בשביל תאימות לאחור עבור קוד שנכתב בשנים עברו. 29
ת ר גי ל : צרו משתנה בשם המורכב לפחות משתי מילים, הדפיסו אותו בקונסולה וודאו שבהדפסה בקונסולה יופיעו המילים JavaScript"."I know פ ת ר ו ן : let myvar; myvar = 'I know JavaScript'; console.log(myvar); ב א מ צ ע ו ת נ ע ש י ת ה ט ק ס ט ה ש מ ת.let ה ש מ ו ר ה ה מ י ל ה ב א מ צ ע ו ת נ ע ש י ת ה מ ש ת נ ה ה ס ב ר : י צ י ר ת הסימן =. שימו לב שהטקסט מוקף בגרשיים. פקודת ה- console.log שלמדנו בפרק הקודם משמשת להדפסת הטקסט - ובמקרה הזה המשתנה שהיא מקבלת. 30
בונוס : הדפיסו את שני המשתנים בקונסולה באמצעות פקודת( ת ר גי ל : צרו משתנה בשם myvar והכניסו לתוכו את טקסט JavaScript" "me not know הזה בטקסט JavaScript" I" know והדפיסו אותו באמצעות console.log דרסו את הטקסט. פ ת ר ו ן : let myvar = 'me not know JavaScript'; myvar = 'I know JavaScript'; console.log(myvar); ה ס ב ר : יוצרים את המשתנה myvar ומכניסים לתוכו את הטקסט JavaScript" me not know ממש ברגע" ה י צ י ר ה. ל א ח ר מ כ ן ד ו ר ס י ם א ת ה ע ר ך ה ז ה ב א מ צ ע ו ת ה ש מ ה נ ו ס פ ת. ה ה ד פ ס ה ש ל מ ה ש י ש ב מ ש ת נ ה נעשית באמצעות.console.log ת ר גי ל :. "I am myvar" myvar ב ש ם מ ש ת נ ה צ ר ו ו ה כ נ י ס ו ה ט ק ס ט א ת ל ת ו כ ו ב ש ם נ ו ס ף מ ש ת נ ה צ ר ו I". am myvar "2 ו ה כ נ י ס ו לתוכו את הטקסט myvar2 הדפיסו את שניהם באמצעות :console.log console.log א ח ת) פ ת ר ו ן : let myvar = 'I am myvar'; let myvar2 = 'I am myvar 2'; console.log(myvar); console.log(myvar2); ה ס ב ר : אין מניעה להגדיר כמה משתנים באותו סקריפט. הגדרתי את המשתנה באמצעות המילה השמורה המשתנה, שם ) הכולל מספר בסוף ( והדפסה שלו ל- console.log. let ה ס ב ר לתרגיל הבונוס : נ ס ו ל ח פ ש ב א י נ ט ר נ ט א י ך ל ה ד פ י ס ל- console שני משתנים. הרבה פ ע מ י ם י ה י ו ד ב ר י ם ש ל א ת ב י נ ו ב ת ר ג ו ל. ב מ ק ו ם ל ק ר ו א ש ו ב ו ש ו ב א ת ה ה ס ב ר, נ ס ו ל ח פ ש ת ש ו ב ה ב ר ש ת. כ ך עושים מתכנתים מקצוענים : הם מחפשים תשובות ברשת. 31
ללמוד ג'אווהסקריפט בעברית רן בר - זיק 32