מבוא ל-Javascript

בלי כתוביותעם כתוביות

מילון מושגים:

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

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

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

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

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

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

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

זיכרון - רכיב מהיר ונדיף שבו המחשב שומר נתונים ותוכניות בזמן ריצתם. תוכנו נמחק עם כיבוי המחשב.

מבוא ל-Javascript

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

השלבים העיקריים

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

2. JavaScript מוסיפה את הלוגיקה: כשצריך חישוב או הרצה של פעולות, כותבים קוד JavaScript. הוא יכול להיות בקובץ נפרד עם סיומת js שנמצא לצד דף ה-HTML בשרת, או בתוך קובץ ה-HTML יחד עם התגיות.

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

4. הלקוח מבקש את הדף: הדפדפן במחשב של הלקוח שולח בקשה לשרת, והשרת מחזיר את דף ה-HTML יחד עם קוד ה-JavaScript המקושר אליו.

5. הדפדפן מציג ומריץ: ה-HTML מוצג למשתמש, וקוד ה-JavaScript נטען מאחורי הקלעים וממתין לריצה. חלק מהקוד רץ מיד, וחלק רץ בתגובה לאירועים של המשתמש.

שימו לב

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

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

השיעור הבא בקורס: Hello World

מילון מושגים:

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

Java - שפת תכנות עילית ומונחית עצמים, הרצה על מכונה וירטואלית (JVM) ומשמשת לפיתוח מגוון יישומים.

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

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

פרקי ההרצאה: מבוא ל-Javascript

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

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

00:01
אוקיי, אז הדבר הראשון שאנחנו הולכים לראות זה ארכיטקטורת Client Server, איך JavaScript מגיעה אלינו למחשב מהשרת. אז לצורך כך נדגים את זה בסרטוט פשוט. אז בואו נניח שיש לנו סרבר, נצייר אותו כמלבן, וזה מבחינתנו צד השרת.
00:22
נקרא לו Server, בואו נשים את זה פה. אוקיי, בתוך הסרבר יש לנו דף HTML, תגדיר את הדף הזה כ.dot HTML. דף ה-HTML מכיל תגיות של שפת ה-HTML, והוא אחראי רק על המבניות של מה שאנחנו הולכים לראות.
01:01
כלומר, תמונות, טקסטים, איפה התמונות נמצאות, רכיבים כמו לחצנים, תיבות טקסט וכולי, כלומר, רק השלד, רק המבנה של ה-HTML.
01:11
ה-HTML כשלעצמו לא מסוגל לבצע פעולות לוגיות ולא מסוגל לרוץ, לא מסוגל לבצע בדיקות, וזאת בעצם לא באמת שפת תכנות שמסוגלת לרוץ במחשב, היא רק מציגה דברים.
01:24
אז כשאנחנו רוצים לבצע פעולות לוגיות, לבצע חישובים ולבצע ממש שפת תכנות שתרוץ, יש לנו אפשרות להשתמש בג'אווה סקריפט. ג'אווה סקריפט יכולה להיות דף נפרד בעל סיומת של js, בואו נצייר פה .js שנמצאת גם כן בצד השרת ליד דף ה-HTML.
01:51
כמו כן ג'אווה סקריפט יכולה להיות תובא בתוך קובץ ה-HTML. אלה שני מקומות שג'אווה סקריפט יכולה להיות בהם או בתוך קובץ ה-HTML ביחד עם התגיות או בקובץ JS חיצוני.
02:08
אם JavaScript נמצאת בקובץ JS חיצוני אז דף ה-HTML בעצם מצביע על דף ה-JS בכדי שהמערכת תדע לשייך את קובץ ה-JS הזה ביחד עם קובץ ה-HTML כאשר מביאה ללקוח את דף ה-HTML. אוקיי, בואו נצייר עכשיו את צד הלקוח.
02:31
נצייר את צד הלקוח כאן כאיזשהו מחשב מגיל לגמרי PC שיש עליו דפדפן שבעצם איתו אנחנו גולשים לאינטרנט. נותנים פה דפדפן.
03:01
מה שקורה זה דבר כזה, לקוח גולש מהמחשב שלו לצד השרת, נצייר כאן את התרשים זרימה הזה, ומבקש את דף ה-HTML. השרת הבין שהוא רוצה דף HTML ספציפי לפי הבקשה שלו, וכמובן מחזיר לו את דף ה-HTML הזה.
03:30
הדף HTML חוזר לקליינט. בואו נצייר כאן קליינט. מה שבעצם הולך לחזור בחזרה זה דף ה-HTML ודף ה-JavaScript ביחד. שני הדברים האלה הולכים להגיע מצד השרת בחזרה בריספונס ישירות למחשב של הלקוח.