Skip to content. | Skip to navigation

Personal tools


You are here: Home / Tips / JavaScript Tips

JavaScript Tips

Programming Paradigm: Funcational Programming (closures, first class functions, lambdas) Prototypal Inheritance (prototypes, OLOO)

mouseover mouseout

class-free object oriented

XMLHttpRequest 和非同步呼叫的出現,大幅改變了網頁程式的運作思惟。在第一個階段 jQuery 勝出了,它能夠操弄 DOM,但對於應用程式的結構,並未提出好的組織和維護方式。

9-tricks-for-kickass-javascript-developers-in-2019 var vs let vs const in Javascript Javascript Inheritance and the Prototype Chain JavaScript Changes that You Will Love IE5 在 1998 年問世,自此可以在瀏覽器裡使用 XMLHttpRequest (XHR) 執行非同步網路呼叫 How to Build Large Scale Application

Debug console.log() debug advice Steps of AJAX Operation Debug Using Chrome DevTools

Service Worker service-worker.js update frequence

javascript-from-callbacks-to-async-await map is synchronous


<script type="text/javascript">
// Your code here

舊版 Browser 使用 XHTML 的情況

<script type="text/javascript">
 // Your code here
<script type="text/javascript"><!--//--><![CDATA[//><!--
 // Your code here

範例: <div id="demo"><button type="button" onclick="loadDoc()">Change Content</button></div>

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
  };"GET", "ajax_info.txt", true);

Udemy Online Course 解讀 this

Object 有 Property, Method, Event 設定值,像 Document 是用來代表 JavaScript 存取中的網頁。


myscript=new Object();
  // Some code
  // Some code
var dynamicLinks={
    if (!document.getElementById || !document.createTextNode)➥
      { return; }
    var openLink=dynamicLinks.createLink('#','open');
    var closeLink=dynamicLinks.createLink('closed.html','close');
    if (linkTarget == null) { linkTarget = '#'; }
    if (linkName == null) { linkName = 'dummy'; }
    var tempLink=document.createElement('a');
    return tempLink;
    var element=false;
    if (elementId==null || !document.getElementById(elementId))

window Methods: prompt() alert() confirm()

document.getElementById('id'), document.getElementByTagName('p') Change Table

<button name="submit" value="change table"
 onclick="document.getElementById('table2').innerHTML = document.getElementById('table1').innerHTML;">Change Table</button>


var firstpara = document.getElementByTagName('p')[0];
var lastListElement = listElements[listElements.length - 1];
var linkItems = document.getElementsByTagName('li');
for(var i = 0; i < linkItems.length; i++)
  // Do something...

如果 myFunc(varible) 在 HTML 載入前就執行,會遇到 Null Exception 錯誤,要調整順序,或用 window.onload or $(document).ready 處理。

第一排選項結果會決定第二排是否能選: 取消第二排選擇結果

Products.Collage: setupLinks(query)

Chrome DevTools Audit Feature to measure and optimize performance part-1

Object Literal vs Object Constructor

anonymous function vs this

var mything = new SomeThing();
# equals to
var mything = {};;

var myObj = {

function myObj(){
  this.myProp1 = "abc";
  this.myProp2 = "xyz";

在 Construction Function 之前宣告 'use strict'; 後,this 預設值會是 undefined,呼叫時若缺少 new 會產生錯誤。


Using Vector Layers Example

// when the user moves the mouse, get the name property
// from each feature under the mouse and display it
function onMouseMove(browserEvent) {
  var coordinate = browserEvent.coordinate;
  var pixel = map.getPixelFromCoordinate(coordinate);
  var el = document.getElementById('name');
  el.innerHTML = '';
  map.forEachFeatureAtPixel(pixel, function(feature) {
    el.innerHTML += feature.get('name') + '<br />';
map.on('pointermove', onMouseMove);


反覆利用 getElementsByTagName 可以存取想要的 Element,但效果通常不好而且有所侷限,善用 DOM 的 Children, Parents, Siblings 可能才是理想的方式。Document 裡的 Node 有 nodeType (例如 element, attribute, comment, text) 和 nodeName (例如 li 或 #text),由於 nodeName 可能是大寫或小寫的英文,常用 if(obj.nodeName.toLowerCase()=='li'){}; 的技巧,利用 nodeValue 可以存取 Node 的內容,例如 Element 的內容是 Null。

document.getElementsByTagName('p')[0].nodeValue='Hello World';
# Enough for Assigning the First Paragraph Content? No
document.getElementsByTagName('p')[0].firstChild.nodeValue='Hello World';
# First Paragraph is an Element, So firstChild is Needed

yourElement.firstChild 和 yourElement.childNodes[0] 同義,yourElement.lastChild 和 yourElement.childNodes[yourElement.childNodes.length-1] 同義;利用 hasChildNodes() 可以檢查狀態。

Chrome DOM break point

要看一個變數有沒有, 該用 if (v != undefined) 還是 if (!v) ? 用 if (v) 別用 == 或 != 因為 null 空白 null string 所代表涵義都不太一樣,undefined 也是。 If you want to be careful, you should be more specific, like if (undefined !== v) or if (typeof v !== 'undefined'), especially if you are expecting numerical values. It causes errors easily if u just write like 'if (!v) { ... }' when v is undefined. The best way should be still using typeof.

if(typeof(strName) == ‘undefined’)

The Three Big Lies About JavaScript


d3.js Cross-Origin Resource Sharing Tree Structure particles.js

Why the JavaScript Obsession? #1 #2 unavoidable and should be embraced: Angular Story 主要四種技術分類:

  • Packaging: Downloading JavaScript packages (NPM, bower)
  • Build Tools: Tools to compile JavaScript and other things(Grunt, gulp, npm)
  • Dependency Management/Module Loading: Load and user dependent JavaScript modules in your code (requirejs, systemjs, commonjs)
  • Components: Organize your code into smaller, testable, easy to read bits (Angular, React, Patternslib)

Writing Compatible Code

redux : a predictable state container for JavaScript apps. collective.js.charcount remove character counter

Sortable Drag and Drop Test with Selenium

Console Debug

LiveSearch 確認輸入後的搜尋邏輯

Debugging Production Only Issues

Visualization of Variable Scope

Page Load, Focus, UnFocus, Exit Event

常見的網頁狀態及其判斷方式: 進入網頁分成 ready 和 onload 兩種,後者是指網頁完全載入完畢,包含圖片、素材等,而前者則是網頁 DOM 載入完畢就會被觸發,一般來說 ready 會在 onload 之前發生。

ready 事件只有 jQuery 才提供。

getUserMedia 取得麥克風耳機等設備

IE Compatible

IE8 Conditional Comment jquery.recurrenceinput.js

Disabling Copy and Paste Web Pages

Elegant Way to Implement Animated Sliding Panels

Sliding Panel Examples

Sliding Panel Tutorial

Vertical Sliding Panel

Portamento Demo

IE9: plone.formwidget.recurrence

Security: Zero-Width Characters

JavaScript Cost 如何降低效能成本; 最佳化前後的實作不一是危險的: typeof null 的正確答案應是 object

V8 Engine

2008 由 The Chromium Project 開發,被用於 Couchbase, MongoDB, Node.js 裡,透過 inlining, elision, inline caching 技巧來動態執行最佳化

pyV8 is a python wrapper for Google V8 engine, it act as a bridge between the Python and JavaScript objects, and support to hosting Google's v8 engine in a python script.

JavaScript 30