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

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

 
מאמרים אחרונים מאמרים אחרונים
12/01/2022 12:57
בניית חנות באינטרנט למדבקות קיר מעוצבות ולתמונות קנבס
05/01/2022 15:55
אתר מכירות פומביות לרכישת מוצרים באמצעות שיטת המכרז האנגלי לפיה זוכה בעל ההצעה הגבוהה ביותר
29/11/2021 16:33
29/11/2021 16:32
29/11/2021 16:32
תגובות אחרונות תגובות אחרונות
מדריך CSS - מתחילים
17/01/2022 19:35
היי, עיצוב עושים עם CSS, ולא ...
מדריך CSS - מתחילים
16/01/2022 20:41
האם יש אפשרות לעצב רקע בתוך דף...
מדריך CSS - מתחילים
18/11/2021 10:18
היי ינון, אתה צריך את הטקסט ש...

מדריך 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.

 

רוצה שנקפיץ גם את העסק שלך?

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

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

 

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

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