javascript
JavaWeb基础—JS学习小结
JavaScript是一種運行在瀏覽器中的解釋型的編程語言
推薦：菜鳥教程
一、簡介
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 標準
二、與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 頁面將被覆蓋：
三、基本語法(注釋同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對象：
?
一、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()：取子字符串
二、Array對象，創建方法見初識JS
屬性和方法：length屬性 如arr.length
方法：concat()方法：連接數組，返回一個新合成的數組
join()方法：使用指定連接符，返回元素連接而成的字符串
push()方法：向數組末尾添加新元素，并且返回新的數組長度，若加的是數組，
新返回的長度仍是原長度加1，加入的視為一個元素！
pop()方法：刪除最后一個元素并返回該元素
reverse()方法：顛倒數組元素順序（改變原數組）
三、Date對象,創建 var date=new Date();類同java
方法：toLocaleString()方法：格式化方法
得到年，推薦getFullYear()方法
得到月，使用getMonth()方法,注意返回范圍0-11
得到星期，使用getDay()方法，返回0-6，從周日開始
得到日，使用getDate()方法，范圍1-31，正常
得到小時，getHours()方法，分秒同理
getTimes()方法：返回1970年1月1日至今的毫秒數
應用場景：使用毫秒數來處理緩存
四、Math對象，類似java也是靜態方法，通過類名來調用，如Math.ceil(100.2);
方法：Math.ceil()方法：向上取整
Math.floor()方法：向下取整
Math.round()方法：四舍五入
Math.random()方法：得到隨機數，同java，0.0到1.0之間的偽隨機數
五、全局函數，由于全局函數不屬于任何一個對象，直接寫函數名使用
方法：eval();執行js代碼 ，var str = "alert("1122")"";eval(str);
encodeURI:對字符編碼，encodeURI(str);返回編碼值
decodeURI:對字符解碼，為上述逆序
isNaN();判斷當前字符串是否是數字，是數字返回false,NaN表示不是數字
parseInt();類型轉換，類同java，字符串轉數字
六、JS的重載
注意java中重載：名稱相同，參數可辨
重寫：子類父類相同方法名稱與參數的不同實現
?
JS不存在重載！但可以通過其他方法模擬實現重載。【然而并沒有什么卵用，僅面試答答】
arguements數組，保存傳遞的參數，就通過這個數組來實現
function add(){//此處不傳參數，函數內判斷
if(arguements.length==2){
return arguements[0]+arguements[1];
}else if(...){
...
}
...
七、JS的BOM對象（瀏覽器對象）
對象：navigator:獲取瀏覽器的信息(客戶機）如navigator.appName等（注意是屬性。
對象包含有關訪問者瀏覽器的信息。具有誤導性
srceen:屏幕信息，如srceen.width
location:(重點看href屬性）href,設置或返回當前請求的url地址（HTML中的button的事件綁定
<input type="button" value="點擊跳轉" οnclick="js代碼方法等"/>
location.href="".
history:請求的url的歷史記錄
<input type="button" value="back" οnclick="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的返回值，清除此值實現
八、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））
九、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下
十、元素對象，element對象：要操作必須要獲取到(get...)了解。
方法：getAttribute();得到屬性的值。input1.getAttribute("value");
setAttribute(name,value)；設置相應屬性的值IE緩存的清理。
removeAttribute();刪除屬性，但不能刪value！
屬性：childNode: 獲取子標簽，返回集合（對象數組） ul.childNode
兼容性差
【重點】方法：在ul下執行ul1.getElementsByTagName();獲取子標簽的唯一有效方法，
document里的方法特殊用法
?
十一、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，
?
十二、 操作DOM樹：
先document.createElement("p");
var node=document.createTextNode("這是新段落。")
para.appendChild(node);
創建了一個帶文本的p標簽，后面可以再使用相似方法操作
?
appendChild()方法：實現剪切粘貼的效果。注意是剪切效果！
insertBefore(newNode,oldNode)方法：在舊結點之前實現插入新結點，通過old結點的父節點進行添加，畢竟不能自己添加自己
！不存在insertAfter方法
removeChild()：方法，通過父節點進行刪除操作，自己也不能刪除自己
基本步驟：獲取要刪除的結點、獲取父節點。進行刪除操作
replaceChild()；方法，類同上刪除操作。獲得要替換的舊結點，創建要替換的新結點，
獲取父節點，進行替換。
cloneNode(boolean)復制結點，bool表示是否復制。一般是true，東西理解為放在剪切板
操作的是剪切板的內容（操作副本），原內容還在。
?
十三、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" οnclick="myFunction()">Test Input</button>
<p id="mess"></p>
?
轉載于:https://www.cnblogs.com/jiangbei/p/6679823.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的JavaWeb基础—JS学习小结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： tengine负载均衡高可用配置
- 下一篇： 事物笔记