פרק 1

אז התחלנו!! איזה כיף לנו (: 

בתחום של תכנות יש המון תתי נושאים.

אנחנו ניגע בתחום שנקרא פיתוח פרונט אנד (Front End Development)

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

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

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

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

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

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

בקורס זה נלמד את השפות – HTML, CSS, JavaScript. 

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

בואו נכנס לאתר  של יוטיוב(או לכל אתר שתבחרו), ונלחץ במקלדת על הכפתור F12. (תנסו את זה!)  ייפתח לנו חלון חדש בתחתית העמוד שנראה ככה:

שימו לב שאתם תחת הכותרת Elements. 

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

‏‏צילום מסך (2)

משימה:

בוא נעשה משימה קטנה שתעזור לנו לראות את זה באופן מוחשי.

לאחר שלחצנו על f12, בצד השמאלי העליון של החלון שנפתח יש תמונה של חץ בתוך ריבוע הנראה כך:

‏‏צילום מסך (3)

תלחצו עליו. כעת אם תעברו עם העכבר על הדף הוא יציג לכם מלבנים כחולים על כל דבר.

תלחצו על אחת הכותרות לרצונכם (שימו לב לשים את העכבר על ריבוע המכיל מילה) 

‏‏צילום מסך (3)

אנו לחצנו על איפה שכתוב All. 

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

‏‏צילום מסך (4)

כעת, אם נלחץ קליק ימני ואז Edit as HTML, יהיה באפשרותנו לערוך את הטקסט.  אם במקום All שכתוב בין החיצים נכתוב משו אחר, לדוגמא בוקר טוב!: 

‏‏צילום מסך (5)

נלחץ enter ותראו מה נקבל בדף:

במקום All כתוב בוקר טוב

‏‏צילום מסך (2)

נתתם הוראה ראשונה למחשב!!! כל הכבוד! 

זוהי רק המחשה קטנה על איך הוראה של המפתח למחשב משפיעה על הדף. 

אלגוריתם

המושג אלגוריתם הוא אולי אחד המושגים הכי חשובים בתכנות והוא ילווה אותנו כל הזמן. 

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

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

סדרה של פעולות

אז נתחיל,
המחשב שלנו הוא ״טיפש״. 

למה כוונתנו?  

נשתמש בדוגמא: 

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

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

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

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

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

אלגוריתם להכנת לחם עם שוקולד

  1. לך למזווה ותוציא את הלחם והשוקולד.
  2. תוציא 2 פרוסות לחם מהשקית ותניח אותם על השולחן 
  3. תפתח את קופסת השוקולד. 
  4. תוציא שוקולד ותמרח על 2 הפרוסות.
  5. תניח את הפרוסות אחת על השניה. 
  6. שים בתוך שקית אוכל. 

האם נקבל בסוף הפעולות לחם עם שוקולד? מה הבעיה כאן? קחו דקה או שתיים לחשוב.

(זכרו שהמחשב מבצע בדיוק את מה שמבקשים ממנו) הבעיה היא שלא נתנו הוראות חד משמעיות

לדוגמא בסעיף 4 כתוב ״תוציא שוקולד ותמרח על 2 הפרוסות״. איך להוציא שוקולד? יכול להיות שהוא יוציא עם היד שלו. איך למרוח על 2 הפרוסות? יכול להיות שהוא ימרח על 2 הצדדים של כל פרוסה. 

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

אז לבסוף נאמר את המשפט הבא: 

מה זה אלגוריתם? 

״סדרה של פעולות חד-משמעיות, שביצוע כל הפעולות מביא לידי תוצאה הרצויה״.  

משימה:  

כתבו אלגוריתם, המבצע את הפעולה הבא:  

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

הערה חשובה: 

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

כבר היום אתם משתמשים בתוכנות שמשתמשות ביכולת של בינה מלאכותית במגוון תוכנות כמו waze, google ועוד..

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

התקנת סביבת העבודה 

על מנת שנוכל לכתוב את הקוד(ההוראות למחשב) ולהריץ אותו, אנו נוריד תוכנה שתעזור לנו לעשות זאת בצורה נוחה.   

יש מספר מספר תוכנות ועורכי קוד לעשות זאת. 

אנו נשתמש בעורך קוד שנקרא: vscode. 

כנסו לקישור הבא: https://code.visualstudio.com/ והורידו משם את התוכנה שמתאימה למחשב שלכם.

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

‏‏צילום מסך (7)

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

נפתח את התיקיה הראשונה ונקרא לה First Project. 

 

ויאללה לבניית הפרויקט. 

נלחץ על Open Folder, ונפתח את התיקייה שעכשיו יצרנו.

בשביל ליצור את הקובץ הראשון נלחץ על New File וזה יצור לנו קובץ חדש: 

‏‏צילום מסך (8)

נלחץ על Select a language, ונבחר HTML. 

לתוך הקובץ נכתוב את קוד html הבא.

‏‏צילום מסך (9)

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

 

נשמור את הקובץ.

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

(אם לא נפתח, יש לוודא שהסיומת היא "html."

אם הכל תקין אמור להיפתח דף דפדפן שכתוב בו “Hello World!”:

‏‏צילום מסך (10)

כל הכבוד!!! כתבתם את הקוד הראשון שלכם. 

 

על מנת שנבין מה עשינו כעת נסביר קצת על HTML. 

 

HTML

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

ננסה קצת להרחיב:

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

 

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

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

הדרך להגדיר את האלמנטים הללו בתוך הדף הם בעזרת תגיות. 

 

נקח דוגמא מהקוד שכבר כתבנו:

‏‏צילום מסך (11)

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

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



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

 

לשם ההבנה נראה עוד דוגמא קצרה: 

כתבנו שורת קוד ממש דומה לדוגמא הקודמת נכון? אבל מה ההבדל? סוג התגית.

‏‏צילום מסך (12)

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

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

 

היררכיה של התגיות 

אז כמו שאמרנו html בנויה מתגיות. רוב התגיות מייצגות אלמנטים שיוצגו על הדף, יש גם כמה תגיות המייצגים דברים כללים יותר, ונראה זאת בהמשך. 

מה שחשוב זה לשמור על ההיררכיה של התגיות. נראה דוגמא שתסביר את כוונתנו:

‏‏צילום מסך (13)

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

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

דוגמא למצב אסור:

‏‏צילום מסך (14)

סוגים שונים של תגיות 

כמו שאמרנו קודם, התגיות מייצגות אלמנטים. יש גם תגיות שמייצגות דברים כללים יותר, והם תגיות שאנו נראה בכל דף קובץ html שנכתוב (לתגיות האלה יהיה תמיד תגית פתיחה וסגירה:

 

​​​​התגית <html> :  שבתוכו רושמים את את המסמך כולו (כלומר התגית פתיחת ממש בהתחלה בהתחלה של המסמך והתגית סיום ממש בסוף)                         

                       

התגית <head>: היא התגית שבא נגדיר דברים כללים יותר על הדף. בתוכה גם נגדיר את הכותרת של הדף בעזרת התגית <title> כמו שראינו בדוגמא. 

 

התגית <body>: שבתוכה נכתוב את כל התוכן של הדף עצמו. כלומר בתוכה נכתוב את כל האלמנטים שאנו רוצים שיופיעו על הדף עצמו. 

בהמשך נלמד על פרק יותר מפורט בhtml שבו נלמד על הסוגים השונים של האלמנטים ועל השימוש בהם! 

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

 

משימה

תפתחו את המסמך שכבר כתבתם ושנו אותו בצורה הבאה: 

  1. שנו את הכותרת של הקובץ. 
  2. שנו את התוכן של הפסקה. 
  3. הוסיפו פסקה.
  4. הוסיפו כותרת(ראינו בדוגמא איך ניתן לעשות זאת).  
  5. משימה אחרונה – את הכותרת אפשר לכתוב בגדלים שונים. נסו לשנות את הספרה שבתוך <h1>. את מה זה משנה? עד איזה מספר אפשר לשנות? 
  6. שנו דברים כרצונכם ונסו דברים בעצמכם! איזה דברים חדשים גיליתם?

 

כל הכבוד. 👏👏👏

 

בהמשך נחזור ללמוד עוד html לעומק יש למה לצפות 🙂 

 

לאחר שקצת ׳טעמנו׳ מhtml, נעבור לטעימות של ג׳אווהסקריפט. 😀

 

נפתח קובץ חדש באותו אופן שפתחנו קודם, ונכתוב את הקוד הבא: 

‏‏צילום מסך (15)

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

 

ננסה להבין אז מה אנו מבצעים בעזרת הפקודה:

‏‏צילום מסך (16)

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

אם פתחתם תשימו לב שלא השתנה כלום!!

אז מה ההוראה הזאת מבצעת?!

 

נלחץ על f12 כמו שראינו מקודם, ויפתח לנו החלון הבא בתחתית הדף:

‏‏צילום מסך (17)

קודם כל בסוגריים נשים לב תחת הכותרת Element נשים לב שיש את הקוד שכתבנו – כלומר כמו שהסברנו אלו האלמנטים שמייצרים את הדף שלנו. זה ההוראות שלנו למחשב! 


אם נעבור לכותרת Console, נראה את הדבר הבא:

‏‏צילום מסך (18)

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

 

הדרך לכתוב ל׳קונסול היא בעזרת שורת הפקודה:  ()console.log כאשר בתוך הסוגריים נכתוב את מה שאנחנו רוצים שיוצג בקונסול. (log זה בעברית להתחבר – להתחבר לקונסול.)

בדוגמא שלנו כתבנו לקונסל את המילים Hello World!. 

 

משימה

כתבו את השם שלכם בקונסול

כתבו את הגיל שלכם בקונסול 

 

אין עליכם בעולם!!  כתבתם את קוד הג׳אווהסקיפט הראשון שלכם!!! 😀 

מכאן רק ממשיכים להתקדם. 

 

סיכום פרק

אוקיי אלופים ואלופות שאתם! 

היה לנו פרק ארוך שנגענו בלא מעט דברים. 

התחלנו את הפרק בהבנת המושג ״תכנות פרונט אנד״. 

נגענו במושג אלגוריתם.

התקנו את סביבת העבודה, ראינו איך לפתוח קובץ, וכתבנו 2 קודים ראשונים: אחד בhtml, ואחד בג׳אווהסקריפט. 

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

 

קצת על השפות אותם נלמד 

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

בפשטות דף אינטרנט מורכב מ3 דברים: התוכן, הנראות שלו והתפקוד שלו. 

בשביל לספק את 3 הדברים הללו נלמד את השפות html, CSS ג׳אווהסקריפט.

 

HTML: בעזרתו נבנה את התוכן של הדף. התוכן הוא האלמנטים שיהיו על הדף כמו שראינו

CSS: בעזרתו נעצב את האלמנטים שבדף. את הצבע, גודל, מיקום ועוד ועוד.. 

ג׳אווהסקריפט: בעזרתו נדאג לתפקוד של הדף.

 

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

יאללה לפרק הבא!

שלחו פרטים

וניצור איתכם קשר

שלחו פרטים

וניצור איתך קשר

שלחו פרטים

וניצור איתכם קשר

שאלה מעולה :)

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

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

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

מטרה משנית של חלל העבודה המשותף היא יצירת קהילה עסקית- חברתית.

מתוך ״ויקיפדיה״