Loop (for each) over an array in JavaScript

 JavaScript  No Responses »
5 月 192023
 

Source: Loop (for each) over an array in JavaScript

  • a for-of loop (ES2015+ only; spec | MDN) - simple and async-friendly
for (const element of theArray) {
    // ...use `element`...
}
  • forEach (ES5+ only; spec | MDN) (or its relatives some and such) - not async-friendly (but see details)
theArray.forEach(elem, index => {
    // ...use `elem`...
});
  • a simple old-fashioned for loop - async-friendly
for (let index = 0; index < theArray.length; ++index) {
    const element = theArray[index];
    // ...use `element`...
}
  • (rarely) for-in with safeguards - async-friendly
for (const propertyName in theArray) {
    if (/*...is an array element property (see below)...*/) {
        const element = theArray[propertyName];
        // ...use `element`...
    }
}
Continue reading »

Add Event to Multiple Elements By Class in Javascript

 JavaScript  No Responses »
1 月 192023
 

Source: Add Event to Multiple Elements By Class in Javascript

document.querySelectorAll(".tree").forEach(function(element) {
    element.addEventListener('click', function() {
        // event handler code
    });
});
document.getElementsByClassName(".page").forEach(function(element) {
    element.addEventListener('click', function() {
        // event handler code
    });
});
for(let i=0; i<document.querySelectorAll(".element").length; i++) {
    document.querySelectorAll(".element")[i].addEventListener('click', function() {
        // event handler code
    });
}

Make a DIV expandable

 JavaScript, 網頁設計  No Responses »
1 月 192023
 

HTML

<div class="expand_content" style="overflow-y: hidden; height: 250px;">
    A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph.
</div>
<div class="expand_more" style="cursor: pointer; text-align: right; color: #2D81FF; font-weight: bold;">read more...</div>

Javascript

document.querySelectorAll(".expand_more").forEach(function(element) {
    element.addEventListener('click', function() {
        var expand_content = this.previousElementSibling;
        if (expand_content.style.height != "auto") {
            sessionStorage.setItem("expand_height_orig", expand_content.style.height);
            expand_content.style.height = "auto";
            this.textContent = "collapse this...";
        }
        else {
            var expand_height_orig = sessionStorage.getItem("expand_height_orig");
            if (expand_height_orig) {
                expand_content.style.height = expand_height_orig;
            }
            else {
                expand_content.style.height = "25vh";
            }
            this.textContent = "read more...";
        }
    });
});

JavaScript Async and Await in JavaScript

 JavaScript  No Responses »
9 月 092021
 

Source: [JS] Async and Await in JavaScript

解決 JS 中 Async 問題的第一個方法是用 callback function，但為了避免 callback hell 後來我們可以使用 Promise，在 ES2017 正式制訂了 asynchronous functions，可以讓我們在寫非同步碼的程式時，如同在寫同步的程式碼一般。

async function getData () {
  let resolveValue = await <Promise>
}
Continue reading »

Sync & Async of JavaScript loading

 JavaScript, 網頁設計  No Responses »
7 月 202021
 

Source: Sync & Async of JavaScript loading

這兩個英文單字，中文翻譯分別是「同步」與「非同步」， 而同步是什麼意思呢，今天想作一個讓網頁中所有的 script 可以動態載入的功能 ， 一開始先嘗試使用 document.getElementByTagName('head')[0].appendChild() 寫入 script A,B,C 三個 tag 到 head 中，不過這個方式沒辦法讓 script 依序執行，重覆 reload 後，常常會出現 B > A > C 這種錯誤的執行流程，後來改用 YUI3 Get 功能，發現 YUI3 有個 async options ，只要設定這個值為 false ，就能有正確的 script 執行流程。

Continue reading »

Document.write 塞入 script 會如何？

 JavaScript, 網頁設計  No Responses »
7 月 202021
 

Source: Document.write 塞入 script 會如何？

今天看到一則噗浪討論串，感覺很有趣，便花點時間研究一下這個課題，問題如果使用document.write塞入script會有什麼優缺點？

在實做上大部分都是使用非同步載入，主要都是為了讓頁面載入時間能夠重疊，感覺上讀取時間就會縮短，幾乎使用document.createElement('script')，塞入head當中，這樣子執行上就不會有阻塞的問題。

Continue reading »

5 分鐘快速了解 FontAwesome 5

 CSS, JavaScript, 圖庫素材, 網頁設計  No Responses »
5 月 312021
 

Source: 5 分鐘快速了解 FontAwesome 5

FontAwesome 正式釋出第五版，在 FontAwesome 5 中，除了主色系從綠色變成藍色之外，究竟第 5 版中還多了哪些新功能呢？讓我們用 5 分鐘快速了解 FontAwesome 5 帶來什麼新功能吧！本篇內容完全出自 FontAwesome 5 官網的內容，整理後希望能讓大家利用 5 分鐘了解 FontAwesome 5 的主要功能和差異，關於更多其他的使用方式還是建議大家到 FontAwesome 5 逛逛看看。

Continue reading »
 Older Entries