JavaScript学习笔记

good uri:http://help.dottoro.com/
1.document.write()：
write()方法括號中可以存放多個值,并用英文,號分隔。
同一個值中用加號連接字符串與數字,數字先轉換為字符串,再拼接輸出。
同一個值中加號連接的只有數字,數字進行相加運算得出結果后,再輸出。
2.alert()方法信息對話框：彈出一個窗口,點確定后代碼才繼續往下執行。
alert("你好啊!\n我是alert,\t測試用.");
3.confirm()方法選擇對話框:
if(confirm("顯示紅色字體嗎?\n如果選擇取消,將顯示藍色文字!")){
document.write("<h3 class='red'>紅色文字</h3>");
}else
{
document.write("<h3 class='blue'>藍色字體</h3>");
}
4.prompt('', '')顯示提示的對話框
document.write("你來自哪個國家------" + prompt('請問你來自哪個國家?','請輸入') + "<hr />")
5.變量：變量名稱必須以下劃線或字母開頭,后面跟隨字母、下劃線或數字，變更名稱是區分大小寫的。
var 變量名稱;
var 變量名稱1,變量名稱2,變量名稱3........;
var 變量名稱 = 變量值;
6.算術運算符
加(+)、減(-)、乘(*)、除(/)和取余(%)
7.關系運算符
小于號(<)、小于等于號(<=)、大于號(>)、大于等于號(>=)、等于號(==)、不等于號(!=)、全等于號(===)、非全等于號(!===)
8.邏輯運算符
與運算符(&&)、或(||)、非(!)
9.if語句：
if(條件表達式){
代碼段1;
}else{
代碼段2;
}

if(條件表達式1){
代碼段1;
}else if(條件表達式2){
代碼段2;
}else{
代碼段3;
}
var a = 10, b = 20, c = 10;
if(a == b){
document.write("a == b <br />");
}else{
document.write("a != b <br />");
}

if(a == b){
document.write("a == b <br />");
}else if(a == c){
document.write("a == c <br />");
}else{
document.write("a != b && a != c <br />");
}
10.switch
var week = prompt("請輸入你最喜歡的一天，如周一、周二等", "周");
switch(week){
case "周一":
document.write("星期一!");
break;
case "周二":
document.write("星期二!");
break;
case "周三":
document.write("星期三!");
break;
default:
document.write("沒有你喜歡的周次嗎?");
}
11.for和for...in循環
for(初始化變量; 設立終止循環條件表達式; 更新變量){
代碼塊;
}

for(初始化變量1,初始化變量2; 設立終止循環條件表達式; 更新變量1,更新變量2){
代碼塊;
}

for(聲明變量 in 對象){
代碼塊;
}

/*ball存放數組的索引值*/
var ballArray = new Array("籃球", "足球", "網球", "棒球", "乒乓球");
for ( var ball in ballArray) {
document.write(ballArray[ball] + "<br />");
}
12.函數
function 函數名(參數1,參數2,參數3.........)
{
代碼體;
return 表達式或具體值;//默認返回undefined類型
}

function fun1(a, b)
{
function subfun2(c)
{
var sum = a + b + c;
return sum;
}
var sum = subfun2(200);
return sum + 18;
}
document.write("<br />function fun1(a, b)=" + fun1(100, 200));
13.面向對象
C++、Java、C#中要使用類結構來定義對象的模版,而在JavaScript比較簡單,
只需聲明構造函數即可定義對象類。
JavaScript支持對象數據類型,但沒有正式的類的概念,不是以類為基礎的面向對象的程序設計語言。

var 新對象實例名稱 = new 構造函數;
var phone = new Object();
phone.w = 100;
phone.color = "紅色";
phone.nokia = new Object();
phone.nokia.color = "藍色";
14.自定義方法
自定義方法比較簡單,只需將自定義的函數賦值給對象的方法名即可,不需要()。
function callName()
{
alert("我的名字叫：" + this.name);
return "本對象的方法已經執行完畢。";
}

function Dog(name, color, weight)
{
this.name = name;
this.color = color;
this.weight = weight;
this.call = callName;
}

var dogA = new Dog("花花", "藍色", 60);
//要用對象名與點運算符進行訪問。
document.write("<br />dogA對象實例為：" + dogA);
document.write("<br />dogA對象實例name為：" + dogA.name);
document.write("<br />dogA對象實例color為：" + dogA.color);
document.write("<br />dogA對象實例weight為：" + dogA.weight);
document.write("<br />dogA對象實例call()方法執行情況為：" + dogA.call());

//不想用對象名與點運算符,則用with。
with(dogA)
{
document.write("<hr />dogA對象實例name為：" + name);
document.write("<hr />dogA對象實例color為：" + color);
document.write("<hr />dogA對象實例weight為：" + weight);
document.write("<hr />dogA對象實例call()方法執行情況為：" + call());
}
//不想用對象名與點運算符,則用for in。
document.write("<br /><br />dogA對象實例分別為：");
for(var i in dogA){
document.write("<br />" + dogA[i]);
}
15.數組
數組的length屬性不權可以讀,還可以寫(改變);
length小于數組元素個數時,長度被截斷,即后面的元素將被刪除，
length大于數組元素個數時,數組將在后面添加若干值為undefined的元素,將填滿為指定的length長度。
//示例代碼如下
var myArray = new Array(100, 200, 300);
document.write("<br />舊的myArray數組長度是：" + myArray.length);
myArray[7] = 700;
document.write("<br />程序進行操作是：myArray[7] = 700;");
document.write("<br />數組的第8個元素是：" + myArray[7]);
document.write("<br />新數組的長度是：" + myArray.length);
for(var i=0; i < myArray.length; i++){
document.write("<br />myArray數組的第" + i +"個元素是：" + myArray[i]);
}

多維數組：
var myArray1 = new Array(5);
myArray1[0] = "公司名稱";
myArray1[1] = "主營業務";
myArray1[2] = "知名品牌";
myArray1[3] = "Country";
myArray1[4] = "Other";

var myArray2 = new Array(3);
myArray2[0] = "Microsoft";
myArray2[1] = "OS";
myArray2[2] = "Windows";

var myArray3 = new Array(5);
myArray3[0] = "Intel";
myArray3[1] = "中央處理器";
myArray3[2] = "Pentium";
myArray3[3] = "USA";
myArray3[4] = "APP";

var myArray5 = new Array(myArray1, myArray2, myArray3);
document.write("<br /><br /><table border=\"1\" width=\"500\">");
for(var i=0; i<myArray5.length; i++){
document.write("<tr>");
for(var j=0; j<myArray5[i].length; j++){
document.write("<td>" + myArray5[i][j] + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
16.數組方法
16.1 join()方法;join方法無參數時默認分隔符為逗號：,
join可以用指定的分隔符把數組中的元素值拼接,并以字符串的形式返回給程序。
16.2 concat()方法合并數組;
var myArray4 = myArray2.concat(myArray3);
16.3 push()方法,可在數組尾部添加元素,并返回修改后的數組長度。
16.4 pop()方法,則在數組尾部刪除1元素,并返回元素值。
16.5 unshift()方法與push()方法類似,只是unshift是在數組的頭部添加。
16.6 shift()方法與pop()方法類似,只是shift方法是在數組的頭部刪除。
16.7 slice()方法截取數組。
16.8 splice(start, deletecount, items)方法,插入或刪除數組元素的通用方法,并返回被刪除的值;
數組名稱.splice(起始處,刪除元素數量);
數組名稱.splice(起始處,刪除元素數量,插入元素值1,插入元素值2,插入元素值3....n);
16.9 綜合例子如下：
//元素值拼接并返回字符串給程序
document.write(myArray3.join("*"));
//在數組后添加元素,并返回數組的長度
myArray2.push("美國");
document.write("myArray2數組長度為=" + myArray2.push("XP OS") + "<br />");
//刪除數組元素,返回被刪除的元素值
document.write("被刪除的元素是=" +myArray2.pop() + "<br />");

document.write("<br />數組合并：<br />");
var myArray4 = myArray2.concat(myArray3);
for(var j=0; j < myArray4.length; j++){
document.write("合并后的myArray4數組下標" + j + "值=" + myArray4[j] + "<br />");
}

//默認按字母排序
document.write("排序：" + myArray4.sort());
//數組原排序進行倒序排序,原來最后一個變成第一個
document.write("<br />反序：" + myArray4.reverse());
//截取數組的一部分,從s元素到e元素結束,只有一個參數則從此位置開始到最后,負數則從尾部開始算,-2表示倒數第二個元素開始
document.write("<br />截取：" + myArray4.slice(1, 5));
document.write("<br />從一個元素到結束截取：" + myArray4.slice(1));
document.write("<br />倒過來截取：" + myArray4.slice(-2));

document.write("<br />刪除元素：" + myArray4.splice(0, 2));
document.write("<br />刪除元素并插入新的元素：" + myArray4.splice(0, 2), "USA美國", "CPU中處");
17.Date對象、String對象、Math函數，使用可以自己相關資料。
18.Function函數對象,可以動態的創建函數,在執行創建。
var myFunc = new Function(參數1,參數2,....參數n,函數體);
19.window對象,是很重要的對象,包含document、navigator等對象。
open方法：
var mywin = window.open("頁面路徑", 窗口名稱, 窗口樣式1, 窗口樣式2.....);
close方法：
function closewin(){
window.opener = null;
window.open('', '_self');
window.close();
}
20.location對象,常用方法有reload(x),重新加載頁面;replace(x)方法,指定頁面替換當前頁面,但存于瀏覽歷史。
<script type="text/javascript">
document.write("<br />主機名稱：" + location.hostname);
document.write("<br />協議名稱：" + location.protocol);
document.write("<br />內部路徑：" + location.pathname);
document.write("<br />完整url：" + location.href);
document.write("<br />端口號：" + location.port);
</script>
21.history對象,最近訪問過的地址列表。
history.back()方法為后退;
history.forward()方法為前進;
history.go()方法0為當前頁面,-1為后退;
window.frames[0].history.back();
window.frames[0].history.forward();
window.frames[0].history.go(0);
22.延時執行命令:var id = setTimeout(函數, 延時時間);
23.文檔對象模型(Document Object Model)，簡稱DOM。
HTML文檔的<body>元素載入時,才創建document對象;所以在<head></head>中寫的Javascript程序時,是無法訪問DOM對象的。
23.1 DOM包含：document[]文檔對象、image對象數組(images[])、form對象數組(forms[])、applet對象數組(applets[])、embed對象數組(embeds[])、
anchor對象數組(anchors[])、link對象數組(links[])、selection對象數組(selections[])。
23.2 DOM一般常用屬性
anchors[] 其元素代表文檔中出現的錨
applets[] 文檔中出的applet小程序;
bgColor文檔的背景色,字符串類型;
cookie 允許讀寫HTTP的cookie,字符串類型;
embeds[] 元素代表文檔中embed元素嵌入的數據;
forms[] 代表文檔出現的form元素;
images[] 代表文檔中出現的image元素。
lastModified 文檔最近修改時間,字符串類型,只讀。
linkColor 文檔中未訪問鏈接的顏色;
links[] 文檔中出現的超鏈接元素。
title 文檔標題,即title元素;
url 文檔的url,只讀;
vlinkColor 文檔已訪問鏈接的顏色。
24.JavaScript與HTML代碼分離編程,避免代碼混合編寫,利于維護。
為了保持HTML代碼的格式,使程序和HTML標簽及內容分離,
所以JavaScript提倡寫在頭部信息區。
而頭部無法載入body區元素,所以JavaScript無法訪問DOM。
25.事件與事件處理程序
事件觸發程序不寫入<script></script>中,而是寫入能觸發該事件的HTML標簽屬性中,JavaScript與HTML之間接口語法如下：
<HTML標簽 事件屬性="事件處理程序(一般為自定義函數)">

//this代表form對象,把form對象以參數形式傳遞給chk函數,chk則可引用form對象及內含的其他控件對象。
<form action="" method="post" οnsubmit="return chk(this);"></form>
26.HTML事件屬性對大小寫不敏感,大寫小寫都一樣；但JavaScript程序中使用事件需注意大小寫。
27.HTML元素常用事件的展示
事件名稱 意義
onblur 失去鍵盤焦點事件,適用于所有可視元素
onfocus 得到鍵盤焦點事件, 適用于所有可視元素
onchange 修改內容并失去焦點后觸發的事件,一般用于可視表單控件;
onclick 鼠標單擊事件
ondbclick 鼠標雙擊事件
onerror 腳本發生錯誤事件
onkeydown 鍵盤按鍵按下事件
onkeyup 鍵盤按下并松開時觸發的事件
onload 載入事件,一般用于body、frameset和image。
onunload 關閉或重置觸發事件,一般用于body、framset.
onmouseout 鼠標滑出事件
onmouseover 鼠標滑入事件
onmove 瀏覽器窗口移動事件
onresize 瀏覽器窗口改變大小事件
onsubmit 表單提交事件
onreset 表單重置事件,一般為reset被按下時觸發
onselect 選中了某個表單元素時觸發的事件
28.事件方法的使用
用代碼觸發事件
方法名稱 作用
click() 模擬單擊事件
blur() 鍵盤自動失去鍵盤輸入焦點
focus() 對象自動得到鍵盤輸入焦點
reset() 復位表單數據
submit() 提交表單,并不觸發onsubmit事件
select() 選中表單控件。
29.event對象
event代表事件的狀態,如觸發事件的元素、按下的鍵等。
event的有些屬性只對特定的事件有意義,如fromElement和toElement屬性只對onmouseover和onmouseout事件有意義.
不同的瀏覽器對event對象模型定義不同,屬性也有區別。


<<鋒利的jQuery>>
1.web2.0興起,JavaScript庫正在快速發展,早期的prototype、Dojo到2006年的jQuery，再到2007年的Ext JS,jQuery得到越來越多人的追捧。
2.一種新型的基于JavaScript的web技術--Ajax(Asynchronous JavaScript and XML,異步的JavaScript和XML)誕生了,Gmail、Google Map的應用。
3.YUI是Yahoo公司開發的一套完備的、擴展性良好的畗有交互網頁程序工具集。
4.MooTools是一套輕量級、簡潔、模塊化和面向對象的JavaScript框架。
5.jQuery是輕量級的庫,擁有強大的選擇器,出色的DOM操作，可靠的事件處理、完善的兼容性和鏈式操作、完善的Ajax等功能，開源免費的。
每個JavaScript庫都有各自的優點和缺點,同時也有各自的支持者和反對者。
6.基本選擇器：與css類似
選擇器 描述 返回 示例
#id id匹配一個元素 單個元素 $("#test")選取id為test的元素
.class 給定的類名匹配元素 集合元素 $(".test2")選取所有class為test2的元素
element 根據元素名匹配元素 集合元素 $("p")選取所有的<p>元素
* 匹配所有元素 集合元素 $("*")選取所有的元素
元素1-n 合并到的元素返回 集合元素 $("div,span,p.myClass")選取所有<div>,<span>和擁有class為myClass的<p>標簽的一組元素。
7.示例：
//改變id為one的元素的背景色
$("#one").css("background", "#bbffaa");
//改變class為mini的元素的背景色
$(".mini").css("background", "#bbffaa");
//改變元素名為div的元素的背景色
$("div").css("background", "#bbffaa");
//改變所有元素的背景色
$("*").css("background", "#bbffaa");
//改變所有的<span>元素和id為two的元素的背景色
$("span,#two").css("background", "#bbffaa");
8.層次選擇器：
選擇器 描述 返回 示例
$("ancestor descendant") 選擇ancestor元素里的所有descendant(后代)元素 集合元素 $("div span")選取<div>里所有的<span>元素
$("parent > child") 選取parent元素下的子元素 集合元素 $("div > span")選取<div>元素下元素名是<span>的子元素
$("prev + next") 選取緊接在prev元素后的next元素 集合元素 $(".one + div")選取class為one的下一個<div>元素
$("prev ~ siblings") 選取prev元素后的所有siblings元素 集合元素 $("#two~div")選取id為two的元素后面的所有<div>兄弟元素

//改變<body>內所有<div>的背景色
$("body div").css("background", "#bbffaa");
//改變<body>內子<div>元素的背景色
$("body > div").css("background", "#bbffaa");

9.過慮選擇器：基本過慮、內容過慮、可見過慮、屬性過慮、子元素過慮、表單對象屬性選擇器
9.1 基本過濾選擇器
選擇器 描述 返回 示例
:first 選取第1個元素 單個元素 $("div:first")選取所有<div>元素中第1個<div>元素
:last 選取最后一個元素 單個元素 $("div:last")選取所有<div>元素中最后一個<div>元素
:not(元素) 去除與給定的元素 集合元素 $("input:not(.myClass)")選取class不是myClass的<input>元素
:even 取索引是偶數的元素 集合元素 $("input:even")選取索引是偶數的<input>元素
:odd 奇數,索引從0開始 集合元素 $("input:odd")選取索引是奇數的<input>元素
:eq(index) 取索引=index的元素 單個元素 $("input:eq(1)")選取索引等于1的<input>元素
:gt(index) 取索引大于index的元素 集合元 $("input:gt(1)")選取索引大于1的<input>元素
:lt(index) 選取索引小于index 集合元素 $("input:lt(1)")選取索引小于1的<input>元素(小于1，不包括1)
:header 取所有標題元素 集合元素 $(":header")選取網頁中所有的<h1><h2>......<hn>
:animated 取正執行的動畫元素 集合元素 $("div:animated")選取正在執行動畫的<div>元素
9.2 內容過慮選擇器
選擇器 描述 返回 示例
:contains(text) 取含文本內容為text的元素 集合元素 $("div:contains('我')")取文本有我的div元素
:empty 取不含子元素或文本空元素 集合元素 $("div:empty")取不含子元素(包括文本元素)的<div>空元素
:has(selector) 取含有選擇器所匹配元素的元素 集元素 $("div:has(p)")取含有<p>元素的<div>元素
:parent 取含有子元素或文本的元素 集合元素 $("div:parent")取擁有子元素(包括文本元素)的<div>元素
9.3 可見性過慮選擇器
選擇器 描述 返回 示例
:hidden 取所有不可見的元素 集合元素 $(":hidden")取所有不可見的元素,包括<input type="hidden"><div style="display:none">
:visible 取所有可见的元素 集合元素 $("div:visible")选取所有可见的<div>元素。
$("div:visible").css("backgroud", "#FF6500");//改變所有隱藏的<div>元素的背景色
$("div:hidden").show(3000);//顯示隱藏的<div>

疑難問題解決方案：
1.Eclipse下jQuery文件報錯出現錯誤紅叉。
工程下的.project文件，此部分注釋掉:(就是不做檢查了)
<!--<buildCommand>
<name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
<arguments>
</arguments>
</buildCommand>-->

--
2015 上半年 JavaScript 使用统计数据
http://www.oschina.net/news/64648/javascript-usage-statistics-for-the-first-half-of-2015
jQuery、AngularJS、React
新興：Socket.IO、Parsely.js、GreenSock