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.      שהגודל של התמונה הוא שיכסה את כל השטח

המרות - הערות - String Builder - העברת נתונים לפונקציה

Cast - המרת משתנים

משתנה בC#  לאחר שקיבל את הסוג לא נוכל להכניס משתנים מסוג אחר ללא המרה

קיימים 2 סוגי המרות

Implicit casting  - המרה מרומזת

מתבצע בהמרת ממשתנה מסוג קטן לגדול – שבטוח לא נאבד מידע

int num = 2147483647;      
long bigNum = num;

או מאובייקט של מחלקה יורשת למחלקת אב כיוון שכל בן מכיל גם את התכונות של האב לא נאבד מידע

Explicit casting – המרה מפורשת - המשתמש חייב להגדיר את מה שהוא רוצה להמיר ע"מ למנוע טעיות ואיבוד מידע

המרה מפורשת (explicit casting)

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

דוג'

  StakeBag stake = (StakeBag)chicken1;

   StakeBag stake = chicken1;

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

ניתן ליצור אינדקס לאובייקטים

public string this [int i]

        {

            get

            {

                string retren = string.Empty;

                if (i == 0) retren = this.Aba.Name;

                if (i == 1) retren = this.Ama.Name;

                if (i > 1) retren = this.Children[i-2].Name;

                return retren + " " +this.LastName;

            }

        }

הערות

כתיבת הערה באמצעות סימון השורה // או בלוק תיעוד בין  /* - */ 

מומלץ לכתוב את ההערה עם 3/   מה שנותן את האפשרות להוציא לקובץ XML  את כל ההערות

את הקובץ ניתן גם לטעון באתר מתאים שייתן ספר הערות מסודר

להערות ישנם תגים מובנים

<summary> - לכתיבת הערה כללית 

<remarks> - להסבר על מחלקה \ מתודה

Returns>> - הסבר מה מחזירה הפונקציה

במאפייני הפרויקט properties > build  -  נגדיר שהמערכת תשמור XML ובתיקיית הפרויקט יתווסף הקובץ

String Builder

ביצירת משתנה מסוג string הוא נקבע ללא אפשרות שינוי – כשאנחנו מוסיפים טקסט (x=y) המערכת יוצרת משתנה חדש ומכניסה אילו את הערך ואילו הישן נשאר יתום וכך מצטבר זבל – אומנם למערכת יש פונקציה שדואגת לנקות מידי פעם אך זה לא מומלץ

במידה ויש לנו בקוד חיבור של string נשתמש בstring bolder  - פונקציה שיודעת לחבר

דוג' לקוד שעשינו בשיעור שמחבר מספר מחרוזות ומשתנים למחרוזת טקסט ארוכה + יוצרת קובץ וכותבת את המחרוזת בקובץ

StringBuilder html = new StringBuilder();

 html.Append(@"<html><head><meta charset='utf-8'/><title>Invoicing</title>");

 html.AppendFormat($@"</head><body style='background-color:darkgray; color:red'><h1 margin: auto>{allText}</h1>");

 html.AppendFormat($@"<div margin: auto> <img src={product[choice - 1] + ".jpg"} with = '200px' height='350px'></div></body></html>");

File.WriteAllText(@"D:\c#\progect\Shop\Invoicing.html", html.ToString());          System.Diagnostics.Process.Start(@"D:\c#\progect\Shop\Invoicing.html");

שים לב !! -  StringBuilder הוא מערך – ולכן בכתיבת כל המחרוזת לתוך הקובץ חייבים להשתמש בפקודה ToString

Params Keyword

אפשרות קבלת מספר משתנים לא ידוע לתוך פונקציה (מאותו הסוג בלבד!)  המערכת תיצור אוטומטית מערך ותכניס את המשתנים שנשלחו לתוך המערך ובהמשך בפונקציה ניתן לגשת לכל אחת משתנים

static void Main(string[] args)

        {

            string a = "hi";

            string b = "by";

            MyPrint(a, b);

}

        static void MyPrint(params string[] s)

        {

            foreach (string x in s) System.Console.WriteLine(x);

        }

או בגישה ישירה

Console.WriteLine(s[0]);

Optional parameter

השמה דיפולטיבית למשתנה – משתנה שהוא אופציונאלי בפונקציה. במידה ולא נשלח ערך לפונקציה תשתמש בערך ברירת מחדל

בדוג' – בקריאה לפונקציה שלחנו רק 2 ערכים ואילו K  הוגדר  לבד

      static void Main()

            {

               MySum(1, 2);

            }

            static void MySum(int i, int j = 0, int k = 5)

            {

                System.Console.WriteLine(i + j + k);

            }

        }

Simple types – value -  

סוג המשתנה ששמרנו בזיכרון – כשאני מגדיר Int x המשתנה נשמר בזיכרון stack  

כיוצרים אובייקט התוכנה יוצרת הפניה לזיכרון HEAD  כל נתוני האובייקט נמצאים שם וב stack   יש referens   של הכתובת

car c = הקצאת מקום בזיכרון stack   לצורך ההפניה – כרגע ריק

car new = יצירת מקום בזיכרון HEAD  עבור כל הנתונים של האובייקט + השמה (כתובת) ב stack   

ולכן כשנעשה

car c1 = new car

car c2 = c1

לא צריך לעשות new כי C1  זה הפניה ועכשיו בc2 גם יש הפניה לאותו המקום

 Pass by Value

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

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

Pass by Reference

לעומת זאת כשמעבירים אובייקט לפונקציה הפעולה היא העברה היא של הפניה  referens  (שהרי זה מה שמאוחסן בתוך המשתנה) ולכן הפונקציה פונה ישירות למשתנים ומשנה אותם

בהעברת משתנה במידה ורוצים לשנות את המשתנה המקורי נשתמש בפקודה ref  והגישה היא למשתנה המקורי (רק שמשתנה לו השם מX לi) 

void Set(ref int i)

m.Set(ref x);

Out Keyword

out – העברת ערך ריק לפונקציה – יצרנו אובייקט ללא אתחול והעברנו אותו לפונקציה

static void Main(string[] args)

        {

            student s1;

            print(out s1);

            Console.WriteLine(s1.name);

        }

        static void print(out student s)

        {

            s = new student();

            s.name = "rami";

        }