JavaScript學習筆記

引言

什麼是javascript？

javascript是一種動態網頁（網頁結構的變化）效果處理的技術，應用在html上。
注意：

• javascript與java沒有任何關係

• javascript client端技術運行在html網頁中

  編譯型編程語言 不能跨平臺 運行效率高 C C++
  解釋型編程語言 跨平臺 運行效率低 javascript
  java是先編譯後解釋的語言 sacal jruby groovy…

• javascript存在瀏覽器的差異

  不同的瀏覽器在支持javascript預言時，存在微小的不同
  IE系列 IE瀏覽器
  WebKit系列 chrome Firefox safri 360瀏覽器（支持最標準的javascript語言 經過ww3c組織認證）

第一個javascript程序開發

IDE:MyEclipse Eclipse HBuilder WebStrom Apatana

javascript的基本語法結構

HTML頁面上

<script type="text/javascript">
    Js 代碼
</script>

基本語法

輸出：

<script type="text/javascript">
    //javascript的輸出
    //網頁中輸出文本內容
    document.write("Hello JavaScript");
    //彈框的形式輸出
    alert("Hello JavaScript");
    //控制檯中輸出
    console.info("Hello JavaScript");
</script>

JavaSctipt語法

變量

JavaScript是一種弱數據類型的編程語言
特點：變量沒有類型
java：是一種強數據類型的語言

String name = "hibiscidai";
int age = 10;

javascript：是一種弱數據類型的語言

var name = "hibiscidai";
var age = 10;
age = 10;

注意：

-可以不用var關鍵字聲明變量
如果不用var關鍵字聲明變量，該變量將變爲全局變量
-javascript的語言結束可以不加分號

數據類型

基本類型

字符串

javascript不區分字符與字符串

//聲明字符串
var name = "hibiscidai";
var n = 'hibiscidai';
alert(name);
alert(n);

數字

javascript中不區分整數與浮點數

//聲明數字
var a = 10;
var a1 = 10.04;
alert(a);
alert(a1);

布爾

• true | false
• 非0 | 0
• 非null | null

特殊的類型

NAN not a number
underfine
如果使用了沒有定義的變量，那麼這個變量的值爲underfine
如果定義了變量沒有賦初始值，那麼之歌變量的值爲underfine
Null
定義變量後，手動賦值爲null

基本類的特殊操作

• parseInt 把一個字符串類型的數據轉化爲整數
• typeof 確定變量的實際類型

var a = "10";
alert(typeof(parseInt(a)));

對象類型

運算符 表達式

賦值運算符

=

算術運算符

+ - * / %

//算數運算符
var a = 10;
var b = 3;
alert(a + b);
alert(a - b);
alert(a * b);
alert(a / b);
alert(a % b);

比較運算符

> < >= <= != ==

var a = 10;
var b = 3;
alert(a > b);
alert(a < b);
alert(a == b);
alert(a != b);

注意：javascript中對比字符串沒有equals方法的，只能用==

==運算符 只比較數據內容 而不比較數據類型
===運算符 既比較數據的類型 又比較數據的內容

邏輯運算符

&& || !

程序的流程控制

條件分支

if () {}
if () {} else {}
if () {} else if () {} else {}
switch (值) {
java值：byte shrot int char String
javascript 中沒有任何要求
case 1 : xxx break;
case 2 : yyy break;
Default:
}

循環

while () {}
Do {} while {}
for (var i = 0; i < 10; i++) {}

函數（function()）

i.可以通過變量存儲函數

<script type="text/javascript">
//聲明函數
function add(i, j) {
    return i + j;
}
//調用函數
//通過變量存儲函數
var func = add;
alert(func(1, 2));
/*
*   var result = add(1, 2);
*   alert(result);
*/
</script>

ii.匿名函數

<script type="text/javascript">
//聲明函數
var add = function (i, j) {
    return i + j;
};
alert(add(1, 2));
</script>

iii.匿名作爲另一個函數的參數

<script type="text/javascript">
function add(i, j) {
    return i + j;
}
function test1(func) {
    var result = func(1, 2);
    alert(result);
}
//調用函數
test1(add);
</script>

iv.定義了函數之後，在調用的時候可以不按照參數表的要求傳遞數據
Javascript函數沒有重載

<script type="text/javascript">
//可以不按照參數表的要求調用函數
function add(i, j) {
    alert("Hello JavaScript");
    return i + j;    //1 + underfine = NAN
}
alert(add(1, 2, 3));
</script>

v.arguments內置對象，可以獲得函數運行時的實際參數內容
作用：增加函數的健壯性

<script type="text/javascript">
if(arguments.length != 2) {
    alert("您輸入的參數個數不符合要求");
    return;
}
if((typeof i=='number')&&(typeof j=='number')) {
    return i+j;
} else {
    alert("您輸入的參數類型不符合要求");
}

</script>

對象類型

javascript中沒有累的概念（類似面向對象的編程語言）

自定義對象

//創建學生對象 第一種方式
<script type="text/javascript">
var Student = new Object();
Student.name = "HibisciDai";
Student.age = 18;
Student.show = function() {
    alert("this is show 方法");
}
alert(Student.name);
alert(Student.age);
Student.show();
</script>

//創建學生對象 第二種方式
<script type="text/javascript">
var Student = {
    name : "zkf",
    age : 18,
    show : function () {
        alert("this is show方法");
    }
};
alert(Student.name);
alert(Student.age);
Student.show();
</script>

內置對象

Javascript內部提供的對象

數組

1.不定長。
2.類型可以不一致，更類似與java中的ArrayList集合
3.數組定義的兩種方式：
（1）

var names = new Array();
names[0] = "hibiscidai";
names[1] = "dj741";

（2）

var names = ["hibiscidai", "dj741", "hha"]

4.數組的API（方法）

方法	內容	補充
length	獲得數組長度
reverse	倒序數組內容
push	壓棧操作	等效於數組添加最後一個元素
pop	彈棧操作	刪除的最後一個元素
shift	移除數組的第一個元素
concat	把兩個數組連接起來（不常用）
join	把一個數組得元素通過分割符連接成一個字符串（不常用）

字符串

Javascript中的字符串不區分字符與字符串
第一種：var name=”hibiscidai”;
第二種：var name=new String(“hibiscidai”);

字符串API：

方法	內容	補充
==或者===	字符串中內容對比
length	字符中的長度
charAt	獲取某一個位置上的字符
indexOf()	獲取一個子串第一次出現的位置

日期

<script type="text/javascript">
//獲取當前日期
var d = new Date();
alert(d);
//自定義日期
var d1 = new Date("2017-12-04");
alert(d1.getFullYear());//獲取年份
alert(d1.getMonth());//獲取月份 javascript中的月份是從0開始算起的
alert(d1.getDay());//獲取星期幾
</script>

算術

Math.random();//獲得隨機數0-1之間

HTML對象

<input type="text" name="name" />
javascript中：
    input標籤對象
    input.type獲取標籤對象中的屬性

<div id="d">
</div>
    div.id

事件

Javascript是事件驅動程序運行的語言
（a）事件編程中的第一個案例

<script type="text/javascript">
    function test() {
        alert("我是單機產生的事件");
    }
</script>
<h1 onclick="test()"></h1>

（b）常見的事件句柄

句柄	事件
所有標籤基本都使用的事件句柄
onclick	單機事件
ondblclick	雙擊事件
onmouseover	鼠標浮上事件
onmouseout	鼠標移出事件
onmousewheel	鼠標滑動滾輪觸發事件
onmousedown	鼠標按下
onmouseup	鼠標彈起
onmousemove	鼠標移動
用於body標籤中的事件句柄
onload	在整張Html頁面內容全部顯示後，自動運行該事件
onresize	調整瀏覽器窗口大小的時候觸發
onscroll	滑動滾輪或者拖動瀏覽器右側的進度條時觸發
用於表單中的相關事件句柄
onblur	丟失焦點事件
onfocus	獲取焦點事件
onkeydown	鍵盤按下觸發的事件
onkeyup	鍵盤彈起觸發的事件
onchange	針對於 < select > 當下拉列表中的內容改變時觸發
onsubmit	表單提交時觸發的事件

（c）事件模型
I.事件源：產生事件的標籤
Ii.事件：單機 雙擊 鼠標以上。。。
Iii.監聽 事件句柄觸發後執行的程序
Iv.如何獲得事件

<script type="text/javascript">
    function test(event) {
        alert(event);
        alert("我是單機產生的事件");
    }
</script>
<body>
    <h1 onclick="test(event)">點擊我</h1>
</body>

獲得了事件後就可以獲取事件的類型
Event.type
獲得事件產生的座標
Event.clientX
Event.clientY

V.獲取事件的源頭(標籤對象)
 Event.target

（d）阻止標籤的默認行爲
I.表單標籤的默認行爲
默認提交 onsubmit=”return true”;
阻止 onsubmit=”return false”;
Ii.超級鏈接的默認行爲
默認發送請求
阻止 < a href=”javascript:void(0)” />點擊我
（e）事件冒泡(buble)
特點：內部標籤產生的事件，對外層標籤產生了影響
解決：event.stopPropagation();

DOM[document object model | 文檔對象模型]

什麼是DOM（一種模型+一組API）

DOM把一個HTML網頁看成一棵樹，每一個HTML標籤看成一個對象

一組API：獲得這棵樹上邊的HTML標籤對象

作用：通過DOM的模型及相關方法，可以讓HTML網頁結構動起來

使網頁結構動起來的手段：

改變標籤的屬性

i.如何獲取標籤對象（語法：標籤 對象.屬性）

//第一種
event.target
//第二種
document.getElementById("div");
---------
<script type="text/javascript">
    function tclick() {
        var div = document.getElementById("div");
        alert(div);
    }
</script>
<body>
    <div id="div" title="this is title">
</body>
//第三種this（代表當前對象）
<script type="text/javascript">
    function tclick(input) {
        alert(input);
    }
</script>
<input type="button" onclick="tclick(this)" value="click" />

改變標籤的樣式（語法：標籤 對象.style.css 屬性）

function test1() {
    //獲取標籤對象
    var div = document.getElementById("div");
    div.style.color = "white";
    div.style.backgroundColor = "red";
}

javascript動態修改樣式時，如果css標籤屬性有 - ，則需把 - 去掉，其後的字母對象

特殊屬性：

句柄	事件
.parentNode	父親對象
.childNodes	所有的孩子對象
.firstChild	第一個孩子對象
.lastChild	最後一個孩子
.nextSibling	下一個兄弟
.previousSibling	上一個兄弟

注意：回車代表着一個標籤對象
獲取一組標籤對象
Var divs= document.getElementByTagName(“div”);
獲取文本節點的內容 .data 或者 .nodeValue

增加新的標籤內容

新建標籤

var div = document.createElement("div");

把創建出的標籤放置正對應的位置上

句柄	事件
parentNode.appendChild(“div”)	把對應的標籤對象放置在最後一個孩子所處的位置
parentNode.insertBefore(new,old)	把對應的標籤對象放置在舊的標籤對象的前邊
parentNode.replaceChild(new,old)	用新標籤替換舊的標籤
parentNode.removeChild(old)	刪除一個標籤

//創建div標籤對象
var div = document.createElement("div");
//把創建出的標籤對象放置在對應的位置
var body = document.getElementById("body");
//把新的標籤對象添加到最後一個孩子所處的位置上
body.appendChild(div);
//獲取舊的input標籤對象
var input = document.getElementById("input");
//把新的標籤對象添加到原有標籤對象的前邊
body.insertBefore(div, input);
body.replaceChild(div, input);
body.removeChild(input);

創建文本

function creatediv() {
    //創建文本內容
    var text = document.creatTextNode("hibiscidai");
    //創建div標籤對象
    var div = document.createElement("div");
    //把創建出的標籤對象放置在對應的位置
    var body = document.getElementById("body");
    //把文本內容放入目標div標籤的內部
    div.appendChild(text);
    //把新的標籤對象添加到最後一個孩子所處的位置上
    body.appendChild(div);
}

innerHTML方法（語法：標籤對象.innerHTML方法）

方法作用：
1.可以獲得一個標籤內部所有的內容
2.可以爲一個標籤內部 插入一組新的標籤或者文本
注意：innerHTML在添加新的標籤時，會把原有標籤內部的內容替換掉

BOM（Browser Object Model 瀏覽器對象模型）

思想：瀏覽器相關內容 看做對象

window對象 （瀏覽器窗口）

句柄	事件	備註
window.alert();	提示框	window獨享的方法或屬性 window. 可以省略
window.confirm()	確認框	方法存在返回值 確定true 取消false
window.open()	打開一個新的頁面
window.setTimeOut()	在一定時間之後自動執行某一種功能
.nextSibling	下一個兄弟
.previousSibling	上一個兄弟

//例："window."可以取消
<a href="xxx/deleter.action" onclick="return confirm('您是否確定刪除這條數據')">刪除</a>

//setTimeOut返回值 代表此方法的唯一標示
var flag = window.setTimeout(function () {
    alert("您好");
    }，2000);//第一個參數 執行的功能函數 第二個參數 設置的時間 返回值代表此方法的唯一標識
    window.clearTimeout(flag);
}

//Window.clearTimeout(唯一標示) 取消方法的調用

//Window.setInterval() 每隔一段時間 自動執行一種功能
var flag = window.setInterval(function () {
    alert("您好");
},3000);//經過設置的事件週期 執行某一種功能
window.clearInterval(flag);

document 對象 （網頁對象）

document.write()
document.getElementById()
document.getElementByTagName()
document.createElement()
document.createTextNode()

form對象 代表form標籤
form.submit() 動態提交

function test1() {
    //獲取form表單對象
    var form = document.getElementById("form");
    //動態提交表單
    form.submit();
}

select對象 < select 標籤 > |option對象 < option 標籤 >

句柄	事件
Select.options	獲取所有的此select標籤下的option標籤對象
option標籤對象.text	獲取option標籤中的文本內容
option標籤對象.value	獲取option標籤中的value值
select.selectedIndex	獲得當前被選中的option標籤 在options數組中的下標

級聯菜單

<html>
<head>
<meta charset="gbk" />
<script type="text/javascript">
    function test1() {

        /*   
        //獲取此select標籤下的所有的option標籤
        var  options=select.options;
            for(var i=0;i<options.length;i++){
            //alert(options[i].text);
                alert(options[i].value);
            } */
        //獲取用戶選中的option的對象的下標
        //獲取用戶所選中的option標籤對象
        // alert(select.options[select.selectedIndex].text);
        //準備數據
        var data = {
            北京 : [ '海淀', '豐臺', '朝陽' ],
            上海 : [ '浦東', '浦西', '陸家嘴' ],
            鄭州 : [ '金水', '二七', '管城' ]
        };
        //獲取用戶選中的城市
        //獲取select標籤對象
        var select = document.getElementById("city");
        //獲取用戶所選中的文本對應的下屬所有的區
        var sections = data[select.options[select.selectedIndex].text];
        //獲取二級下拉列表的標籤對象
        var ss = document.getElementById("ss");
        //每一次清空數據
        ss.innerHTML = "";
        for ( var i = 0; i < sections.length; i++) {
            //創建文本
            var text = document.createTextNode(sections[i]);
            //創建option標籤 
            var option = document.createElement("option");
            //把對應的文本內容填充到option標籤中
            option.appendChild(text);
            //把對應的option標籤添加到對應的select下拉列表中
            ss.appendChild(option);
        }
    }
</script>
</head>
<body onload="test1()">
    <select id="city" onchange="test1()">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">鄭州</option>
    </select>

    <select id="ss">
    </select>
    <!--  <input type="button" value="點擊我" onclick="test1()"> -->
</body>
</html>

location對象（地址欄）

Location.href=”/XXXAction” 通過location發送請求

History對象（前進 後退按鈕）

history.back();後退
history.forward();前進

js與jsp整合

a）js與jsp中 與在html網頁中的應用一樣
b）js中直接使用 jstl標籤或者表達式以及struts標籤

外部js文件

（a）定義js文件
（b）外部文件的引入

<script type="text/javascript" scr="js/my.js">
</script>

設置引入外部文件編碼格式[charset=”“]

<script type="text/javascript" charset="gbk" scr="js/my.js">
</script>