שיעורי Java Script

לאחר שהבנו כי יש לכל אתר אינטרנט את שפת הhtml והשלד שלו והמשכנו להבין כי יש עיצובים שונים לכל דף בצורת הcss, כעת נוכל גם ליצור ממשקים ולכתוב סקריפטים אשר יהפכו את האתר לדינאמי ובעל שינויים תוך כדי תנועה. למשל, המשתמש יוכל להזין את שם המשתמש שלו והדפדפן יזכור...או למשל נוכל לבנות מערכת ציונים ולהציג ממוצע... אלו הם פעולות לוגיות אשר לא ניתן לבצע על ידי html או css, אלא דרך java script.

גם כאן ניתן לכתוב בnotepad++ תחת "שפה" ולבחור בjava script או ליצור תגית script בתור הhead שלנו ובה לחולל את כלל הסקריפטים. מומלץ לקרוא את פרק הלוגיקה לפני התחלת הכתיבה בjava script.


במדריך זה אסביר ואפרט על יסודות השפה, כיצד לכתוב בה וכיצד ניתן לבנות ממשקים וליצור פעולות שונות באמצעות הjava script. רצוי מאוד גם לעשות חזרה על שיעור הform המפורט משלב הhtml. צפו בסרטון המצורף והתחילו להיכנס אל תוך עולם הjava script...כתיבת הקודים של אתרי האינטרנט.





נתחיל עם הסקריפט הפשוט ביותר. בתוך תגית הסקריפט כיתבו את הקוד הבא: alert("hello!");

חשוב לציין שגם כאן אחרי כל שורת קוד, בצורה לcss, נצטרך להפריד באמצעות ;
הרובוט שקורא את האתר שלנו יכול להפריד בין קטעים שונים על ידי הנקודה פסיק, שהרי הוא קורא את הכל בצורה של שורה אחר שורה ולא כמונו שמסדרים את האתר לפי רווחים וכדומה...

למעשה, פקודת הalert מציגה לנו פלט כלשהו. כאשר כתבתם hello בתוך גרשיים הדבר גרם לalert להציג את הטקסט hello.
אם הייתם שמים רק hello ללא גרשיים, הוא היה בטוח שמדובר בשם של משתנה.

בjs ניתן גם ליצור משתנים כמובן. פשוט לפני כל שם משתנה נוסיף את המילה var ונבצע השמה. שימו לב לדוגמא הבא:
var num = 5;
alert(num*num);


בקוד הנ"ל גם יצרו משתנה חדש בשם num וגם הצגנו למשתמש את המספר כפול עצמו.
ניתן גם לפרק את num*num למשתנה נוסף ובalert להציג את המשתנה השני. אתם יכולים לשחק עם זה איך וכמה שתרצו כמובן.

הבדל בין + לשאר האופרטורים.
הרובוט יודע להבדיל מתי עליו לבצע פעולה מתמטית בהקשר של כפל, חילוק, חיסור, מודולו... אבל כאשר מדובר בסימן + הוא במצב ברירת המחדל שלו תמיד ילך על חיבור המספרים לידי מחרוזת. שימו לב לכך.
לכן, כאשר אנו עושים alert למדיי כדוגמא הבאה, תמיד נשים את פעולת החיבור בתוך סוגריים משלהם.

alert("the result is:" + (num+num));
כך בjs אנו מבדילים בין חיבור של הוספה לבין חיבור מתמטי.
נסו כעת בעצמיכם, צרו 3 מספרים והציגו בסוף את השורה הבאה בalert: "הממוצע של 3 המספרים הוא: X ".



ניתן למשוך טקסטים ולדבר עם אלמנטים מתוך הhtml דרך סקריפטים.
עושים זאת באמצעות משתנה אשר קורא לid מסוים בדרך הבאה:
ראשית, מדברים עם הdocument (המסמך עצמו) ואז מאתרים את הid. לאחר מכן נבקש את הhtml שלו -
var txt = document.getElementById("tal").innerHTML;

כפי שראיתם הכל נעשה על ידי נקודה בין חלק לחלק (בתכנות זה נקרא בין node לnode).
נסו בעצמיכם - צרו תגית p עם id=tal ובפנים טקסט כלשהו. נסו להציג את הטקסט של הp כעת בתוך alert.

בנוסף למשיכה, ניתן גם לשנות. נבצע זאת על ידי השמה.
document.getElementById("tal").innerHTML = "This is A New Text";

אותה משיכה כמו טקסטים של div, ניתן למשוך גם את הטקסט שהמשתמש הזין בתוך הinput!
הפעם במקום innerHTML נצטרך להחליף לvalue (זאת בהקשר של inputs).
var txt = document.getElementById("tal").value;


לסיום השיעור - צרו סקריפט אשר מציג בalert את מה שכתוב בתוך הp ובתוך הinput שיצרתם.



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

כל שעלינו לעשות זה לבצע את השלבים הבאים:
1. לתת לכפתור בתוך תגית הפתיחה אפשרות של לחיצה ושליחה לפונקציה מוגדרת מראש. לא לשכוח סוגריים עגולים, וזאת מפני שאפשר להזין ערכים בתוך הסוגריים העגולים ולשלוח פרמטרים לפונקציה (ראה ערך שיעורי לוגיקה - פונקציות).
<button onclick="tal()">Click Me!<⁄button>
2. בתוך תגית הסקריפט שלנו הפעם נעטוף את הalert שיצרנו עד כה בתוך סוגריים מסולסלים של פונקציה בשם שקבענו בסעיף 1 (tal) בדרך הבאה:

    <script>
    function tal(){
    alert("test");
    }
    <⁄script>

עתה, אחרי שהבנו כי אפשר לקרוא לקטעי קוד מסוימים בתזמוני לחיצות על ידי המשתמש - פה אתם נכנסים לתמונה.
בהישען על השיעור הקודם, צרו משתנה אשר קולט את הvalue של Input המשתמש.
לאחר מכן, הציגו זאת בתוך alert.

עובד לכם? נפלא! כעת תוכלו למשוך את קלטי המשתמש ולבצע עליהם מניפולציות. למשל, קלטו מהמשתמש מספר והציגו את המספר הנבחר כפול 10.



בדומה לbootstrap בשלב הcss, גם כאן קבוצת מתכנתים כתבו עבורינו שיפורים ופיצ'רים לjs.
למעשה, אנו יכולים להתבסס על פונקציות שהם כתבו עבורינו ולתכנת יחד עם זה.

במקומות עבודה רבים, לא מתכנתים על js טהור כפי שהראתי לכם עד כה, אלא משתמשים בjQuery או בספריות הנשענות על הjs.

ההבדלים בין js לjQuery מבחינת קלט משתמש:
במקום הקריאה הארוכה ממקודם
document.getElementById("tal")
נוכל לרשום בהתבסס על הjQuery:
$("#tal") בלבד.


כל שעלינו לעשות זה להוסיף את הסקריפט (ניתן גם להוריד אותו למחשב) שכתבו עבורינו עם שלל הפונקציות והקריאות השונות -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
ובתוך תגית הסקריפט שלנו, נצטרך לעטוף את שלל קטעי הקוד השונים על ידי הקוד הבא:
    <script>
    $(document).ready(function(){
    $("#tal").click(function(){

    });
    });
    <⁄script>


הקוד כתוב כך שבלחיצה על האלמנט עם הid של tal , יבצע כל הקוד הכתוב הפונקציה עצמה.

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



בהמשך לשיעור הקודם, כעת נגלוש לתוך עולם הjQuery.
אם תיכנסו לאתר של הjQuery, בו יש את כל קטעי הקוד והפונקציות שכתבו עבורינו, נוכל לראות שם שיש עוד איזור למעלה בשם ui. כלומר - חווית משתמש. כל מיני קטעי קוד ופונקציות הנוגעות רק לויזואליות ולנראות עבור המשתמשים.

בשביל החלק הזה , נצטרך להוסיף עוד קריאה לסקריפט חיצוני של הjQuery. כאשר גם אותו ניתן לשמור אם תרצו בכך.
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


מה נוכל לבצע באמצעות הjQuery ui?
למשל, לתת למשתמש שלנו אפשרות גרירה של div מסוים.
כל שתצטרכו לעשות הוא להוסיף לdiv שלכם את התכונה הבאה: $("div").draggable();

בנוסף לכך, ניתן גם לשנות צבע רקע למשל בצורת css דרך הjQuery:
$("div").css("background-color","red");
או בצורה של אנימציה (animate זו פונקציה שמקבלת שני פרמטרים. האחד, בתוך סוגריים מסולסלים, הוא צבע רקע והשני הוא סך זמן שהאנימציה תימשך):
$("div").animate({"background-color":"red"},2000);

לjquery ui שימושים רבים והם כולם באים לשרת אותנו על מנת להעניק חווית משתמש טובה יותר ונוחה יותר עבור המשתמשים שלנו.



בשיעור זה אלמד אתכם איך בעזרת הjQuery ניתן להוסיף Panel נפתח בלחיצה על כפתור.
עיקבו אחר ההוראות להלן ולבסוף תוכלו ליצור גם אתם בעצמיכם Panel נפתח בצד הדף.


1. הוסיפו את קריאות הscript והcss של עולם הjquery mobile:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
<link href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" rel="stylesheet"/>

2. נוסיף div בbody שלנו עם התכונות הבאות:
<div data-role="panel" id="defaultpanel" data-theme="b"></div>
ובתוכו נכיל את כל התפריט הצדדי שלנו, אותו נרצה להציג בצד הדף. מעין תפריט נפתח.

3. נוסיף לחיצה על אלמנט בתוך הדף שלנו:

    <div class="ui-content">
    <a href="#defaultpanel">Open panel</a>
    </div>

כעת, אתם יכולים ליצור תפריט מרחף בלחיצה על כפתור באתר שלכם באמצעות הjQuery.
מומלץ לחלק את הדף הBODY לשני חלקים. חלק אחד זה הdiv של הpanel והחלק שני יהיה הdiv של הui-content וכל האתר עצמו.



🔝