ייעול לולאות ב-JavaScript

אלעד אוסדון כתב בבלוג שלו על איך לייעל לולאות שעוברות על אוספים (כמו getElementsByTagName או childNodes) בעזרת טכניקה של שימוש בהשמה למשתנה כתנאי יציאה מהלולאה:

for (var i=0,item;item=someArray[i];i++) {
alert(item);
}

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

ובסוף הפוסט הדגיש: “בלולאה כדאי להשתמש רק במעבר על collection, למשל getElementsByTagName, childNodes, זאת מאחר וריצה על ערכים שעלולים לכלול 0, undefined, null, מחרוזת ריקה או כל ערך השווה ל-false תופסק באמצע.”

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

for(var i=0, len=arr.length, item;i<len;item=arr[++i]){
alert(item);
}

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

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

מבין שלושת השיטות מבדיקת זמנים שערכתי על מערך מספרים של 50000 איברים השיטה של אלעד הכי יעילה (ב-14% בערך יותר יעילה משלי, וב-33% בערך יותר מהשיטה הרגילה) והשיטה שלי היא במקום השני מבין השלוש (ב-22% בערך יותר יעיל מהשיטה הרגילה). הבדיקות נערכו על פיירפוקס.

Prototype: גרסה חדשה + תיעוד.

Sam Stephenson שחרר היום את הגרסה החדשה של prototype,ספריית ה-javascript אולי הפופולרית ביותר. להמשך קריאה »

mootools: איך לומדים את הספריה?

בפוסט :” mootools: לתכנת פחות בעזרת פרות“, הצגתי את החבילה וכמה פיצ’רים מעניינים שלה, אבל לא כתבתי איך לומדים להשתמש בה. mootools היא ספריה נוחה למדי וללמוד אותה זה מאוד פשוט, במיוחד לכל מי שמכיר את עניין התכנות המכוון עצמים (OOP). באתר של הספרייה יש וויקי פעיל שאחד העמודים בו מדבר על הנושא הזה, העמוד נקרא getting started והוא מסביר על הדברים הבסיסיים של Mootools. מעבר לכך ברשת אפשר למצוא הרבה מאוד דוגמאות קוד ע”י חיפוש בגוגל ובדלישס/טכנוראטי.

למשל: Sortable List.

וכמובן יש את המדריך המלא ל-Mootools באתר “צד הלקוח” של CNET שמלמד צעד אחר צעד את הספרייה ומהווה גם תיעוד של הספרייה, כולל דוגמאות קוד.

כמו כן, לכל דבר שיש לכם שאלה לגבי מה עושה מתודה/מחלקה מסויימת ב mootools יש את התיעוד המלא והרשמי של mootools שלא רק מכיל תיאור של המחלקות והמתודות אלא גם דוגמאות קוד.

לכל שאלה שיש לכם על mootools אתם מוזמנים לשלוח לי אימייל או לשאול בפורומים של mootools.

קריאה נעימה ובהצלחה לכל מי שילמד את החבילה.

עדכון: לקראת השקת הגרסה הראשונה המלאה (1.0) Aaron Newton הכותב של mootools premier (המדריך של CNET, “צד הלקוח” ) שדרג את המדריך ועכשיו הוא מכיל מדריך של צעד-צעד ל-mootools וכן מסביר על השינויים שיהיו בין הגרסא האחרונה (revision 83) לגרסה שעתידה לצאת. Go Mootools!!!

תגיות טכנוראטי: mootools, javascript, tutorial.

כתיבת אתר בPHP עם UTF-8

לא פעם שאנשים שואלים בפורומים ברשת איך עובדים עם UTF-8 ו-PHP ביחד, לכן אני כותב פוסט זה, כדי שנוכל לקשר ולהסביר פעם אחת איך עובדים עם UTF-8 בPHP.

UTF-8 לפי הויקיפדיה: “UTF-8 ‏(8‎-bit Unicode Transformation Format או 8‎-bit UCS Transformation Format ) הוא קידוד תווים באורך משתנה ליוניקוד, שנוצר על ידי רוב פייק וקן תומפסון. ניתן לקודד בו כל תו המצוי בתקן היוניקוד על-ידי שימוש באחד עד ארבעה בתים, תלוי בתו. הקידוד ב-UTF-8 מעניק את כל יתרונות השימוש בקידוד ליוניקוד ומוסיף עליהם, בין היתר, גם חסכון בזכרון, עמידות בפני איבוד או השחתת בתים ותאימות לאחור בASCII. ה-IETF מעדיף בבירור את UTF-8 ומחייב כל פרוטוקול אינטרנט לתמוך בו, וכן קונצורטיום הדואר האלקטרוני, ה-IMC, ממליץ שכל תוכנת דואר אלקטרוני תוכל להציג וליצור דואר באמצעות UTF-8.”

כלומר, בשבילנו בוני האתרים, כדי ליצור אתר שהגולשים יוכלו לכתוב בו במס’ שפות, ואנחנו נוכל להציג אותם בדף אחד מבלי שתהיה בעיית תאימות עם מפרשים שלא תומכים בקידוד עברי windows-1255, אנחנו צריכים להשתמש ב-UTF-8.

להמשך קריאה »

mootools: איך משתמשים ב-Fx.Slide

בספריית האפקטים של mootools יש אפקט גלישה (Slide). אפקט זה מאפשר “לסגור” ו”לפתוח” תוכן מסויים. למשל בפורום עצי, כאשר לוחצים על כותרת אז התוכן נפתח וכשלוחצים שוב על הכותרת התוכן נסגר. כדי לבצע את אפקט זה אין יותר פשוט מלשנות את ה-display של אלמנט התוכן מ-block ל-none ולהפך. אבל אם אנחנו רוצים לעשות שהסגירה והפתיחה “יגלשו” פנימה והחוצה זה כבר מסבך טיפה את העניינים. לכן ב-Mootools הכינו מחלקה שתפשט לנו את הקוד, המחלקה נמצאת במודול fxpack.js .

var slideEffect = new Fx.Slide(”My_Element_ID”, options);

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

slideEffect.show(); // Hides the element without a transition.
slideEffect.hide(); // Shows the element without a transition.
slideEffect.toggle(); //Hides or shows a slide element, depending on its state;

שימו לב: הגובה/רוחב שאליו האפקט יגדיל את האלמנט הוא אותו גובה/רוחב ברגע יצירת האפקט. אז רצוי שה-display יהיה שונה מ-none ברגע היצירה.

 

דוגמא שכתבתי יכולה להראות לכם בדיוק איך זה מתבצע והתיעוד לאפקט.

תגיות טכנוראטי: mootools, Fx.Slide, javascript

IE, Atrributes וה-DOM.

לפני כמה זמן נתקלתי בתופעה משונה שגרמה לIE לקרוס. אני כתבתי להנאתי ComboBox ב-JS ו-DOM והשתמשתי בשורת הקוד הבאה (לא בדיוק זאת, אבל ערכתי אותה בשבילכם ;-)):

document.createElement(”li”).setAttribute(”value”, “blabla”);

שורת הקוד הנ”ל בעצם גורמת לIE לקרוס. אני לא יודע למה זה קורה (יהיה נחמד אם מישהו יגיד לי) אבל כדי להיפתר מבעיה זו אפשר לעבוד ככה:

document.createElement(”li”).value = “blablabla”;

כמובן שזה לא יתן בדיוק מה שמצפים, אבל קרוב לודאי שממילא משתמשים במידע הזה רק מJS ככה שאין באמת השפעה אם שמים אותו כ-attribute או שמוסיפים אותו כ-member לאובייקט.

 

באותה נשימה שמדברים על IE, attributes והבעיות של הDOM שלו אני אקשר לפוסט שנכתב אתמול שמדבר על מס’ בעיות נוספות: Attribute Nightmare in IE.

תגיות טכנוראטי: DOM, JavaScript

mootools - לתכנת פחות בעזרת פרות.

Mootools או בהרחבה My Object Oriented tools זה ספריית JavaScript שמפשטת את קידוד ה-javascript וה-DOM.

להמשך קריאה »

להתחיל מההתחלה?

שמי הוא ניר טייב אני בן 17, מפתח אתרים כבר מס’ שנים. בבלוג זה אני הולך לכתוב על אספקטים שונים בבניית אתרים ותכנות. החל מתכנות תכל’ס, נושאים אידאולוגיים, חדשות בתחום וכל מיני דברים מעניינים שאני “נפגש” איתם בתחום.

אז אני אתחיל בפרסום קישור למאמר שלי שנותן מבט על למתחילים על מה הם עומדים לראות כשהם יכנסו לתחום, כדי שהם יוכלו ” להתחיל מההתחלה“.