שימוש ב- JavaScript ובגרפיקה

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

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

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

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

הבנת אלמנט תמונת ה- HTML

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

כאשר "url" הוא כתובת URL שנבנתה כראוי עבור קובץ התמונה. כתובת האתר יכולה להיות מוחלטת או יחסית. זכור שלא כל הדפדפנים מצוידים להציג גרפיקה. לכן, מומלץ לכלול "טקסט חלופי" לתמונה למי שמאתגר את התמונה. השתמש בתכונת ALT שבתוך התג כדי לציין טקסט חלופי. הנה דוגמה:

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

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

  • תחתון - מיישר את הטקסט לתחתית התמונה. זו ברירת המחדל.
  • אמצע - מיישר את הטקסט לאמצע התמונה.
  • למעלה - מיישר את הטקסט לראש התמונה.

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

בדרך כלל דפדפנים מציגים תמונות ב"גודל הטבעי ". אם תמונה היא 100 פיקסלים על 100 פיקסלים, למשל, זה כמה שהיא גדולה כאשר היא מוצגת על גבי מסך הדפדפן. אך עם Netscape תוכלו לשנות את גודל התמונה אם תרצו שהיא קטנה או גדולה יותר באמצעות התכונות WIDTH ו- HEIGHT. יתרון במאפיינים אלה הוא שכאשר משתמשים בו הדפדפן יוצר תיבה ריקה לתמונה ואז ממלא את התיבה בתמונה עם טעינת הדף כולו. זה מציין את המשתמשים שצפוי גרפיקה בנקודה זו.

  • ציון רק רוחב או גובה משנה את גודל התמונה בפרופורציות. לדוגמא, ציון גדלים של תמונה מרובעת לגובה ורוחב של 100 פיקסלים. אם התמונה המקורית איננה מרובעת, היא מגודל ביחס יחסי. למשל, אם התמונה המקורית רוחבה 400 פיקסלים על 100 פיקסלים, שינוי הרוחב ל 100 פיקסלים מקטין את התמונה ל 25 פיקסלים.

  • ציון הוא הרוחב ו בגובה מאפשר לך לשנות את היחס של התמונה בכל דרך שתרצה. לדוגמה, אתה יכול להפוך את התמונה הזו של 400 על 100 פיקסלים ל -120 על 120, 75 על 90 או כל דבר אחר.

לדוגמה:

זהירות : בשילוב עם JavaScript, עליך תמיד לספק את התכונות HEIGHT ו- WIDTH עבור התגים. אחרת, אתה עלול לקבל תוצאות לא עקביות ו / או לקרוס! אזהרה זו חלה על כל תג שמופיע באותו מסמך המכיל קוד JavaScript.

שילוב תמונות עם JavaScript

ניתן להשתמש ב- JavaScript כדי לשפר תמונות המשמשות במסמכי HTML. לדוגמה, אתה יכול להשתמש ב- JavaScript כדי ליצור דף באופן דינמי באמצעות תמונות שנבחרו על ידי ביטוי מבחן מותנה, כגון השעה ביום.

למעשה, יישום השעון הדיגיטלי של JavaScript, המשתמש ב- JavaScript ובמבחר של תמונות GIF, הוא אחד הפופולאריים ביותר ברשת. הדוגמה של Clock.html משתמשת ב- JavaScript כדי להציג את השעה הנוכחית, באמצעות ספרות LED גדולות וירוקות. כל ספרה היא קובץ GIF אינדיבידואלי, הנחבר על ידי JavaScript כדי ליצור פנים של שעון דיגיטלי.

השתמשתי ב- GIF ספרות שסופק על ידי רוס וולש; ראס מאפשר בחביבות להשתמש בקובצי GIF שלו באופן חופשי בדפי אינטרנט, כל עוד ניתן אשראי מתאים. אתה יכול להשתמש בכל הספרות שתרצה לשעון שלך, אך עליך לספק קובץ GIF נפרד לכל ספרה וקבצים נפרדים כל אחד עבור נקודתיים ומעי הגס. שנה את קוד clock.html כדי להתייחס לקבצי הספרות שבהם ברצונך להשתמש.

הערה : חשוב שתספק את כתובת האתר המוחלטת לתמונות בהן אתה משתמש. אחרת Netscape לא יציג את הגרפיקה. הדוגמה של Clock.html משתמשת בפונקציה (pathOnly) כדי לחלץ את הנתיב הנוכחי של המסמך. לכן התסריט מצפה למצוא את התמונות באותו נתיב כמו המסמך. לחלופין, אתה יכול לבצע קידוד קשיח של כתובת האתר המוחלטת אם אתה מציב את התמונות במקום אחר, או שתשתמש בתג בתחילת המסמך כדי להגיד במפורש לנטסקייפ את כתובת האתר הבסיסית שבה ברצונך להשתמש.

שעון דיגיטלי של JavaScript

JavaScript שעון דיגיטלי var Temp; לכוון שעון(); function setClock () {var OpenImg = ' ' Temp = "" now = תאריך חדש (); var CurHour = now.getHours (); var CurMinute = now.getMinutes (); עכשיו = null; אם (CurHour> = 12) {CurHour = CurHour - 12; Ampm = "pm"; } אחר Ampm = "am"; אם (CurHour == 0) CurHour = "12" אם (CurMinute <10) CurMinute = "0" + CurMinute אחר CurMinute = "" + CurMinute

CurHour = "" + CurHour; עבור (Count = 0; Count 'for (Count = 0; Count <CurMinute.length; Count ++) {Temp + = OpenImg + CurMinute.substring (Count, Count + 1) + CloseImg} Temp + = OpenImg + Ampm + CloseImg}

function pathOnly (InString) {LastSlash = InString.lastIndexOf ('/', InString.length-1) OutString = InString.substring (0, LastSlash + 1) return (OutString); }

שעון ה- JavaScript

השעה הנוכחית היא: document.write (Temp);

שימוש ב- JavaScript עם מפות תמונה בצד הלקוח

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

החיסרון במפות תמונות בצד השרת הוא שאתה זקוק לתוכנית CGI הפועלת בשרת כדי לטפל בבקשות הקליק. לא לכולם יש גישה ל- CGI. מפות התמונות בצד הלקוח משנות את זה: ה"אינטליגנציה "לניתוח התמונה והפניית המשתמש לקישור הנכון - בהתבסס על שטח התמונה שעליו נלחץ - מובנית בדפדפן. Netscape Navigator (גרסה 2.0 ואילך) הוא אחד מהדפדפנים הרבים התומכים כעת בתקן זה.

Netscape לוקח את התהליך צעד נוסף, עם זאת, ומאפשר לך לשלב מפות תמונה בצד הלקוח עם JavaScript. במפת תמונות רגילה בצד הלקוח, אתה מוגבל רק לקישור לדף אחר. אם תרצה, תוכל "לקשר" לפונקציית JavaScript ולתת למפות התמונות שלך עוד יותר אינטליגנציה. לדוגמה, אתה יכול ליצור לוח בקרה המאפשר למשתמשים רק ללחוץ בהצלחה על כפתור תמונה אם נמסר פיסת מידע כלשהי - למשל שם משתמש.

האנטומיה של מפת תמונות בצד הלקוח

שני תגי HTML חדשים משמשים ליצירת מפות תמונה בצד הלקוח. הם התג המגדיר את מבנה המפה ותג אחד או יותר המגדירים את האזורים הניתנים ללחיצה בתוך התמונה. ליצירת מפת התמונה, הגדירו תג ותנו למיפוי שם. התחביר הוא:


  

You can use most any name for the map, but it should contain only alphabetical and numeric characters. The exception is the underscore, but avoid using an underscore for the first character. Next, define one or more tags that define the areas of your image. The tag takes the syntax:


  

After the last tag, use the tag to denote the end of the mapping.

The last item is the image you want to use, with a reference to the area map you've previously defined. Use the standard tag, with a new USEMAP attribute. For the USEMAP attribute, provide the name of the map. Here's an example:

This map uses an image named control.gif. The tag references the map name, which is #control (note the hash before the name). Other attributes provided with the tag are no border (BORDER=0), and the width and height of the image. When your users click on the back arrow (which is the first area defined), they are sent to the index.html page. Conversely, if they click on the contents "button" (the second area defined), they are taken to a page called toc.html. And if they click on the forward arrow, they are taken to a page called backpage.html.

Adding JavaScript to image map control

JavaScript can be used to extend the functionality of client-side image maps. For added flexibility provide the name of a JavaScript function for the HREF in the tag. Instead of jumping to some page, your JavaScript code is executed in which you can do anything you want. The trick: Use the JavaScript: protocol for the URL, and follow it with the name of the function you wish to use.

For example, suppose you want users to go back only one page in the history list when they click on the back arrow. You can use the window.history.go(-1) method to jump back one page in the user's history list. You can either provide this entire function after the JavaScript: protocol, or call a user-defined function that contains this instruction. Here are both methods:


  

or ...


  

... and elsewhere in the document:

 function goBack() { window.history.go (-1); }  

Personally, I prefer the latter method, because I often need to provide a number of JavaScript functions that I want performed. But, you can use whatever method you like best and which best fits the situation.

Following is a working example of using client-side image maps with JavaScript. The buttons display an alert box to show you that the JavaScript: URL is indeed working. The forward and back buttons also work -- assuming you have pages forward and backward in your history list. If the history list is empty (you have loaded the document into a new window, for example) then the current page remains.

Client-side image map example

Client Side Image Map Example function goBack() { alert ("Back"); window.history.go (-1); }

function goForward() { alert ("Forward"); window.history.go (1); }

פונקציה toc () {alert ("תוכן העניינים"); }