javascript入門

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ù)合類型:
    object

  • js語句和注釋
    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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市塞椎,隨后出現(xiàn)的幾起案子桨仿,更是在濱河造成了極大的恐慌,老刑警劉巖案狠,帶你破解...
    沈念sama閱讀 221,695評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件服傍,死亡現(xiàn)場離奇詭異,居然都是意外死亡骂铁,警方通過查閱死者的電腦和手機(jī)吹零,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來拉庵,“玉大人灿椅,你說我怎么就攤上這事。” “怎么了阱扬?”我有些...
    開封第一講書人閱讀 168,130評論 0 360
  • 文/不壞的土叔 我叫張陵泣懊,是天一觀的道長。 經(jīng)常有香客問我麻惶,道長,這世上最難降的妖魔是什么信夫? 我笑而不...
    開封第一講書人閱讀 59,648評論 1 297
  • 正文 為了忘掉前任窃蹋,我火速辦了婚禮,結(jié)果婚禮上静稻,老公的妹妹穿的比我還像新娘警没。我一直安慰自己,他們只是感情好振湾,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,655評論 6 397
  • 文/花漫 我一把揭開白布杀迹。 她就那樣靜靜地躺著,像睡著了一般押搪。 火紅的嫁衣襯著肌膚如雪树酪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,268評論 1 309
  • 那天大州,我揣著相機(jī)與錄音续语,去河邊找鬼。 笑死厦画,一個胖子當(dāng)著我的面吹牛疮茄,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播根暑,決...
    沈念sama閱讀 40,835評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼力试,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了排嫌?” 一聲冷哼從身側(cè)響起畸裳,我...
    開封第一講書人閱讀 39,740評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎躏率,沒想到半個月后躯畴,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,286評論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡薇芝,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,375評論 3 340
  • 正文 我和宋清朗相戀三年蓬抄,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片夯到。...
    茶點(diǎn)故事閱讀 40,505評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡嚷缭,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情阅爽,我是刑警寧澤路幸,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站付翁,受9級特大地震影響简肴,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜百侧,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,873評論 3 333
  • 文/蒙蒙 一砰识、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧佣渴,春花似錦辫狼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至砂竖,卻和暖如春真椿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背晦溪。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評論 1 272
  • 我被黑心中介騙來泰國打工瀑粥, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人三圆。 一個月前我還...
    沈念sama閱讀 48,921評論 3 376
  • 正文 我出身青樓狞换,卻偏偏與公主長得像,于是被迫代替她去往敵國和親舟肉。 傳聞我的和親對象是個殘疾皇子修噪,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,515評論 2 359

推薦閱讀更多精彩內(nèi)容