1 / 18

חוג פיתוח אתרי אינטרנט

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

ryan-gibson
Download Presentation

חוג פיתוח אתרי אינטרנט

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. חוג פיתוח אתרי אינטרנט שיעור 13

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

  3. איך עובדים עם JavaScript ? • שלב א: יוצרים תיקייה חדשה בפרוייקט בשם Jscripts • שלב ב: לוחצים קליק ימני על התיקייה שיצרנו ובוחרים ב Add – Add new itemבוחרים ב JavaScript Fileולוחצים על Add

  4. איך עובדים עם JavaScript ? • שלב ג: גוררים את קובץ ה Jscripts שיצרנו אל העמוד שלנולתוך ה head

  5. איך עובדים עם JavaScript ? • שלב ד: מעתיקים את השורה הבאה וממקמים אותה ב <head> מעל קובץ ה js <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"type="text/javascript"></script>

  6. איך עובדים עם JavaScript ? • שלב ה: לוחצים פעמיים על קובץ ה js שיצרנו ומתחילים לעבוד...

  7. איך הקוד עובד ? בתוך הקובץ js החדש שיצרנו, קוד jQuery יכתב בתוך ההגדרה הזו: $(document).ready(function(){ }); כל קוד ה jQuery

  8. איך הקוד עובד ? סוג האירוע שם ה div שיצרנו $(“.myclass”).click(function () { alert("שלום"); }); הפעולה שתתבצע

  9. אירוע לחיצה במקום element נרשום את שם הדיב שיצרנו $(".element").click(function(){ }); פה נרשום את הפעולה

  10. אירוע בעת מעבר עכבר במקום element נרשום את שם הדיב שיצרנו $(".element").hover(function(){ },function(){ }); אירוע מעבר עכבר אירוע יציאת עכבר

  11. פעולות נפוצות $(".element").fadeIn(); $(".element").fadeOut(); $(".element").slideDown(); $(".element").slideUp(); $(".element").slideToggle(); $(".element").css("display","none"); alert("hello"); setTimeout(function () {alert("automatic popup"); }, 0); הופעה והעלמה של אלמנט באמצעות fade הופעה והעלמה של אלמנט באמצעות slide אם האלמנט מופיע, הוא יעלם, אם האלמנט לא מופיע, הוא יופיע קביעת הגדרת CSS באמצעות jQuery חלון הודעה קופצת חלון הודעה קופצת אוטומטית בעת העלאת העמוד

  12. דוגמא בקובץ ה js $(".clickme").click(function(){ alert("ברוכים הבאים"); }); בקובץ ה html <div class="clickme"> לחץ עליי </div>

  13. יצירת גלריית תמונות ב Java Script

  14. 1. נפתח עמוד html חדש בשם gallery.html 2. נגרור מס' תמונות אל תיקיית Images

  15. 3. ניצור מחלקה ונגרור אליה את כל התמונות 4. ניצור לכל אחת מהתמונותclass נפרד <div class="hoverme"> העבר את העכבר על התמונות: <imgclass="pic1" src="images/1.jpg" /> <imgclass="pic2" src="images/2.jpg" /> <imgclass="pic3" src="images/3.jpg" /> </div> 5. בקובץ ה css נגדיר לכל אחת מהתמונות גודל קטן img.pic1 { width:50px; }

  16. 6. נגרור שוב את כל התמונות מתחת למחלקה המכילה את התמונות הקטנות. 7. נגדיר לכל אחת מהתמונות מחלקה נפרדת עם שם אחר. <imgclass=“mypic1" src="images/1.jpg" /> <imgclass=“mypic2" src="images/2.jpg" /> <imgclass=“mypic3" src="images/3.jpg" /> 8. בקובץ ה css נגדיר לכל אחת מהתמונות גודל גדול ומיקום מוחלט ונגדיר שבתחילה הן לא יוצגו. img.mypic1 { display: none; position: absolute; width: 500px; }

  17. 9. כעת נפתח את קובץ ה JavaScript ונעתיק אליו את הקוד הבא 10. יש להעתיק את שורת הקוד ולהדביק אותה שוב על כל תמונהשבגלרייה שלנו ולשנות רק את שםה class (מסומן בירוק) $(document).ready(function () { $(“img.pic1").hover(function () { $("img.mypic1").fadeIn(); }, function () { $("img.mypic1").fadeOut(); }); });

  18. לתרגול נוסף http://jqueryui.com/

More Related