@מומחה-ברמה אמר בבקשה| חוברת pdf ללימוד js מה-א' ועד ת':
@נגן לא נראלי .. לא עובד קיצער..
זה מה שרשום שם:
JavaScript, או בשמה המקוצר, JS היא שפת סקריפט מבוססת אובייקטים (Object Oriented). כלומר, היא מחולקת לאובייקטים וכל אובייקט הוא מכלול של פונקציות (מתודות) ותכונות (Properties). שפת JavaScript מאפשרת למפתחים להטביע קטעי סקריפט ("תוכניות קטנות") בתוך מסמכי HTML ובכך להפוך את הדפים לדינמיים יותר. JavaScript מיועדת לצד הלקוח, והיא אינה דורשת הידור (compilation) לפני ההרצה. השפה הינה case-sensitive, כלומר, היא רגישה לאותיות גדולות וקטנות. במילים אחרות, ב-JS, משתנה בשם VarName הוא לא אותו משתנה כמו VARNAME או varname .
JavaScript היא מרכיש חשוב ביותר לכל בונה אתרים, לא משנה אם בחר ב- CSHTML כטכנולוגיית צד השרת לאתר שלו, אם בחר ב- PHP, ב- ASP.NET או כל טכנולוגיה אחרת.
מה צריך לדעת?
כדי שתוכל\י להבין את המדריך, חובה להתחיל במדריך HTML ולהכיר HTML ברמה בינונית לפחות.
עורך JavaScript
כדי לבנות אתרים בכל טכנולוגיית צד שרת, לערוך קבצי HTML, לבל בהם קטעי קוד JavaScript ולהציגם בדפדפן עלינו להשתמש בסביבת עבודה. במדריך זה נשתמש בסביבת עבודה בשם WebMatrix, שמכילה את כל מה שצריך בשביל לבנות אתרים.
התקנת WebMatrix – עורך HTML ו- JavaScript
כדי לעבוד עם WebMatrix נדרשת מערכת הפעלה Windows XP או גירסא מתקדמת יותר.
כדי להוריד את WebMatrix בצורה המהירה ביותר ובחינם, לחצו על כפתור התקנה:
מדריך JavaScript
הלחיצה תוביל אתכם לאתר ההורדה של WebMatrix העושה שימוש ב- Web Platform Installer – כלי שהופך את תהליך ההתקנה של מגוון תוכנות לבניית אתרים למשהו מהיר ביותר. אם עדיין לא התקנתם את ה- Web Platform Installer, לחצו כל הכפתור הירוק הגדול:
מדריך JavaScript
ההתקנה של Web Platform Installer תסתיים מהר מאד, ולאחריה יופיע מסך ההתקנה של WebMatrix:
מדריך JavaScript
לחצו על הכפתור Install בתחתית המסך, ורשימת כל הרכיבים שיותקנו תוצג לפניכם. הרשימה מציגה את WebMatrix בתור סביבת העבודה איתה נעבוד במדריך זה וכן מספר רכיבים נוספים.
מדריך JavaScript
אשרו את ההתקנה ע”י לחיצה על הכפתור I Accept ותהליך ההתקנה יתחיל. התהליך עשוי להמשך מספר דקות, אך לא דורש התערבות כלשהי.
מדריך JavaScript
בסיום התקנת WebMatrix, יופיע מסך הסיכום, המפרט את הרכיבים שהותקנו.
מדריך JavaScript
לחצו על הקישור Launch כדי להפעיל את WebMatrix ולהתחיל ללמוד לבנות אתרים.
מדריך JavaScript
בניית אתר פשוט ב- HTML
- במסך הפתיחה של WebMatrix נלחץ על האפשרות Site From Template ליצירת אתר המבוסס על תבנית מוכנה מראש.
מדריך JavaScript
- בחר בתבנית ששמה Empty Site וקרא לה בשם כלשהו.
מדריך JavaScript
- לחץ על OK. WebMatrix יצור את האתר החדש ויפתח אותו לתחילת עבודה.
בחלק העליון של הכלי, ישנו סרגל כלים מסוג Ribbon ומעליו בפינה השמאלית סרגל הגישה המהירה. בחלק השמאלי התחתון של הכלי, תמצאו את רשימת סביבות העבודה, שמשפיע על מה שנראה בחלק המרכזי של הכלי, בו נערוך את קבצי ה- HTML.
בתחתית החלון תמצאו את סרגל ההתראות הצהוב המופיע כאשר ישנן הודעות חשובות שיש לשים לב אליהן במהלך העבודה.
מדריך JavaScript
- מבין סביבות העבודה בכלי בחלקו השמאלי התחתון, בחר בסביבת העבודה לניהול קבצי האתר (Files), בה תוכל לעבוד עם הקבצים והתיקיות. לאחר הבחירה יופיע עץ הקבצים של האתר.
מדריך JavaScript
- הוסף דף חדש לאתר. בסרגל הכלים העליון לחץ על הכפתור New.
מדריך JavaScript
WebMatrix מציג רשימה ובה סוגי הקבצים אותם ניתן להוסיף לאתר – ביניהם קבצי HTML, קבצי PHP, קבצי CSHTML וכמובן קבצי JavaScript.
מדריך JavaScript
-
בחר להוסיף קובץ מסוג HTML ובשדה Name הקלד index.html.
-
לחץ על OK.
WebMatrix ייצור את הקובץ החדש ויפתח אותו בעורך הקוד.
מדריך JavaScript
- ערוך את תוכן קובץ ה- HTML והוסף את ה- HTML המודגש לתוך הדף.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello World Page</title>
</head>
<body>
<h1>Hello World Page</h1>
<p>Hello World!</p>
</body>
</html>
9. בסרגל הגישה המהירה לחץ על Save.
מדריך JavaScript
- הצג את הדף שכתבת. בסרגל הכלים העליון לחץ על הכפתור Launch.
מדריך JavaScript
- WebMatrix מפעיל שרת Web (מסוג IIS Express) שאפשר להשתמש בו כדי לבדוק את הדפים במחשב שלך. הדף היצרת יוצג בדפדפן.
מדריך JavaScript
- הוסף לדך ה- HTML את הקוד הבא, המכיל תגית script עם קוד JavaScript בתוכה, המבצע הדפסת פלט לדף.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello World Page</title>
</head>
<body>
<h1>Hello World Page</h1>
<p>Hello World!</p>
<script type="text/javascript">
document.write("Hello JavaScript!");
</script>
</body>
</html>
13. שמור את השינויים והרץ שוב את הדף. קוד ה- JavaScript יבוצע וידפיס את הפלט Hello JavaScript לדף.
מדריך JavaScript
ברכות! יצרת את אתר האינטרנט הראשון שלך ב- HTML עם JavaScript.
בפרקים הבא במדריך JavaScript נלמד יותר לעומק על שפת JavaScript ונכיר פקודות נוספות בשפה.
 { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}