標籤: javascript

Vanilla JS 史上最輕量級的 Framework

這個名詞在 2015年就已經出現，當時對這些 Framework 沒什麼興趣(差不多就是將 jQuery 轉換成 Pure JavaScript (原生JS) 的時間點)，就沒有繼續深入了。

今天看到 Vanilla JS 是世界上最輕量級的框架(沒有之一)，就稍微看了一下，才發現驚為天人，除了輕量外，速度也跟原生的 JS 一樣快，這到底是什麼 Framework 呢？

閱讀全文〈Vanilla JS 史上最輕量級的 Framework〉

XSS Cheatsheet - 2021

以前有整理過各種 XSS 和安全性的文章，詳可見：

XSS 的防範要做完太難了，來看看 2021 又有哪些新要注意的地方~

閱讀全文〈XSS Cheatsheet - 2021〉

JavaScript 唯讀的欄位 要怎麼傳值

HTML 的 Select、Input 可以設定資料不可修改(唯讀)，屬性值如下：

  • Select：disabled
  • Input：readonly

但是會遇到 form 要傳送資料時，Input 能收到資料，但是 Select 收不到資料的問題，要怎麼解決呢？

閱讀全文〈JavaScript 唯讀的欄位 要怎麼傳值〉

前端 Tooltip 一步一步教學的工具套件

網頁、App 常常都會有頁面介紹，會將頁面區塊框一個框框，然後旁邊秀出說明或者教學。

這些通常會在 HTML 元素旁邊，使用 tooltip 的方式秀出來，這次介紹的套件，就是秀出來外，加上循環順序的設定，就可以做出一步一步的教學等效果。

閱讀全文〈前端 Tooltip 一步一步教學的工具套件〉

使用 flat 來將 JavaScript Array 快速攤平

JavaScript 的 Array 裡面有很多層級(多維陣列)，想要全部都攤平成一個一維陣列(flatten)，可以怎麼做呢？

  • 註：此篇使用到的 flat()，IE 不支援。

閱讀全文〈使用 flat 來將 JavaScript Array 快速攤平〉

使用 Brython 來操作網頁的 DOM

一般都使用 JavaScript 來操作網頁的 DOM，不過喜歡寫 Python 的人，總會想要 Python Everywhere。

只要載入 brython.js，就可以在網頁使用 <script type="text/python"> 來操作 DOM 囉~

閱讀全文〈使用 Brython 來操作網頁的 DOM〉

PHP 如何為 json_encode 移除 Array Index

PHP 與 JavaScript 串接經常回傳 JSON 格式，但是會遇到 PHP 的 Array 預設 Index (Assoc array key reference index) 都會有 1、2、3 ...，要怎麼移除這 Index 在傳給 JavaScript 呢？

閱讀全文〈PHP 如何為 json_encode 移除 Array Index〉

Googlebot 將使用新版 Chromium 引擎來執行 JavaScript

Googlebot 以前都使用 Chrome 41.0 的引擎來 Rendering (解析) JavaScript，預計要更新成 Chromium 最新的版本 (74.0+)。

由 access.log 可以看到下述：

"Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"

不過，雖然宣佈了，目前暫時還沒看到新版的 Bot 來的跡象~

閱讀全文〈Googlebot 將使用新版 Chromium 引擎來執行 JavaScript〉