JavaScript 學習總結

第一章認識JavaScript

1，JavaScript是什麼

JavaScript是一種可以用來給網頁增加交互性的編程語言。

腳本語言(Scripting language)

包含在HTML頁面內部（通常放在<head>部分）

存儲在外部文件中<script src=“外部文件名”>

2，Java和Javascript區別

Java和Javascript的區別就像印度和印度尼西亞的區別，名字中有點相同的東西。

3，關於Ajax

Ajax（Asynchronous Javascript XML）異步JavaScript和XML：是一種創建交互式網頁應用的網頁開發技術。

包括技術

XHTML

CSS

使用JavaScript訪問DOM

XML

XMLHttpRequest

4，JavaScript與面向對象

對象、屬性和方法組合在一起：點號語法（的）

document.getElementById('div1').style.display

5，處理事件

事件(event)：用戶在訪問頁面時執行的操作。

例如：

當鼠標移入時，display屬性取值block；鼠標移出時dispay屬性取值爲none。

onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById ('div1').style.display='none';"

div和span：標識範圍

div：塊級元素，元素周圍自動換行

span：行內元素，前後不會換行

class和id選擇器區別

class樣式可以使用多次，id樣式只能使用一次，id選擇器的優先級大於類別選擇器

6，值和變量

typeof檢測變量類型

用法：alert(typeof a);

undefined類型：未定義；或者雖然定義了但未賦值。

什麼叫Object？

簡單解釋：不是基本類型，是複合類型。除了number（整數、實數），string，boolean，undefined，其他的都是Object。

注意：

JavaScript區分大小寫。

變量值： JavaScript弱類型。規範：一個變量應該只存放一種類型的數據。

==：先把兩邊的東西轉成一樣的類型，然後再比較（隱式類型轉換）

===：不轉換，直接比較

加法：字符串連接、數字加法。優先選擇第一種。

命名規範及必要性

可讀性——能看懂

規範性——符合規則（字母數字下劃線$，不能以數字開頭）

匈牙利命名法

類型前綴

首字母大寫

例如：alert(parseInt(n/60)+'分'+n%60+'秒'); parseInt將字符串轉換成整數

賦值：=、+=、-=、*=、/=、%=

關係：<、>、<=、>=、==、===、!=、!==

邏輯：&& 與、|| 或、! 否

運算符優先級：括號

7，結構，表現和行爲（這是核心）

結構、表現和行爲相分離

HTML（結構）：包含頁面的內容和結構

CSS（表現）：控制頁面的外觀和表現

JavaScript（行爲）：控制頁面的行爲

例子：

在頁面中使用CSS樣式表

單擊事件：onclick

onclick="document.getElementById('link1').href='css1.css';"

將行爲分離出來（把JS代碼放在標籤裏，放在行間，代碼可讀性差，修改起來工作量過大。）

window.onload=function(){

var oBtn1 = document.getElementById('btn1');

oBtn1.onclick=function(){

document.getElementById('link1').href='css1.css';

}

var oBtn2 = document.getElementById('btn2');

oBtn2.onclick=function(){

document.getElementById('link1').href='css2.css';

}

將JavaScript代碼寫在.js文件中

補充：

取值用value

alert(oTxt1.value+oTxt2.value);

關於NaN的手冊信息：NaN not a number

var a=parseInt('abc');

var b=parseInt('aaa');

alert(a==NaN); //false

alert(a==b); //false

處理：isNaN()函數

var a=parseInt('abc');

alert(isNaN(a)); //true

變量作用域（作用範圍）

局部變量：只在本函數內使用。

全局變量：不定義在任何一個函數裏，可以在任何地方使用（儘量不要使用全局變量）

什麼是閉包

子函數可以使用父函數中的局部變量

實例：隔行變色（aLi相當於數組，aLi.length是表示數組裏面有多少元素）

例子：

window. (){

var oUl=document.getElementById('ul1');

var aLi= oUl.getElementsByTagName('li');

var i=0;

for(i=0;i<aLi.length;i++){

if(i%2==0) { //0,2,4,6,8,10...

aLi[i].style.background='#CCC';

}

};

</script>

</head>?

<body>

</ul>

</body>

綜合總結如下：

js的組成:

ECMAScript

DOM：操作文檔（頁面）

BOM：操作窗口

關於變量：

var

typeof():number,string,boolean,object,undefined,null,function

關於運算：

隱式：==,-

顯式: parseInt/NaN

==/===

關於事件：

事件的處理不放在行間

window.onload=function(){...}

元素名.事件名 =function(){...}

獲取元素：

getElementById(元素的id名字)

getElementsByTagName("") 按標籤名字取-〉數組

數組.length

關於數組：

數組.sort()

字符串.split(解析分隔符)

數組.join(元素之間的連接符)

關於樣式：

style.display=block/none

style.background=顏色

複選框.checked=true/false

結構、表現、行爲相分離：

1、佈局---html

2、樣式---<link href="" > (.css)

<style>

</style>

3、js

文本轉換爲數字的方法

parseInt

parseFloat

原理：從最左側的字符開始，到第一個不是數字的字符爲止（即使文本中包含非數字，也可以轉化）

當不能轉化時，返回一個NaN

判斷NaN的方法: 使用isNaN()函數

第二章，程序流程控制，數組，函數

1，什麼是真、什麼是假：

真：true、非零數字、非空字符串、非空對象

假：false、數字零、空字符串、空對象、undefined

2，分支

switch

？：

3，循環

while

for

do-while

for…in：通常用來枚舉對象的屬性

例子：

window.onload=function(){

var oBtn = document.getElementById('btn');

var aInput=document.getElementsByTagName('input'); //通過標籤名獲取元素

oBtn.onclick=function(){

//alert(aInput.length);

for(var i=0; i<aInput.length; i++)

aInput[i].checked=true;

}

};

</script>

4，數組

數組的定義

使用Array關鍵字定義

例如：var arr=new Array();

var arr=new Array(1,2,3,4);

使用[]定義

例如：var arr=[1,2,3,4]

數組的屬性

數組的長度：length屬性

數組的方法

push：向數組尾部添加元素

pop：從數組尾部彈出一個數據

shift：從數組頭部刪除一個元素

unshift：向數組頭部添加一個元素

sort：排序

排序規則：字母序對字符串進行排序

比較函數

concat：連接兩個數組

split：解析字符串爲數組

join：輸出數組時元素之間的分隔符

例子：

數組的排序，從小到大排序

var arr=[96, 8, 12, 72, 33, 118];

arr.sort(function (num1, num2){

return num1-num2;

});

alert(arr);

</script>

5，函數

函數的返回值

沒有return/return ;：undefined

規則：令一個函數只返回一種類型的值

函數的參數

一般的參數：

參數類型

參數個數

arguments：參數數組，可變參，不定參

例子：

function show(){

alert(arguments[1]);

}

show(12, 5);

</script>

上面會顯示5，數組裏面的第2個元素

例子：

模擬“重載”的處理

function sum(){

var result=0;

var i=0;

for(i=0;i<arguments.length;i++){

result+=arguments[i];

}

alert(result);

}

sum(12, 5, 7, 8, 12, 5, 7, 8, 12, 5, 7, 8, 12, 5, 7, 8, 12, 5, 7, 8, 12, 5, 7, 8, 12, 5, 7, 8, 12);

</script>

6，CSS函數

css(‘background’)

css(‘background’,’red’);

第三章，DOM（Ducument Object Model）

1，獲取節點

getElementById

獲取子節點：childNodes

子節點的個數

操作子節點

例子：

window. (){

var oUl=document.getElementById('ul1');

oUl.childNodes[0].style.background=yellow';//ul的第一個子節點，也就是下面的li

}

2，檢測節點的類型

nodeType

元素節點：1

文本節點：3

屬性節點：2

例子：

window. () {

alert(document.body.childNodes[1].nodeType);

}

</script>

3，父節點parentNode

父節點只有一個

例子：隱藏父節點

window. (){

var aA=document.getElementsByTagName('a');

var i=0;

for(i=0;i<aA.length;i++) {

aA[i]. () {

this.parentNode.style.display='none';

}

this：指向調用該方法或屬性的對象。

4，offsetParent

獲取當前元素用於定位的父節點

5，子節點

firstChild，firstElementChild

lastChild, lastElementChild

例子：

window. (){

var oUl=document.getElementById('ul1');

//IE低版本

//oUl.firstChild.style.background='red';

//FF，IE11

//oUl.firstElementChild.style.background='red';

var oFirst=oUl.firstElementChild||oUl.firstChild;

oFirst.style.background='red';

}

6，DOM元素的查找

用id選擇元素

用tagName選擇元素

用className選擇元素

選出所有元素

利用if做篩選

封裝爲函數

function getByClass(oParent, sClass){

var aEle=oParent.getElementsByTagName('*');

var aResult=[]; //可能存在多個，放在數組中

var i=0;

for(i=0;i<aEle.length;i++) {

if(aEle[i].className==sClass){

aResult.push(aEle[i]);

}

return aResult;

}

window. (){

var oUl=document.getElementById('ul1');

var aBox=getByClass(oUl, 'box');

var i=0;

for(i=0;i<aBox.length;i++){

aBox[i].style.background='yellow';

}

7，創建、插入和刪除元素

創建DOM元素

createElement(標籤名) 創建一個節點

appendChild(節點)

追加一個節點

例子：爲ul插入li

window. (){

var oBtn=document.getElementById('btn1');

var oTxt=document.getElementById('txt1');

var oUl=document.getElementById('ul1');

oBtn. () {

var oLi=document.createElement('li');

oLi.innerHTML=oTxt.value;

oUl.appendChild(oLi);

}

InnerHTML是一個標籤內部的東西

這裏是標籤內部的東西，存儲在innerHTML中

</div>

插入元素

insertBefore(節點, 原有節點) 在已有元素前插入

例子：倒序插入li

window. (){

var oBtn=document.getElementById('btn1');

var oTxt=document.getElementById('txt1');

var oUl=document.getElementById('ul1');

oBtn. () {

var oLi=document.createElement('li');

var aLi=oUl.getElementsByTagName('li');

oLi.innerHTML=oTxt.value;

if(aLi.length==0){

oUl.appendChild(oLi);

}

else{

oUl.insertBefore(oLi, aLi[0]);

}

刪除DOM元素

removeChild(節點) 刪除一個節點

例子：刪除li

window. (){

var aA=document.getElementsByTagName('a');

var oUl=document.getElementById('ul1');

var i=0;

for(i=0;i<aA.length;i++) {

aA[i]. () {

oUl.removeChild(this.parentNode);

}

第四次課處理事件

1，在document上加事件

document. (){

alert('a');

}

2，從event對象獲取點擊座標（考慮到不同瀏覽器的兼容性問題）

document.onclick=function(ev){

if(ev){

alert(ev.clientX+","+ev.clientY);

}else{

alert(event.clientX+","+event.clientY);

}

3，或運算

非0---true 0/null/false

12 || false 12

0 || ’abc’ ‘abc’

‘’ || true true

12 || 0 12

12 || null 12

null || ’abc’ ‘abc’

‘abc’ || 12 ‘abc’

利用或運算處理瀏覽器兼容性

document. (ev){

var oEvent=ev||event; //將特殊的放在前面

alert(oEvent.clientX+', '+oEvent.clientY);

};

4，事件流

事件像冒泡一樣從DOM層次結構的底層往上一級級升

事件處理：避免事件冒泡帶來的干擾

window. (){

var oBtn=document.getElementById('btn1');

var oDiv=document.getElementById('div1');

oBtn. (ev){

var oEvent=ev||event;

oDiv.style.display='block';

oEvent.cancelBubble=true; //阻止冒泡

};

document. (){

oDiv.style.display='none';

};

5，鼠標事件

鼠標位置

document. (ev)

{

var oEvent=ev||event;

var oDiv=document.getElementById('div1');

oDiv.style.left=oEvent.clientX+'px' ;

oDiv.style.top=oEvent.clientY+'px' ;

};

滾動位置

鼠標跟隨改進：

document. (ev){

var oEvent=ev||event;

var oDiv=document.getElementById('div1');

var scrollTop =document.documentElement.scrollTop || document.body.scrollTop;

var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;

oDiv.style.left=oEvent.clientX+scrollLeft+‘px’ ; //橫向滾動處理

oDiv.style.top=oEvent.clientY+ scrollTop +‘px’ ; //縱向滾動處理

};

6，鍵盤事件

對比鼠標事件：onclick=onmousedown+onmouseup

鍵盤事件：onpress= onkeydown+onkeyup

鍵值keycode

document.onkeydown=function (ev){

var oEvent=ev||event;

alert(oEvent.keyCode);

}

offsetWidth: div的寬度

border:1px; +

padding(內邊距):10px +

margin(外邊距):20px -

offsetLeft：div的左邊距

offsetTop

offsetRight

鍵盤控制移動：上下左右移動

document.onkeydown=function (ev){

var oEvent=ev||event;

var oDiv=document.getElementById('div1');

if(oEvent.keyCode==37){//左

oDiv.style.left=oDiv.offsetLeft-10+'px';

}else if(oEvent.keyCode==39) {

oDiv.style.left=oDiv.offsetLeft+10+'px';

}else if(oEvent.keyCode==38) {

oDiv.style.left=oDiv.offsetTop-10+'px';

}else if(oEvent.keyCode==40) {

oDiv.style.left=oDiv.offsetTop+10+'px';

}

};

使用鼠標點擊留言:

window. (){

var oBtn=document.getElementById('btn1');

var oTxt1=document.getElementById('txt1');

var oTxt2=document.getElementById('txt2');

oBtn. () {

oTxt1.value+=oTxt2.value+'\n';

oTxt2.value='';

};

Enter鍵留言：

window. (){

……

oTxt2.onkeydown=function (ev){ //注意加事件的對象

var oEvent=ev||event;

if( oEvent.keyCode==13){

oTxt1.value+=oTxt2.value+'\n';

oTxt2.value='';

}

};

ctrl+enter提交：

window. (){

……

oTxt2.onkeydown=function (ev){ //注意加事件的對象

var oEvent=ev||event;

if( oEvent.ctrlKey && oEvent.keyCode==13){

oTxt1.value+=oTxt2.value+'\n';

oTxt2.value='';

}

};

7，默認行爲

什麼是默認行爲？

不需要自己編寫，瀏覽器自己即具備的功能。

右鍵打開快捷菜單（oncontextmenu事件（上下文菜單）：右鍵菜單）

文本框輸入

表單提交

阻止默認行爲的一般的寫法：return false

彈出自定義右鍵菜單：

document.oncontextmenu=function (ev){

var oEvent=ev||event;

var oUl=document.getElementById('ul1');

var scrollTop =document.documentElement.scrollTop || document.body.scrollTop;

var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;

oUl.style.display='block';

oUl.style.left= oEvent.clientX+scrollLeft+‘px’ ;;

oUl.style.top= oEvent.clientY+ scrollTop +‘px;

return false; //阻止系統右鍵菜單

};

彈出自定義右鍵菜單：

document. (){

var oUl=document.getElementById('ul1');

oUl.style.display='none';

};

8，拖拽

存儲距離

onmousemove：根據距離計算DIV最新位置

window. ()

{

var oDiv=document.getElementById('div1');

var disX=0;

var disY=0;

oDiv. (ev)

{

var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;

disY=oEvent.clientY-oDiv.offsetTop;

document. (ev)//放在onmousedown事件下，防止鼠標移出去

{

var oEvent=ev||event;

var l=oEvent.clientX-disX;

var t=oEvent.clientY-disY;

if(l<0)

{

l=0;

}

else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)

{

l=document.documentElement.clientWidth-oDiv.offsetWidth;

}

if(t<0)

{

t=0;

}

else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)

{

t=document.documentElement.clientHeight-oDiv.offsetHeight;

}

oDiv.style.left=l+'px';

oDiv.style.top=t+'px';

};

document. ()

{

document.onmousemove=null;

document.onmouseup=null;

};

return false;

};

</script>

最後總結：

1、事件對象--注意兼容性

function(ev)

var oEvent = ev ||event;

2、事件流

父節點，子節點相同事件

oEvent.cancelBubble=true; 阻止事件冒泡

3、鼠標事件

鼠標點擊位置：

oEvent.clientX 鼠標距可視區的左邊距

oEvent.clientY 鼠標距可視區的上邊距

帶滾動條的滾動位置（注意兼容性）：

var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

div定位： oDiv.style.left= scrollLeft+oEvent.clientX +'px';

oDiv.style.top = scrollTop+oEvent.clientY +'px';

4、鍵盤事件

oEvent.keyCode

取值：測試

常用取值：13--回車

第5次課 BOM

1，打開窗口

window.open(頁面地址, 打開方式);

打開方式：在哪個框架中打開？

_blank:新窗口，默認

_self：當前窗口

例子：

oBtn. (){

window.open(‘ www.126.com/', '_self');

};

運行代碼：

document.write()：向頁面輸出內容

舉例：document.write(‘aaa’);

運行並查看頁面源代碼

window. (){

var oTxt=document.getElementById('txt1');

var oBtn=document.getElementById('btn1');

oBtn. () {

var oNewWin=window.open('about:blank');

oNewWin.document.write(oTxt.value);

};

<body>

</body>

2，關閉窗口

window.close()

window. (){

var oBtn=document.getElementById('btn1');

oBtn. () {

window.close();

};

<body>

</body>

3，常用屬性

window.navigator.userAgent：瀏覽器版本號

window.location：當前頁面地址

讀

alert(window.location);

寫

window.location='http://www.126.com/'

4，系統對話

var b = confirm('今天下雨了嗎？');

alert(b);

var str = prompt('請輸入你的姓名', ‘song');

alert(str);

5，尺寸及座標

可視區尺寸

document.documentElement.clientWidth

document.documentElement.clientHeight

滾動距離

document.body.scrollTop

document.documentElement.scrollTop

側邊欄例子：

window.onscroll=function (){

var oDiv=document.getElementById('div1');

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;

oDiv.style.top=scrollTop+t+'px';

};

<style>

#div1 {width:100px; height:100px; background:red; position:absolute; right:0;}

</style>

需要解決的問題

頁面剛加載

頁面大小改變

window.onresize=window.onload=……接上面，這樣無論怎樣都可以居中右靠

JavaScript 學習總結

孔子問道於老子

明儒學案學習筆記

2023MBA面試總論筆記

邏輯公開課筆記

CAN總線調試步驟

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結