HTML - JS - CSS - 3

השיעור למדנו כתיבת סקיפט \ עיצוב בקובץ נפרד – הדף HTML  מכיל את הקוד תצוגה של הדף בלבד עם הפניה לקבצי עיצוב \ קוד

1.   <link href="StyleSheet.css" rel="stylesheet" />

2.    <script src="Script.js"></script>

1. הפניה לקובץ – href מיקום הקובץ (במקרה שלנו הקובץ נמצא באותה תיקייה ולכן לא צריך נתיב מלא אלא רק את שם הקובץ)  rel איזה סוג הקובץ (תכונה)

2. מיקום של הסקריפט

טבלה

נ.ב - אומנם בתקן HTML5  כבר לא משתמשים בטבלה אך חשוב להכיר

טבלה מורכבת משורה tr ובתוך כל שורה מגדירים תאים td

        <table>

        <tr>

            <td>  1  </td>

            <td>  2  </td>      

        </tr>

    </table>

יצירת טבלה באמצעות סקריפט – במקום ליצור שורה שורה ובתוך כל שורה את כל התאים ניתן ליצור באמצעות קוד

דוג' לקוד ליצירת טבלה ובתוך כל תא בטבלה יש כפתור שמציג תמונה

1 - בטעינת החלון תריץ את הפונקציה

2 - המשתנה = לאלמנט שתמצא בדף לפי ID

3 - המשתנה = לאלמנט שתיצור בתוך המקטע

4 -   appendChild = את האלמנט שיצרנו table תכנית לתוך האלמנט div_buttons

5-10

·        לולאה ראשונה = פקודה ליצור שורה + פקודה להכניס את השורה לטבלה

·        לולאה פנימית = ליצור תא + הכנסת התא לשורה מהלולאה החיצונית

11-12 – יצירת כפתור והכנסת הכפתור לתוך האלמנט תא

13  - הרקע של הכפתור הוא תמונה שהמקור שלה הוא מונה + סיומת   כל הכתובת כולל ההפניה (url) הוא מחרות אחת !!!

14 – הגדרת מאפייני התמונה = מאפיין ID למספר המונה

15 – תעלה את המונה ב1 ע"מ שבכל סיבוב של הלולאה תתקבל תמונה אחרת וID אחר

1.  window.onload = function () {

2.  var div_buttons = document.getElementById("div_buttons")

3.  table = document.createElement("table");

4.  div_buttons.appendChild(table);

5.  for (var i = 0; i < 3; i++) {

6.  tr = document.createElement("tr");

7.  table.appendChild(tr);

8.  for (var x = 0; x < 3; x++) {

9.      td = document.createElement("td");

10. tr.appendChild(td);

11. button = document.createElement("button");

12. td.appendChild(button);

13. button.style.backgroundImage = "url('" + (count) + ".jpg')";

14. button.setAttribute("id" , count)

15. count++;

16.   }

אודיו

    <audio controls="controls">

        <source src="file.mp3" type="audio/mp3" />

    </audio>

Controls – להצגת סרגל הפעלה. ניתן לבטל את הסרגל במידה ועושים הפעלה אוטומטית

Src- מקור הקובץ שמע

Type – סוג הקובץ

 

2 - Get Element By Id = תאסוף את כל האלמנטים שיש להם את התג שם הזה לתוך המשתנה

3 – תכניס את האלמנטים למערך ותבצע עליהם לולאה שתוסיף לכל אחד את הפונקציה הבאה

4 -  add Event Listener –הוסף מאזין לאירועים מסוג קליק שמפעיל פונקציה  

Event = חלקים בקוד שממתינים לקריאה ע"מ לרוץ בד"כ לחיצה אך יכול להיות בעוד מקרים כמו לדוג' בסגירת \ פתיחת טופס

5-6 כתובת הקובץ שמע + השמעה אוטומטית

1. var audio = document.getElementById("audio");
2. var buttons = document.getElementsByTagName("button");
3. Array.from(buttons).forEach(function (b) {
4. b.addEventListener("click", function() {
5. audio.src = b.id + ".mp3";
6. audio.play();

CSS

   background-repeat: no-repeat;

    background-size:cover;

במקרה והתמונה לא בגודל של האובייקט הדפדפן ישכפל את התמונה – הפקודות האלו אומרות

1.      אל תחזור על התמונה יותר מפעם אחת

2.      שהגודל של התמונה הוא שיכסה את כל השטח