הנושאים החמים
הנושאים החמים
שיעור 1
קובץ שנוצר בשפת HTML הינו קובץ סטטי – כאשר הוא נפתח בדפדפן – הוא מציג "תמונה דוממת" של טקסט או גרפיקה. כל תגי שפת HTML נועדו לעיצוב הפלט בלבד, אך אין באפשרותם לבצע "פעילות" כלשהי בעמוד או אינטראקציה עם הלקוח. (מלבד תג <a> - שיוצר לינק הפניה אך אין זה בגדר "אינטראקציה")
(התג היחידי של HTML היוצר "תנועה" הוא <MARQUEE> אבל הוא כבר לא תג תקני בתקני HTML החדשים, למרות שהוא עדיין עובד ברוב הדפדפנים)
על מנת ליצור תוכן דינמי (מה שמכונה DHTML) או אינטראקציה עם המשתמש, אנחנו זקוקים לשלב תסריטי תוכנה (Scripts) כלשהם בתוך תגי HTML. שפת התסריטים הנפוצה ביותר והנתמכת ע"י כל הדפדפנים היא JavaScript.
במאמרים הבאים נסקור בס"ד את כללי השימוש הבסיסיים של JavaScript וכן נציג דוגמאות.
דבר ראשון – בשביל להכניס סקריפט לתוך העמוד אנחנו, כמובן, צריכים לציין את זה עם תג מתאים:
קוד:
[LEFT]<script>
[כאן בא קטע קוד]
</script>[/LEFT]התג script מקבל 3 פרמטרים:
1) language - כאן אנחנו "מסבירים" לדפדפן באיזו שפה כתוב הסקריפט. במקרה שלו זה כמובן: language="javascript"
2) type – סוג הסקריפט (זה הופיע לראשונה ב-HTML 4.0) . אצלנו זה - type="text/javascript". אם משתמשים בתג זה אין צורך לציין language
3) src – במקרה שמשתמשים בקובץ חיצוני של javascript מציינים כאן את שם הקובץ ומיקומו. למשל: "src="Scripts/somescript.js
שימו לב:אם משתמשים בהפניה לקובץ חיצוני ע"י - src אי אפשר לשלב שורות הקוד נוספות בתוך התג script – הדפדפן יבצע רק את קוד שבקובץ ויתעלם משורות קוד ה"מקומיות".
ישנם מקרים שבהם הסקריפטים לא יעבדו - אם למשל מטעמי אבטחה ה-Scripting מנוטרל בהגדרות דפדפן, או אולי הדפדפן לא תומך בסקריפטים כלל. במקרה כזה כל שורות הסקריפט ייפלטו כטקסט רגיל לתוך דפדפן הלקוח.
ע"מ למנוע זאת מכניסים את כל הקוד לתוך "תגי הערות" של HTML (<!-- -->):
קוד:
<script language="javascript" type="text/javascript">
<!--
[כאן בא קטע קוד]
// -->
</script>ואם אתם ממש רוצים להתחשב באותם אנשים שהדפדפן שלהם לא תומך בסקריפטים מסיבה כלשהי – קיים תג מיוחד למקרה כזה: <noscript> למשל:
קוד:
<script language="javascript" type="text/javascript">
<!--
[כאן בא קטע קוד]
// -->
</script>
<noscript>
<p> הדפדפן שלך לא תומך סקריפט</p>
</noscript>מותר לשלב תג script בכל מקום בתוך הדף, דהיינו בתוך body , אך נכון למקם אותו בתוך head.
באו ונכתוב "תוכנה" ראשונה שלנו:
קוד:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript lessons</title>
<script type="text/javascript" >
document.write("שלום לכולם");
</script>
</head>
<body dir="rtl">
</body>
</html>כיצד זה עובד?
הדפדפן יוצר עצמים (objects) שבנויים בצורה היררכית למשל:
צפה בקובץ המצורף 69551
לכל עצם (object) יש מאפיינים (properties) ושיטות (methods).
צפה בקובץ המצורף 69556
נוסיף עוד 2 שורות לקוד שלנו להדגים אפשרויות נוספות:
קוד:
<head>
<title>Javascript lessons</title>
<script type="text/javascript" >
document.bgColor = "#80FFFF"
document.title = "New Title"
document.write("שלום לכולם");
</script>
</head>
<body dir="rtl">
</body>שימו לב: למרות שבתוך התג <title> מצויין טקסט אחר – הסקריפט "גובר" על תוכן התג והדפדפן מציג את הכותרת הכתובה בסקריפט !
ועוד דוגמה שימושית במאפייני אובייקט: מדידת מידות המסך של המשתמש:
קוד:
<script type="text/javascript" >
document.write("רוחב המסך שלך הוא: ");
document.write(screen.width);
document.write("<br />");
document.write("גובה המסך שלך הוא: ");
document.write(screen.height);
</script>לא לשכוח לכתוב "נקודה-פסיק"
) בסוף כל שורת פקודה נ.ב. למרות שבהיררכית האובייקטים document הוא "בן" של window והתחביר המלא הוא:
window.document.write ניתן לכתוב בתחביר מקוצר כמו בדוגמאות שהבאנו document.write
