30 תגובות לנושא זה

[RuinSain]

בהתאם לאשכול על CSS, הנה אחד על javascript.
כל מיני דברים מדליקים, שיטות פשוטות ב-js וכו' לבעיות יומיומיות.
 

[RuinSain]

הנה משהו שגיליתי לא מזמן. 
אם יש לכם איזשהו טאג עם האטריביוט name, אתם יכולים לגשת אליו דרך האובג'קט  document.
למשל...
 

<input name="tags">

ניתן יהיה לגשת אליו דרך document.tags.

 

זה מעולה כאשר מבינים שלא צריך לעשות לו queryselector, וחוסכים "קפיצה" אל ה-DOM.

 

ממה שאני רואה ניתן גם לשרשר אותם כמו למשל במצב הזה:

<form name="form">
<input name="input">
</form>

זה מביא אותנו אל:

document.form.input

נחמד ביותר!

[RuinSain]

בכדי לגשת ביתר קלות אל מאפיינים בטאג מסוים, ניתן להשתמש ב-this. למשל:

this.classList.toggle('your-class');

[avrahamcool]

 

בכדי לגשת ביתר קלות אל מאפיינים בטאג מסוים, ניתן להשתמש ב-this. למשל:

this.classList.toggle('your-class');

וואטטט??

 

ה- this תלוי בקונטקסט שאתה נמצא בו.

הקוד הזה לא יעבוד יותר פעמים מאשר כן יעבוד.

[נניח שאני כותב קלאס - ES6, מילת נמפתח this תחזיק את המופע של הקלאס ולא תג מסויים בדף].

 

איפה זה כן עובד?

ב forEach על nodes? ב JQ?

[RuinSain]

 

 

בכדי לגשת ביתר קלות אל מאפיינים בטאג מסוים, ניתן להשתמש ב-this. למשל:

this.classList.toggle('your-class');

וואטטט??

 

ה- this תלוי בקונטקסט שאתה נמצא בו.

הקוד הזה לא יעבוד יותר פעמים מאשר כן יעבוד.

[נניח שאני כותב קלאס - ES6, מילת נמפתח this תחזיק את המופע של הקלאס ולא תג מסויים בדף].

 

איפה זה כן עובד?

ב forEach על nodes? ב JQ?

 

 

הייתי צריך לומר כמובן טאג html.

למשל:

<div class="one" onclick="this.classList.toggle('my new class')"></div>

[avrahamcool]

אוקיי - עכשיו יותר הגיוני חח

[RuinSain]

לגמרי... רשמתי את בשתיים בלילה 

[RuinSain]

מישהו מכיר את ה-fetch api? משום מה כאשר אני מנסה לקרוא לכמה תמונות במקביל עם forEach, אני מקבל ורואה רק את התמונה הראשונה.

מה הדרך הנכונה לעשות את זה?

[avrahamcool]

ככל הנראה יש לך שגיאה בהתעסקות עם ה Promise שחוזר מה- fetch.

שים דוגמא של הקוד - אנסה למצוא את הבעיה.

[RuinSain]

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

תודה!

[RuinSain]

הנה משהו נחמד שלא ידעתי עליו עד עכשיו.

ישנה אפשרות ב-chrome dev tools לקחת תמונה של כל node בתוך ה-dom.

תעשו inspect לאלמנט שתרצו ואז ctrl+shift+P וחפשו capture node screenshot, לחצו על זה ויש לכם תמונה של אותו אלמנט. נחמד מאוד.

[Superb]

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

תודה!

Promise.all(myUrlsArray.map(url => fetch(url))

[RuinSain]

נחמד ביותר, סופ.
דרך אגב, הנה משהו שלפי דעתי כל אדם שעוסק בפיתוח כדאי לו להשתמש. חבילה בודקת עבורך האם ישנן בעיות מבחינה משפטית בדיפנדנסיס של פרויקט מסוים. https://github.com/J...nseUsability.js

[Superb]

אז אתה תאהב את זה: https://fossa.io/

[RuinSain]

אז אתה תאהב את זה: https://fossa.io/

 

חחח מעולה! 

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

נחמד ביותר.

[avrahamcool]

 

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

תודה!

Promise.all(myUrlsArray.map(url => fetch(url))

 

אפשר קצר יותר כך:

Promise.all(myUrlsArray.map(fetch))

[RuinSain]

***מלחמת הכוכבים***

[Superb]

fetch מקבל פרמטר שני, כך שלהעביר אותו כמו שהוא ל-map מרגיש טיפה מסוכן (map בעצמו מעביר פרמטר שני ושלישי ל-callback).

אולי לא יגרום בעיה במקרה הספציפי הזה (הפרמטר השני הוא האינדקס), אבל זה משהו שצריך לשים לב אליו.

הדוגמה הכי קלאסית לזה היא:

['1','2','3'].map(parseInt)

כאן הפרמטר השני שמועבר ל-callback מובן כ-base של ההמרה.

לעומת הקוד לעיל, זה כן יעבוד:

['1','2','3'].map(num => parseInt(num))

בכל מקרה, כ-good practice צריך להזהר מ-API שמקבל כמה פרמטרים (חלקם optional) כשמעבירים אותו לפונקציות כמו map/reduce/filter וכו'.

[avrahamcool]

מקבל את הטענה שצריך להיזהר עם זה..

דוגמה יפה.

[RuinSain]

רכיב Tabs שעשיתי עם Vue.js ו-Bulma בתור העיצוב.

Vue.js Tabs Component