diff options
Diffstat (limited to 'files/he/learn/javascript/first_steps/what_is_javascript/index.html')
| -rw-r--r-- | files/he/learn/javascript/first_steps/what_is_javascript/index.html | 447 |
1 files changed, 0 insertions, 447 deletions
diff --git a/files/he/learn/javascript/first_steps/what_is_javascript/index.html b/files/he/learn/javascript/first_steps/what_is_javascript/index.html deleted file mode 100644 index 4ad34985e7..0000000000 --- a/files/he/learn/javascript/first_steps/what_is_javascript/index.html +++ /dev/null @@ -1,447 +0,0 @@ ---- -title: מה זה JavaScript? -slug: Learn/JavaScript/First_steps/What_is_JavaScript -tags: - - API - - JavaScript - - דרכים להוסיף JavaScript לדף - - הסבר על JavaScript - - מדריך - - מה זה JavaScript? - - מתחילים -translation_of: Learn/JavaScript/First_steps/What_is_JavaScript ---- -<div>{{LearnSidebar}} </div> - -<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div> - -<p class="summary">ברוך הבא לקורס JavaScript למתחילים של MDN. במאמר זה נסתכל על JavaScript ממעוף הציפור, ונענה על שאלות כגון ״מה זה JavaScript?״ ״מה ניתן לבצע איתה?״ ונוודא שאתם מרגישים בנוח עם מטרתה. </p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>ידע בסיסי בשימוש במחשב וכן הבנה בסיסית של HTML ו-CSS.</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>להכיר מעט את JavaScript, מה היא יכולה לעשות, ואיך היא קשורה לאתר אינטרנט.</td> - </tr> - </tbody> -</table> - -<h2 id="הגדרה_ממבט_על">הגדרה ממבט על</h2> - -<p>JavaScript היא שפת תכנות (שפת סקריפט) אשר מאפשרת לכם ליישם דברים מורכבים על גבי דפי האינטרנט - בכל פעם שדף אינטרנט מבצע משהו דינאמי כגון עדכון תכנים באופן עיתי, הצגת מפה אינטרקאטיבית, אנימציות שונות דו ותלת מימדיות וכד׳ (בניגוד לדף אינטרנט סטטי שרק מציג תוכן ללא שינוי כלשהו בדף), ניתן להיות בטוח ש JavaScript לוקחת בכך חלק. JavaScript היא החלק השלישי ב-״עוגת״ טכנולוגיות ה-web כאשר את שתי הטכנולוגיות האחרות למדנו בחלקים אחרים של איזור הלמידה (<a href="/en-US/docs/Learn/HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS">CSS</a>). </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p> - -<ul> - <li>{{glossary("HTML")}} היא שפת סימון תגיות (ואינה שפת תכנות) שאנו משתמשים בה על מנת לבנות את תוכן הדף ולהעניק לו משמעות, לדוגמא, הגדרת פסקאות, כותרות, טבלאות מידע, סרגל ניווט וכן הטמעת תמונות ווידאו באתר.</li> - <li>{{glossary("CSS")}} היא בעצם סט של כללים המאפשר לנו להחיל כללי עיצוב שונים על תוכן דף ה-HTML בדרכים שונות כגון: רקע, גופן, צורת הפריסה של התוכן על גבי הדף, וכד׳. </li> - <li>{{glossary("JavaScript")}} היא שפת התכנות אשר מאפשרת לנו ליצור באופן דינאמי תוכן, לעדכן תוכן באופן דינאמי, לשלוט במולטימדיה, להנפיש תמונות, ועוד ועוד. </li> -</ul> - -<p>שלושת השפות בנויות כשכבות אחת על גבי השנייה, כפי שניתן לראות באיור למעלה. ננסה להבין זאת באמצעות טקסט פשוט. נסמן את הטקסט באמצעות HTML, על מנת לתת לו מבנה ומטרה. בדוגמא הנוכחית למטה, סימנו את הטקסט באלמנט מסוג פסקה <code><p></code>.</p> - -<pre class="brush: html"><p>Player 1: Chris</p></pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p> - -<p>לאחר מכן, נוסיף כמה כללי CSS על מנת לעצב את האלמנט בצורה מסויימת:</p> - -<pre class="brush: css">p { - font-family: 'helvetica neue', helvetica, sans-serif; - letter-spacing: 1px; - text-transform: uppercase; - text-align: center; - border: 2px solid rgba(0,0,200,0.6); - background: rgba(0,0,200,0.3); - color: rgba(0,0,200,0.6); - box-shadow: 1px 1px 2px rgba(0,0,200,0.4); - border-radius: 10px; - padding: 3px 10px; - display: inline-block; - cursor: pointer; -}</pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p> - -<p>לבסוף, נוסיף קוד JavaScript על מנת להעניק דינאמיות והתנהגות מסוימת:</p> - -<pre class="brush: js">const para = document.querySelector('p'); - -para.addEventListener('click', updateName); - -function updateName() { - let name = prompt('Enter a new name'); - para.textContent = 'Player 1: ' + name; -} -</pre> - -<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>נסו ללחוץ על הגרסה האחרונה של הטקסט וראו מה קורה.אתם יכולים למצוא את קוד המקור <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">כאן</a>, או <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">דף אינטרנט</a>.</p> - -<p>JavaScript יכולה לבצע הרבה יותר - נעמיק בכך בהמשך הלמידה.</p> - -<h2 id="אז_מה_ניתן_לבצע_עם_JavaScript">אז מה ניתן לבצע עם JavaScript?</h2> - -<p>הבסיס של JavaScipt מכיל כמה ממאפייני התכנות הנפוצים, אשר מאפשרים לנו לבצע פעולות כגון: </p> - -<ul> - <li><strong>אחסון ערכים במשתנים</strong> - בדוגמא לעיל, ביקשנו מהמשתמש שיכניס את שמו ולאחר מכן, אחסנו את השם שהמשתמש הזין במשתנה בשם <code>name</code>.</li> - <li><strong>ביצוע פעולות שונות על טקסט (ובתכנות ״מחרוזת״) </strong>- בדוגמא לעיל, לקנו את המחרוזת ״:Player 1״ ועליה וחיברנו אותה (שורה 8) למשתנה <code>name</code>.</li> - <li><strong>הרצת קוד כתגובה לאירועים מסויימים המתרחשים על גבי דף האינטרנט </strong>- השתמשו באירוע (Event) מסוג {{Event("click")}} על מנת לאתר התרחשות של לחיצת עכבר, ובתגובה להתרחשות אירוע זה, הרצנו קוד אשר מעדכן את תוכן הטקסט.</li> - <li><strong>ועוד הרבה יותר. </strong></li> -</ul> - -<p>דבר מעניין נוסף הוא הפונקציונליות אשר בנויה על גבי הבסיס של שפת JavaScript. אותם API (<strong>Application Programming Interfaces</strong> ) מעניקים לנו אפשרויות משמעותיות אשר נוכל להשתמש בהם כאשר אנו כותבים את קוד ה-JavaScript שלנו. API בתרגום לעברית זה ״ממשק תכנות יישומים״. </p> - -<p>API אלו חלקי קוד מוכנים אשר מאפשרים לנו כמפתחים להטמיע תוכניות אשר בצורה אחרת היה קשה מאוד להטמיע או אף בלתי אפשרי. הם מאפשרים לנו את הנוחות בתכנות, כפי שרהיטים מוכנים להרכבה (לדוגמא: איקאה) מאפשרים את הנוחות (המסויימת) בעיצוב דירה. הרבה יותר נוח לקחת סט מוכן להרכבה של מדף המכיל פלטת עץ מוכנה, עם ברגים ומעמד על מנת ליצור מדף קיר, מאשר להתחיל מהבסיס: למצוא את העץ המתאים, לחתוך אותו לגודל המתאים, למצוא את הברגים המתאימים ועוד. </p> - -<p>באופן כללי, API מחולקים לשתי קטגוריות:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> - -<p><strong>API של הדפדפן</strong> (<strong>Browser APIs</strong>) - אלו API מובנים בתוך דפדפן האינטרנט, ומאפשרים לקבל מידע/נתונים מסביבת העבודה של המשתמש או לבצע דברים שימושים מורכבים. לדוגמא: </p> - -<ul> - <li>The {{domxref("Document_Object_Model","DOM (Document Object Model) API")}} מאפשר לנו לבצע מניפולציות ופעולות שונות על HTML ו-CSS כגון יצירה, שינוי, מחיקה, עיצוב של דף האינטרנט באופן דינאמי וכד׳. כך, בכל פעם שאנו רואים חלונית קופצת על גבי דף, או תוכן חדש שמוצג בדף האינטרנט, זו פעולה של ה-DOM.</li> - <li>The {{domxref("Geolocation","Geolocation API")}}מאפשר לנו לקבל מידע גיאוגרפי. כך בעצם <a href="https://www.google.com/maps">Google Maps</a> מאתר את המיקום שלנו ומציג אותו על גבי המפה.</li> - <li>The {{domxref("Canvas_API","Canvas")}} and {{domxref("WebGL_API","WebGL")}} APIs מאפשרים לנו ליצור גרפיקות מונפשות ואנימציות, דו מימדיות ותלת מימדיות. ניתן לראות דוגמאות מדהימות שאנשים יצרו באמצעותו. technologies —see <a href="https://www.chromeexperiments.com">Chrome Experiments</a> and <a href="http://webglsamples.org/">webglsamples</a>.</li> - <li><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a> כמו {{domxref("HTMLMediaElement")}} and {{domxref("WebRTC API", "WebRTC")}} מאפשרים לנו לבצע דברים מעניינים עם מולטימדיה, כגון להפעיל וידאו ואודיו בדף עצמו, או ליצור וידאו באמצעות שימוש במצלמה של המשתמש (או של משתמש אחר) ועוד. ראו דוגמא פשוטה על מנת להבין את הרעיון ב-<a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo</a>.</li> -</ul> - -<div class="note"> -<p><strong>לתשומת לב</strong>: הרבה מהדוגמאות אשר הובאו למעלה, לא יעבדו בדפדפנים ישנים - במהלך הניסוי והטעיה במהלך הקורס, אנו נצטרך לעשות שימוש בדפדפנים מתקדמים על מנת לעשות שימוש בדוגמאות אלו. דפדפנים אלו יכולים להיות כרום, פיירפוקס, אדג׳, אופרה.</p> - -<p>כמו כן, ככל ונתקדם בשלבי הפיתוח של הקוד, נצטרך לקחת בחשבון <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">בדיקת תאימות לדפדפנים השונים</a> יותר לעומק, על מנת שנוכל לאפשר ללקוח להשתמש בכל הפונקציונליות שהגדרנו. </p> -</div> - -<p><strong>API של צד שלישי</strong> לא בנויים בתוך הדפדפן כברירת מחדל, ובעיקרון אנחנו נצטרך לקבל את הקוד והמידע שלהם ממקום אחר באינטרט. לדוגמא:</p> - -<ul> - <li><a href="https://dev.twitter.com/overview/documentation">Twitter API</a> מאפשר לנו לדוגמא להציג את הציוצים האחרונים שלנו באתר שלנו.</li> - <li><a href="https://developers.google.com/maps/">Google Maps API</a> וכן <a href="https://wiki.openstreetmap.org/wiki/API">OpenStreetMap API</a> מאפשרים לנו להטמיע מפות באתר שלנו וכן מתן הגדרות מסויימות למפות אלו.</li> -</ul> - -<div class="note"> -<p><strong>לתשומת לב</strong>: APIs אלו הם נושאים מתקדמים יחסית, ואנחנו לא נגע בהם במודול זה. ניתן למצוא מידע נוסף ב- <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a>.</p> -</div> - -<p>כמובן שיש עוד המון אפשרויות!, יחד עם זאת, כנראה שלאחר למידה כה קצרה של JavaScript, עדיין לא ניצור את פייסבוק או גוגל הבאים, אך ככל שנתקדם במדריך ונבין לעומק הבסיס, נתקדם בדרך הנכונה. </p> - -<h2 id="מה_JavaScript_עושה_על_גבי_דף_האינטרנט">מה JavaScript עושה על גבי דף האינטרנט?</h2> - -<p>כאן אנו נתחיל להסתכל על קוד, ובזמן שנעשה זאת, ננסה להבין מה קורה בפועל, כאשר JavaScript רצה בדף האינטרנט.</p> - -<p>בוא נחזור בקצרה על מה בפועל קורה כשאנו מעלים דף אינטרנט בדפדפן. (דיברנו על כך במאמר <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">כיצד CSS עובד</a>). </p> - -<p>כאשר אנו מעלים דף אינטרנט בדפדפן, אנו מריצים את הקוד (HTML, CSS ו-JavaScript) בתוך סביבת הריצה (לשונית הדפדפן). ניתן לדמות את זה למפעל אשר מקבל אליו את חומרי הגלם (הקוד) ומייצר מכך מוצר מסויים (דף האינטרנט).</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p> - -<p>JavaScript מורצת על ידי מנוע JavaScript של הדפדפן עצמו, <u><strong>לאחר</strong></u> שה-HTML וה-CSS הורכבו והושמו בדף האינטרנט שלנו. דבר זה מאפשר לנו להבטיח שהמבנה והעיצוב של דף האינטרנט הושלם ונמצא במקומו בזמן ש-JavaScript תחל לרוץ. </p> - -<p>מכיוון ששימוש נפוץ ועיקרי ב-JavaScript הוא האפשרות להעניק דינאמיות ולשנות HTML ו-CSS באמצעות Document Object Model API, מדובר בדבר הכרחי על מנת לאפשר זאת, שכן אם JavaScript תרוץ לפני שרכיבי ה-HTML וכללי העיצוב של CSS נטענו במלואם, עלולים להתרחש שגיאות באותה דינאמיות שביקשנו להעניק באמצעות JavaScript.</p> - -<h3 id="אבטחה_בדפדפן">אבטחה בדפדפן</h3> - -<p>לכל לשונית בדפדפן יש מעין ״סל״ או מתחם נפרד להרצת הקוד - בשפה מקצועית סלים או מתחמים אלו נקראים ״סביבות הרצה״ - זאת אומרת, שברוב המקרים, קוד בכל לשונית ירוץ באופן נפרד לחלוטין מלשוניות אחרות בדפדפן, ולא יוכל לגשת או להשפיע על הקוד בלשונית אחרת. דבר זה הינו דבר חשוב בהיבטי אבטחה - שכן אחרת, זה היה פותח אפשרות נוספות להאקרים לפרוץ לאתרים או לגנוב מידע. </p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: יש דרכים להעביר קוד ומידע בין אתרים/לשוניות שונות בצורה בטוחה, אך נושאים אלו הינם מתקדמים ולא נדון בהם בקורס זה.</p> -</div> - -<h3 id="סדר_הריצה_של_JavaScript">סדר הריצה של JavaScript </h3> - -<p>כאשר הדפדפן נתקל בבלוק של קוד JavaScript, באופן כללי הוא יריץ את הקוד מלמעלה למטה. המשמעות היא שצריך לשים לב לסדר שבו אנו רושמים את הקוד. לדוגמא, בוא נחזור לבלוק הקוד שראינו בדוגמא הקודמת:</p> - -<pre class="brush: js">const para = document.querySelector('p'); - -para.addEventListener('click', updateName); - -function updateName() { - let name = prompt('Enter a new name'); - para.textContent = 'Player 1: ' + name; -}</pre> - -<p><u>שורה 1</u>: בקוד זה אנחנו בעצם מגדירים משתנה מסוג <code>const</code> (נרחיב עליו בהמשך) וקוראים לו בשם <code>para</code>, ובאמצעות ה-DOM אנחנו בוחרים את האלמנט HTML הראשון מסוג <code>p</code>.</p> - -<p><u>שורה 2:</u> אנו מצמידים למשתנה שהגדרנו מתודה בשם <code>event listener</code> (נרחיב על כך בהמשך) שבעצם ״תקשיב״ כאשר יתרחש אירוע מסוג לחיצה על ה-<code>para</code>, כלומר, על האלמנט <code>p</code>, קוד בלוק שנקרא <code>updateName</code> ירוץ. בלוק קוד זה הניתן לשימוש חוזר נקרא ״פונקציה״ והוא מוגדר בשורות 5-8. </p> - -<p>שורות 5-8: הגדרה של הפונקציה<code>updateName.</code> פונקציה זו מבקשת מהמשתמש להכניס את שמו ומשנה את התוכן של <code>para</code> לשמו של המשתמש ביחד עם המחרוזת ״:Player 1״. </p> - -<p>אם נשנה את הסדר של שורות הקוד, לדוגמא, נחליף בין שורות 1 ו-3, אנו נקבל שגיאה ב<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">קונסולה של הדפדפן</a> מסוג: <code>TypeError: para is undefined</code>. זה אומר שכאשר אנו מבצעים להוסיף את <code>event listener</code>- האובייקט <code>para</code> עדין לא קיים ולכן לא נוכל להוסיף לו <code>event listener</code>.</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: זוהי שגיאה מאוד נפוצה - חשוב לשים לב שהאובייקטים שאנו מנסים לגשת אליהם קיימים בטרם אנו מנסים לעשות איתם פעולות כלשהן. </p> -</div> - -<h3 id="קוד_מהודר_מול_קוד_מפורש">קוד מהודר מול קוד מפורש</h3> - -<p>יכול להיות שנתקלתם במושגים כגון <strong>שפה מפורשת</strong> או <strong>שפה מקומפלת/מהודרת</strong> בהקשר של תכנות ופיתוח תוכנה.</p> - -<p>בשפות שהינן שפות ״<strong>מפורשות</strong>״, הקוד רץ מלמעלה למטה, והתוצאה של הרצת הקוד תוחזר במיידי, אנו לא צריכים לעשות טרנספורמציה כלשהי לקוד או שינוי שלו לתבנית אחרת לפני שהדפדפן יריץ אותו. </p> - -<p>לעומת זאת, שפות ״<strong>מקומפלות</strong>״ או שפות ״<strong>מהודרות״</strong> נדרשות לבצע שינוי כלשהו לתבנית אחרת לפני שהן יוכלו לרוץ על ידי המחשב. לדוגמא, C/C++ מקומפלות לשפת assembly לפני הרצה על ידי המחשב. </p> - -<p>JavaScript היא שפה קלת-משקל ומעין מפורשת (בפועל, כן מבוצע קימפול, אך לא נרחיב על הנושא). לשני סוגי השפות יש יתרונות, אך לא נדון בהם כרגע. </p> - -<h3 id="קוד_צד-לקוח_מול_קוד_צד-שרת">קוד צד-לקוח מול קוד צד-שרת</h3> - -<p>ככל הנראה נתקלת במושגים קוד צד-לקוח (<strong>client-side</strong>) וקוד צד-שרת (<strong>server-side</strong>), במיוחד בהקשר של פיתוח Web. קוד צד-לקוח הוא קוד שרץ על גבי המחשב של המשתמש - כאשר צופים בדף אינטרנט, קוד צד-לקוח של דף האינטרנט יורד, מורץ ומוצג על ידי הדפדפן. במודול זה אנו נגע בעיקר ב- <strong>JavaScript של צד-לקוח.</strong></p> - -<p><strong>קוד צד-שרת</strong> מצד שני, רץ על גבי השרת, והתוצאה שלו מורדת ומוצגת בדפדפן. דוגמאות לשפות פיתוח קוד צד-שרת כוללות בין היתר את PHP, Python, Ruby, ASP.NET וגם...JavaScript. כן, JavaScript יכולה לשמש גם כשפת פיתוח עבור צד-שרת. לדוגמא, בסביבת הפיתוח הפופולרית Node.js. ניתן להרחיב את הלמידה על JavaScript כשפת קוד-שרת בנושא הייעודי שלנו <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a>. </p> - -<h3 id="קוד_דינאמי_מול_קוד_סטאטי">קוד דינאמי מול קוד סטאטי</h3> - -<p>המושג <strong>דינאמיות</strong> (<strong>dynamic</strong>) משמש הן לתיאור קוד צד-לקוח והן לתיאור קוד צד-שרת והוא מתייחס לאפשרות לעדכן את התצוגה של דף אינטרנט או יישום אינטרנט כך שיוצגו דברים אחרים בנסיבות אחרות ויווצר תוכן חדש ככל שנדרש. </p> - -<p>קוד צד-שרת יוצר באופן דינאמי תוכן חדש על גבי השרת, לדוגמא, מייצא מידע מתוך מאגר הנתונים, ואילו קוד צד-לקוח מייצר תוכן חדש בתוך הדפדפן של המשתמש, לדוגמא, יוצר טבלת HTML חדשה וממלא אותה בנתונים שביקשנו מהשרת, ואז מציג למשתמש את הטבלה על גבי דף האינטרנט.</p> - -<p>המשמעות של דינאמיות היא מעט שונה בין צד לקוח לצד שרת, אך הן קשורות אחת לשנייה, ובדרך כלל, הן עובדות יחד. </p> - -<p>דף אינטרנט שאין לו שום דינאמיות או עדכוני תוכן מכונה כדף <strong>סטאטי</strong> - הוא מציג למשתמש את אותו תוכן כל הזמן. </p> - -<h2 id="כיצד_נוסיף_JavaScript_לדף_האינטרנט_שלנו">כיצד נוסיף JavaScript לדף האינטרנט שלנו?</h2> - -<p>JavaScript מוחלת על דף ה-HTML בדרך דומה לדרך שבה אנו מחילים את כללי ה-CSS.</p> - -<p>בעוד ש-CSS משתמש באלמנט {{htmlelement("link")}} על מנת להחיל גיליונות עיצוב חיצוניים ובאלמנט {{htmlelement("style")}} על מנת להחיל גיליונות עיצוב פנימיים, JavaScript צריכה אלמנט אחד - {{htmlelement("script")}}. נבין לעומק כיצד זה עובד: </p> - -<h3 id="Internal_JavaScript_(כאלמנט_בתוך_קובץ_ה-HTML)">Internal JavaScript (כאלמנט בתוך קובץ ה-HTML)</h3> - -<ol> - <li>אנא צרו העתק על גבי המחשב שלך של קובץ הדוגמא שלנו: <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>.</li> - <li>פתחו את הקובץ בדפדפן ובעורך הקוד. אתם תראו ש-HTML יצר דף אינטרנט פשוט המכיל כפתור שניתן ללחוץ עליו.</li> - <li>בעורך הקוד - הוסיפו את הקוד הבא בתוך ה-head, לפני התגית <code></head></code>:</li> - <li> - <pre class="brush: html"><script> - - // JavaScript goes here - -</script></pre> - </li> - <li>כעת, נוסיף קצת קוד JavaScript בתוך האלמנט {{htmlelement("script")}} על מנת שהדף יבצע משהו מעניין. לשם כך, הוסיפו את הקוד הבא מתחת לכיתוב: " :JavaScript goes here line //״</li> - <li> - <pre class="brush: js">document.addEventListener("DOMContentLoaded", function() { - function createParagraph() { - let para = document.createElement('p'); - para.textContent = 'You clicked the button!'; - document.body.appendChild(para); - } - - const buttons = document.querySelectorAll('button'); - - for(let i = 0; i < buttons.length ; i++) { - buttons[i].addEventListener('click', createParagraph); - } -});</pre> - </li> - <li>שמרו את הקובץ ורעננו את הדפדפן - כעת אתם אמורים להבחין שכאשר אתם לוחצים על הכפתור, נוצרת כל פעם פסקה חדשה מתחת לפסקה הקודמת. </li> -</ol> - -<div class="note"> -<p><strong>לתשומת לב</strong>: אם הדוגמא לעיל לא עובדת לכם, בדקו האם שמרתם את הקובץ בשם הנכון, האם יש לו סיומת <code>html</code>? האם הוספתם את האלמנט {{htmlelement("script")}} ישר לפני תגית הסגירה <code></head></code> ? להזכירכם, <strong>JavaScript היא case sensitive, וזה יכול להיות מאוד מסתכל. שימו לב לדקויות</strong><strong>.</strong></p> -</div> - -<div class="note"> -<p><strong>לתשומת לב</strong>: תוכלו לראות את הגרסה הזו גם ב- GitHub בקישור <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> או <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">כדף אינטרנט</a>.</p> -</div> - -<h3 id="External_JavaScript_(קישור_קובץ_JavaScript_חיצוני)">External JavaScript (קישור קובץ JavaScript חיצוני)</h3> - -<p>הכנסת JavaScript בתוך קובץ ה-HTML עובד בסדר גמור, אך מה אם נרצה לשים את קוד ה-JavaScript בקובץ אחר? נראה כיצד עושים זאת. </p> - -<ol> - <li>ראשית, צרו קובץ חדש באותה תיקיה שבו נמצא ה-HTML בשם <code>script.js</code> - וודאו שיש לו את סיומת הקובץ js על מנת שהוא יזוהה כ-JavaScript.</li> - <li>החליפו את האלמנט {{htmlelement("script")}} עם האלמנט {{htmlelement("script")}} : - <pre class="brush: html"><script src="script.js" defer></script></pre> - </li> - <li>בתוך קובץ <code>script.js</code>, הוסיפו את הקוד הבא: - <pre class="brush: js">function createParagraph() { - let para = document.createElement('p'); - para.textContent = 'You clicked the button!'; - document.body.appendChild(para); -} - -const buttons = document.querySelectorAll('button'); - -for(let i = 0; i < buttons.length ; i++) { - buttons[i].addEventListener('click', createParagraph); -}</pre> - </li> - <li>שמרו ורעננו את הדפדפן. זה עובד בדיוק אותו דבר כמו JavaScript פנימי, רק שכעת JavaScript נמצאת בקובץ חיצוני. באופן כללי, שמירת קוד JavaScript בקובץ חיצוני עדיפה בהיבט ארגון הקוד ושימוש חוזר שלו בכמה קבצי HTML. בנוסף, זה מאפשר לנו לקרוא את ה-HTML בצורה ברורה יותר.</li> -</ol> - -<div class="note"> -<p><strong>לתשומת לב</strong>: ניתן לראות את הגרסה הזו של הקוד בקישור <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> וכ-<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">דף אינטרנט</a>.</p> -</div> - -<h3 id="Inline_JavaScript_handlers_(בתוך_אלמנט_ספציפי_בקובץ_ה-HTML)">Inline JavaScript handlers (בתוך אלמנט ספציפי בקובץ ה-HTML)</h3> - -<p>תשומת לב כי לפעמים אנחנו ניתקל בקוד JavaScript שכתוב בתוך אלמנט ספציפי בקובץ ה-HTML. זה נראה כך: </p> - -<div id="inline_js_example"> -<pre class="brush: js example-bad">function createParagraph() { - let para = document.createElement('p'); - para.textContent = 'You clicked the button!'; - document.body.appendChild(para); -}</pre> - -<pre class="brush: html example-bad"><button onclick="createParagraph()">Click me!</button></pre> -</div> - -<p>ניתן את את הקוד הבא:</p> - -<p>{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>לקוד זה יש את פונקציונליות זהה לקוד בשני החלקים הקודמים, כלומר, הוא מבצע בדיוק את אותו דבר, רק שאלמנט הכפתור - {{htmlelement("button")}} מכיל בתוכו <code>onclick</code> על מנת לאפשר לפונקציה לרוץ כשהכפתור נלחץ.</p> - -<p><strong>בבקשה לא לבצע שימוש בשיטה זו. </strong>זה נחשב ל-bad practice ״לזהם״ את קובץ HTML יחד עם JavaScript ולא יעיל, שכן בשיטה זו צריך להוסיף <code>()onclick=״createParagraph״ </code>לכל אחד מהכפתורים שיהיו בדף. </p> - -<p>לעומת זאת, שימוש ב-JavaScript בלבד, מאפשר לנו לבחור את כל הכפתורים באמצעות קוד פשוט וקצר. לדוגמא: </p> - -<pre class="brush: js">const buttons = document.querySelectorAll('button'); - -for(let i = 0; i < buttons.length ; i++) { - buttons[i].addEventListener('click', createParagraph); -}</pre> - -<p>ממבט ראשון זה אומנם נראה ארוך יותר מהאפשרות הראשונה, אך זה יעבוד לכל הכפתורים בדף, בכל כמות שהיא.</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: נסו לשנות קצת את הגרסה של <code>apply-javascript.html</code> והוסיפו עוד כפתורים לקובץ. כשתרעננו את הדף, תראו שכל כפתור שנלחץ, יוצר פסקה. </p> -</div> - -<h3 id="שיטות_לטעינת_סקירפטים_(Script)">שיטות לטעינת סקירפטים (Script)</h3> - -<p>ישנן כמה סוגיות עם טעינה של סקריפטים באותו זמן. </p> - -<p>בעיה נפוצה היא שכל אלמנטי ה-HTML בדף מועלים בסדר שבה הם מוצגים/רשומים, מלמעלה למטה. אם אנחנו משתמשים ב-JavaScript על מנת לבצע מניפולציות באלמנטים על הדף (או יותר מדוייק, ב-DOM) הקוד שלנו לא יעבוד אם ה- JavaScript תיטען לפני שה-HTML שבו אנחנו מנסים לבצע מניפולציה ייטען בעצמו.</p> - -<p>בדוגמאות למעלה, ה-JavaScript הפנימי וקובץ ה-JavaScript החיצוני נטענו ורצו בראש המסמך, לפני שה-HTML הועבר. זה יכול ליצור שגיאה. על מנת למנוע זאת כאשר אנחנו מוסיפים JavaScript בתור אלמנט <code>script</code>, הוספנו את הקוד הבא: </p> - -<pre class="brush: js">document.addEventListener("DOMContentLoaded", function() { - ... -});</pre> - -<p>זהו ״<strong>מאזין לאירוע</strong>״ - <strong>event listener</strong>, אשר ״מקשיב״ לאירוע של הדפדפן בשם ״DOMContentLoaded״. אירוע זה מעיד על כך שגוף ה-HTML, כל תוכן שנמצא בתוך תגית <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);"><body></span></font> הועלה בשלמותו. כך, קוד JavaScript בתוך אותו בלוק לא ירוץ עד אשר האירוע יחל, ולכן השגיאה נמנעה. בהמשך הקורס, נרחיב על אירועים ומאזינים לאירועים. </p> - -<p>על מנת למנוע זאת כאשר אנחנו מוסיפים JavaScript באמצעות קובץ חיצוני, אנחנו משתמשים באפשרות יחסית חדשה של JavaScript, שהיא תכונה (attribute) בשם <code>defer</code>. שבעצם אומרת לדפדפן להמשיך לטעון את ה-HTML ברגע שהוא הגיע לתגית האלמנט <code><script></code>:</p> - -<pre class="brush: js"><script src="script.js" defer></script></pre> - -<p>בשני המקרים, ה-HTML ייטען במקביל והקוד יעבוד. </p> - -<div class="note"> -<p><strong>תשומת לב</strong>: במקרה של JavaScript הנטען מקובץ חיצוני, אנחנו לא השתמשנו באירוע <code>DOMContentLoaded</code> מכיוון שתכונת ה-<code>defer </code>פתרה את הבעיה. יחד עם זאת, ניתן להשתמש ב-<code>defer</code> ב-JavaScript חיצוני בלבד. </p> -</div> - -<p>דרך מקובלת (ואינה נדרשת יותר) לפתור את הבעיה הזו, הייתה לשים את אלמנט ה-<code>script</code> שלנו ישר מתחת לתגית הסגירה של body. כלומר ישר מתחת לתגית <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);"><body</span><span style="background-color: rgba(220, 220, 220, 0.498039);">/</span><span style="background-color: rgba(220, 220, 220, 0.498039);">></span></font>כך שראשית ייטען כל ה-<code>body</code>. הבעיה עם פתרון זה הוא שטעינה/העברה של הסקריפט חסום לחלוטין עד אשר ה-HTML DOM נטען באופן מלא. באתרים גדולים עם כמות גדולה של JavaScript, זה יכול ליצור בעית ביצועים אשר גורמת להאטת האתר.</p> - -<h4 id="async_and_defer">async and defer</h4> - -<p>בעיקרון יש דרכים נוספות לעקוף את סוגיית חסימת הסקריפט - באמצעות — <code>async</code> and <code>defer</code>.</p> - -<p>סקריפטים בעלי תכונה של <code>async</code> יורדו מבלי לחסום את הדף ויורצו ברגע שהסקריפט יסיים לרדת. אין בטחון שהסקריפטים ירוצו בסדר מסויים, אלא שהם פשוט לא יעצרו מיתר הדף מלהיות מוצג. דרך טובה להשתמש ב-<code>async</code> היא כאשר הסקריפטים בדף רצים באופן עצמאי אחד מהשני ולא תלויים בסקריפטים אחרים בדף.</p> - -<p>לדוגמא:</p> - -<pre class="brush: html"><script async src="js/vendor/jquery.js"></script> - -<script async src="js/script2.js"></script> - -<script async src="js/script3.js"></script></pre> - -<p>לא ניתן להסתמך על כך שהסקריפטים ירוצו בסדר שבה הם הועלו. הראשון עלול להיטען אחרי השני או השלישי, ובמקרה הזה, כל פונקציה לדוגמא אשר מוגדרת באותם סקריפטים ותלויה בקובץ הראשון, תציג שגיאה כי הקובץ הראשון לא מוגדר בזמן שהסקריפט השני או השלישי רץ.</p> - -<p><code>defer</code> לעומת זאת, גורמת לכך שהסקריפטים ירוצו בסדר שבה הם מוצגים על גבי הדף ותריץ אותם ברגע שהסקריפט והתוכן יורדו:</p> - -<pre class="brush: html"><script defer src="js/vendor/jquery.js"></script> - -<script defer src="js/script2.js"></script> - -<script defer src="js/script3.js"></script></pre> - -<p>פה מה שיקרה הוא שכל הסקריפטים עם התכונה של <code>defer</code> ייטענו בסדר שבו הם מופיעים בדף. כך, אנחנו יכולים להיות בטוחים שהקובץ הראשון ייטען במלואו לפני שהקובץ השני יתחיל לרוץ וכך הלאה. </p> - -<p>לסיכום:</p> - -<ul> - <li>אם הסקריפטים שלנו לא צריכים לחכות לקבצי סקריפטים אחרים והם יכולים לרוץ עצמאית, נשתמש ב-<code>async</code>.</li> - <li>אם הסקריפטים צריכים לחכות לקבצי סקריפטים אחרים ותלויים בה, נשתמש ב-<code>defer</code> ונסדר את הסקריפטים בדף בסדר שבו אנו רוצים להריץ אותם. </li> -</ul> - -<h2 id="הערות_ב-JavaScript">הערות ב-JavaScript</h2> - -<p>כמו בשפות HTML ו-CSS, גם ב-JavaScript ניתן להוסיף הערות בקוד, אשר הדפדפן יתעלם מהן ונועדו על מנת לספק הוראות למפתחים אחרי כיצד הקוד עובד, וגם לכם, אפשרות לרענן את זכרונכם. <strong>הערות הן מאוד שימושיות</strong>, אנא בצעו בהם שימוש לעיתים קרובות, במיוחד עבור יישומים גדולים. </p> - -<p>יש שני סוגי הערות:</p> - -<ul> - <li><strong>הערת בת שורה אחת</strong>, ונכתבת באמצעות הוספת התווים<code> // </code>: - - <pre class="brush: js">// I am a comment</pre> - </li> - <li><strong>הערת רבת שורות,</strong> הנכתבת בין התווים <code>*/</code> לתווים <code>/*</code> : - <pre class="brush: js">/* - I am also - a comment -*/</pre> - </li> -</ul> - -<p>לדוגמא: </p> - -<pre class="brush: js">// Function: creates a new paragraph and appends it to the bottom of the HTML body. - -function createParagraph() { - let para = document.createElement('p'); - para.textContent = 'You clicked the button!'; - document.body.appendChild(para); -} - -/* - 1. Get references to all the buttons on the page in an array format. - 2. Loop through all the buttons and add a click event listener to each one. - - When any button is pressed, the createParagraph() function will be run. -*/ - -const buttons = document.querySelectorAll('button'); - -for (let i = 0; i < buttons.length ; i++) { - buttons[i].addEventListener('click', createParagraph); -}</pre> - -<div class="note"> -<p><strong>לתשומת לב</strong>: באופן כללי - יותר הערות בדרך כלל עדיף מקצת מדי הערות, אבל צריך לשים לב לא למצוא את עצמנו מוסיפים יותר מדי הערות שמסבירות מהן המשתנים שהגדרנו (במקרה כזה יהיה עדיף כבר להשתמש בשם הגיוני) או הערות שמסבירים פעולות פשוטות ומובנות בקלות. </p> -</div> - -<h2 id="לסיכום">לסיכום</h2> - -<p>כעת עשינו את הצעד הראשון לתוך עולמה של JavaScript. התחלנו עם קצת תיאוריה על מנת להתחיל להתרגל להשתמש בה ולהבין מה הדברים שאנחנו יכולים לבצע איתה. בהמשך הדרך ראינו מספר דוגמאות קוד ולמדנו כיצד JavaScript משתלבת באתר האינטרנט שלנו, יחד עם רכיבים נוספים. </p> - -<p>JavaScript עלולה להיראות לנו קצת מלחיצה או לא ברורה בשלב זה, אבל אל דאגה, בקורס הזה אנחנו הולכים בצעדים קטנים אשר נבנים בצורה הגיונית. במאמר הבא אנחנו נעבור ליישום פרקטי ונתחיל בבניית דוגמאות JavaScript שלכם באופן עצמאי.</p> - -<ul> -</ul> - -<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p> - -<h2 id="במודול_זה">במודול זה</h2> - -<ul> - <li><a href="/he/docs/Learn/JavaScript/First_steps/What_is_JavaScript">מה זה JavaScript?</a></li> - <li><a href="/he/docs/Learn/JavaScript/First_steps/A_first_splash">מבט ראשון ל- JavaScript</a></li> - <li><a href="/he/docs/Learn/JavaScript/First_steps/What_went_wrong">מה השתבש? פתרון בעיות ב-JavaScript</a></li> - <li><a href="/he/docs/Learn/JavaScript/First_steps/Variables">אחסון המידע שאנחנו צריכים - משתנים — Variables</a></li> - <li><a href="/he/docs/Learn/JavaScript/First_steps/Math">מתמתיקה בסיסית ב- JavaScript — מספרים ואופרטורים</a></li> - <li><a href="/he/docs/Learn/JavaScript/First_steps/Strings">התמודדות עם טקסט — מחרוזות (Strings) ב-JavaScript</a></li> - <li><a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות למחרוזות</a></li> - <li><a href="/he/docs/Learn/JavaScript/First_steps/Arrays">מערכים - Arrays</a></li> - <li><a href="/he/docs/Learn/JavaScript/First_steps/Silly_story_generator">תרגיל: Silly story generator</a></li> -</ul> |