» «
ג'אווה סקריפט
מה היתרון הגדול של שפת ג'אווה סקריפט?



מבין שפות התכנות הרבות, שפת ג'אווה סקריפט (Javascript ובקיצור JS) היא אחת השפות הפופולריות ביותר וגם המבוקשות ביותר אצל מעסיקים בעולם ההייטק. לפי מדידות שנערכו באתר StackOverFlow, בשנת 2019 היא הייתה השפה הכי פופולרית בעולם.

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

במקור פיתח אותה מתכנת בשם ברנדן אייך (Brendan Eich), שכתב את השפה ופיתח את הגרסה הראשונה שלה כשפת תכנות ב-10 ימים בלבד. אייך, אגב, הוא מי שהקים את פרויקט מוזילה ולימים הפך גם למנכ"ל אחד הדפדפנים השווים - דפדפן הקוד הפתוח Brave. באותם ימים, אגב, היא נקראה LiveScript. בשנים שאחרי כן היא זכתה להמון שמות, ביניהם ECMAscript, Jscript ועוד.

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

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

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

לא פלא שרבים בתעשייה ממליצים למתחילים ללמוד תכנות להתחיל באחת משתי השפות - פייתון או ג'אווה סקריפט. בעוד פייתון מיועדת לשימושים מגוונים, רבים לומדים Javascript במטרה להפוך למפתחי front-end ו/או back-end.

גם המנוע שמריץ את השפה התרחב. מדפדפנים שכוללים מנוע JS הוא הורחב ל-Node.JS, מנוע עצמאי ליישומים, שפיתח מהנדס תוכנה מוכשר. בכך הוא איפשר לתעשייה מנוע JS בתוכנה עצמאית, מה שהוביל לפיתוח back-end לאפליקציות ווב ומובייל שונות, מחוץ לדפדפן.

ואגב, אחת השאלות הכי פופולריות על JavaScript היא האם היא מבוססת על שפת Java. התשובה המתחכמת היא שהקשר בין שתיהן הוא כמו הקשר בין Car ל-Carpet... התשובה הפשוטה היא שאין ביניהן כל קשר. הסיבה לכך שהשם JavaScript כולל את המילה Java היא שבשנות ה-90 שפת Java והמילה Java בכלל, היו לוהטות. לכן יצר מי שיצר את השם JavaScript לשפת התכנות שכל כך הרבה שמות היו לה ואף אחד לא ממש תפס. התוצאה הייתה מעולה ומיידית והשם JavaScript נשאר.

אחד ההבדלים הכי גדולים בין שתי השפות הללו הוא ש-JS היא Interpreted, בעוד ש-Java היא שפה שהקוד בה עובר הידור, כלומר מתורגם באמצעות Compiler לשפת מכונה.


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

https://youtu.be/w5dnqy-_MQM


קורס מלא של שפת ג'אווה סקריפט (עברית):

https://youtu.be/fplM3uWr_8Y


היכרות עם שפת ג'אווה סקריפט באנגלית:

https://youtu.be/c-I5S_zTwAc


וקורס באורך מלא של תכנות בשפת Javascript :

https://youtu.be/W6NZfCO5SIk?long=yes
ארגומנטים
מהם פרמטרים וארגומנטים בקוד התוכנה?



נהוג לומר שהשם הנרדף של "ארגומנטים" הוא "משתנים" או גם "פרמטרים".

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

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


#דוגמה
למשל כאן, ניתן לראות ש-x הוא פרמטר, בעוד ש-y הוא ארגומנט.

int f(struct S *x);
return f(&y);


#אז בהגדרה אלה יהיו פרמטרים.
כלומר, פרמטרים (משתנים) מתקבלים על ידי הפונקציה כשמגדירים אותה. כל ארגומנט מופיע בצורה של סוג (type) ואז שם. כך יהיו למשל ארגומנטים מסוג int שבהם יופיעו מספרים שלמים, מסוג double שיהיה בו מספר עשרוני, או String עם מחרוזת טקסט.


#בקריאה לפונקציה אלה ארגומנטים
כשאנו מריצים פונקציה, היא מבצעת פעולה מסוימת. אלא שלא תמיד נרצה שהיא תעשה בדיוק את אותה פעולה בדיוק, או עם אותם נתונים. כך למשל, אם נרצה להשתמש בפונקציה כמו printInBold, כדי להדגיש מחרוזת טקסט בכתב Bold, נרצה לספק בכל פעם מחרוזת טקסט אחרת. זה בדיוק מה שהארגומנט (Argument) מאפשר לנו. כשנקרא לפונקציה, נכניס באמצעותו משתנה לתוך הסוגריים שלה וכך היא תבצע את הפעולה על המשתנה הזה.

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

ארגומנטים, אם כן, הם פרמטרים שפונקציה מצפה לקבל דה פקטו. באמצעות הקוד שתוכנת בה לביצוע היא תייצר את ה-return שלה ממנו, או תדפיס אותו בפקודת print לטרמינל.


#לכן תיאורטית...
ה"פרמטרים" שההגדרנו בפונקציה עצמה, אלה "פרמטרים פורמליים" (Formal Parameters). לעומתם, ה"פרמטרים" שנשלחים לפונקציה הקיימת, נקראים "פרמטרים אקטואליים" (Actual Parameters) והם הארגומנטים.


#ומעשית...
המונח "פרמטרים" יכול לשמש למעשה בכדי לתאר, גם את ה"פרמטרים" וגם את ה"ארגומנטים".


הנה ארגומנטים בפייתון:

https://youtu.be/tQ7it_vlptA


ופרמטרים וארגומנטים בשפת Javascript:

https://youtu.be/G4lZSWssoqA
מחלקה (תכנות)
מהי מחלקה בתכנות מונחה עצמים?



אבני בניין עיקריות ומשמעותיות במיוחד לכתיבת קוד מובנה בתכנות מונחה עצמים, הן ה-Classes, בעברית "מחלקות". המחלקות מאפשרות לכתוב תכניות מודולריות, יעילות וחסכוניות מאוד בקוד.

המחלקה (class) היא סוג של מנגנון להגדרה של טיפוסים בתכנית. יש בה אוסף של נתונים ולצידם מבחר פעולות שאפשר לעשות עליהם. יש בה שני מרכיבים עיקריים. הראשון כולל את השדות, סוג של משתנים אוגרי נתונים. השני כולל מתודות או שיטות, שהן פונקציות הפועלות על המשתנים הללו.

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


#בואו נבחן את העולם לרגע
בואו נביט רגע על ציפורים. לכל הציפורים יש מאפיינים משותפים, כמו מקור, זנב וכנפיים. אבל האם לכולן יש למשל את אותן כנפיים? - התשובה היא כמובן שלא. המאפיינים אם כך, הם בעצם סוג של משתנים (Variables), שיכולים להשתנות מסוג לסוג ואפילו בין ציפורים מסוג זהה. אם נביט על העורב למשל, הרי שהוא אובייקט (Object), כלומר פרט במחלקה הזו של הציפורים. מכאן שיש לו נוצות.

הנוצות בדוגמה של הציפורים הן מאפיינים (properties). לכל החברים במחלקה יש מאפיינים משותפים, שנוצות הוא אחד מהם.

אבל האם כל המאפיינים הללו זהים אצל כולם? - התשובה היא לא. הגדרת המחלקה לא אומרת למשל את הצבע של הנוצות של חבריה.

בתכנות מונחה עצמים הצבע הוא בעצם משתנה (Variable), שיכול לקבל ערכים שונים, כמו הערך (Value) שחור (Black) אצל האובייקט עורב או ורוד אצל אובייקט הפלמינגו.

זוכרים את המאפיינים? - בתכנות מונחה עצמים המשתנה הזה של צבע הנוצה נקרא "מאפיין" (Property). אז ה-Property, כלומר משתנה צבע הנוצה, מקבל אצל העורב ערך (Value) של... שחור.


#התבלבלתם? - עוד דוגמה...
בואו נחשוב על החיים, כשאנו מתארים את המכונית שקנינו. איננו נדרשים בכל פעם לתאר מהי מכונית, איך היא בנויה, כיצד היא נוסעת, עוצרת, ננעלת וכדומה - אנחנו פשוט מספרים שקנינו מכונית פורשה מהירה וחזקה במיוחד. זה מספיק כדי שהשומעים יבינו המון. את המשמעות הכללית של מהי מכונית הם הרי מכירים מזמן. הם יודעים המון על מכוניות. מחלקה חוסכת את ה"חפירה", כלומר את אותו מידע מיותר שניתן היה לפרט בכל פעם שמדברים על מכונית.


#אז מהי מחלקה?
כמו המושג "מכונית", המחלקה היא אבטיפוס של אובייקטים. מגדירים אותה פעם אחת ואז ניתן ליצור ממנה אינסוף אובייקטים.

כל מחלקה מכילה תכונות (attributes) או מאפיינים (properties) ושיטות או מתודות (methods).

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


#אז איך זה יעבוד במחלקה "מכונית"...
יש בהגדרת המחלקה את התכונות, או הפרופרטיז של האובייקט (למשל הדגם, המידה, הצבע של המכונית), אבל בלי הערכים הספציפיים (כמו פג'ו, אקסטרה לארג', צבע כחול).

יש במחלקה גם את השיטות (Methods) של האובייקט, כמו נסיעה, בלימה וכו'.

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


#המחלקה כבלופרינט
מחלקה (Class) בשפת תכנות מונחית עצמים היא סוג של בלופרינט (Blueprint), משהו בין תכנית אב לאבטיפוס בעולם האמיתי.

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

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


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

המשותף לכל האובייקטים שנוצרו על בסיס מחלקה כלשהי הוא שלכולם אותן תכונות (Properties) וכולם יכולים לבצע פעולות זהות (Methods). לדוגמה, לכל המכוניות יש מנוע וצבע משלהן וכולן יוכלו לנסוע ולבלום.

הגדרת הקלאס מאפשרת לפרט את מאפייני האובייקט ולציין גם את השיטות והפעולות בהן יכול האובייקט להשתמש. המחלקה, כלומר הקלאס (Class), קובעת איך כל אובייקט נראה ואיך הוא מתנהג ואחרי כן ניתן לעשות עליו מניפולציות, באמצעות ערכים (Values) ספציפיים.


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

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

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


#דוגמה אחרונה
אם מחלקה או class היא blueprint, תכנית-אב לאובייקט חדש, אז בואו נגדיר מחלקה של "מטוס נוסעים".

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


הסבר של המאפיינים וכיצד הם משתייכים למחלקות:

https://youtu.be/tE2e9SXLyQs?end=2m14s


סרטון שמסביר את הגדרת המחלקות והשימוש בהן בשפת Java:

https://youtu.be/L5XI50A1az4


למדו על המחלקה בתכנות בשפת פייתון:

https://youtu.be/ZZCnfRmxq6s


והסבר על הגדרת מחלקות ב-Javascript, ביחד עם עוד דברים:

https://youtu.be/Q0IFtEB1RH4
פרונט אנד
מהם פרונט אנד, בק אנד ופול סטאק בתכנות?



פרונט אנד (Front-End) ובק אנד (Back-End) הם שני מושגים שמשתמשים בהם הרבה בעולם התכנות והנדסת התוכנה ויש אנשי תוכנה ומהנדסים שמתמחים בכל אחד מהם.

אבל מה המשמעות וההבדלים ביניהם?

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


#Frontend
הפרונט אנד, צד המשתמש, כולל את כל מה שרואים באתר או באפליקציה, כל הצדדים הנראים, הוויזיאליים של הפיתוח. בין השאר הוא כולל את המסך, החלונות, הכפתורים, השדות והתפריטים. את ה-Front End רואה המשתמש ולא רק המפתח.

זהו צד הלקוח (Client), או צד המשתמש (User). הוא מפותח בטכנולוגיות האינטרנט הידועות והקלאסיות, של HTML, CSS, JavaScript ועוד. ממשקי ה-WEB כאן נועדו לאפשר תמיכה בתקשורת עם מסדי הנתונים והשרתים, תקשורת שעליה אחראי הבק אנד.


#Backend
הבק אנד, צד השרת, נמצא אכן ברקע. כאן נעשה כל הצד הלוגי וחישובי של. ב"בק אנד" מנוהלת הפעילות שמאחורי הקלעים של האתר, האפליקציה או התוכנה שבה אנו משתמשים. הבק אנד הוא שאחראי לפעולה החלקה, התקינה והיעילה של השירות. יש לו אחריות על התקשורת עם השרתים (Servers), שעליהם שמורים בסיסי הנתונים.

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


#ומה זה Fullstack?
יש קטגוריה של Full Stack והיא כוללת את האינטגרציה, השילוב בין שתי הקודמות. אנשי פול סטאק מטפלים בכל הפעילות הזו, מקצה אל קצה. מדובר באנשים שיודעים לעשות את שני התפקידים או הקטגוריות שלמעלה ואת השילוב ביניהם.

למעשה, מפתחי פול סטאק יודעים לפתח בשפות השונות, הן בצד הלקוח והן בצד השרת. הם מפתחים גם את מה שנראה למבקרי האתר ונקרא ה-Frontend וגם את ה-backend, הצד שמאחורי הקלעים, זה שרובנו לא רואים וממילא לא מודעים לקיומו ולחשיבותו מספיק.

בכל מקרה, מדובר במפתחים בעלי ידע רב, השולטים בלא מעט שפות תכנות, סביבות פיתוח, פריימוורקים (Frameworks), עורכי קוד ובעיקר טכנולוגיות, שכל הזמן מתעדכנות, משתנות ומתחדשות.

היכולת של אנשי ה-Fullstack לנהל את הפרויקטים לכל אורכם הופך אותם לא פעם לבעלי יכולות ותפקידי ניהול פרויקטים בפיתוח, או לפחות פיקוח על בניית מוצרים בחברות גדולות.

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


הנה הפרונט אנד, לעומת הבק אנד (עברית):

https://youtu.be/eU-C17D6hfU?t=17s


פרונט אנד:

https://youtu.be/WG5ikvJ2TKA


בק אנד:

https://youtu.be/XBu54nfzxAQ


והנה השניים וה"פול סטאק" שמשלב ידע בשניהם:

https://youtu.be/NMKdd1Hz06U

Javascript

לולאה
מה ניתן לעשות עם לולאה בתכנות?



מתכנתים לא אוהבים לעשות שוב ושוב את אותה פעולה. לכן הם משתמשים בפטנטים כמו לולאה (Loop).

"לופ" (Loop), בעברית לולאה, היא קטע קוד שנרצה שיתבצע שוב ושוב, מספר מוגדר של פעמים או לפחות עד שהוא יסיים את תפקידו.


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


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

דוגמאות? - בתכנות מחשבים נדע לעתים כמה פעמים בדיוק נרצה שהוא יתבצע. אז נשתמש בלולאה שנקראת for.

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

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

#לולאת for
אתם אנשים מחושבים ולכן תרצו לרוץ עד 20 סיבובים. הרי ברור לכם שאין טעם להתאמץ אם כבר יש לכם ציון של 100. לולאת for תאפשר את זה בקלות. תשמשו ודאי בלולאה של 20 פעם סיבוב אחד ומובטח לכם ציון של 100.

למקרה הזה תתאים לולאת for. זו לולאה שתתבצע מספר פעמים מוגדר מראש. בשפות שונות הם יוצגו אחרת, אבל בעיקרון יש לה 3 מרכיבים המנוסחים בעזרת משתנה: ערך התחלה, תנאי הסיום וצעדי ההתקדמות של המשתנה.


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

אז לולאה זו מתנהלת כל עוד התנאי (ביטוי לוגי של Boolean expression) שבסוגריים מתקיים. נבחר בה במקרים שבהם איננו יודעים מראש כמה פעמים הלולאה תרוץ, אך יש לנו תנאי שכל עוד הוא מתקיים נרצה שהיא תרוץ. כלומר, כל עוד הביטוי הלוגי, שהוא התנאי בעצם, הוא true - הבלוק של הלופ, התכנית שלו, יתבצע. ברגע שהוא יהפוך ל-False אז היא לא תתקיים ויהיה דילוג מעליה.

יש גם לולאת do while, שהיא סוג נוסף של לולאה. היא מבצעת את מה שיש בה כמו while. אך בניגוד ל-while היא בודקת רק בפעם הראשונה את התנאי, כלומר do while בודקת בכל סיבוב מחדש האם התנאי מתקיים.

לעתים, אגב, נרצה לבדוק אם תנאי מסוים מתקיים ואם כן או לא, לפי הקוד, להפסיק את הלולאה. פקודת break בשפות תכנות שונות נועדה להפסיק כך את הלופ.


הנה סרטון שמסביר מהן לולאות:

https://youtu.be/r3Ti5Xp9W8A?end=1m53s


הלולאה לתלמידי תכנות שפת פייתון (עברית):

https://youtu.be/yBCNY__d4ic


והסבר לולאות ב-Javascript (עברית):

https://youtu.be/PaPMOL12V3g
משתנה
מהם משתנים בתכנות מחשבים?



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

נחזור למשתנה הבקבוק. נוכל לאחסן בו משקה כלשהו. סוג המשקה הזה הוא "ערך" המשתנה. הערך של המשתנה יכול להשתנות, כלומר תמיד ניתן לשתות או לשפוך את תוכן הבקבוק ואז למזוג אליו משקה אחר. זו הסיבה בתוכנת מחשב שהוא נקרא "משתנה" ולא "קבוע".


#בתוכנה
אז משתנה (Variable) בתכנות הוא מרכיב מרכזי בתוכנית מחשב, שמהווה בעצם זיכרון. הוא מעין תא תכנותי, קופסת איחסון (Place holder). הנתונים שנשמור במשתנה יכולים להיות כאלה שאנו מייצרים במהלך התכנית, או כאלה שקיבלנו מהמשתמש.

המשתנה מכיל נתון, שיכול להשתנות בזמן הריצה של התכנית - על פי הפקודות הניתנות לו. בכך הוא שונה מהקבוע (const או final), בו נשאר הערך שנקבע בתחילת ההרצה של התכנית ועד סופה ללא שינוי.


#התפקיד
משתנים הם ללא ספק אבני הבניין של שפות תכנות.

המשתנה משמש בתכנית כדי לזכור, לאחסן ולשמור על נתונים להמשך התכנית. זהו מעין לוקר תכנותי, שנוכל לתת לו שם, בהתאם לנתונים שהוא יאחסן. שם המשתנה הוא כמו התווית שעל הקופסה שהוא ובפעם הראשונה שנגדיר את המשתנה יופיע לפניו סימון שמדובר במשתנה (משהו כמו var, כקיצור של variable).

הנתונים שיאוחסנו במשתנה יכולים להיות מוגבלים לסוג מסוים. סוג המשתנה אומר מה יש או יכול להיות בו (מספרים שלמים, עשרוניים, מחרוזות תווים וכו').

למשל מחרוזות טקסט (שיוגדרו כ-String), מספרים שלמים (int), מספרים עשרוניים (double או float) ועוד. את הסוג של הנתונים, ניתן לקבוע כשמגדירים משתנה, כמו שהגדרנו var למשתנה כללי המקבל כל סוג של נתון.


#מה קורה כשמחליפים נתונים?
היות וניתן להחליף את ערכי המשתנה במהלך התכנית, הערך החדש יחליף את הקודם והמשתנה יקבל אותו מרגע השינוי. הערך הקודם, אם היה ספק, יישכח ולא יהיה משהו שיזכיר אותו. כך עובדת תכנית מחשב.

משתנים הם הבסיס של שפת תכנות באשר היא. הם מאפשרים לעשות מניפולציות על הנתונים ולאחסן בהם את התוצאות של אותן פעולות שעשינו.

את שם המשתנה קובע המתכנת. השם הזה הוא ייחודי ואין שני משתנים עם אותו השם. אם נטעה וננסה לתת שוב שם שכבר נתנו - נקבל שגיאה.


הנה סרטון שמסביר מהו משתנה:

https://youtu.be/xjZDZ1TJe4o?t=48s&end=1m53s


המשתנים לתלמידי תכנות שפת פייתון (עברית):

https://youtu.be/FadkQtKw2Dc


והסבר משתנים ב-Javascript (עברית):

https://youtu.be/F6hLRLho0Lc
פונקציה
מהי פונקציה בתכנות?



מכירים את זה שאתם עושים שוב ושוב, כל יום או כל כמה שעות את אותה פעולה וזה נראה לכם לא הגיוני?

גם מתכנתים לא אוהבים לעשות שוב ושוב את אותה פעולה. לכן הם למשל משתמשים בלולאות (Loops). אבל יש מרכיב שחוסך עוד יותר עבודה וכתיבת קוד מיותר. כי מתכנתים אוהבים לשמור את הקוד שלהם DRY, קיצור של "don’t repeat yourself".

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


#אבל מהי פונקציה?
פונקציה היא קוד שמבצע פעולה. הרעיון בכתיבת פונקציה הוא לכתוב פעם אחת קוד והוא יחליף את הצורך לכתוב פעולות דומות שוב ושוב, במקומות שונים בתוכנה.

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

מדהים לא?

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

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

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


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


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

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


#דוגמה לפונקציות בחיים
נסביר את זה רגע בדימוי מהחיים: דמיינו שאתם בפסטיבל עם המון אנשים ואיבדתם את החברה שלכם. אתם ניגשים לבמה ומבקשים להכריז שאתם ממתינים לה. אומרים לכם לדבר עם שמעון, הכרוז של הפסטיבל. הוא בחור נחמד וענייני ומבקש מכם מידע, דאטה. במילים פשוטות - הוא שואל איך קוראים לה ומה שמכם. כשאתם נותנים את הפרטים הללו, שמעון ממהר להכריז במיקרופון "ברכה לוי, בואי ליד הבמה! יוסי ושרון ממתינים לך". דקות אחר כך ברכה מגיעה אליכם ליד הבמה.

סוף טוב הכל טוב!

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


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

איך זה עובד?

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

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

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

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

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

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

כשקוראים לפונקציה, זה כמו למלא טופס. לתוך הסוגריים, מכניסים את הפרמטרים, האינפוט, את המידע שהפונקציה רוצה (כמו ששמעון שואל "איך קוראים לילדה שנעלמה לכם?")

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

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

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


הנה סרטון שמסביר את הפונקציה בפשטות:

https://youtu.be/3JIZ40yuZL0?end=2m40s


הפונקציה לתלמידי תכנות שפת פייתון (עברית):

https://youtu.be/o0wyYsNbJeY


והסבר הפונקציות ב-javascript (עברית):

https://youtu.be/c7mqY6QtdQQ
HTML
מה זה HTML ולמה משמש CSS?



HTML (קיצור של HyperText Markup Language) היא שפה או פרוטוקול שבו כתובים דפי אינטרנט ואתרי אינטרנט פשוטים. כלומר, זו שפה שבאמצעותה ניתן ליצור דפי אינטרנט ואתרים.

CSS, לעומתה, היא שפת סגנון בסיסית, שגורמת לדפי אינטרנט להיראות טוב.

להדגמת ההבדל נדמה את האתר לבית. אם HTML מציעה את חומרי הבנייה שמהם הוא ייבנה, הרי ש-CSS מציעה את הצבעים ואת חומרי ומרכיבי העיצוב והסגנון של הבית.

או המחשה נוספת - אם HTML קובע כיצד המכונית שלך תיסע, ה-CSS יקבע כיצד היא תיראה.

שתי השפות הללו הן מעין שפות תכנות פשוטות מאוד, אבל למעשה הן לא שפות תכנות של ממש. שתיהן נמנות על טכנולוגיות האינטרנט הידועות, הקלאסיות והראשונות ששימשו לכתיבת אתרי אינטרנט והן לא התפתחו מעבר לכך.

מה שקרה הוא שעם השנים וככל שנדרשו תכונות משוכללות יותר לאתרי אינטרנט, הצטרפו אליהן שפות תכנות חדשות וחזקות יותר וגם כלים רבים אחרים. בתחילה היו אלה שפות כמו asp ו-php. כיום חזקות בתחום יישומי האינטרנט שפת התכנות JavaScript והספריה שלה, הידועה ומאוד פופולרית לעיצוב ממשקים, React.


הנה ה-HTML:

https://youtu.be/akf9j0Jo0PE


ה-CSS:

https://youtu.be/1srYXgDRNak


מדריך שמסביר מצוין את עולם ה-HTML ב-12 דקות:

https://youtu.be/bWPMSSsVdPk?long=yes


ומדריך ל-CSS ב-12 דקות:

https://youtu.be/0afZj1G0BIE?long=yes


אתר אינטרנט
מהם אתרי אינטרנט?
מהו אתר אינטרנט?
מה זה בעצם אתר אינטרנט?


אתר אינטרנט (Website) הוא למעשה אוסף של קבצי מחשב, כל אחד מהם הוא דף אינטרנט, עם קבצים נוספים הדרושים למראה והתפקוד שלהם.

אל דפי האינטרנט הללו אפשר להגיע בדרך כלל דרך רשת האינטרנט. לרוב יש שם דומיין, כמו cnn.com או eureka.org.il, הקושר ביניהם והם גם מקושרים ביניהם באמצעות קישורים, לינקים.

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

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


הנה סרטון הסבר על אתר האינטרנט (עברית):

https://youtu.be/ch0aZQmGdBA


האתר הראשון בהיסטוריה של האינטרנט (עברית):

http://youtu.be/xIAj_Gopa0A


שפת HTML ושפות מתקדמות המתבססות עליה הן יוצרות הקוד של האתרים (עברית):

https://youtu.be/97yBfMDaxUs


כך בונים אתרי אינטרנט בעזרת בינה מלאכותית (מתורגם):

https://youtu.be/Uwq1uiuM_9w?long=yes


וכך נראו אתרי האינטרנט בשנת 1996:

https://youtu.be/WTKIgdfoHxM?long=yes


אֵאוּרִיקַה - האנציקלופדיה של הסקרנות!

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

אלפי נושאים, תמונות וסרטונים, מפתיעים, מסקרנים וממוקדים.

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

בואו לגלות, לחקור, ולקבל השראה!

אֵאוּרִיקַה - האנציקלופדיה של הסקרנות!

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