המדריך הזה כעיקרון נועד לכול מי שיש לו ידע בתיכנות ולא יצא לו להתעסק יותר מדי עם JS ורוצה לדעת לעשות כול מיני דברים פשוטים,בכו"א בואו נתחיל.
דרגה: מתחילים
שפה: Javascript
נושא: פניה לאלמנטים בHTML דרך Javascript.
אוקי בואו נתחיל קודם כול,במה זה אומר פניה לאלמנטים בJS ואיך זה יכול להועיל לנו.
פניה לאלמנט בJS בד"כ נעשית לפי הid של אותו אלמנט ,ובאמצעות המתודה/פונקציה getElementById של האובייקט document.
מה זה אומר לגבינו בוא ניצור מסמך html בסיסי קודם כול:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1255">
<title>Rotter Tutorial - Elements Access In Javascript</title>
</head> <body> <div id="text">Rotter</div>
<input type="button" value="changeColor" /> </body>
</html>
|
מה שיש לנו פה זה ככה
אלמנט מספר 1 - div שנתנו לו id שקוראים לו text.
אלמנט מספר 2 - input פשוט מסוג כפתור שהשם שלו זה changeColor.
מה שאנחנו נעשה זה לגרום לdiv להתחיל לעשות שטויות קצת 
ככה מה שאנחנו צריכים זה לגשת לאלמנט קודם נכון?
בואו נתחיל לבנות לנו פונקציה
function changeElement(main_element,paramValue)
{
var main_element;
main_element = document.getElementById(main_element);
}
|
אוקיי מה שיש לנו כאן זה פונקציה עם 2 ארגומנטים.
הארגומנט הראשון הוא הid של האובייקט שאנחנו מעוניינים לשנות לו מאפיין מסויים בעיצוב או בתכונות האישיות שלו.
במקרה שלנו אנחנו נעבוד על שינויים בסגנון שלו , אולי במדריך הבא אני ארחיב קצת על setAttribute,removeAttribute... כי זה נושא קצת יותר מורכב.
הארגומנט השני הוא הערך שאנחנו רוצים לשנות בסגנון שלו.
אוקיי בואו נמשיך בתוך הפונקציה הצהרנו על משתנה חדש ,קראנו לו main_element ,אתם עכשיו לא צריכים להתבלבל בן הארגומנט למשתנה בפונקציה זה שונה לגמרי ,כי שימו לב שהוספתי את המילה var לפני שם המשתנה שמצהירה עליו שהוא משתנה חדש לגמרי דנדש אף אחד לא נגע בו.
לאחר מכן אנחנו צריכים להכניס ערך לתוך המשתנה שלנו יותר נכון אנחנו צריכים לבחור את האלמנט שאנחנו נשנה לו את הסגנון בגלל זה השורה הבאה היא השימוש בgetElementById שלתוכו אנחנו מכניסים את הארגומנט הראשון בפונקציה main_element.
עכשיו main_element (המשתנה לא הארגומנט) מכיל את כול התוכונות והפרמטרים של האובייקט שאנחנו נבחר.
נניח שנרצה לשנות לו את הצבע בלחיצת כפתור אנחנו נכתוב את הדבר הבא
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <head>
<meta http-equiv="content-type" content="text/html; charset=windows-1255">
<title>Rotter Tutorial - Elements Access In Javascript</title>
<script type="text/javascript">
function changeElement(main_element,paramValue)
{
var main_element;
main_element = document.getElementById(main_element);
main_element.style.color = paramValue;
}
</script>
</head> <body> <div id="text">Rotter</div>
<input type="button" onclick="changeElement('text','red')" value="changeColor" /> </body>
</html>
|
אתם מוזמנים להעתיק את זה לפנקס רשימות לשמור כhtml ולהכנס לקובץ.
אוקי בואו עכשיו נשנה כמה דברים בפונקציה שלנו,נניח ואנחנו רוצים לשנות כמה ערכים בתוך הסגנון שלנו אבל מתקבל אצלנו רק פרמטר אחד :( בואו נבכה כולנו בגלל זה ,סתם אממ מה שאנחנו צריכים לעשות זה לגרום לפונקציה לקבל מערך של שינויים ופשוט להתאים ערך לפרמטר.
אז הפונקציה שלנו תראה ככה
<script type="text/javascript">
var changesArray = ['30px','bold','verdana','red'];
function changeElement(main_element,arrayParams)
{
var main_element;
main_element = document.getElementById(main_element);
main_element.style.fontSize = arrayParams[0];
main_element.style.fontWeight = arrayParams[1];
main_element.style.fontFamily = arrayParams[2];
main_element.style.color = arrayParams[3];
}
</script>
|
והכפתור שלנו ייראה ככה
<input type="button" onclick="changeElement('text',changesArray)" value="changeColor" />
|
למי שלא הבין (אם יש כאלה),אז פשוט יצרנו מערך (מחוץ לפונקציה תכף תבינו למה ואת האפשרות השניה) שיננו את השם של הפרמטר השני , הוספנו משתנה בתוך הפונקציה שיכיל את הערכים מהמערך שלנו ופשוט הצבנו בפרמטרים של האלמנט.
הסיבה היחידה ששמתי את המערך מחוץ לפונקציה היא למקרה שהערכים הם לא לאלמנט ספציפי זתומרת שאפשר ליצור עוד מיליון מערכים מחוץ לפונקציה ולהכניס לכול אובייקט מערך אחר וככה לא ליצור מיליון פונקציות למיליון אלמנטים.
במקרה שזה אלמנט מסויים מאוד שדורש את הסטיילים האלה אז מבטלים את הפרמטר בפונקציה וכותבים את הדבר הבא:
<script type="text/javascript">
function changeElement(main_element)
{
var main_element;
var arrayParams = ['30px','bold','verdana','red'];
main_element = document.getElementById(main_element);
main_element.style.fontSize = arrayParams[0];
main_element.style.fontWeight = arrayParams[1];
main_element.style.fontFamily = arrayParams[2];
main_element.style.color = arrayParams[3];
}
</script>
|
והכפתור ייראה ככה
<input type="button" onclick="changeElement('text')" value="changeColor" />
|
בקיצור כול הרעיון של המקרה הראשון זה שהוא יישמש כמו מולטי-פונקציה,והוא יוכל לפנות למיליון אלמנטים עם דרישות סגנון שונות.
והרעיון השני זה אם יש לכם למשל 10 כפתורים שאתם רוצים לשנות להם את הסגנון בלחיצת כפתור זה אותו מקרה.
אגב אפשר גם לשנות class לאלמנט שלנו באמצעות className דרך המשתנה שהגדרנו main_element פשוט פונים אליו ומשנים לו class עם סגנון שלם לקלאס עם סגנון אחר.
זה הכול מקווה שנהניתם אם לא בקטנה העברתן לי שעה בלילה
להתראות במדריך הבא.
גירסת הדפסה
סגן המנהל
מפקח
Winner
צל"ש
מומחה
