The Document Object Model – חלק 1 – מבוא ל-DOM: HTML &jQuery.

Document Object Model (בראשי תיבותDOM) היא תבנית סטנדרטית של אובייקט תכנותי המייצגת מסמכי HTML ו־XML בדרך המאפשרת ליישומים ותסריטים (script) לגשת ולעדכן באופן דינמי את התכולה, המבנה והסגנון של מסמכים אלה, תוך כדי ולאחר שנטענו בדפדפן. DOM בלתי תלויה בפלטפורמה או בשפת תכנות. (מתוך וויקפדיה)

מסמך HTML בנוי ע"פ Document Object Model או DOM. אינטרקציה עם ה DOM מאפשרת ל jQuery לגשת ולשנות את ה HTML.

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

HTML Tree

 

באופן זהה ניתן גם לחשוב על ה DOM. גם ב DOM (בדומה ל HTML) לאלמנטים יכולים להיות "ילדים", "הורים" ו"אחים".

תרגיל:

קובץ HTML:

הקובץ קורא לקובץ CSS

<link rel="stylesheet" type="text/css" href="stylesheet.css"/>

 

 

ול Script של Javascript.

<script type="text/javascript" src="script.js"></script>

לאחר מכן מסמך ה HTML מגדיר Div ריק (ללא תוכן טקסטואלי).

<div></div>

 

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div></div>
</body>
</html>

קובץ ה CSS:

קובץ ה CSS מגדיר בתוך ה DIV ריבוע בגודל של 100*100 פיקסלים בצבע מסויים (אפשר לראות מה הקוד של כל צבע ולאתר צבע ע"פ קוד בלינק הנ"ל – http://html-color-codes.info/)

שורת הקוד – border-radius:5px; – מייצרת פינות עגולות למרובע.

div {
height:100px;
width:100px;
background-color:#FF0000;
border-radius:5px;
}

jQuery

השורה הראשונה בסקריפט אומרת לסקריפט לרוץ רק כאשר ה HTML נקרא במלואו (מכאן גם – Document ready).

$(document).ready

לאחר מכן מתחילה קריאה לפונקציה שפועלת על ה Div (שיוצר ריק מטקסט ב HTML  והוגדר כריבוע בקובץ ה CSS). הפונקציה גורמת לריבוע להעלם בקצב מסויים (1000).

$(document).ready(function() {
$("div").fadeOut(1000);
});

——————————————————————————————————————————–

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

מכיוון שזה תהליך לימודי יש לקחת את האמור כאן בערבון מוגבל. תגובות, הערות והארות יתקבלו בברכה כל עוד הן בונות ותורמות לתהליך הלימודי.

—————————————————————————————————————————–