אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • קבלו עדכונים במייל
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג’אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • קבלו עדכונים במייל
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג’אווהסקריפט
ראשי » רשת האינטרנט » למפתחי ובוני אתרי אינטרנט » יצירת סביבת עבודה ללימוד ג’אווהסקריפט

יצירת סביבת עבודה ללימוד ג’אווהסקריפט

רן בר-זיק אוגוסט 26, 2020 11:15 pm תגובה אחת

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

כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט. הפרויקט הוא הפרויקט הספרותי המוביל בהדסטארט. בשיתוף הקריה האקדמית אונו.

במסגרת פרויקט הספר “ללמוד ג’אווהסקריפט בעברית” יצאו עד כה שלושה ספרי לימוד מקיפים בעברית ללימוד תכנות: ג’אווהסקריפט, Node.js וריאקט. הספרים האלו הם לא ספרים סטטיים אלא ספרים שמתעדכנים כל הזמן, יש אתר תרגול נאה לספר הראשון ותרגילים רבים בכל הספרים. תכנות לומדים דרך הידיים.

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

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

החלק הראשון הוא התקנה של Visual Studio Code מדובר בעורך קוד פופולרי שאין כמעט מתכנת שלא התנסה בו. מה הבעיה? הבעיה היא שבעוד שמתכנתים מתורגלים בתוכנה הזו, למשתמשים חדשים היא נראית מאיימת ומוזרה. גם תמיד תמיד תמיד, כשמורידים שקשור לסביבת העבודה – יש כלל ברזל: משהו ישתבש. פתאום האינטרנט לא יעבוד, החתול ינשך את הכבל או איזו תקלה איזוטרית תתרחש. קחו אוויר 🙂 התקנת התוכנה הזו היא חשובה. זו תוכנה חינמית, בקוד פתוח שממש קלילה על המחשב.

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

החלק השלישי והכבד הוא יצירת שני הקבצים – אחד ה-HTML שמכיל/קורא לקובץ הג’אווהסקריפט, שהוא פשוט העתק הדבק מהספר. והשני הוא ה-JS שמכיל את הקוד עצמו.

החלק הרביעי הוא פתיחת קובץ ה-HTML וצפייה במה שהקוד עושה. באמצעות כלי המפתחים.

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

כלי מפתחים – ריק

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

מה קורה אם אתם כותבים משהו ב-console.log אך לא רואים דבר בכלי המפתחים? זה המצב המתסכל והמרגיז ביותר שיכול להיות! מה עושים?

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

הנה הנקודות של מה שצריך לעשות:

  1. מוודאים שאתם פותחים את הקובץ הנכון – ב-visual studio code לוחצים בצד השמאלי על הכפתור הימני ואז reveal in file explorer – ורק משם מפעילים את הקוד בכרום.
  2. כותבים ג’יבריש – ממש טעויות ואז מפעילים את הקוד בכרום – האם יש שגיאה? במידה ולא – אתם לא במקום המתאים או שאין קישור מתאים בין דף ה-HTML לקוד הג’אווהסקריפט. ודאו שהשם של קובץ הג’אווהסקריפט ב-file explorer וב-HTML תואם.
  3. במידה ואתם רואים את השגיאה, וודאו שבאמת כתבתם console.log כמו שצריך ושמרתם (באמצעות קונטרול + S)
  4. נסו לפתוח את הקובץ עם פיירפוקס או דפדפן אחר.
  5. לא מצליח לכם? codepen.io.

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

כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט. הפרויקט הוא הפרויקט הספרותי המוביל בהדסטארט. בשיתוף הקריה האקדמית אונו.
JavaScript

תגובה אחת

  1. בנימין הגב אוגוסט 31, 2020 בשעה 5:34 pm

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

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד