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

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

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

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

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