שני טיפים של JS מתוך Web Tools weekly

בהתחלה של כל גליון של Web Tools weekly יש טיפ קצר בנושא JavaScript. בשני גיליונות היו טיפים מצאו חן בעיניי כל כך שביקשתי רשות מהמחבר לתרגם אותם ולפרסם בבלוג שלי, ולשמחתי הוא הסכים:

Sure go ahead, as long as you link to the https://t.co/BuNhEJp9Wp home page and/or the archives. Thanks!

— Web Tools Weekly (@WebToolsWeekly) April 23, 2017

 

הטיפ הראשון הוא מגליון 175:

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

var getAbsoluteUrl = (function() {
 var a;
 return function(url) {
     if(!a) a = document.createElement('a');
     a.href = url;
     return a.href;
 };
})();

// Usage
 getAbsoluteUrl('/something'); // https ://example.com/something

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

באופן דומה, מישהו פרסם בתגוביות את קטע הקוד הבא:

function isValidEmail(string) {
 string = string || '';
 var lastseg = (string.split('@')[1] || '').split('.')[1] || '',
 input = document.createElement('input');
 input.type = 'email';

 input.required = true;
 input.value = string;
 return !!(string && (input.validity &&
     input.validity.valid) && 
     lastseg.length);
}

console.log(isValidEmail('')); // -> false
console.log(isValidEmail('asda')); // -> false
console.log(isValidEmail('asda@gmail')); // -> false
console.log(isValidEmail('asda@gmail.com')); // -> true

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

אפשר לראות את שתי הדוגמאות לעיל ב-JS Bin הזה.

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

 

בגליון 177 הופיע הטיפ השני שאני רוצה לשתף כאן.

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

אם מאפיין ה-download מופיע ללא ערך, הדפדפן ינסה להוריד את הקובץ המצוין במאפיין ה-href (בהנחה שהוא קיים). אם מְשימים ערך במאפיין ה-download, זה יהיה שַם הקובץ, שאותו יכול המשתמש לשנות כשמופיעה תיבת הדו-שיח של מערכת ההפעלה המנחה להוריד את הקובץ.

אם נשלב עם מאפיין ה-download קצת JavaScript, נוכל לאפשר למשתמש לערוך את תוכן הקובץ להורדה לפני ההורדה (בעצם, לפני שהוא אפילו נוצר). בעיקרון, אנחנו יוצרים את הקובץ באופן דינמי תוך שימוש ב-data URI. הנה ה-HTML שלנו:

<textarea id="txt"></textarea>

<a href="nothing.html" id="link" download="code.html">Download HTML</a>

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

function downloadCode(link, code) {
 link.href = 'data:text/html;charset=utf-8,' + code;
}

let link = document.getElementById('link');

link.addEventListener('click', function (e) {
 downloadCode(this, txt.value);
}, false);

 

JS Bin demo

המַפתח של קטע הקוד הזה הוא השורה הבודדת בפונקציית downloadCode(). כאמור, הדפדפן ינסה, בברירת מחדל, להוריד את מה שמצוין במאפיין ה-href. בשורה הזאת, אני משנה את הערך ל-data URI, המצוין ע”י content type של text/html וקידוד תווים (character encoding) של UTF-8. התוכן של מאפיין ה-href אחרי קידוד התווים יהיה התוכן של הקובץ שנוצר ומורד.

דבר זה די נפוץ באפליקציות שמייצרות גרפיקה באופן דינמי (אולי באמצעות canvas ו-SVG) ומאפשרות למשתמשים להוריד את הגרפיקות. עם data URI-ים, אפשר למעשה לתת למשתמש להוריד כל סוג של תוכן, ואפשר לייצר אותו דינמית בהתבסס על שדה קלט קודם. צריך רק לציין את ה-content type כראוי.

המִזכה (קרדיט) לטיפ הזה מגיע למאמר ישן יותר של קריס ווסט ולטוויט הזה של קודי לינדלי שבו הוא מקשר לדוגמאות המראות שלושה סוגי תוכן להורדה. אפשר גם לקרוא מאמר ב-MDN שבו יש פרטים נוספים על מאפיין ה-download.

שווה לקרוא את Web Tools Weekly גם בלי קשר לטיפים שלהם, אבל עם הטיפים – על אחת כמה וכמה. מועדים לשמחה!