023.JavaScript基礎綜合

標籤：下拉   變數   基本文法   指定   cli   文檔載入   操作   必須掌握   轉換   

JAVASCRIPT:
-------------------------------------------------------Day01-------------------------------------------
1.概念:
動態網站:網站的[動態功能]的開發技術
where:瀏覽器(用戶端)
how:用戶端動態功能的開發(用戶端的表單驗證,特效,用戶端的計算...)
what:
指令碼語言:能嵌套在其他語言中執行的語言
解釋執行:按照程式順序逐行的解釋執行代碼,不需要編譯.
C#:編譯(2次)執行
事件驅動:事件激發執行指定js代碼
基於對象:具備物件導向的特徵(封裝,繼承)內建了很多個物件,可以簡化程式開發.
2.基本文法:

注意:

1js應用方式.
1)行內嵌入.(代碼量少)
2)頁面內部.(網頁內)
3)外部JS檔案(重用,多個網頁都可以引用,實現代碼與html的分離)建議使用!

2js的簡單調試.
3js是依賴於瀏覽器的,如果瀏覽器禁用javajs指令碼那麼功能就不會執行.
不同瀏覽器或者同一瀏覽器的不同版本,對於js的支援差異是不同的.

用於測試的瀏覽器:IE,FF(最標準),GOOGLE CHROME,蘋果Safary

類型:
1.基礎資料型別 (Elementary Data Type)
Number:數(整數,小數)同一64位
String:文本(單字元,字串)unicode 編碼(雙位元組的編碼格式)"",‘‘
Boolean:布爾 true(1),false(0),非0即真,0就是假
2.類型轉換
自動類型轉換:
string+Number ==> Number會自動轉成String
String+Boolean ==> Boolean會自動轉換成String
Boolean+Number ==> Boolean會自動轉換成Number(true--1,false--0)
強制轉換:
ParseInt() 字串-->整型
ParseFloat() 字串-->小數型
if(!isNaN(a)) isNaN(a) 為true代表a不是一個數
eval("") 將字串轉換為運算式,並且自動計算.
(JSON運算式) 用戶端的計算,必須得是運算式
特殊類型:
null: 沒有指向任何對象.
undefined: 未定義
1) 聲明變數但是沒有賦值
2) 對象的屬性不存在

變數
弱類型(var:可變類型變數)
var nam1,name2
var可以省略,建議var還是要寫
注意:1.function(參數)參數不需要寫var
2.如果var是全域變數,那麼var必須要寫,不能省略(動態時鐘時示範)

運算子
算數運算子:+,-,*,/,%,++,--
比較子:>,<,>,+=,<=,==,!=,===,!==
== (忽略了類型相等,底層做了類型轉換)
=== (嚴格相等)
邏輯運算子:&&(短路與),&,||(短路或),|,!
f1(true) f2(false)
f2()&&f1() 短路與,當第一個運算式為false時,&&後面的運算式被短路,不被執行.
f2&f1() 與 無論如何兩個表達都被執行
true||(?無論真假都會被短路)
false||(運算式會被執行不會被短路.)
true|f2(),兩個運算式都會被執行.

控制語句(與C#類似):
1.實現一個等腰三角形 2.從大到小輸出6個hello
document.write("<hr/>");
if
while
for

函數:
function 函數 (目前:可以把function看成是一個方法(更深入的在後面自訂對象中去學習))

文法:
function name(參數1,參數2...)
{
return val//傳回值
//當方法沒有傳回值時,不用寫return,系統預設返回true.
}

---------------------------------------------------------Day02-----------------------------------------
JS的對象(一切皆對象)

對象封裝:方法,屬性
執行個體化對象: var obj=new 對象();
調用方法 :obj.方法(val),obj屬性
當前對象 :this
對象集合 :objes[index]通過索引下標訪問對象元素

1.
內建對象(系統定義)應用
類型對象:String,Number,Boolean
功能對象:Date,Math
進階對象:Object(所有對象的父物件),Function,Array

重點:String,Math,Array,Date,Function
1)Function 對象:建立函數的第二種方法
執行個體化:var obj函數名=new Function("參數1","參數2","...","函數體;函數體;");
2)String
常用方法:subStr(截取子字串),replace(替換),split(拆分),charAt(返回指定位置的字元),indexOf(查詢字元索引下標),lastIndexOf(從後往前查字元索引下標)
3)Math
常用方法:round(四捨五入取整),ceil(向上取整),floor(向下取整),abs(絕對值),sqrt(開根號),pow(次方,次冪),max(最大),min(最小),radom(隨機數)
4)Date 日期對象
執行個體化:
new Date();當前系統時間
new Date(‘1983-07-09‘);指定時間

常用方法:
set***()設定時間
get***()擷取時間
5)Array對象(數組對象)
特點:js:可以類型不一致,長度可變.(集合)
常用方法:sort(排序);push(添加);join();
基本文法:

1.聲明,賦值的方式
//1.
// var num1 = new Array();
// num1[0] = "a";
// num[1] = 2;
// num1[3] = false;
// alert(num1[2]);

//2.初始的數組長度
// var numArr = new Array(3);
// numArr[0] = "aa";
// numArr[1] = "bb";
// alert(numArr.length);

//3.聲明並初始化
// var numArr = new Array(1, 2, 3, 4, 5);
// alert(numArr[4]);

//4.不需要執行個體化的
var numArr = ["張清瑞", "", "男", "八組", true, "so happy!!!!"];
alert(numArr);

//遍曆數組元素
var nums = new Array(4);
nums[0] = 12;
nums[2] = 123;
nums[4] = 11;
nums[5] = 17;
//for 輸出數組的所有元素,包括undefined的資料(原生for,支援廣泛, 推薦使用)
for (var i = 0; i < nums.length; i++) {
alert(nums[i]);
}
//for in ,所有非undefined的元素值,index指的是元素下標‘
for (var index in nums) {
document.write(nums[index] + ",")
}
2.實現全選和反向全選

function checkAll() {
var ckList = document.getElementsByName("ck");
for (var i = 0; i < ckList.length; i++) {
if (ckList[i].type == "checkbox")
ckList[i].checked = document.getElementById("c_k").checked;
}
}

<p>全選<input type="checkbox" id="c_k" name="ck" onclick="checkAll(this.checked)" /></p>
<input type="checkbox" name="ck" />
<input type="checkbox" name="ck" />
<input type="checkbox" name="ck" />
<input type="checkbox" name="ck" />
<input type="checkbox" name="ck" />
<input type="radio" name="ck"/>

 

1.內建對象(系統定義)應用

2.BOM對象(瀏覽器物件模型)
window對象
常用方法:
1.對話方塊
alert();//只有確定 按鈕
confoirm();//確定取消對話方塊
prompt();//使用者輸入對話方塊
2.開啟視窗 open()

3.關閉當前視窗 close()

4.時鐘設定:seTimeout(),clearTimeOut(id)

History對象 forward go(1)前進
back go(-1)後退

location對象
屬性:href:完整的url字串
hostname:url中的主機名稱
host:url中的主機名稱和連接埠號碼
方法:reload()重新載入網頁
replace(url)替換掉當前網頁

--------------------------------------------------------Day03------------------------------------------

1.事件 *****
1js綁定事件的方式
1） 靜態繫結，直接將事件綁定在靜態html標記上（html與js混淆）
2） 動態綁定，將事件綁定到dom對象上。（建議：html與js分離）

2.事件種類
滑鼠事件
鍵盤事件
狀態事件

3.event對象:擷取事件的資訊
ie與ff在event對象的支援上有區別:
ff必須以參數傳入才可以識別event對象.
常用屬性:
1)x,y軸座標:clientX,clientY(常用於滑鼠事件)
2)按鍵的索引值:keyCode(鍵盤的事件)
3)滑鼠的按鍵索引值:button(滑鼠事件)
4)事件的冒泡:子項目的同類事件向父元素傳遞
解決:e.cancelBubble=true;

2.Dom對象(文件物件模型)*****

W3C 組織推出的一組規則
支援多種語言(C#,js,oracle,java...)

作用:1將文檔載入到記憶體並形成樹形結構
2能對記憶體中的樹進行增刪改查的操作
3.持久的儲存改變
dom:
1查詢的方法:(js,C#都有)
getElementByid(id)(得到單個元素)
getElementsByName(name)//name 屬性(得到集合)
getElementsTagName(tagname)//標記名(得到集合)
屬性:
表單元素:
值:value
非表單元素:<p>段<a>aaaa</a>落</p>
文本值:innerText(FF不支援)
html內容:innerHTML(都支援)
2增加
1)建立新的元素對象
document.creatElement();
2)為新元素添加屬性,文本等
p.align="center";
p.innerHTML="這是動態添加的段落"
3)將新元素添加到父元素中
$("div").appendChild(p);

3.刪除
思路:父元素刪除子項目
父元素對象.removeChild(子項目對象)

綜合案例*****
必須掌握:
1.用戶端表單驗證:
事件:onsubmit 表單提交事件
預設是:return true(提交)
取消提交:return false(取消提交)
文字框 onfocus="this.select()"自動選藍
onblur="checkPwd()" 焦點離開驗證

2.js操作樣式 案例:廣告漂浮
1 style
文法:元素對象.style.樣式屬性="樣式值"

window.onload = function () {
//滑鼠移入:字變紅變大
$("btnstyle").onmouseover = function () {
$("btnstyle").style.color = "red";
$("btnstyle").style.fontSize = "50px";
}
//滑鼠移出:字變綠變小
$("btnstyle").onmouseout = function () {
$("btnstyle").style.color = "blue";
$("btnstyle").style.fontSize = "20px";
}
}

2.className
元素對象.className="類別選取器名"

 

3.下拉式清單元素的操作:省市級聯
事件:onchange
屬性:option 選項集合 option[index]選項元素
selectedIndex:被選中項的索引

 

023.JavaScript基礎綜合