總結目前為止JavaScript所學的知識點以及問題

標籤：刪除   浮動   藍色   關閉   arguments   pop   bsp   計時   文字   

目前為止JavaScript所學的知識點以及問題

第一章：

1.1 JavaScript的應用

1)  通過學習滑鼠的事件：onclick（點擊事件）、onmouseover（滑鼠放上）、onmouseout（滑鼠移走）來操作動畫特效。

2)   通過學習JS文法控制頁面元素CSS樣式。

1. JavaScript 能夠直接寫入 HTML 輸出資料流中。
2. JavaScript 能夠對事件作出反應。
3. JavaScript 能改變 HTML 元素的內容、樣式。

1.2 JavaScript的特點

1)       瞭解關於JavaScript的特點。比如

1. 解釋性：C語言為編譯性。
2. 基於對象：什麼是對象？
3. 事件驅動：onclick，onmouseover， onmouseout等。
4. 跨平台性：只跟瀏覽器有關。
5. 安全性：不允許訪問本地硬碟，不能對網路文檔進行修改和刪除。

1.3 初探JavaScript

1)   瞭解編寫JS流程。

1. 布局：HTML和CSS。
2. 樣式：修改頁面元素的樣式，div1的display樣式。
3. 事件：確定使用者做什麼操作。
4. 編寫JS：在事件中，用JS來修改頁面元素的樣式
5. 原理：響應使用者的操作，對頁面元素進行樣式修改

實列1：

 

 

分析：通過定義一個函數myFunction去改變HTML元素的內容。

問題1：為什麼x=document.getElementById（”demo”）中x的不用var 定義仍然能使用？解決：先定義更好~

實列2:

問題2：為什麼script寫進body裡仍然能生效？解決：寫哪裡都行，最好寫上面

第二章：

2.1 JavaScript的組成

由ECMAScript、BOM、DOM三部分組成

2.2變數類型、變數類型顯式、隱式轉換

運用閉包、變數範圍、變數類型、變數類型顯式、隱式轉換做例子

2.3運算子 %

實列1:

彩條旗（運算子 求模的應用）

 分析：利用window.onload=function()頁面載入出一個彩條旗，

利用迴圈，js控制元素顏色達到奇數列和偶數列不用顏色的效果。

2.4 Switch、break、continue、jason、真假

分析：Switch、break、continue與java中的運用一樣，可以聯想。

Jason是對象的意思; 通過迴圈，使jason這個數組達到單個連續輸出

實列2:

 

2.5可變參、提取非行間樣式、數組基礎

分析：

實列3:

　　1.可變參arguments

 通過定義一個函數sum，傳入數字1,2,3。利用arguments數組達到相加的結果 ，return出來的結果等於1+2+3=6

實列4：

 

　　A.參數個數不同，函數執行功能不同

 分析：定義一個gsstyle函數，在window..裡的視窗運用gsstyle（）傳入2個參數 “backgroundColor”“#f00”，function gsstyle（）具體操作（相當於backgroundColor.style=“#f00”）使body的div藍色變成紅色。

　　B.提取非行間樣式。getComputedStyle（chrome+ff）很多相容性問題可以解決。

實列5:

如，

 

CurrentStyle在IE裡它是對象，Google是underfinder，所以需要getComputedStyle來處理相容性問題。

 

1. 數組修改

定義一個數組 var arr=【1,2,3,4,5】

arr.push（9）；在數組最後加個數字9

arr.unshift(0)；在最前加個數字

arr.concat（brr）；實現2個數組的串連

arr.pop（）；刪除並返回數組的第一個元素

arr.sort()；對數組元素進行排序

如：

arr.splice（）；刪除元素，並向數組添加新的元素

toSourse把數組轉化為字串，並返回結果，

更多請自行百度哦。

第三章：

主要運用：定時器，動態定時器，qq

1)   對於定時器的操作，定時器有2個，

1. setInterval（函數名，時間），它具有間斷性，間斷的時間由使用者輸入的時間決定。(常用)

如：setInterval(show,1000);//1s

　　2.setTimeout（函數名，時間），它具有延遲性，

如可先定義var timer=setTimeout（）；這樣使用方便

　　3.清除定時器：clearIntervar(定時器名);

實列1:

 

分析：

通過定義2個按鈕input 屬性是button；控制著2個按鈕操作每隔3秒彈出提示框的操作。

點擊btn1時：oBtn1.onclick=function() 

  {oTimer=setInterval(function(){alert("a");},3000);

  };//單擊“start”按鈕，每隔3秒彈出提示框

點擊btn2時：oBtn2.onclick=function()  {

   clearInterval(oTimer);

  }//單擊“stop”按鈕，定時器關閉，不再彈出提示框

2)   動態定時器

 實列2：

 

 

效果：

 

 

分析:

1. Body中匯入6個數字
2. function toDbl(num){

  　　  if (num<10)return "0"+num;

 　　   else return ""+num;}

先做這個東西，為後面出現的時間數組做鋪墊，如果是個位元就在0在前面，“010203”的效果。

　　3.

　　　　a)   定義var aImage=document.getElementsByTagName("img");控制所有的圖片

　　　　b)   定義一個函數tick；構建出image標籤的src屬性的取值，從而確定出時分秒的每一位應該使用哪一張圖片

　　　　c)   var oDate=new Date();Date中國標準時間，使用前先new一下~

　　　　d)   var str=toDbl(oDate.getHours())+toDbl(oDate.getMinutes())+toDbl(oDate.getSeconds());擷取時分秒

　　　　e)   for(var i=0;i<aImage.length;i++)  {  aImage[i].src="image/"+str.charAt(i)+".jpg";} 為了相容，不試用str[i]. ，通過時間改變圖片

問題1：

定義var aImage=document.getElementsByTagName("img");控制所有的圖片時，該html就只有6個圖片

迴圈中i<aImage.length，就是i<6; str.charAt(i)是通過時間來擷取圖片，最大隻有5，如何擷取6以上的圖片呢？？？？

  解決：

此問題在於沒有正確理解str.charAt(i)的意思，

charAt(i)擷取第幾個數字，如“012759”,當i=0是，擷取第一個數位數值，通過str

f)   setInterval(tick, 1000);設定定時器，每隔一秒調用tick函數構建圖片的src屬性值

g)   tick();為了處理頁面載入的時6位時分秒全顯示0的問題，先調用

3)   qq

實列3：

分析：定義了2個div，

當滑鼠放上div1的時候div2出來

當滑鼠從div1移走的時候，div2延時消失

當滑鼠放上div2的時候，清除計時器，div2不消失

當滑鼠移走div2的時候，div2延時消失

第四章：

主要內容 offsetleft，滾動效果，簡易日曆，選項卡

1)   offsetleft：所有的左邊距

 

分析：this 代表 當前操作的對象

運用：setInterval(function(){  

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

oDiv.style.left=oDiv.offsetLeft+10+"px";},30);

通過改變它的左邊距+定時器可以實現滾動效果

2)   簡易日曆

實列1：

效果：

 

 

1. 通過body搭建出ul和12和li 定義一個總的div裝起所有，下面的文字一個用h2，一個用p
2. 在css裡設計樣式

a)   要用到浮動使li排列

b)   若下面的英文用p而不是直接用li裝，需要用到定義css p{ cursor:pointer} 意思是設定滑鼠伸出時p的樣式和上面h的文字樣式一樣

c)   若英文同p裝，不要寫p的定位，否則英文不出來

　　3.在js裡

a)   定義一個   var arr=[         ‘一月活動安排1‘*12，..  ]裝起所有的文字，讓他邊變色

b)   oTxt.innerHTML=‘<h2>‘+ (this.index+1)+‘月活動</h2><p>‘+arr[this.index]+‘</p>‘; 處理div裡內容的顯示;

innerHTML是一個字串，用來設定或擷取位於對象起始和接受的標籤的html；

c)   this.className=‘active‘;  將當前的li的CSS樣式處理為活動狀態，利用迴圈，點擊事件12個月份，初始化，活動等步驟實現簡曆日曆。

 

總結目前為止JavaScript所學的知識點以及問題