בואו נתחיל

פרק 1: הכרזת סקריפט.
מכיוון שהשפה נכתבת בתוך דפי HTML עלינו לכתוב תג מסויים ש"יכריז" על התחלת הסקריפט וגמירתו.
בדיוק בשביל זה נרשום:

קוד HTML:

<script type="text/javascript"><!--JavaScript Code//--></script><noscript>Your browser does not support JavaScript!</noscript>

מה עשינו פה?
קודם כל הכרזנו על קוד JS שרשמנו:

<script type="text/javascript">

אם לא נרשום את הקטע

"type="text/javascript

הדפדפן עלול להתבלבל ולחשוב שזה קוד VBScript
לכן מומלץ לרשום כך.




עד לתגית- </script> (תגית הסגירה) נרשום את קוד ה-JS
וכשרשמנו:

<noscript>Your browser does not support JavaScript!</noscript>

אמרנו שאם יש דפדפן שלא מזהה את JS אז זה יכתוב הודעה זו.




עכשיו אתם בטח תשאלו:

"אם הדפדפן לא מכיר את התגית <script> איך זה שהוא יכיר את <noscript> ?"

אז זהו, שלא!
בדפדפנים החדשים הם יזהו את התגית הזאת וכך לא ידפיסו את שורת הקוד.
וכשרשמנו את <!-- JS CODE //-->
שמנו הערות (ראה פרק 2).
שאם יש דפדפן מיושן הוא לא יציג שאת כטקסט, דפדפן חדש "למד" (יותר נכון אמרו לו) שאחרי התגית <script> יבוא סקריפט של JS.
וכל הוא יתעלם מההערה.




פרק 2: הערות.
הערת HTML נראית כך:
<!-- Note -->
הערת JS לעומת זאת נראית כך:

// A note for all thr line
/* Note to closing */
השני לוכסנים (" // ") הם הערה עד סוף השורה.
הלוכסן כוכבית (" /* ") הוא עד לסגירה (" */ ")

פרק 3 סעיף א): הודעות קופצות.
בשביל לעשות הודעה קופצת למשתמש (כמו שיש בפרסומות "אתה הזוכה ב...")

בשביל להכניס הודעה קופצת כגון זאת:

אינטרנט אקספלורר (Internet Explorer)

או בגוגל כרום (Google Chrome)

עלינו לרשום כך:

קוד HTML:

<script type="text/javascript"><!--window.alert("My First Message!"); //we make a message//--></script><noscript>Your browser does not support JavaScript!</noscript>

מה רשמנו פה?
קודם כל הכרזנו על הסקריפט ובלה בלה בלה.

שימו לב!
לא חובה (אך מומלץ) לרשום קודם את אובייקט החלון, אפשר להגיד שזה:
window.alert("bla"); //we alert bla
שקול לזה:
alert("bla"); //we alert bla

שימו לב לשורה:
window.alert("My First Message!"); //we make a message
היא זאת שעושה את הכל.
זוכרים שאמרתי שיש אובייקטים ולכל אובייקט תכונות?
אז זהו פה התחלנו
קודם כל כתבנו את אובייקט החלון (window) אח"כ כתבנו את הפעולה שצריך לעשות(לעשות הודעה alert) ואז רשמנו מה לעשות.

שים לב!
צריך לשים בסוף כל משפט נקוד פסיק (" ; ") בשביל להראות על סיום הפקודה!

חדי העין שקראו את הפרק הקודם שמו לב שהשתמשתי בהערה

//we make a message

עשיתי זאת רק בגלל אילוצי הצגת המלל, אפשר להוסיף או לא להוסיף הערות זה אתם קובעים זיכרו! כל אחד יכול לראות את ההערות שלכם, אל תשימו שם מידע רגיש! (סיסמאות מידע אישי וכ'ו).
עכשיו תכתבו זאת בתוך קוד ה-HTML.

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

פרק 3 סעיף ב): הודעות קופצות עם בחירה.
נכון ראיתם בכמה וכמה אתרים הודעות קופצות עם אפשרות בחירה? (של כן או לא)
עכשיו נלמד לעשות זאת!
בשביל להכניס הודעה קופצת כגון זאת:

אינטרנט אקספלורר (Internet Explorer)


או בגוגל כרום (Google Chrome)

בשביל זה נרשום:

קוד HTML:

if (confirm("Prees Somthing")){alert("You Said Yes");}else{alert("You Said No");}

עכשיו יהיה לכם שאלת בחירה עם ללחוץ "אישור" או "ביטול" אם תלחצו על "אישור" תיהיה לכם הודעה רגילה שתכתוב "

You Said Yes"

לעומת זאת אם תבחרו ב-"ביטול"
אתם תקבלו: "

You Said No"

פרק 3 סעיף ג): הודעות קופצות עם הכנסת מלל.
בשביל להכניס הודעה קופצת כגון זאת:

אינטרנט אקספלורר (Internet Explorer)

או בגוגל כרום (Google Chrome)

נרשום:

var x = prompt("Enter your name: ");
window.document.write("Hello, " + x + " welcome to my site!");

קודם כל רשמנו את ההודעה (Enter your name אחרי שהמשתמש הקליד את השם,
למשל Smoxer הדפדפן ירשום:
Hello, Smoxer welcome to my site!

עד כאן להודעות, פשוט וקל!

פרק 4: הצגת מלל.
בשביל להציג מלל ב-HTML בעזרת JS נרשום כך:

קוד PHP:

window.document.write("<span style='color: Red;'>I'm Red!</span>"); //we print "I'm Red" in Red 


הפלט יהיה:
I'm Red!
למה?
קודם כל רשמנו את אובייקט החלון(window), אח"כ רשמנו את אובייקט המסמך (document) ואז שמנו את השיטה כתוב (write() )
בתוך השיטה write(); אפשר לשים את כל קודי ה-HTML העיקר שיהיהו בתוך מרכאות כפולות (" ") או גרש בודד (' ')
אפשר גם לרשום אותו דבר כך:

קוד PHP:

window.document.write("<span style='color: Red;'>" + "I'm Red!" + "</span>"); //we print "I'm Red" in Red 


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

פרק 5 סעיף א): משתנים, מהם?
מי שבא משפות התכנות (או משפות צד שרת) יודע שיש דבר הנקרא משתנים.
אם אתם יודעים מתמטיקה אז כנראה תתחילו לחשוב לי על X,Y ו-Z. (או בשם אחר אלגברה) זה בכלל לא ככה (חוץ מכמה פעולות בסיסיות).
בשביל להגדיר משתנה ב-JS עלינו לרשום כך:
var myvar ="Hello JavaScript!" // we make a var
אז מה עשינו פה?
קודם כל הכנסנו את המילה השמורה "var" שאומרת שזהו משתנה.
מי שבא מרקע תכנותי (C, C#, Pascal וכדומה) יקפוץ לו משהו מוזר לעיין ובצדק.
איפה נמצא המילה string או int ? אז זהו היופי ב-JS. לא צריך את זה, אתה יכול להכניס גם קטע טקסט, מספר ועוד הרבה דברים טובים, אתה רק צריך לכתוב var לפני במקום להסתבך עם int או string.




פרק 5 סעיף ב): שמות משתנים.
בשפות שונות שמות המשתנים יכולות להיות קריטיות מאוד!
להלן מספר חוקים שאסורים בנוגע שמות למשתנים:

• אסור לשים רווח בשם משתנה.
  
• אין לשים תווים מיוחדים, מותר רק אותיות גדולות וקטנות באנגלית כאחד, ספרות ושני הסימנים המיוחדים ("_") ו-("$"). כל השאר אסורים בהחלט!
  
• התו הראשון חייב להכיל אות, קטנה או גדולה.
  
• אסור לעשות שימוש במילה שמורה (ראה כ-מילים שמורות בסוף המדריך)

פרק 5 סעיף ג): שימוש במשתנים.
בשביל להשתמש במשתנה אנחנו צריכים לרשום כך:
var myvarname = "Hello World" // we make a var
מה עשינו פה?
קודם כל הכרזנו על משתנה (var) אז נתנו לו שם (myvarname) ואז הכנסנו לו את הארך מחרוזת (string) האמור Hello World.
אם עשיתם טוב לא אמור לצאת לכם כלום.
בואו נכתוב את המשתנה (נדפיס אותו על המסך):

קוד PHP:

var myvarname = "Hello World"; // we make a varwindow.documwnt.write(myvarname); //we print the var 


יצא:
Hello World
לעומת זאת אם נכניס לשם המשתנה את הקוד הזה:
var myvarname = "<span style='color: Red;'>Hello World</span>"; // we make a var
יצא:
Hello World

כך שאפשר להכניס לכל משתנה מה שרוצים, זה היופי ב-JS

אפשר להשתמש גם בנוסחאות מתמטיות ב-JS.
כלומר אם נרשום כך:

קוד PHP:

;var num = 5;var num2 = 10;var num3 = num * num2window.document.write(num3); // we print num3 


מה לדעתכם יצא?
תשובה:

ספוילר:

50 מכיוון שמכפילים את המשתנה הראשון (שווה ל-5) למשתנה השני (שווה ל-10) ו-10*5 שווה ל-50.

פרק 6: מערכים.
אחרי שלמדנו על משתנים, וברצוני לתת מספר משתנים (כגון שמות תלמידים) אני לא אתן לכל שם של ילד (או ילדה) משתנה משלו.
בשביל זה המציאו את המערך. איך נכתוב מערך?
בשביל זה נרשום כך:

קוד PHP:

var Students = new Array("Omri","Simon","Asa","Raz","Hagai"); // we make an Array 


מה עשינו פה?
קודם כל הכרזנו על משתנה בשם Students שהכנסנו לו מערך (שימו לב! חובה לרשום Array ולא array בגלל ש-JS מאוד רגישה לאותיות גדולות וקטנות, בשבילה זה שני דברים שונים!)
עכשיו אם נרשום את זה:

קוד PHP:

window.document.write(Students[0]); 


יצא: Omri
מכיוון שהספירה מתחילה מ-0 עד לערך האחרון.

אם למשל נכתוב כך:
window.document.write("Hello, " + Students[4] + " Welcome!"); //we print the var Students
הפלט יהיה:
!Hello, Hagai Welcome

יש כאלה הנוהגים להגדיר שזהו סוג של מסד נתונים כלומר חלק שבתוכו מאחסנים, כמובן שזה לא משתווה ל-MySQL ולעוד הרבה מסדי נתונים רבים.

כל התוכן הנ"ל נרשם רק ע"י ואין להעתיק/לקחת תוכן ללא רשות.
תודה!

לגרסה המלאה לחץ כאן