Skip to content. | Skip to navigation

Personal tools


You are here: Home / Tutorial / JavaScript Introduction

JavaScript Introduction

JavaScript 入門基礎和生態系介紹 1930 年代 Alonzo Church 發明 lambda Calculus 時,對高階函式做了研究,John McCarthy 在 Lisp 實作高階函式與 First Class Function。函式性程式設計是宣告式設計的一部份,對應的命令式設計,則是描述如何達成結果。

var Citizen = function(name, country){ = name; = country;

Citizen.prototype = {
  printDetails: function(){
    console.log('Citizen ' + + ' from ' +;

JavaScript 沒有類別,物件實體從函式或物件建構而來。

前端操作介面測試範例 執行順序 listener


meta http-equiv="Pragma" content="no-cache" /
meta http-equiv="Cache-Control" content="no-cache" /
meta http-equiv="Expires" content="0" / write-better-code-with-the-ternary-operator navigating-equality-comparitors-and-sameness-checks-in-javascript awesome-javascript-destructuring-assignment Learn Front-End Web Development Course JavaScript Naming Conventions Dos Don'ts understanding-prototypes-in-javascript polyfilling-a-web-app-the-right-way how-to-sort-lists-on-your-website-using-helpful-stats lets-clear-up-the-confusion-around-the-slice-splice-split-methods-in-javascriptCallbacks: The Definitive Guide” by Kevin Ghadyani

Crossfilter, the JavaScript MapReduce library
JavaScript isn’t the greatest language for data crunching. But that didn’t stop people,
like the folks at Square, from developing MapReduce libraries for it. If you’re dealing
with data, every bit of speed gain helps. You don’t want to send enormous loads of
data over the internet or even your internal network though, for these reasons:
* Sending a bulk of data will tax the network to the point where it will bother
other users.
* The browser is on the receiving end, and while loading in the data it will temporarily freeze. For small amounts of data this is unnoticeable, but when you
start looking at 100,000 lines, it can become a visible lag.

removing javascripts this keyword makes-it-a-better-language here's why ES5 to ESnext heres-every-feature-added-to-javascript-since 設計缺陷 CRUD JavaScript is single threaded 這問題正由 Promises 試圖處理 Fundamental Info Practical JavaScript: Build a Strong Foundation for Web Development

如何看待 JavaScript 和其他語言的發展情況 ES5 (2009) 有大改版,ES6 則全面改版,例如 var 和 function 都被淘汰exponentiation operator 也逐漸被替換掉。

tips: use "var";  use "===";  想要維護 Browser 的 AJAX 相容性,最簡化方式是使用 try ... catch 程式碼來判斷例外和處理方式。

Map Reduce Filter 練習 Console 環境。全域變數通常不是好主意,試著建立物件及屬性Generate Checkbox from Layers Array

function generate_checkbox(id_checkbox, lable_name, html_element) {
  var checkbox = document.createElement('input');
  checkbox.type = "checkbox"; = id_checkbox;

  var label = document.createElement('label');
  label.htmlFor = id_checkbox;

JavaScript Scope

Variable Scope JavaScript Closures: Resolution of Property Names on Objects, Identifier Resolution, Execution Contexts and Scope Chains

通常 this 代表 Identity Fucntion,依照 Neighborhood 的進入方式,有四種解讀情境。Basic Project Tutorial

Private Members are made by the Constructor. Ordinary vars and parameters of the constructor becomes the private members.


推薦讀物 HTML5 之前與之後的不同作法: URL Hash 與 History API

jQuery 和 React.js 的笑話

Isomorphic JavaScript: The Future of Web Apps

Backbone Intro Full Stack Web Development with Backbone.js

Parallax Scrolling: Themeforest Example 20 Best Sites of 2013 Django + React.js Django + Vis.js 良葛格介紹 VanillaJS knockout: MVVM pattern


Disable Right Click

JXA: JavaScript for Automation Chrome Case

Bresenham's Algorithm in JavaScript: Draw a Line

Build Desktop App with HTML CSS JavaScript


Sensitive Information: GTM is a handy way for people you've never met to inject JavaScript into your site without the hindrance of a code review.

console.log(NaN || 1-"1" || 1+"1" || 1*"1")

|| 並不是 bit operation,它是個 logic or 的概念。NaN 是被當成是 null or undefined 一樣當成是 false。而 || 運算可以想成是從左到右,執行每一個運算式,直到有一個是 true 為止。
所以 1*"1" 就不會被執行了 1+"1" 的結果 "11" 就被傳回
要注意的是 JS 的 + 和 - 是完全不同的東西。+是可以 overload 的 operation,它對於數字,字串,物件會做不同的事。而 - 就是一個數字運算。所以 1+"1" = "11" 但 1-"1" = 0

Plone Cases

Approve Use of React.JS in Core, Deprecate Backbone.JS

Most developers would use an add-on and return the AJAX response. Or, you can do it TTW with page template just fine.

silvuple bda.plone.ajax


DOM Manipulation

不需要的原因 支援 IE7 DOM Samples

jQuery Sliding Effect

D3.js gannt 入門範例 quick course Create Bar Chart


Less CSS

FireBase, AngularJS, Plone: part 1, part 2 code by Balazs Ree: FireBase provides your front-end with persistent and shared real-time data out of the box, letting you focus on your application. Both external agents and custom authentication are supported. The Firebase traffice does not enter your application server, that means it's working with any Python based Web server.

intro firestore example setup python-firebase


Simple Real-time Presence Portlet

Full-Stack JavaScript CommonJS vs AMD vs RequireJS Manually Disable AMD Loading: collective.js.datatables

Module Loader

RequireJS CommonJS 與 Asynchronous Module Definition (AMD) 關係

Modular 是 Frontend JavaScript 設計模式,技術規範有 AMD 和 CommonJS 兩種,可以用 RequireJS 或 Browserify 程式庫來實作。

RequireJS 可能無法正確處理壓縮過的程式碼


Grunt 透過 npm 安裝,有個 grunt-cli 模組提供命令列程式,執行時,會利用 require() 來搜尋 Grunt 安裝資訊,找到後會載入 Gruntfile 的設定內容。


The Art of Node

Web Application Framework: Express

Building RESTful API Using Node and Express 4

A progressive Web application with Vue JS, Webpack & Material Design #1 #2 #3

前端框架的歷史 view = f(state) Frameworks Performance Comparison


What's Wrong: 使用 HTML 來描述程式邏輯與結構,對初學者具吸引力,但開發者被迫與 HTML parser 一起除錯,Dirty Checking 和 HTML Parsing 目前效能不佳。

Migrating an Angular 1.x App to Vue 2.x


簡介 入門教學 核心概念 圖表分析: Re-render everything on every change, Virtual DOM, Synthetic Events o3 blog 自製

函式思惟: f(state, props) = UI Fragment

React and Flux: Building Applications with a Unidirectional Data Flow: Code Sample Building UIs with ReactJS RealTime Voting

Flux 是 Application Architecture,Facebook 用來建置客戶端應用程式,比較像是 Pattern 而不是正式的 Framework,分成 Dispatcher、Store、View 三部份,細部地看 Action 可被視為更新流程的第四部份,Flux 導入 Unidirectional Data Flow 來避免 MVC 架構。

react(data) → UI

Material UI: A CSS Framework and a Set of React Components that Implement Google's Material Design

Redux 是 JavaScript App 的 State Container

CommonJS 是 NodeJS 的 Module System,

AngularJS vs Ember.js vs React.js React.js vs Vue.js

Plone Integration Idea UI Toolbar

Chatroom create-react-app Definite Guide to Handling Errors Gracefully

Scaffolding Tools

Yeoman generator-plonemockup

Exploiting Developer Infrastructure

JavaScript-compatible Language: Imba


Regular functions sometimes lack return values, but with async callbacks, if you return a value, that value usually goes nowhere. It’s actually possible to grab a hold of these return values, but only when your callbacks are synchronous. You’ll see this kind of synchronous callback behavior all over the place in promises, observables, and even Array.prototype functions like map, filter, and reduce.

Dialogflow 基本上就是 text parser + intent matching + parameter extraction,後端邏輯他有整合,直接靠 Cloud Function, 應可以整合 firebase