JavaScript(原生js)是運(yùn)行在瀏覽器端的腳本語言抛猖,JavaScript主要解決的是前端與用戶交互的問題,包括使用交互與數(shù)據(jù)交互。 JavaScript是瀏覽器解釋執(zhí)行的,前端腳本語言還有JScript(微軟轰坊,IE獨(dú)有),ActionScript( Adobe公司祟印,需要插件)等肴沫。
1. js嵌入頁面的方式(3種)
-- 行間事件(主要用于事件)
<input type="button" name="" onclick="alert('ok!');">
-- 頁面script標(biāo)簽嵌入
<script type="text/javascript"> alert('ok蕴忆!'); </script>
-- 外部引入
<script type="text/javascript" src="js/index.js"></script>
2. 變量及數(shù)據(jù)類型
- JavaScript 是一種弱類型語言颤芬,javascript的變量類型由它的值來決定。 定義變量需要用關(guān)鍵字 'var'套鹅。
var iNum = 123;
var sTr = 'asd';
//同時定義多個變量可以用","隔開站蝠,公用一個‘var’關(guān)鍵字
var iNum = 45,sTr='qwe',sCount='68';
變量類型
-- js有5種基本數(shù)據(jù)類型:
1、number 數(shù)字類型
2卓鹿、string 字符串類型
3菱魔、boolean 布爾類型 true 或 false
4、undefined undefined類型吟孙,變量聲明未初始化澜倦,它的值就是undefined
5、null null類型杰妓,表示空對象肥隆,如果定義的變量將來準(zhǔn)備保存對象,可以將變量初始化為null,在頁面上獲取不到對象稚失,返回的值就是null
-- 1種復(fù)合類型:
objectjs語句和注釋
1、javascript語句開始可縮進(jìn)也可不縮進(jìn)恰聘,縮進(jìn)是為了方便代碼閱讀句各,一條javascript語句應(yīng)該以“;”結(jié)尾;
2吸占、
單行注釋:
// var iNum = 123;
多行注釋:
/*
多行注釋
1、...
2凿宾、...
*/
變量矾屯、函數(shù)、屬性初厚、函數(shù)參數(shù)命名規(guī)范
-- 1件蚕、區(qū)分大小寫
-- 2、第一個字符必須是字母产禾、下劃線(_)或者美元符號($)
-- 3排作、其他字符可以是字母、下劃線亚情、美元符或數(shù)字匈牙利命名風(fēng)格:
對象o Object 比如:oDiv
數(shù)組a Array 比如:aItems
字符串s String 比如:sUserName
整數(shù)i Integer 比如:iItemCount
布爾值b Boolean 比如:bIsComplete
浮點(diǎn)數(shù)f Float 比如:fPrice
函數(shù)fn Function 比如:fnHandler
正則表達(dá)式re RegExp 比如:reEmailCheck
3. 函數(shù)
函數(shù)就是重復(fù)執(zhí)行的代碼片妄痪。
- 函數(shù)定義與執(zhí)行
<script type="text/javascript">
// 函數(shù)定義
function fnAlert(){
alert('hello!');
}
// 函數(shù)執(zhí)行
fnAlert();
</script>
- 變量與函數(shù)預(yù)解析
JavaScript解析過程分為兩個階段,先是編譯階段楞件,然后執(zhí)行階段衫生,在編譯階段會將function定義的函數(shù)提前,并且將var定義的變量聲明提前土浸,將它賦值為undefined罪针。
<script type="text/javascript">
fnAlert(); // 彈出 hello!
alert(iNum); // 彈出 undefined
function fnAlert(){
alert('hello!');
}
var iNum = 123;
</script>
- 函數(shù)傳參
javascript的函數(shù)中可以傳遞參數(shù)黄伊。
<script type="text/javascript">
function fnAlert(a){
alert(a);
}
fnAlert(5);
</script>
- 函數(shù)'return'關(guān)鍵字
函數(shù)中'return'關(guān)鍵字的作用:
1泪酱、返回函數(shù)中的值或者對象
2、結(jié)束函數(shù)的運(yùn)行
<script type="text/javascript">
function fnAdd(iNum01,iNum02){
var iRs = iNum01 + iNum02;
return iRs;
alert('here!');
}
var iCount = fnAdd(3,4);
alert(iCount); //彈出7
</script>
4. 條件語句
通過條件來控制程序的走向毅舆,就需要用到條件語句西篓。
條件運(yùn)算符
==、===憋活、>岂津、>=、<悦即、<=吮成、!=、&&(而且)辜梳、||(或者)粱甫、!(否)
注意:===會先判斷類型,再判斷值作瞄,如果類型不一樣茶宵,就不一樣。
if else
var iNum01 = 3;
var iNum02 = 5;
var sTr;
if(iNum01>iNum02){
sTr = '大于';
}
else
{
sTr = '小于';
}
alert(sTr);
多重if else語句
var iNow = 1;
if(iNow==1)
{
... ;
}
else if(iNow==2)
{
... ;
}
else
{
... ;
}
5. 獲取元素方式
可以使用內(nèi)置對象document上的getElementById方法來獲取頁面上設(shè)置了id屬性的元素宗挥,獲取到的是一個html對象乌庶,然后將它賦值給一個變量种蝶,另外將javascript語句放到window.onload觸發(fā)的函數(shù)里面,獲取元素的語句會在頁面加載完后才執(zhí)行,避免獲取不到元素瞒大。
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
<div id="div1">這是一個div元素</div>
6.操作元素屬性
獲取的頁面元素螃征,就可以對頁面元素的屬性進(jìn)行操作,屬性的操作包括屬性的讀和寫透敌。
操作元素屬性
var 變量 = 元素.屬性名 讀取屬性
元素.屬性名 = 新屬性值 改寫屬性屬性名在js中的寫法
1盯滚、html的屬性和js里面屬性寫法一樣
2、“class” 屬性寫成 “className”
3酗电、“style” 屬性里面的屬性魄藕,有橫杠的改成駝峰式,比如:“font-size”顾瞻,改成”style.fontSize”innerHTML
innerHTML可以讀取或者寫入標(biāo)簽包裹的內(nèi)容
7. 事件屬性和匿名函數(shù)
- 事件屬性
元素上除了有樣式泼疑,id等屬性外,還有事件屬性荷荤,常用的事件屬性有鼠標(biāo)點(diǎn)擊事件屬性(onclick)退渗,鼠標(biāo)移入事件屬性(mouseover),鼠標(biāo)移出事件屬性(mouseout),將函數(shù)名稱賦值給元素事件屬性,可以將事件和函數(shù)關(guān)聯(lián)起來蕴纳。
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
}
</script>
- 匿名函數(shù)
定義的函數(shù)可以不給名稱会油,這個叫做匿名函數(shù),可以將匿名函數(shù)的定義直接賦值給元素的事件屬性來完成事件和函數(shù)的關(guān)聯(lián)古毛,這樣可以減少函數(shù)命名翻翩,并且簡化代碼。函數(shù)如果做公共函數(shù)稻薇,就可以寫成匿名函數(shù)的形式嫂冻。
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/
// 直接將匿名函數(shù)賦值給綁定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
</script>