Site Logo
כניסה

טכנולוגיות צד לקוח: HTML, JavaScript and CSS

כדי לבנות אתר, ולו הפשוט ביותר, אנו נדרשים לפחות ל-3 טכנולוגיות שונות, ולרוב משתמשים ב-4 או יותר. אנו מחלקים אותן לשני סוגים: טכנולוגיות צד-שרת וטכנולוגיות צד-לקוח. צד הלקוח הוא הדפדפן והקוד שאנו כותבים בצד הלקוח רץ על מחשב הגולש, עבור כל גולש בנפרד. צד השרת מריץ קוד שמשתמשים בו כלל הגולשים. בפרק זה, כמו במרבית הקורס, אנו נדבר על טכנולוגיות צד הלקוח: HTML, CSS ו JavaScript.

תוכן עניינים

  1. שלום HTML
  2. שלום CSS
  3. שלום JavaScript
  4. מחברים את הכל יחד
  5. כלי עבודה

1. שלום HTML

השפה הראשונה שנתקלתם בה אם כתבתם אתרים בעבר היא כנראה HTML, ראשי תיבות של Hyper Text Markup Language. מדובר בשפה מבוססת תגיות שמטרתה לתאר את תוכן העמוד והמבנה הסמנטי של התוכן. השפה מאפשרת להגדיר חלק בעמוד בתור כותרת ראשית, חלק אחר בתור כותרת משנה, רשימות, טפסים, טבלאות וכן הלאה. הנה דוגמא למסמך HTML5:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>intro</title>
  </head>
  <body>
    <h1>Hello HTML</h1>
    <p>
    HTML is a tag based markup language used for writing web pages
    </p>
  </body>
</html>

הקלידו את הקובץ בעורך הטקסט או סביבת הפיתוח שלכם, שימרו בשם intro.html, ופתחו באמצעות הדפדפן. מה שיוצג על המסך הוא עמוד הכולל כותרת וטקסט. התגיות עצמן לא מופיעות בתצוגה — תפקידן להגדיר מה משמעותו של כל חלק במסמך.
נעבור כעת על הקובץ תגית-תגית: השורה הראשונה מציינת שמדובר בקובץ HTML. גרסאות HTML לפני 5 כללו כותרת ארוכה יחסית שציינה בנוסף לסוג הקובץ גם את גירסא ה-HTML בה הוא נכתב ומידע נוסףא אודות הגירסא. תקן HTML5 הוריד מידע זה.
השינוי השני מגרסאות ישנות יותר הוא התגית meta charset שמציינת את קידוד העמוד, והיא שקולה לתגית:


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

שהיתה נהוגה בעבר.
המשך הקובץ כולל הגדרת תגיות לחלקי המסמך השונים, תגית h1 להגדרת כותרת ותגית p להגדרת פיסקה. בשיעור 5 נסקור תגיות HTML נוספות שאפשר להשתמש בהן במסמכים.

 

2. שלום CSS

טכנולוגיית CSS מגדירה כיצד יראה העמוד שכתבנו. צבעים, גדלים, תמונות רקע ושאר מאפיינים ייחודיים לכל אתר. כשפתחתם את קובץ ה HTML בדפדפן בפרק הקודם קיבלתם עיצוב המבוסס על ערכי ברירת המחדל של התגיות המתאימות (למשל, קיבלתם שתגית h1 הציגה טקסט בגודל 32 פיקסלים ברוב הדפדפנים).
בואו נוסיף קצת צבע לעמוד. כתבו את התוכן הבא בקובץ נפרד בשם style.css ושמרו אותו באותה תיקייה כמו קובץ ה HTML מהפרק הקודם:


body {
  background: #7EA5E2;
}

h1 {
  color: #F00B42;
  font-size: 1.5em;
  font-weight:normal;
  text-transform:uppercase;
}

p {
  color: darkblue;
}

כדי להשתמש בהגדרות העיצוב החדשות, הוסיפו תגית link בתוך תגית head, כך שתגית head תראה כך:


<head>
    <meta charset="utf-8" />
    <title>intro</title>
    <link rel="stylesheet" href="style.css">
</head>

כעת פתחו את קובץ ה HTML בדפדפן ותוכלו לראות את הצבעים והגופנים לפי הגדרות העיצוב שכתבנו.

קובץ הגדרות העיצוב מורכב מ-3 כללים, כאשר כל אחד מהם מורכב בעצמו מחלק שנקרא ״בורר״ וחלק שנקרא ״מאפיינים״. תפקידו של הבורר לקבוע על איזה אלמנטים להחיל את כלל העיצוב, ותפקיד המאפיינים לקבוע את תוכן העיצוב עבור תגיות שמתאימות לבורר. לדוגמא כלל העיצוב:


p {
  color: darkblue;
}

מציין שהטקסט בכל תגית מסוג p יופיע בצבע כחול כהה.
אחד העקרונות שעוזרים לנו לפתח אתר ווב למספר מכשירים הוא הפרדת העיצוב מהתוכן. אוסף כללי ה-CSS לטלפון יהיה שונה מזה של טאבלט או מחשב רגיל. יחד עם זאת אנו נשאף שתוכן המסמך יישאר כמה שיותר דומה בין המכשירים. הפרדה זו בין העיצוב לתוכן עומדת כעקרון מרכזי של HTML5 והביאה לשיפורים רבים ב CSS אחרי שנים ארוכות של קפאון. אנו נלמד יותר לעומק על CSS בחלק השני של הקורס ״חזרה על CSS״ וגם בחלק האחרון ״תמיכה בריבוי מכשירים״.

3. שלום JavaScript

שפת JavaScript החלה דרכה בשנת 1995 כשחברת נטסקייפ רצתה להכניס מאפיינים אינטרקטיביים לעמודי האינטרנט בדפדפן שלה. השפה היתה הדרך הראשונה להריץ קוד בצד הלקוח, ועד היום נשארה הדרך המרכזית למטרה זו (בנוסף אליה תמצאו את Flash, Silverlight ופקדי ActiveX). מבין הטכנולוגיות שהוזכרו, ל JavaScript יש את היתרון שהיא אינה דורשת התקנה של רכיב חיצוני נוסף על הדפדפן, והחיבור שלה עם שאר מאפייני העמוד הינו החלק ביותר.

אנו נלמד JavaScript לעומק בחלקים השלישי והרביעי של הקורס, וכעת ברצוני לתת רק הצצה לבניה של אינטרקטיביות לתוך עמוד. הקלידו את הקוד הבא בקובץ נפרד שנקרא main.js ושמרו אותו באותה תיקייה של קובץ ה HTML:


var p         = document.querySelector('p');
var index     = 0;
var sentences = [
  "Ticking away the moments that make up a dull day",
  "You fritter and waste the hours in an offhand way. ",
  "Kicking around on a piece of ground in your home town ",
  "Waiting for someone or something to show you the way. "
];

function toggleText() {
  p.innerHTML = sentences[index];
  index = (index + 1) % sentences.length;
}

window.addEventListener('click', toggleText);

לאחר מכן עדכנו את קובץ ה HTML והוסיפו אליו חיבור לקובץ החדש שכתבנו באמצעות הוספת התגית script בסוף תגית body. בסיום העדכון קובץ ה HTML שלכם צריך להיראות כך:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>intro</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello HTML</h1>
    <p>
    HTML is a tag based markup language used for writing web pages
    </p>
    <script src="main.js"></script>
  </body>
</html>

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

4. מחברים את הכל יחד

טכנולוגיות צד-לקוח: HTML, CSS ו JavaScript מאפשרות לנו לבנות אתרים ואפליקציות ווב באמצעות הגדרת התוכן, עיצובו והגדרת האינטרקציה עם המשתמש. קובץ HTML הוא העוגן בטכנולוגיות אלו וקבצי ה CSS ו JavaScript נטענים ממנו.
אפליקציית ווב מלאה מורכבת מאחד או יותר קבצי HTML, כל אחד עם הקבצים הנלווים שלו. מעבר בין שני קבצי HTML מאתחל גם את כל משתני ה JavaScript וכללי העיצוב, כך שמבחינת הדפדפן מעבר כזה הוא כמו מעבר לאתר נפרד. אתרים מודרניים מנסים לצמצם במספר מעברי ה HTML כדי לתת למשתמש חוויה חלקה ומהירה יותר. קחו את גוגל לדוגמא: כשאנו עוברים מטופס החיפוש לדף התוצאות, או משנים את מילת החיפוש לחפש משהו אחר, הדפדפן בשום שלב לא עוזב את העמוד אלא כל השינויים מבוצעים כשינויים על פני אותו דף ה-HTML.

5. כלי עבודה

תוכנת Aptana Studio בה נשתמש בקורס לפיתוח יישומי צד-לקוח:
http://www.aptana.com/products/studio3/download

תוסף Web Developer לדפדפן:
http://chrispederick.com/work/web-developer/

תיעוד HTML - רשימת כל התגיות ומשמעותן:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element

תיעוד CSS - רשימת כל המאפיינים ומשמעותם:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

אתר CodePen בו תוכלו לכתוב ולשתף קטעי קוד HTML, CSS, JS אונליין ולראות את התוצאה באופן מיידי:
http://codepen.io/

התקנת סביבת הפיתוח Brackets:
http://brackets.io

תיעוד HTML - רשימת כל התגיות ומשמעותן:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element

תיעוד CSS - רשימת כל המאפיינים ומשמעותם:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

אתר CodePen בו תוכלו לכתוב ולשתף קטעי קוד HTML, CSS, JS אונליין ולראות את התוצאה באופן מיידי:
http://codepen.io/

הקוד שכתבנו בוידאו:

intro.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <link rel='stylesheet' href='style.css' />
    </head>
    <body>
        <h1>Welcome To The Future</h1>
        <h2>HTML, CSS and JavaScript</h2>
        <p>HTML describes the document content and it's using tags (much like XML)</p>
        <button>Click Me</button>
        
        <script src='main.js'></script>
    </body>
</html>

 

style.css

h1 {
    color: red;
    text-align: center;
}

body {
    background: orange;
}

p {
    color: white;
}

 

main.js

var x = 10;
var y = 20;

var z = x + y;

function changeBackgroundColor() {
    document.body.style.backgroundColor = 'white';
}

document.querySelector('button').addEventListener('click', changeBackgroundColor);