js&jq總結的還是挺棒的:
http://www.cnblogs.com/yuanchenqi/articles/5980312.html
http://www.cnblogs.com/yuanchenqi/articles/6070667.html
我學了很久沒把js學會, 我發現我的路子錯了, 一開始就追求大而全.....累死... 好辦法應該是迭代式更新知識點....
ECMAScript(4,5) 目前學的是es5
es6其實是ECMAScript 2015.
- 前端工作的日常:
拿到ui設計圖: 切圖--> html+css靜態布局-->js寫一下動態效果
ajax和后台進行交互-->把數據綁定到頁面上-->用nodejs服務平台做src管理-->
用nodejs做后台
前端開發:
html css js
后端開發:
nodejs提供resetful api
移動端開發:
前端開發 html5 css3 bootstrap angular promise websocket requre.js
后端開發 nodejs express socket.io resetful
數據庫: mongodb redis mysql orm
移動開發: react react-native
- node
1.創建服務器,訪問
2,區分path和query
3,返回指定html, fs模塊
4,返回任意html
5.根據后綴設置content-type
// 思路: 接收請求 -- 獲取后綴 -- 設置content-type -- 響應
| 4種輸出方法 | 說明 |
|---|---|
| alert(confirm) | 彈出 |
| document.write | 寫入文檔,通常頁面中間插入廣告 |
| console.log | console |
| innerHTML/innerText | 在指定元素中動態添加內容 |
瀏覽器(window瀏覽器對象) --> 文檔(document對象) --> html元素
js有3部分組成:
ECMAScript(4,5): 定義了js的語法.(數據類型,基本語法,操作語句等最核心的東西)
BOM: (Window) 瀏覽器對象模型
DOM: (Document) 文檔對象模型: 參考: http://www.cnblogs.com/iiiiher/p/7967384.html
注意: document 文檔對象和BOM(瀏覽器對象模型)不是一回事.
// 變量命名: 區分大小寫
// 定義變量:
var name = "maotai";
console.log(name);
// 數據類型:
// 數字 字符串 布爾 [] {} 正則
var num = 12;
var str = "maotai";
var boo = true;
var n = null;
var m = undefined;
var obj = {name: 'maotai'};
var arr = [1, 2, 3];
var reg = /^1\d{11}/;
var fn = function () {
}
// 數據類型分類:
// 基本數據類型: number string boolen null undefined
// 引用數據類型: 對象{} 數組[] 正則reg
// 函數數據類型
- if判斷& switch語句
- 兩種for循環
// 3個判斷 3個循環
var num = 10;
if (num < 0) {
console.log('負數');
} else if (num > 10 && num < 10) {
console.log('1-10');
} else {
console.log('大於10');
}
num >=0?console.log("正數或0"):console.log("負數");
switch (num){
case 0:
console.log("0");
case 5:
console.log('5');
break;
default:
console.log("NaN");
}
for (var i = 0;i<10;i++){
console.log(i);
break;
}
var arr = [1,2,3,4,'maotai'];
for (i in arr){
console.log(arr[i]);
}
- innerHTML和innerText的區別
<div id="app"></div>
<script>
var app = document.getElementById("app");
app.innerText = '<h1>maotai</h1>';
// app.innerHTML = '<h1>maotai</h1>';
</script>
- innerHtml解析html標簽, innnerText不解析html
- 數組的13個方法
var arr = [0, 1, 2, 3];
arr.push(4);
arr.push(5, 6);
arr[arr.length] = 7;
console.log(arr);
arr.pop();
console.log(arr);
arr.shift()
console.log(arr);
arr.unshift(0);
console.log(arr);
arr.splice(2,2); //從索引n開始刪除m個
console.log(arr);
arr.splice(2); //從索引n開始刪除到結尾
arr.splice(0); //清空原數組,返回原數組的每一項
arr.splice(); //數組中一項都沒刪除, 返回一個空數組
arr.splice(1,2,0); //從索引n開始刪除m個,刪除的部分用x代替
arr2 = [6,7,8];
arr1.concat(arr2); // 把arr2接到arr1后
arr2.toString(); // 將數組轉換為字符串
arr.join('+'); // 數組以+為分割符
arr.reverse(); // 倒序排列
- 每一種資源文件都有自己的標識類型. 瀏覽器按照提供的MIME(content-type)類型渲染頁面
text/plain txt
var suffix = reg.exec(pathname)[1].toUpperCase();
var reg = /\.(HTML|CSS|JS|JSON|TXT|ICO)/i;
var suffixMIME = 'text/plain';
if (reg.test(pathname)) {
switch (suffix) {
case "HTML":
suffixMIME = 'text/html';
break;
case "JS":
suffixMIME = 'text/javascript';
break;
case "CSS":
suffixMIME = 'text/css';
break;
case "JSON":
suffixMIME = 'application/json';
break;
case "ICO":
suffixMIME = 'application/octet-stream';
break;
}
}
作用域鏈查找規則獲取值和設置值
js代碼執行順序/全局&私有變量/作用域鏈/閉包
js原型鏈繼承小結
js棧內存的全局/私有作用域,代碼預解釋
js中4種無節操的預解釋情況
js的惰性聲明, js中聲明過的變量(預解釋),后在不會重新聲明了
this關鍵字代表當前執行的主體
js中變量帶var和不帶var的區別
函數的上級作用域,他的上級作用域就是誰,跟函數在哪執行的沒什么關系.
js設計模式-單例模式
js設計模式-工廠模式
js設計模式-原型模式
js設計模式-修改原型
js雜項陸續補充中...
js設計模式-構造函數模式
js設計模式小結
設計模式小結&對原型的修改
ajax-異源請求jsonp
jquery里的jsonp實現ajax異源請求
瀏覽器同源策略(same-origin policy)