Tagged

JavaScript

A collection of 8 posts

使用 Node.js 套件 Puppeteer 撰寫爬蟲
JavaScript

使用 Node.js 套件 Puppeteer 撰寫爬蟲

Puppeteer 是 Google 開源的網路爬蟲工具,說明文黨一開始就提到 Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. 主要是以 Chrome 當作核心個人使用起來感覺,就是使用程式去操作瀏覽器而已。 範例 const puppeteer = require("puppeteer") exports.getPageTitle = async url => { const browser = await puppeteer.launch() const page = await browser.newPage(

JavaScript HTMLCollection / NodeList 轉 Array 的方法
JavaScript

JavaScript HTMLCollection / NodeList 轉 Array 的方法

如果習慣用 jQuery 的朋友某天改使用 Vanilla JS 選擇器一定會先矇一下,怎麼很多方法不能使用,錯誤訊息為.forEach is not a function 例如範例 document.getElementsByTagName('h3').forEach((el)=>{ console.log(el) }) 如果你看仔細一點其實會發現 document.getElementsByTagName 其實是 HTMLCollection 又或是 document.querySelectorAll('h3') 會給你 NodeList HTMLCollection 與 NodeList 差別 那你會問兩個差別在哪?簡單來說 HTMLCollection 會是隨著 DOM 改變而一起變動,NodeList 則不一定,蛤!?舉個例子 let mainDOM

JavaScript 使用 Web Speech Recognition 語音辨識
JavaScript

JavaScript 使用 Web Speech Recognition 語音辨識

最近工作上有實作到語音辨識輸入這功能,不過在文件上並不是那麼清楚所以寫一篇筆記來紀錄事件觸發的順序。  瀏覽器支援度 可以用 Can I use 這個網站看看瀏覽器的支援度,恩..基本上只有 Chrome 有辦法使用。手機更不用說了 iOS 全滅只有 Android 手機有辦法使用。 判斷是否有支援語音辨識可以用以下程式碼 window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition if(!window.SpeechRecognition){ return } const recognition = new SpeechRecognition() 如果你直接 new SpeechRecognition() 就會 Uncaught ReferenceError: SpeechRecognition is not defined 事件觸發順序 礙於文件上的翻譯不完全,就字面上也不太清楚何時會觸發所幸自己直接全部都盤過一遍。 語音辨識正確的事件順序 onstart onaudiostart onsoundstart onspeechstart

JavaScript 非同步大亂鬥
JavaScript

JavaScript 非同步大亂鬥

大家都知道 js 的非同步特性,這是一把雙面刃有時一些奇怪的 bug 也是因為非同步的問題,現在 es6 的語法已經讓我們可以很簡單的去操作避免掉非同步的一些問題,回過頭來還是必須要去深入理解基本功這件事情。 同步與非同步 同步(Synchronous) 與 非同步(Asynchronous) 這兩個名詞大家一定不陌生,以下用自己的認知來闡述這兩件事情,我們以一個餐廳的服務生當做例子。 非同步:餐廳內的一個服務生可以點餐完將菜單交給廚房的廚師,並且接著服務下一桌客人等到廚房將餐點準備好可以出菜時再回來將餐點送到顧客的桌上。 同步:餐廳內的一個服務生點餐完之後將菜單交給廚房,就在廚房等待廚師將餐點準備完畢將菜送到顧客桌上,才會再繼續服務下一桌的客人。 看出來了嗎?兩著的差別在於服務生點餐完之後是否有繼續服務下一桌客人,以 Node 來講就是 Single Thread 可以一次處理多個 Request 不須等待第一個 Request 處理完再去處理下一個 Request。 常遇到的問題範例 再來看看下面這些範例,這些也是面試時很常見到的考古題。 console.log('Befor') setTimeout(() => { console.log('loading

CKEditor 修改 upload request
JavaScript

CKEditor 修改 upload request

CKEditor 相信大家都已經耳熟能詳,功能強大而且插件也多對於所見即所得編輯器是一個很好的選擇,編輯器內可以直接上傳圖檔或檔案的功能也很常見,今天你要在上傳多帶額外的資訊就沒有那麼簡單了,官方文檔你懂的… 前置作業 在這之前你應該已經開啟了上傳功能,如果你還沒開啟可以參考本站文章 Laravel CKEditor 整合 Laravel file manager 整合 Laravel file manager 的部分,或是 File Manager Integration TL;DR 如果你有看過官方文檔 你可能會瞄到 fileUploadRequest 這個事件,那麼我必須告訴你這個事件他原生的上傳插件是不會觸發的。 你必須要額外安裝 Upload Image 才會觸發 fileUploadResponse 所以如果你是掛 CDN 要本地安裝插件 請看 CKEditor CDN 。 所以最後你的 code 可能會長這樣 this.instance.on('fileUploadResponse',

ES6 學習筆記(二) 箭頭函數的 this
JavaScript

ES6 學習筆記(二) 箭頭函數的 this

那麼在先前已經學習過了箭頭函數的寫法,有沒有又覺得自己又潮了一點,箭頭函數並不只是單純寫法上的改變,另一個好處是箭頭函數的 this 是綁定父級作用域的,這麼說不太清楚不如直接看程式碼比較快。 範例 先來一段常常會見到的錯誤範例 const person = { name: 'jimmy', skills: ['html', 'css', 'php', 'js', 'vue', 'drupal', 'wordpress', 'laravel'], getSkills: function () { this.skills.map(function (skill) { // console.log(this) 會是 Window console.log(`${this.name}會 ${skill} 技能`) }) } } person.getSkills() 得到的輸出會是 會 html 技能 會 css 技能

JavaScript

JavaScript 何謂物件原型 (prototype)

何謂物件原型 (prototype) 每個 JavaScript 物件都會有 第二個 JavaScript 的物件與之關聯,而這個第二個的 JavaScript 物件就被稱呼為 “物件原型” 而第一個物件就是從這個原型來繼承特性 參考方式: JavaScript 中我們使用下列方式來參考原型物件 Object.prototype 且像是 ECMADscript 定義的 Native(原生)物件:Object() 、 Date() 、 Array() … 也都具有著 prototype 的原型物件 而當我們使用 new 與 建構式(constructor) 所產生的新物件: new Date(); 其原型就為 建構式(constructor) 的 prototype 特性,也就是: Date.prototype