מתכונת 3 במדעי המחשב - תכנות באינטרנט 899372

מה נדרש: להבין מה עושה הדפדפן עם נתוני טופס שהשיטה שלו (method) היא get.

רעיון: בלחיצה על כפתור submit הדפדפן שולח בקשה לדף שכתוב ב-action (כאן search.aspx). השיטה קובעת איפה יהיו הנתונים:

פתרון: התשובה הנכונה היא ג. אם המשתמש הקליד חיפה, הדפדפן יבקש את הכתובת search.aspx?city=חיפה (האותיות העבריות מקודדות בכתובת), ובקוד השרת של search.aspx:

string city = Request.QueryString["city"];   // "חיפה"

בדיקה – למה האחרות שגויות:

דוגמה: מהטופס נבנית הכתובת search.aspx?city=%D7%97%D7%99%D7%A4%D7%94, ופענוח החלק שאחרי ? (מה ש-Request.QueryString עושה) מחזיר בדיוק "חיפה".

טעות נפוצה: להחליף בין get ל-post, או לקרוא נתוני get בעזרת Request.Form (מתקבל null).

מה נדרש – לבחור את ההגדרה הנכונה של DataSet.

רעיון – לזכור את שלבי העבודה עם בסיס הנתונים בצד השרת: פותחים חיבור (SqlConnection), מגדירים פקודה (SqlCommand), ממלאים DataSet בעזרת SqlDataAdapter (Fill), סוגרים את החיבור – ורק אז עוברים על הנתונים.

פתרון

DataSet הוא אובייקט ב-C# (בצד השרת) שמחזיק בזיכרון עותק של הנתונים שנשלפו: טבלה אחת או יותר (ds.Tables[0]), ובכל טבלה שורות (ds.Tables[0].Rows[i]) ועמודות (Rows[i]["title"]). מכיוון שזה עותק בזיכרון, אפשר לסגור את החיבור לבסיס הנתונים ועדיין לקרוא ממנו.

התשובה: (2).

בדיקה – דוגמה ב-C#: ממלאים DataSet בטבלה Books עם שתי שורות, סוגרים את החיבור, ואחר כך עוברים בלולאה על ds.Tables[0].Rows ומקבלים את שתי השורות (Alef:120, Bet:340) – הנתונים נשארים זמינים אחרי סגירת החיבור.

מה נדרש – לתאר את הטבלה שהדפדפן מציג (לא את קוד ה-HTML).

רעיון – בכל סיבוב של הלולאה (i מ־1 עד 5) נוספת שורה (<tr>) עם שני תאים: בתא הראשון הערך של i, ובתא השני – לפי הזוגיות של הסכום המצטבר sum = 1 + 2 + ... + i. אם sum זוגי נכתב sum, ואחרת נכתבת המילה Odd בתוך <b>, כלומר בכתב מודגש. לכן מתקבלת טבלה עם 5 שורות ו־2 עמודות.

פתרון – מעקב:

המחרוזת שנשלחת לדפדפן:

<table border = '1'><tr><td>1</td><td><b>Odd</b></td></tr><tr><td>2</td><td><b>Odd</b></td></tr><tr><td>3</td><td>6</td></tr><tr><td>4</td><td>10</td></tr><tr><td>5</td><td><b>Odd</b></td></tr></table>

מה יוצג בדפדפן – טבלה עם מסגרת, חמש שורות ושתי עמודות (Odd מודגש):

בדיקה – עבור k = 5 מתקבלת בדיוק המחרוזת שלמעלה – חמישה <tr>, בכל אחד שני תאים.

טעות נפוצה: לבדוק את הזוגיות של i במקום של sum (למשל לכתוב Odd בשורה 3 ו־2 בשורה 2), או לשכוח ש-sum מצטבר ואינו מתאפס בכל סיבוב.

מה נדרש: לבנות בראש את הטבלה מתוך הקוד ולבחור את התמונה המתאימה.

רעיון: עוברים שורה-שורה (<tr>) וסופרים את העמודות שכל תא תופס (colspan) ואת השורות (rowspan). כאן dir="ltr", ולכן התא הראשון בכל שורה נמצא בצד שמאל.

פתרון – בניית הטבלה (3 עמודות, משמאל לימין):

שימו לב: בשורה 3 כתובים בקוד רק שני תאים (Mon, History), כי העמודה הימנית כבר תפוסה על ידי Lab משורה 2. בשורה 4 Lab כבר הסתיים, ולכן Trip תופס את העמודה האמצעית והימנית. זו בדיוק תמונה b.

למה לא האחרות:

תשובה: b.

בדיקה: רשת התאים לפי rowspan/colspan: 4 שורות ו-3 עמודות, Lab תופס את שורות 2–3 בעמודה הימנית, ו-Trip תופס את שתי העמודות האחרונות בשורה 4. את ארבע התמונות יצרנו בדפדפן, ותמונה b נוצרה מהקוד שבשאלה עצמו.

טעות נפוצה: לחשוב שבשורה 3 חסר תא ולכן יהיה בה חור (תמונה a) – התא החסר "מכוסה" על ידי ה-rowspan של Lab.

מה נדרש: להפוך את המילה Trip לקישור לדף אחר באותו אתר.

רעיון: קישור נוצר בתגית <a href="...">. כשהדף נמצא באותה תיקייה, מספיק לכתוב ב-href את שם הקובץ בלבד (כתובת יחסית) – אין צורך בכתובת מלאה עם https://. עוטפים את המילה Trip בתגית <a> בתוך התא הקיים, ומשאירים לתא את colspan=2 ואת היישור.

פתרון – מחליפים את השורה

<td colspan=2 align="center">Trip</td>

בשורה:

<td colspan=2 align="center"><a href="trip.html">Trip</a></td>

הדף המלא אחרי השינוי – בלשונית HTML.

בדיקה: מבנה הטבלה לא משתנה (עדיין כמו בתמונה b – Trip תופס שתי עמודות וממורכז), והמילה Trip היא עכשיו קישור ל-trip.html.

טעות נפוצה: למחוק בטעות את colspan=2 כשמשכתבים את התא – אז Trip יתפוס עמודה אחת בלבד וייווצר חור בטבלה.

מה נדרש: קוד צד שרת (C#) שמעביר את התלמיד לאחד משלושה דפים לפי ערכי שלושה משתני Session.

רעיון:

פתרון (בקובץ ה-code behind של הדף):

protected void Page_Load(object sender, EventArgs e)
{
    int score = (int)Session["score"];
    bool finished = (bool)Session["finished_all"];
    int signs = (int)Session["sign_mistakes"];

    if (score >= 90 && finished && signs == 0)
        Response.Redirect("readyForTest.aspx");
    else if (score >= 70 || (finished && signs <= 2))
        Response.Redirect("morePractice.aspx");
    else
        Response.Redirect("lessons.aspx");
}

בדיקה: בכל הצירופים של הערכים הקוד מפנה לדף הנכון, לפי הכללים שבשאלה. כמה דוגמאות:

טעות נפוצה:

מה נדרש – פונקציית JavaScript שמחזירה את החלק שבין התו @ לבין הנקודה הראשונה שאחריו.

רעיון – מפרקים בשני שלבים:

אסור לפרק את כל הכתובת לפי נקודה, כי גם בשם המשתמש יכולות להיות נקודות.

פתרון

function getProvider(email) {
    var host = email.split("@")[1];     // the part after @, e.g. "walla.co.il"
    var parts = host.split(".");        // ["walla", "co", "il"]
    return parts[0];
}

פתרון חלופי עם indexOf ו־substring – מוצאים את מקום ה־@, ואז את הנקודה הראשונה שאחריו (החיפוש מתחיל ממקום at + 1):

function getProvider(email) {
    var at = email.indexOf("@");            // position of @
    var dot = email.indexOf(".", at + 1);   // first dot AFTER the @
    return email.substring(at + 1, dot);
}

בדיקה – שתי הגרסאות:

טעות נפוצה: לכתוב email.split(".")[0] או לחפש את הנקודה הראשונה במחרוזת כולה (email.indexOf(".")). עבור yossi.cohen@gmail.com זה נותן yossi, כי הנקודה הראשונה נמצאת בשם המשתמש. לכן חייבים להתחיל מהתו @.

מה נדרש – למצוא למה המונה אינו עובד כנדרש, ולתקן.

רעיון – לבדוק שני דברים: (1) מה קורה לערך בכל לחיצה – מה הטיפוס שלו ואיזו פעולה מתבצעת עליו; (2) איפה הערך נשמר – Session הוא נפרד לכל גולש, ואילו Application משותף לכל הגולשים באתר.

פתרון

התיקון – קטע הסקריפט המתוקן (Lock/UnLock מונעים ששני גולשים ישנו את המונה בדיוק באותו זמן):

public void Page_Load(object sender, EventArgs e)
{
    Application.Lock();
    if (Application["likes"] == null)      // only the first visitor since the site started
    {
        Application["likes"] = 0;
    }
    Application.UnLock();
}
void Like_Click(object sender, EventArgs e)
{
    Application.Lock();
    Application["likes"] = (int)Application["likes"] + 1;
    Application.UnLock();
}

ושורת התצוגה בדף:

<div runat="server" id="div1">
    מספר הלייקים: <% =Application["likes"] %>
</div>

(אפשר גם לאתחל את Application["likes"] פעם אחת ב-Application_Start שבקובץ Global.asax.)

בדיקה – הדמינו שני גולשים (שני Session נפרדים ו-Application משותף), כשבכל בקשה נוצר אובייקט דף חדש:

טעות נפוצה: לתקן רק את ההמרה למספר – אז כל גולש סופר לעצמו; או לעבור ל-Application אבל להשאיר את האיפוס ב-!IsPostBack – אז כל כניסה של גולש חדש מאפסת את המונה.

מה נדרש – להשלים את סוף הפעולה: לפי השורות שהשאילתה החזירה ל-ds, להפנות לאחד משלושת העמודים.

רעיון

פתרון – הקוד להשלמה (במקום ההערה "השלימו כאן"):

    bool found = false;
    for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
    {
        if (ds.Tables[0].Rows[i]["doctor"].ToString() == Request.Form["doctor"])
            found = true;
    }

    if (ds.Tables[0].Rows.Count == 0)
        Response.Redirect("noAppointments.aspx");
    else if (!found)
        Response.Redirect("wrongDoctor.aspx");
    else
        Response.Redirect("checkIn.aspx");

(כשאין שורות הלולאה לא מתבצעת כלל, found נשאר false, והבדיקה הראשונה מפנה ל-noAppointments.aspx.)

בדיקה – ההשלמה עם DataSet שמולא בתוצאת השאילתה, על טבלת הדוגמה בתוספת תור שלישי למטופל 311 אצל Levin:

השאילתה: עבור '311' מוחזרות שתי שורות (Katz, Peretz), עבור '522' – שורה אחת, ועבור '700' – אין שורות.

טעות נפוצה: לבדוק רק את Rows[0] – אז מטופל 311 שהגיע ל-Peretz יופנה בטעות ל-wrongDoctor.aspx. טעות נוספת: לבצע Response.Redirect("wrongDoctor.aspx") בתוך הלולאה ברגע ששורה אחת לא מתאימה, לפני שבדקו את כל השורות.

מה נדרש: להשלים חמישה ביטויים בפונקציה ששולפת מהמסד את הסרטים שאורכם יותר מ-120 דקות ובונה מהם טבלת HTML.

רעיון – מעבר על הפונקציה לפי הסדר:

html += "<tr><td>" + row["title"] + "</td><td>" + row["genre"] + "</td><td>" + row["minutes"] + "</td><td>" + row["year"] + "</td></tr>";

(אפשר גם לפי מספרי עמודות: row[0] … row[3].)

פתרון – תשובה במחברת:

הפונקציה המלאה – בלשונית C#.

בדיקה:

טעות נפוצה: בסעיף (2) לכתוב minutes >= 120 – אז גם הלהקה יוצג. בסעיף (3) לכתוב connection – אין משתנה כזה בפונקציה. בסעיף (5) לשכוח את <tr>/</tr> – אז כל התאים יופיעו באותה שורה.