Upload
ryan-gibson
View
30
Download
3
Embed Size (px)
DESCRIPTION
חוג פיתוח אתרי אינטרנט. שיעור 13. מה זה JavaScript. שפת תכנות אשר ניתן להריץ באמצעות הדפדפן (בצד הלקוח ). ג'אווה סקריפט מאפשרת יצירת אתרים דינאמים ואינטראקטיבים : חלונות קופצים, העלמת והופעת אלמנטים ועוד. איך עובדים עם JavaScript ?. שלב א: יוצרים תיקייה חדשה בפרוייקט בשם Jscripts - PowerPoint PPT Presentation
Citation preview
אתרי פיתוח חוגאינטרנט
13שיעור
ב מוסיקה רשימת Java Scriptיצירת
עמוד. 1 בשם htmlנפתח media.htmlחדש
בשם. 2 תיקייה ' audioניצור שירים מס אליה ונגרור
<div class="play">מהרשימה שיר :בחר <ul> <li class="music1"> song number 1 </li> <li class="music2">song number 2 </li> <li class="music3"> song number 3 </li> <li class="music4">song number 4 </li> <li class="music5"> song number 5 </li> </ul> </div>
פריט. 3 ולכל רשימה ניצורשם ניתן ברשימה
מחלקה שם את ונכתוב אחר
השיר
ה. 4 נגדיר cssבקובץעל לחיצה בעת קורה מה
ברשימה פריט כל
.music1, .music2, .music3, .music4, .music5 {
cursor: pointer; width: 100px;}
<div class="song1"> <audio controls="controls" > <source src="audio/1.mp3" type="audio/mpeg" /></ audio ></div>
הקוד. 5 שורת את נעתיק כעתה לעמוד מתחת htmlהבאה
שם את רק ונשנה לרשימההשיר ושם המחלקה
שורת. 6 אותה את ונדביק נעתיקפעם ובכל שם קוד את רק נשנה
המחלקה ושם השיר
ה. 7 נגדיר cssבקובץ. מוחלט מיקום מהשירים אחד לכל
.song1, .song2, .song3, .song4, .song5 {
position:absolute ; }
קובץ. 8 אותו javascriptניצור ונמקם חדשבספריית
Jscript
$(document).ready(function () {
$("li.music1").click(function () { $(".song1").fadeIn(); $(".song2").fadeOut(); $(".song3").fadeOut(); $(".song4").fadeOut(); $(".song5").fadeOut();});});
קובץ. 9 את נפתח כעתJavaScriptה
. הבא הקוד את אליו ונעתיק
על. 10 לחיצה שבעת מגדיר הקוד , השיר יוצג הראשון הפריט
. הראשון
ונשנה. 11 קוד שורת אותה את נעתיק
השיר ואת הפריט שם את פעם בכל. הלחיצה בעת יציג הוא שאותו