Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Tips / JavaScript Tips

JavaScript Tips

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

Steps of AJAX Operation

最簡化的語法架構

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

舊版 Browser 使用 XHTML 的情況

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

Udemy Online Course

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

browserName.indexOf

myscript=new Object();
myscript.init=function()
{
  // Some code
};
myscript.validate=function()
{
  // Some code
};
var dynamicLinks={
  linksInit:function()
  {
    if (!document.getElementById || !document.createTextNode)➥
      { return; }
    var openLink=dynamicLinks.createLink('#','open');
    dynamicLinks.appendLink(openLink);
    var closeLink=dynamicLinks.createLink('closed.html','close');
    dynamicLinks.appendLink(closeLink,'main');
  },
  createLink:function(linkTarget,linkName)
  {
    if (linkTarget == null) { linkTarget = '#'; }
    if (linkName == null) { linkName = 'dummy'; }
    var tempLink=document.createElement('a');
    tempLink.setAttribute('href',linkTarget);
    tempLink.appendChild(document.createTextNode(linkName));
    return tempLink;
  },
  appendLink:function(sourceLink,elementId)
  {
    var element=false;
    if (elementId==null || !document.getElementById(elementId))
    {
      element=document.body;
    }
    if(!element){element=document.getElementById(elementId)}
    element.appendChild(sourceLink);
  }
}
window.onload=dynamicLinks.linksInit;

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>

document.createTextNode

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)

Object Literal vs Object Constructor

anonymous function vs this

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

var myObj = {
  myProp1:"abc",
  myProp2:"xyz",
}

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);

DOM

反覆利用 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 確認輸入後的搜尋邏輯

Page Load, Focus, UnFocus, Exit Event

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

ready 事件只有 jQuery 才提供。

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

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.