JavaWeb基礎—JS學習小結

JavaScript是一種運行在瀏覽器中的解釋型的編程語言

推薦：菜鳥教程
1、簡介
js:javascript是基於對象【哪些基本對象呢】和和事件驅動【哪些主要事件呢】的語言，應用在客戶端（注意與面向對象的區分）

js的三大特色：
　　交互性：信息的動態交互
　　安全性：不能訪問本地磁盤的文件
　　跨平臺性：能支持js的瀏覽器都能運行

JavaScript 對大小寫敏感
與java的區別：（只是長得像而已，雷鋒&雷峯塔）
　　 1.不一樣公司開發的語言，java:Oracl js:網景公司
　　2.java:面向對象 js：基於對象（已經有不少存在能夠直接使用的對象）
　　3.java：強類型語言 js:弱類型語言
　　4.java:須要先編譯再運行 js:不須要

js的組成：
　　ECMAScript
　　　　ECMA:歐洲計算機組織 基本語法
　　BOM
　　　　Broswer Object Model 瀏覽器對象模型
　　DOM
　　　　Document Object Model 文檔對象模型
　　　　用以訪問 HTML 元素的正式 W3C 標準

2、與HTML兩種結合方式(建議放在</body>後）
　　1.使用script標籤 <script type="text/javascript"> js代碼 </script>
  　　那些老舊的實例可能會在 <script> 標籤中使用 type="text/javascript"。
  　　如今已經沒必要這樣作了。JavaScript 是全部現代瀏覽器以及 HTML5 中的默認腳本語言。
　　2.使用script標籤，引入外部js文件 <script type="text/javascript" src="js文件路徑">【此處應爲空】</script>
  　　提示：外部腳本不能包含 <script> 標籤。

 　　請使用 document.write() 僅僅向文檔輸出寫內容。
 　　若是在文檔已完成加載後執行 document.write，整個 HTML 頁面將被覆蓋：

3、基本語法(註釋同java）
1.原始類型和變量聲明：
　　五個數據類型：【string——詳細方法，參見菜鳥教程。 number boolean】 null undifined
　　JavaScript 變量有不少種類型，可是如今，咱們只關注數字和字符串
　　極大或極小的數字能夠經過科學（指數）計數法來書寫：

　　使用var進行變量定義，使用typeof(變量名);查看當前變量類型
　　var data=new Data(); 拿到對象引用,null表示引用爲空，父類都爲Object

　　類型轉換可使用對應的方法：String(x),Number(x)
2.js的語句：
　　if判斷語句（同java）
　　switch語句，弱類型，都支持 switch(){
　　case:
　　break;
　　case:
　　break;
　　}
　　循環語句 for while do{}while 相似java
3.js的運算符：
　　與java不一樣的，因爲是弱類型，var i=1;1/10*10=1（不是java的0）
　　字符串+同java的拼接 相減時會真正執行（非數字報錯NaN）- var str="2" str-1=1;
　　boolean類型也能夠進行加減運算，true爲1 false爲0
　　== ：等於，只判斷值，與類型無關
　　=== ：全等，檢測值和類型
　　向頁面輸出：document.write();輸出值或者HTML代碼 ("aaa") ("<hr/>") 對應99乘法表案例
4.js的數組：
　　弱類型，存取數據無類型要求
　　表示方法： var arr=[1,"aa",true];
　　使用內置對象Array var arr1=new Array(5),長度爲5； 取同java arr1[0]=1;
　　var arr2=new Array（3,4,5）;爲具體元素
　　長度屬性:length 如arr.length
5.js的函數：【寫完方法記得調用，注意單雙引號和分號的使用】
　　定義方式：使用function關鍵字：function 函數名（參數列表）{} 返回值可選
　　調用方法：函數名（參數列表）；參數列表不帶類型
　　弱類型語言，無需類型
　　function add(a,b){ var sum=a+b; alert(sum);}
　　add(2,3);
　　匿名函數：function(){} 調用 var add3=function(){} add3(5,6);
　　與上一種相似
　　動態函數：【做了解】使用內置對象Function new Function("參數列表","方法體和返回值");
　　使用方式同上，參數列表 方法體能夠提出來寫
6.js的全局變量和局部變量
　　全局變量：在一個script中定義一個變量，全局js頁面中均可以使用。（其它的script也能夠）
　　**IE中調試工具，按F12

7.script標籤的放置的位置：
　　理論上是全局均可以（包括HTML標籤後）
　　原則：放在</body>後面，因爲HTML是由上到下解析，能夠保證獲取到HTML中的值等。
8.js的重載：

　　js中是不支持重載的，緣由是js中識別函數的惟一方法就是函數的函數名

　　如想模擬java的重載，能夠經過函數體中隊參數的判斷進行模擬
9. JavaScript 對象
　　對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔：
　　var person={firstname:"Bill", lastname:"Gates", id:5566};
　　固然也能夠new一個本身的 var person = new Object();
　　當您像這樣聲明一個 JavaScript 變量時：
　　var txt = "Hello";
　　您實際上已經建立了一個 JavaScript 字符串對象。字符串對象擁有內建的屬性 length。
　　對於上面的字符串來講，length 的值是 5。字符串對象同時擁有若干個內建的方法

JS對象：

 

1、string對象，相似於java兩種建立方式（棧中或者堆中）HTML不區分大小寫，JS區分
　　屬性和方法：length屬性 如 str.length
　　方法：1.與HTML相關的方法：
　　bold()方法：加粗。 如str.bold();
　　fontcolor()方法：字體顏色。如str.fontcolor("red");
　　fontsize()方法：字體大小。如str.fontsize(2);
　　link()方法：字符串顯示爲鏈接。如str.link("連接地址");str爲連接顯示內容
　　sub()與sup()方法：設置上標與下標
　　　　2.與java類似的方法：
　　concat()方法：鏈接字符串。如str.concat("a");
　　charAt()方法：返回指定位置字符 str.charAt(2);超出爲空（非null)
　　indexOf()方法：返回位置，沒有返回-1；
　　split()方法：將字符串切分爲字符數組（從分隔符處分割爲數組元素
　　replace方法：替換，如str.replace("原始值"，"新值");
　　substr()與substring()：取子字符串
2、Array對象，建立方法見初識JS
　　屬性和方法：length屬性 如arr.length
　　方法：concat()方法：鏈接數組，返回一個新合成的數組
　　join()方法：使用指定鏈接符，返回元素鏈接而成的字符串
　　push()方法：向數組末尾添加新元素，而且返回新的數組長度，若加的是數組，
　　新返回的長度還是原長度加1，加入的視爲一個元素！
　　pop()方法：刪除最後一個元素並返回該元素
　　reverse()方法：顛倒數組元素順序（改變原數組）
3、Date對象,建立 var date=new Date();類同java
　　方法：toLocaleString()方法：格式化方法
　　獲得年，推薦getFullYear()方法
　　獲得月，使用getMonth()方法,注意返回範圍0-11
　　獲得星期，使用getDay()方法，返回0-6，從週日開始
　　獲得日，使用getDate()方法，範圍1-31，正常
　　獲得小時，getHours()方法，分秒同理
　　getTimes()方法：返回1970年1月1日至今的毫秒數
　　應用場景：使用毫秒數來處理緩存
4、Math對象，相似java也是靜態方法，經過類名來調用，如Math.ceil(100.2);
　　方法：Math.ceil()方法：向上取整
　　Math.floor()方法：向下取整
　　Math.round()方法：四捨五入
　　Math.random()方法：獲得隨機數，同java，0.0到1.0之間的僞隨機數
5、全局函數，因爲全局函數不屬於任何一個對象，直接寫函數名使用
　　方法：eval();執行js代碼 ，var str = "alert("1122")"";eval(str);
　　encodeURI:對字符編碼，encodeURI(str);返回編碼值
　　decodeURI:對字符解碼，爲上述逆序
　　isNaN();判斷當前字符串是不是數字，是數字返回false,NaN表示不是數字
　　parseInt();類型轉換，類同java，字符串轉數字
6、JS的重載
　　注意java中重載：名稱相同，參數可辨
　　重寫：子類父類相同方法名稱與參數的不一樣實現

 

　　JS不存在重載！但能夠經過其餘方法模擬實現重載。【然而並無什麼卵用，僅面試答答】
　　arguements數組，保存傳遞的參數，就經過這個數組來實現
　　function add(){//此處不傳參數，函數內判斷
　　if(arguements.length==2){
　　return arguements[0]+arguements[1];
　　}else if(...){
　　...
　　}

　　...
　　
7、JS的BOM對象（瀏覽器對象）
　　對象：navigator:獲取瀏覽器的信息(客戶機）如navigator.appName等（注意是屬性。
　　對象包含有關訪問者瀏覽器的信息。具備誤導性
　　srceen:屏幕信息，如srceen.width
　　location:(重點看href屬性）href,設置或返回當前請求的url地址（HTML中的button的事件綁定
　　<input type="button" value="點擊跳轉" onclick="js代碼方法等"/>
　　location.href="".
　　history:請求的url的歷史記錄
　　<input type="button" value="back" onclick="back()"/>
　　function back(){history.back();}其它同理,history.forward();
　　還能夠history.go(-1或1實現)
　　【重點】window:窗口的頂層對象（包含上述四個）
　　方法：(window.alert();等爲完整代碼，可省略，依次類推
　　alert();警告框頁面彈窗，顯示內容
　　confirm()；確認提示框，會返回一個肯定與否的boolean值
　　根據返回值作相關操做，if（）
　　prompt();輸入的對話框【瞭解】，兩個參數，提示信息與默認值
　　close();是否關閉的方法（兼容性差）

 

　　作定時器使用的方法：
　　setInterval();兩個參數，JS代碼與毫秒數（1：1000）
　　如：setInterval("f1();",1000)
　　setTimeout();相同參數，倒計時後執行代碼，單次執行
　　======================================
　　clearInterval(); 清除setInterval定時器
　　clearTimeout(); 同上，須要傳的參數爲set的返回值，清除此值實現
8、JS的DOM對象：getElementById()獲取，操做使用innerHTML 以及直接.屬性名操做
　　改變樣式：document.getElementById("p2").style.color="blue";

 

　　文檔對象模型，document爲超文本文檔，使用這些屬性方法對超文本文檔操做
　　也就是第一步須要將這些文檔封裝成對象，而且解析這些超文本文檔（如HTML)
　　分配一個 樹形 結構（層級結構）進行解析。好比說span裏的id屬性也會封裝成對象
　　對象：
　　document對象:整個HTML文檔
　　element對象：元素對象，標籤對象
　　屬性對象
　　文本對象
　　Node對象：即上述對象的父對象（樹中結點對象），子對象中找不到
　　想找的方法時。找父對象。

 

　　DHTML：動態HTML，多項技術的合稱（html,css,dom,js（此時強調的是ECMAScript））
9、document對象
　　方法：（注意須要調用的格式 ，如document.write())
　　write();向頁面輸出文本及html代碼等
　　getElementById();經過ID獲得元素，
　　如<input type="text" id="tex" name="name1" value(默認值)="aa"/> var input1 =document.getElementById(); //獲得的是對象 alert(input1.value);
　　getElementsByName();經過NAME獲得一個集合（理解爲對象數組）
　　如同上述有四個同name的輸入項 var inputs =document.getElementsByName();
　　經常使用的遍歷，for(var i=0;i<inputs.length;i++)
　　getElementsByTagName();經過標籤名字獲得
　　如var inputs=document.getElementsByTagName("input");

 

　　windou彈窗案例：見案例
　　注意問題，案例中訪問的是本地文件，因爲JS的安全機制，瀏覽器不生效，固然此狀況
　　僅限於此案例，實際開發不會如此操做
　　在末尾添加結點案例：見案例
　　基本思路是建立節點，進行添加。基本步驟：
　　1.獲取ul標籤
　　2.建立li標籤
　　3.建立文本
　　4.將文本添加到li下
　　5.將li添加到ul下
10、元素對象，element對象：要操做必需要獲取到(get...)瞭解。
　　方法：getAttribute();獲得屬性的值。input1.getAttribute("value");
　　setAttribute(name,value)；設置相應屬性的值IE緩存的清理。
　　removeAttribute();刪除屬性，但不能刪value！
　　屬性：childNode: 獲取子標籤，返回集合（對象數組） ul.childNode
　　兼容性差
　　【重點】方法：在ul下執行ul1.getElementsByTagName();獲取子標籤的惟一有效方法，
　　document裏的方法特殊用法

 

11、Node對象
　　屬性一：nodeName;
　　　　　　nodeType;
　　　　　　nodeVlaue;
　　使用DOM解析HTML的時候，HTML裏面的標籤 屬性 文本都封裝成對象
　　標籤可使用三個屬性，例如id屬性也可使用三個屬性，var id1 = span1.getAttribute();
　　標籤 屬性 文本
　　　　nodeType 1 2 3
　　　　nodeName 大寫（SPAN等） 屬性名稱 如#text
　　　　nodeValue null 屬性的值 文本的值
　　　　!經常使用的爲nodeType（從外到內）

 

　　屬性二：父節點，子節點，同輩節點：層級結構，類同數據結構
　　parentNode,childNodes(兼容性差）firstChild lastChild，

 

12、 操做DOM樹：
　　先document.createElement("p");
　　var node=document.createTextNode("這是新段落。")
　　para.appendChild(node);
　　建立了一個帶文本的p標籤，後面能夠再使用類似方法操做

 

　　appendChild()方法：實現剪切粘貼的效果。注意是剪切效果！
　　insertBefore(newNode,oldNode)方法：在舊結點以前實現插入新結點，經過old結點的父節點進行添加，畢竟不能本身添加本身
　　！不存在insertAfter方法
　　removeChild()：方法，經過父節點進行刪除操做，本身也不能刪除本身
　　基本步驟：獲取要刪除的結點、獲取父節點。進行刪除操做
　　replaceChild()；方法，類同上刪除操做。得到要替換的舊結點，建立要替換的新結點，
　　獲取父節點，進行替換。
　　cloneNode(boolean)複製結點，bool表示是否複製。通常是true，東西理解爲放在剪切板
　　操做的是剪切板的內容（操做副本），原內容還在。

 

十3、innerHTML屬性：非DOM組成部分，主流瀏覽器均兼容,【用的多】
　　主要做用：獲取文本內容 如span1.innerHTML注意是屬性
　　向標籤裏設置內容（能夠是html代碼）如div11.innerHTML = "";
　　var tab = "<table></table>";注意外面雙引號，裏面單引號。
　　案例：動態顯示時間：見案例。
　　全選練習：見案例。checked=true表示選中
　　下拉列表左右選擇案例：見案例。
　　select中multiple="multiple"屬性實現顯示全部下拉選擇
　　selected="true"表示選中
　　省市聯動案例：見案例。select的onchange方法；注意循環的長度，讓i回來以便取完。
　　動態生成表格案例：見案例。

一些事件：

 

 js事件，待更新。。。

 

 

 

實例
本例檢測輸入變量的值。若是值是錯誤的，會拋出一個異常（錯誤）。
catch 會捕捉到這個錯誤，並顯示一段自定義的錯誤消息：
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>

 

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>