Transcript מצגת הסבר על JavaScript

‫חוג פיתוח אתרי אינטרנט‬
‫שיעור ‪13‬‬
‫‪ .1‬נפתח עמוד ‪ html‬חדש בשם ‪media.html‬‬
‫‪ .2‬ניצור תיקייה בשם ‪ audio‬ונגרור אליה מס' שירים‬
<div class="play">
:‫בחר שיר מהרשימה‬
<ul>
<li class="music1"> song number 1
<li class="music2">song number 2
<li class="music3"> song number 3
<li class="music4">song number 4
<li class="music5"> song number 5
</ul>
</div>
.music1, .music2, .music3, .music4, .music5 {
}
cursor: pointer;
width: 100px;
</li>
</li>
</li>
</li>
</li>
‫ ניצור רשימה ולכל פריט‬.3
‫ברשימה ניתן שם מחלקה‬
‫אחר ונכתוב את שם השיר‬
‫ נגדיר‬css ‫ בקובץ ה‬.4
‫מה קורה בעת לחיצה על‬
‫כל פריט ברשימה‬
‫‪ .5‬כעת נעתיק את שורת הקוד‬
‫הבאה לעמוד ה ‪ html‬מתחת‬
‫לרשימה ונשנה רק את שם המחלקה‬
‫ושם השיר‬
‫‪ .6‬נעתיק ונדביק את אותה שורת קוד‬
‫ובכל פעם נשנה רק את שם השיר‬
‫ושם המחלקה‬
‫‪ .7‬בקובץ ה ‪ css‬נגדיר‬
‫לכל אחד מהשירים מיקום מוחלט‪.‬‬
‫>"‪<div class="song1‬‬
‫> "‪<audio controls="controls‬‬
‫>‪<source src="audio/1.mp3" type="audio/mpeg" /‬‬
‫> ‪</ audio‬‬
‫>‪</div‬‬
‫{ ‪.song1, .song2, .song3, .song4, .song5‬‬
‫; ‪position:absolute‬‬
‫}‬
‫‪ .8‬ניצור קובץ ‪ javascript‬חדש ונמקם אותו בספריית‬
‫‪Jscript‬‬
‫‪ .9‬כעת נפתח את קובץ‬
‫ה ‪JavaScript‬‬
‫ונעתיק אליו את הקוד הבא‪.‬‬
‫{ )( ‪$(document).ready(function‬‬
‫{ )( ‪$("li.music1").click(function‬‬
‫‪ .10‬הקוד מגדיר שבעת לחיצה על‬
‫הפריט הראשון‪ ,‬יוצג השיר‬
‫הראשון‪.‬‬
‫‪ .11‬נעתיק את אותה שורת קוד ונשנה‬
‫בכל פעם את שם הפריט ואת השיר‬
‫שאותו הוא יציג בעת הלחיצה‪.‬‬
‫;)(‪$(".song1").fadeIn‬‬
‫;)(‪$(".song2").fadeOut‬‬
‫;)(‪$(".song3").fadeOut‬‬
‫;)(‪$(".song4").fadeOut‬‬
‫;)(‪$(".song5").fadeOut‬‬
‫;)}‬
‫;)}‬