PracticU

Hello World

בלי כתוביותעם כתוביות
PracticU › קורס Javascript כולל JQuery › Hello World
מילון מושגים:
JavaScript - שפת תכנות שרצה בעיקר בדפדפן ומוסיפה אינטראקטיביות לדפי אינטרנט. רצה גם בצד השרת באמצעות Node.js.
HTML - שפת הסימון שבה בונים את מבנה ותוכן דפי האינטרנט, באמצעות תגיות שמגדירות כותרות, פסקאות, קישורים ועוד.
תגית - סימון בקוד, למשל ב-HTML, שתוחם רכיב ומגדיר את תפקידו או תכונותיו. גם תווית לסימון וקיטלוג פריטים.
סקריפט - קובץ המכיל רצף פקודות שמבוצעות על ידי מפרש, לרוב כדי להפוך משימות לאוטומטיות.
דפדפן - תוכנה שמציגה דפי אינטרנט ומריצה את הקוד שבהם, ומאפשרת לגלוש בין אתרים, למשל Chrome או Firefox.

Hello World
בשיעור בונים את תוכנית ה-JavaScript הראשונה, דף שמציג את ההודעה Hello World, ורואים איך מכניסים את הקוד גם לתוך הדף וגם לקובץ חיצוני.
איך זה עובד
1. דף HTML ראשון: פותחים קובץ HTML חדש ושומרים אותו על שולחן העבודה בשם hello-world.htm.
2. תגית script: קוד פנימי נכתב בתוך תגית script באזור ה-Head, שבו בדרך כלל שמים קוד שלא מוצג כחלק מהתוכן. בתגית מגדירים language עם הערך javascript ו-type עם הערך text/javascript, כי יש דפדפנים שמחפשים כל אחד מהם.
3. פקודת alert: הפקודה alert מציגה הודעה. פקודות ב-JavaScript מסתיימות בנקודה-פסיק, כמו בשפות משפחת C.
4. אישור הרצה: כשפותחים דף מהמחשב המקומי, הדפדפן מזהיר שהקוד לא הגיע מאתר חיצוני. אחרי שמאשרים את ההרצה הקוד רץ.
5. קובץ JS חיצוני: יוצרים קובץ בשם Hello World.js ליד הדף, ובו אותה פקודת alert. בדף מוסיפים תגית script נוספת עם src שמצביע על הקובץ.
6. סדר הרצה: הדפדפן טוען את הדף מלמעלה למטה ומריץ כל תגית script לפי הסדר. תגית שנמצאת למעלה רצה קודם.
שימו לב
תגית script שמקשרת לקובץ חיצוני צריכה להיסגר בסגירה מלאה, </script>, ולא בתגית ריקה. אסור לשלב באותה תגית קוד פנימי וקישור לקובץ חיצוני, כי אחד מהם לא ירוץ.
אחרי השיעור כותבים פקודת JavaScript ראשונה, מריצים אותה בדפדפן ומעבירים אותה לקובץ חיצוני.
השיעור הבא בקורס: משתנים ב-Javascript
מילון מושגים:
קוד מקור - הקוד שמפתחים כותבים בשפת תכנות, לפני הידור, המגדיר את פעולת התוכנה.
Java - שפת תכנות עילית ומונחית עצמים, הרצה על מכונה וירטואלית (JVM) ומשמשת לפיתוח מגוון יישומים.

להורדת קוד מקור של כל הדוגמאות בקורס  JAVA SCRIPT למתחילים -לחץ כאן לתלמידי המכללה בלבד

להורדת קוד מקור של כל הדוגמאות בקורס  JAVA SCRIPT למתקדמים- לחץ כאן לתלמידי המכללה בלבד

פרקי ההרצאה: Hello World

  1. 00:00

    תוכנית JavaScript ראשונה

  2. 01:03

    כתיבת JS בתוך ה-HTML

  3. 02:36

    פקודת alert

  4. 03:18

    הרצה ואזהרת הדפדפן

  5. 03:56

    קובץ JS חיצוני

  6. 05:30

    קישור ה-HTML לקובץ ה-JS

תמלול ההרצאה: Hello World

הטקסט המלא של הדקות הראשונות בהרצאה «Hello World» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:01

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

  2. 00:13

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

  3. 00:33

    נלחץ ונשמור אותו על הדסטופ כ-hello-world.htm.save. כעת אנחנו רוצים לכתוב קוד JavaScript. ראינו בסרטון הקודם שישנם שני מקומות שבהם אנחנו יכולים לכתוב JavaScript.

  4. 00:56

    מקום אחד הוא בתוך דף ה-HTML עצמו, ומקום שני הוא בקובץ JS חיצוני. בואו נראה את שניהם. ראשית נכתוב בקובץ ה-HTML עצמו את הקוד שלנו.

  5. 01:09

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

  6. 01:26

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

  7. 01:45

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

  8. 01:56

    ראשית language ואני בוחר javascript כי זאת השפה שאני רוצה לכתוב בה. שנית type=text/javascript. הסיבה שאנחנו צריכים את שניהם מפני שיש דפדפנים שמחפשים את הדבר הזה ויש דפדפנים שמחפשים את הדבר הזה.

  9. 02:17

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

  10. 02:39

    אז אחרי שהגדרתי את הסקריפט בתוכה, בתוך הסקריפט אני מסוגל לכתוב. אז בואו נכתוב תקודה שנקראת alert והיא מציגה את הטקסט הלאו וורד. תקודות JavaScript מסתיימות בנקודה פסיק ממש כמו בכל שפות C, משפחת שפות C, C, C++, JavaScript, Java, C-Sharp וכדומה אז פקודות מסתיימות

  11. 03:07

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

  12. 03:33

    במחשב ומכיל קוד JavaScript שיכול להיות גם הרסני למחשב שלנו כי ניתן לכתוב בג'אווה סקריפט דברים שהם כמו וירוסים דברים שיכולים טיפה להרוס דברים טיפה או הרבה ולכן המחשב אומר לנו הדפדפן בעצם אומר אם אתה רוצה לאשר את זה תלחץ ותגיד לו allow blocked content yes וכעת הוא מסוגל להריץ את הקוד שלנו ולהלן

  13. 03:57

    הקוד אוקיי איך אנחנו מסוגלים לכתוב את אותו קוד בקובץ חיצוני אז בכדי לכתוב את הדבר הזה בקובץ חיצוני מה שאנחנו צריכים לעשות זה קודם כל לצרף קובץ פייל מסוג JavaScript בואו נותר אותו הנה הוא כאן Jscript file open ואנחנו רואים דף לבן עם סיומת js כאן פשוט אני כותב את הקוד שאני רוצה alert Hello World again שוב עם נקודה פסיק בואו

  14. 05:14

    נשמור את הקובץ הזה ביחד עם קובץ ה-HTML זאת אומרת גם הוא על הדסטופ נקרא לו Hello World.js כעת אני צריך לבצע את הקישור בין קובץ ה-HTML לבין קובץ ה-JavaScript זאת אומרת שאני צריך תגית סקריפט נוספת שתגרום להצבעה מקובץ ה-HTML על קובץ ה-JavaScript.

  15. 05:46

    לא ניתן לעשות את זה בתגית שכבר JavaScript כתובה בה. זאת אומרת שאני צריך לגשת לכאן ולפתוח עוד תגית סקריפט language JavaScript type text JavaScript ולהוסיף לה src כלומר

לקורס המלא: קורס Javascript אונליין

ההרצאה הקודמת: מבוא ל-Javascript

ההרצאה הבאה: משתנים ב-Javascript

הרצאות קשורות מקורסים אחרים

  • שפת Swift - מבוא ראשוני לשפה - כולל Hello World
  • כניסה עם טביעת אצבע לווינדוס - Windows Hello

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס ריאקט - React
  • קורס NodeJS