• Nov 30 Mon 2020 09:55
  • DOM

Document Object Model,HTML 和 XHTML 的介面。

DOM的內容其實可以分為三個部份:DOM core、HTML DOM 與 XML DOM。

DOM Core 是最基本的底層架構(核心),主要是將 Document 架構為一個樹(Tree) 的概念, Tree 的組成成份就是節點 (Node),每個 DOM 必須要有一個document 的根節。每個元素在 DOM 裡面就是一個節點。 當一個 .html 檔被以瀏覽器開啟的時候,瀏覽器就會去解析該檔案的 DOM。 由於瀏覽器可以處理 html 跟 XML 的 DOM,所以也有人稱 DOM 檔案樹為 html 檔案樹或者 XML檔案樹。 事實上就是指 document 中元素, 對應到的 JavaScript 物件,我們就統稱為 dom。var img = document.getElementById("img2"); 這個 img 就是範例中 img 標籤對應到 JS 世界的 dom 元素。 不管是什麼 DOM,都有對應的物件架構, 每個物件有其屬性、方法 (Method) 與界面 (Interface), 讓外界可以讀寫其內容;對外界程式設計人員而言,這些方法界面,統稱 API (Application Programming Interface)。

Ref:

https://dev.to/macmacky/70-javascript-interview-questions-5gfi#5-what-is-the-dom

瑞哈 發表在 痞客邦 留言(0) 人氣()

是。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#Unary_plus

但是不好閱讀。

瑞哈 發表在 痞客邦 留言(0) 人氣()

邏輯運算子,找到第一個正確的回傳,不會繼續執行第二個。

console.log(null && obj); // null
console.log(null || 1 || undefined); // 1
function logName(name) {
  var n = name || "Mark";

瑞哈 發表在 痞客邦 留言(0) 人氣()

  • 邏輯運算子,找到第一個錯誤(falsy: false、undefined、null、NaN、0 (both +0 and -0)、””)的回傳,不會繼續執行第二個。
  • 第一個值的 bool 為 true,後一個的值。

console.log(false && 1 && []); // false

瑞哈 發表在 痞客邦 留言(0) 人氣()

undefined

  • undefined 是變數沒有被宣告,或者是已經宣告了,但是沒有賦值,Javascript 將未賦值的變數的預設值設為 undefined。

let _thisIsUndefined;

瑞哈 發表在 痞客邦 留言(0) 人氣()

本文章描述如何透過 webpack 使用 ES6 模組架構、配置。

瑞哈 發表在 痞客邦 留言(0) 人氣()

前天同事問為何 FB 分享的網址跟我們設定應該要分享的網址不一樣,多了很多 %3A%2F%2 這種奇怪符號?

原因是:網址在當參數傳輸的時候 會需要 encodeURI 讓他符合規範,因為有些字沒有辦法通過網路直接發送 URL 只能使用 ASCII 字符集發送 URL,所以會需要進行編碼。

FB 的分享連結會出現那個表示他先把我們的網址 encode 了,對他們來說先處理這部分在分享的時候就不用再 encode 一次了~

詳細可以看這篇文章:http://www.victsao.com/blog/81-javascript/89-javascript-encodeuri-uri

瑞哈 發表在 痞客邦 留言(0) 人氣()

ES6 箭頭函式讓 code 更簡短

箭頭函式讓 Javascript code 更簡短也更清楚,以下是 ES5 與 ES6 函式範例。

ES5

function greetings(name) {
    return 'hello' + name

瑞哈 發表在 痞客邦 留言(0) 人氣()

這 25 個教學是由 CodeBurst 作者們所撰寫。無論你是 Node 的新手或是有經驗的開發者,這些對每個人都會有些收穫。

https://codeburst.io/25-node-js-tutorials-1db3b1da0260

1. Top Node JS Courses (學習 Node.JS 最好的方法)

2. Series

3. Infos

瑞哈 發表在 痞客邦 留言(0) 人氣()

M
Module -> 資料 (類object.array.json...等)
V
View -> 呈現 (html.css)
C

瑞哈 發表在 痞客邦 留言(0) 人氣()

Create 新增
U
Update 修改

瑞哈 發表在 痞客邦 留言(0) 人氣()

實作時有遇到一些問題 swiper 卡片距離設定問題

1. spaceBetween + slidesPerView 時會在視窗 resize 時壞掉

2. 不能把每個卡片左右設定 margin 除非相互抵銷 ex: margin: 0 10px 0 -10px;

瑞哈 發表在 痞客邦 留言(0) 人氣()

1 2
Blog Stats
⚠️

成人內容提醒

本部落格內容僅限年滿十八歲者瀏覽。
若您未滿十八歲,請立即離開。

已滿十八歲者,亦請勿將內容提供給未成年人士。