דף הבית › פיתוח אינטרנט › נגישות אינטרנט › JavaScript לא פולשני (Unobtrusive JavaScript)

JavaScript לא פולשני (Unobtrusive JavaScript)

דצמבר 9, 2008 תגיות : בקטגוריה: נגישות אינטרנט
המאמר נכתב על ידי רן בר-זיק, מתכנת מנוסה וכותב כל המאמרים באתר אינטרנט ישראל.

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

JavaScript פולשני – הסבר

רוב מי שכותב JavaScript ובכלל צד לקוח הם בדרך כלל webmasters שחלקם אינם מבינים בתיכנות (במקרה הטוב) וחלקם רחמנא ליצלן משתמש בכל מיני תוכנות זוועה כמו Front page ו-Dream weaver
להפקת ה-JavaScript (שזה יותר גרוע מלא להבין דבר). כיוון שכך, חלק גדול מקוד ה-JavaScript שאנו נתקלים בו הוא מה שנקרא ‘פולשני’.

מה הכוונה ב’פולשני’? תחשבו למשל על דף אינטרנט פשוט. דף שיש בו שדה שבו אני מקליד את שמי והוא מחזיר לי אותו ב-alert פשוט. עשיתי כאן דוגמא פשוטה ככל האפשר (בלי אפילו תאימות ונגישות). אני חושב שהיא צריכה להיות די מובנת.

<html>
<head>
<script type="text/javascript">

function showMyName(variance)
{
	alert(document.getElementById(variance).value);
}
</script>
</head>
<body>

<form>
<input type="text" id="user_name" />
<input type="button" value="Click here to get your name" onclick="showMyName('user_name');" />
</form>

</body>
</html>

בפועל זה נראה ככה:


<script type="text/javascript">
function showMyName(variance)
{
alert(document.getElementById(variance).value);
}
</script>

<p><form>
<input type="text" id="user_name" />
<input type="button" value="Click here to get your name" onclick="showMyName('user_name');" />
</form></p>

עד השנים האחרונות, זה נחשב לקוד מקובל. אבל היו איתו כמה בעיות עיקריות:

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

JavaScript לא פולשני

בשנים האחרונות הולכת ומתפשטת אופנה משובחת בקרב מפתחי אינטרנט להשתמש פחות ב-JavaScript מהסוג שלעיל. כלומר עם פקודות onclick בתוך הכפתורים ועם id בכל פינה ותחת כל עץ רענן. הרעיון ב-JavaScript לא פולשני הוא לא להשתמש ב onclick\onfocus\onload ודומיהם, לא להשתמש ב-id אלא להשתמש בהיררכיה הטבעית של הדף היכן שניתן על מנת לפנות לאובייקטים המתאימים.

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

אם ניקח את הדוגמא הקטנה שלנו, אזי אפשר לראות כמה זה פשוט: 



<html>
<head>
<script type="text/javascript">
function init()
{
document.getElementsByTagName("input")[1].onclick = function(){showMyName()};
}
function showMyName()
{
	var text = document.getElementsByTagName("input")[0].value;
	alert(text);
}
</script>
</head>
<body onload="init()">
<form>
	<input type="text" />
	<input type="button" value="Click here to get your name";" />
</form>
</body>
</html>

שימו לב לHTML הנקי! עכשיו אני יכול לעשות copy&paste של הסקריפט לכל טופס זהה, אפילו אם ימוקם בדף עמוס, והוא יעבוד.

דוגמא נוספת

אני גם יכול כמובן לקבוע את השדה לא רק לפי מיקום בדף אלא לפי התכונות שלו כגון title או אפילו מיקום אלמנט שקרוב אליו. וכמובן דוגמא לא תזיק. בדוגמא הבאה, הסקריפט הבא מצמיד אירוע לכפתור, כאשר האירוע מופעל הסקריפט בודק בכל השדות שה title שלהם הוא user name אם הערך שהוקלד בהם הוא Moshe. שוב, שימו לב ל-HTML: 


<html>
<head>
<script type="text/javascript">
// פונקציה שרצה בהתחלה ומצמידה אירוע לכפתור
function init()
{
document.getElementsByTagName("input")[1].onclick = function(){ifIsMoshe()};
}
// פונקציה שעוברת על כל השדות ושולחת את ערכם לפונקצית וולדיציה
function ifIsMoshe()
{
	all_the_inputs = document.getElementsByTagName("input");
	for(i = 0; i < all_the_inputs.length; i++)
	{
		if(all_the_inputs[i].getAttribute("title") == 'user name')
		{
			var string = all_the_inputs[i].value;
			validateUser(string, i);
			break;
		}
	}
}
// פונקצית וולדציה שבודקת את המחרוזת 
function validateUser(string, i)
{
	if(string!="Moshe")
	writeError(i);
	else
	alert("Welcome Moshe");
}
// כתיבת השגיאה
function writeError(i)
{
	document.getElementsByTagName("input")[i].value = "Sorry, Only Moshe allowed"; 
}
</script>
</script></head>
<body onload="init()">
<form>
	<input type="text" title="user name" />
	<input type="button" value="Submit";" />
</form>
</body>
</html>

אם אעשה copy&paste של הסקריפט לדף אחר, ואפילו יהיה מעוצב באופן שונה, עם עשרות פסקאות, תפריטים ואף טפסים נוספים הוא יעבוד. כל עוד יהיה title של user name בשדה שאותו אני רוצה לבדוק. גם אם ארצה לקחת את הסקריפט ולשלוח את ה string לצד השרת (ל-PHP למשל) אני אוכל לעשות את ההמרה בקלות.

הדוגמאות שנתתי כשמן כן הן, דוגמאות בלבד. יש כאן כמה סוגיות שהתעלמתי מהן בבוטות – כמו למשל סוגיית ה-onload. אך אי אפשר לכסות את הכל במאמר אחד. המסר הוא חשוב – JavaScript בלי פולשני הוא העתיד ויכול לחסוך זמן רב בפיתוח כיוון שתוכלו להשתמש בסקריפטים שהכנתם בכל מקום אחר ללא מאמץ כלל או לתקן סקריפטים/עמודים בנפרד בלי לדאוג להשלכות, ל-id, class או לכל מני events.

רוצים לכתוב JavaScript לא פולשני? מדוע שלא תתקדמו ל-jQuery?

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (6 הצבעות, ממוצע: 4.50 מתוך 5)


יאללה, שתפו :)

אל תשארו מאחור! יש עוד מה ללמוד!