מבוא ובסיס לJavaScript

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

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

הטקסט שישתנה אחרי שתלחצו על הכפתור

בשביל לעשות כפתור עם פעולה כמו למעלה☝ אנחנו נשתמש בקוד קצת ארוך מהרגיל, שמורכב משלושה חלקים, תגיות-
1. טקסט- תגית p שבה כתוב טקסט שישתנה, עם id- ה"תעודת זהות" שלה

<p id="text"> הטקסט שישתנה אחרי שתלחצו על הכפתור</p>

2. כפתור- תגית button היא תהווה הכפתור שכאשר ילחצו עליו, ישתנה הטקסט של החלק הראשון↗.

<button>לחצו עלי!!</button>

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

התגית script שעלייה אנחנו לומדים היום תהיה בנויה בצורה הבאה-

עכשיו נתאים את צורת הקוד המקורי☝ למקרה שלנו-
שם הפעולה שלנו יהיה Change_text (לא חובה, אפשר שם אחר)
ID של אלמנט יהיה הID של התגית טקסט- text (לא חובה, אפשר שם ID אחר, העיקר שהוא יהיה תואם לID של האלמנט)
הטקסט הוא מה שאנחנו רוצים שיהיה כתוב אחרי השינוי של הטקסט- הטקסט השתנה (גם חובה, אפשר טקסט אחר)

לכן תגית הסקריפט שלנו תראה כך-

<script> function Change_Text() { document.getElementById("text").innerHTML = "הטקסט השתנה" } </script>

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

<p id="text"> הטקסט שישתנה אחרי שתלחצו על הכפתור</p> <button onclick="Change_Text();">לחצו עלי!!</button> <script> function Change_Text() { document.getElementById("text").innerHTML = "הטקסט השתנה" } </script>

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

→ לפוסט הקודם בנושא HTML לפוסט הבא בנושא HTML ←