אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » נגישות אינטרנט » JavaScript לא פולשני (Unobtrusive JavaScript)

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

רן בר-זיק דצמבר 9, 2008 6:45 pm אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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>

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




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

  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?

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
אינטרנט אתרים מידע למפתחים סקריפטים
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד