יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
09/08/2023 17:16
בניית חנות באינטרנט למכירה של מוצרים לחיות מחמד
12/03/2023 22:03
במאמר זה נסקור את התפתחות שפת צד השרת PHP מראשית ימיה, לכל אורך גירסאותיה השונות עד לאן שהיא הגיעה ב...
08/01/2023 23:40
הקמת אתר מכירות לדלתות פנים וחוץ לבתים פרטיים ולעסקים וציוד פירזול
תגובות אחרונות תגובות אחרונות
עיצוב רקע - background
12/06/2023 19:52
היי תמר, עושים את זה באמצעות ...
עיצוב רקע - background
28/05/2023 21:36
אני רוצה ליצור כפתור שהרקע שלו...
עיצוב רקע - background
15/12/2022 20:22
איך עושים שיראו את כל התמונת ר...
תגובות אחרונות פוסטים אחרונים בפורום
08/11/2022 19:11
היי, יש לי אתר קצת מורכב. הוא...
08/11/2022 19:09
היי, אני עוסק בענף הטניס ויש ...
08/11/2022 19:03
היי, ראיתי בכל מיני אתרים שמש...

מדריך JavaScript - מתחילים בקורס

  1. דף הבית
  2. מדריך HTML5 למתכנת המתחיל
  3. מדריך JavaScript - מתחילים בקורס
מדריך מקצועי ללימוד שפת התכנות ג'אווה סקריפט למתחילים. הצטרפו אלינו ללמידה מקוונת.

מהי שפת ג'אווה סקריפט

כאשר מציגים דף אינטרנט בדפדפן, באים לעזרתנו 3 חלקים: HTML, CSS, Java Script.

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

HTML - זוהי שפת תגיות אשר מפרטת את האלמנטים השונים על המסך (תפריט, כפתור, כותרת, תמונה וכו').

CSS - אלו הגדרות עיצוב שמסבירות איך לסגנן כל אלמנט שב-HTML (רקע אדום, פינות עגולות, פונט David וכו').

JavaScript (או בקיצור JS) - שפת צד-לקוח, המאפשרת פעולות מתקדמות (שימוש במערכים, לולאות, התניות וכו').

 

אם אין לכם עדין את הידע הבסיסי ב-HTML וב-CSS, מומלץ להתחיל מהמדריך ל-HTML5 כאן לפני שמתקדמים לג'אווה סקריפט.

 

יש לשים לב: לא לבלבל בין שפת ג'אווה סקריפט לשפת ג'אווה. הקשר היחיד בין שתיהן הוא דמיון בשם. התחביר של שתי השפות שונה לחלוטין והן משמשות למטרות שונות לחלוטין זו מזו.

 

נראה דוגמה לקטע קוד שמשלב את 3 האלמנטים יחד:

<!DOCTYPE html>
<html>
	<head>
		<style>
			body{direction:ltr;}
			h1{color:#ff0000;font-size:32px;font-weight:bold;text-align:center;}
			#mul{color:#0000ff;font-size:20px;text-align:center;}
			#mul div{display:inline-block;width:40px;}
		</style>
		<script>
			function mulTable() {
				for (var i=1; i<=10; i++) {
					for (var j=1; j<=10; j++) {
						document.write("<div>" + (i*j) + "</div>");
					}
					document.write("<br />");
				}
			}
		</script>
	</head>
<body>
	<h1>Multiplication table</h1>
	<div id="mul">
		<script>mulTable();</script>
	</div>
</body>
</html>

 

ראשית, נסביר את מבנה הקוד שהבאנו בדוגמה:

המעטפת של הקוד זה HTML עם תגיות html, head, body כרגיל.

בחלק של ה-head, שילבנו תגית style ובתוכה הגדרות עיצוב (CSS) וכן תגית script ובתוכה הגדרות קוד ג'אווה סקריפט.

גם בחלק של ה-body שילבנו תגית script עם קוד ג'אווה סקריפט.

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

 

שנית, נסביר מה הקוד עושה:

קוד זה, מציג על המסך את לוח הכפל.

בחלק של ה-head מוגדרת הפונקציה mulTable בג'אווה סקריפט אשר מחשבת ומדפיסה על המסך את לוח הכפל.

בחלק של ה-body מוצגים על המסך כותרת h1, וכן תגית div עם מאפיין id בשם mul שבתוכה מפעילים את הפונקציה mulTable.

 

כדי להפעיל את הקוד שהצגנו, אפשר פשוט להעתיקו לקובץ בשם mul.html ולפתוח אותו בדפדפן (הקלקה כפולה על הקובץ, או גרירה שלו על האייקון של הדפדפן).

 

שפת צד שרת מול שפת צד לקוח

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

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

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

התפקיד של השרת הוא לחולל את הקוד. כלומר, לעשות איזשהו עיבוד (נניח, משיכת הנתונים מבסיס הנתונים) ולייצר לנו את העמוד האינטרנטי (שכולל HTML, CSS, JS) שאותו יפעיל הדפדפן.

לדוגמה: קוד שכתוב בשפת PHP שהיא שפת צד-שרת, יכול לבצע משיכה של תוכן של עמוד מסויים מבסיס הנתונים שעל השרת ולחולל קוד HTML+CSS+JS שמציג את העמוד הזה. הקוד שנוצר בצד השרת נשלח לדפדפן ושם הוא מופעל.

 

איך להפעיל קוד ג'אווה סקריפט

כדי להפעיל קוד שאתם רושמים, יש מספר שיטות:

שיטה אחת, היא לעטוף את קוד ה-JS ב-HTML (כפי שעשינו בדוגמה לעיל), לשמור כקובץ ואז להפעילו בדפדפן. את קובץ ה-HTML אפשר להפעיל ישירות בדפדפן (כפי שהפעלנו את הקובץ mul.html), או שאפשר גם להעלותו לשרת אחסון ואז לגשת אליו באמצעות כתובת https אינטרנטית.

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

 

להפעלת ה-console:

1. פותחים את הדפדפן, כגון כרום, פיירפוקס, Edge

2. פותחים עמוד ריק בלשונית חדשה (הקלקה על סימן ה + בשורת הלשוניות שבראש העמוד בדפדפן)

3. מקליקים עם המקש הימני של העכבר על העמוד הריק

4. בתפריט שנפתח בוחרים את האפשרות האחרונה "Inspect" או "בדוק מרכיב" (בדפדפנים שונים יתכן כיתוב שונה)

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

6. לבדיקה שאנו במקום הנכון, ננסה להפעיל את הפקודה alert("Hello World") ונראה אם תקפוץ לנו ההודעה על המסך

 

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

 

דוגמה להדפסה ל-console:

<script>
var n = 2+3;
console.log(n);
</script>

בדוגמה זו, הגדרנו את הערך של n שיהיה שווה לחישוב 2+3. כדי לוודא שאכן הערך של n שווה למה שאנו מצפים (הערך 5), הדפסנו אותו ב-console.

 

הוספת תגובה
YouTube previewPlay

שנקפיץ יחד את העסק שלך לגבהים חדשים?

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

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

 

אל תהססו! מלאו את הטופס או התקשרו עכשיו 077-7644819

 
WhatsApp
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: