JavaScript簡單介紹

JS

JavaScript是一門編程語言，瀏覽器內置了JavaScript語言的解釋器，所以在瀏覽器上按照JavaScript語言的規則編寫相應代碼之，瀏覽器可以解釋並做出相應的處理。

js代碼的存在形式

<!-- 方式一 導入外部文件-->
<script type"text/javascript" src="JS文件"></script>

<!-- 方式二 直接在所在文件中編寫-->
<script type"text/javascript">
    Js代碼內容
</script>

JS代碼的位置

• HTML的head中
• HTML的body代碼塊底部（建議）
  由於我們知道HTML的代碼是從上往下執行的，如果把js代碼放在head中，如果代碼出現了阻塞（比如加載某個插件的時候卡住了）那麼後面的一大段的html代碼無法執行了，這就造成了整個頁面的無法加載。

變量

在Javascript中變量的聲明有注意的地方，局部變量必須以var開頭，如果沒有使用var，則默認表示聲明的是全局變量

var name="s"   //局部變量
age=18   //全局變量

基本類型

• 數字
• 字符串
• 數組（字典）
  瀏覽器的console界面
  

數字類型

var age=18;
var age=Number(18);  //聲明一個數字類型的變量

//字符串轉換成數字類型
Number('123')  
parseInt('123')   //一般用這個
console.log(age,typeof age);   //在console中輸出括號中變量的值

//js中沒有有float類型，需要進行轉換
var age=18.9;
console.log(parseFloat(age));

//單行定義多個變量值
var a1=1,a2=1,a3=3;

字符串類型

var name="cmustard  "
//去除空格
name.trim() //"cmustard"

//索引取值
name.charAt(1) //"m"
name.charAt(2)  //"u"

//獲取這個字符串的子序列    1<=x<3
name.substring(1,3)     
//獲取索引
name.indexOf('m') //"mu"

//獲取字符串長度
name.length   //10

boolean類型

>var s=true
>s
<true
>typeof s
<"boolean"

數組

var names=Array(11,12,14,15,16)
//或者
var names=[11,12,13,14,15,16]

obj.push(ele)
追加

names.push('push')
console.log(names)//[11, 12, 14, 15, 16, "push"]

obj.unshift(ele)
在數組的最前面插入

names.unshift('unshift')
//["unshift", 11, 12, 14, 15, 16, "push"]

obj.splice(index,0,’content’)
指定索引插入，0是固定的，插入就必須寫這個0

names.splice(2,0,'content')
//["unshift", 11, "content", 12, 14, 15, 16, "push"]

obj.pop()
刪除數組尾部的元素，並返回這個元素

ret=names.pop() //ret=push
//["unshift", 11, "content", 12, 14, 15, 16]

obj.shift()
刪除數組頭部的元素

names.shift()
//[11, "content", 12, 14, 15, 16]

obj.splice(index,count)
刪除數組指定位置後的count個元素

names.splice(4,2)
//[11, "content", 12, 14]

obj.slice(start,end)
切片

ret=names.slice(0,3)
//[11, "content", 12]

newArray=obj1.concat(obj2)
將兩個數組合併成一個新的數組

s=['a','b','c']
n=names.concat(s)
//[11, "content", 12, 14, "a", "b", "c"]

obj.reverse()
翻轉這個數組

ret=names.reverse()
//[14, 12, "content", 11]

obj.join(‘-‘)
將數組轉化成每個元素用-隔開的字符串

ret=names.join('-')
//"14-12-content-11"

obj.length
返回這個數組的長度

ret=names.length
//4

字典

var d={'k1':'v1','k2':'v2'}

序列化

f={"v1":"k1","v2":'k2'}
//序列化
m=JSON.stringify(f)//"{"v1":"k1","v2":"k2"}"


//反序列化
s=JSON.parse(m) //Object {v1: "k1", v2: "k2"}

循環語句

數組

names=["python", "java", "c", "javascript"]
//方式一
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}

//方式二
for(var index in names){
   console.log(index);
   console.log(names[index]);
}
/*
0
python
1
java
2
c
3
javascript
*/

字典

d={k1: "v1", k2: "v2"}
for(var key in d){
    console.log(key,d[key]);
}
/*
k1 v1
k2 v2
*/

注意，字典不能使用數組中的第一種 for循環格式

while

while(條件){
    // break;
    // continue;
}

條件語句

if(條件){
    expression;
}else if(條件){
     expression;
}else{
    expression;
}

var name = 'c';
var age = 1;

// switch,case語句
switch(name){
    case 'c':
        age = 123;
        break;
    case 'd':
        age = 456;
        break;
    default :
        age = 777;
}

異常處理

try{
     expression;
}catch(e) {
     expression;
}finally{
     expression;
}

函數

函數聲明

function func(arg)
    return true;
}
//
f=func('a');   

匿名函數

var func = function(arg){
    return arg;
}

//調用
ret=func('a');

自執行函數

   (function(arg){
        console.log(arg);
    })('123')

面向對象

function Foo (name,age) {
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name + arg;
    }
}

var obj = new Foo('kk', 18);
var ret = obj.Func("sb");
console.log(ret);

DOM

文檔對象模型（Document Object Model，DOM）是一種用於HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，可以改變文檔的內容和呈現方式。我們最爲關心的是，DOM把網頁和腳本以及其他的編程語言聯繫了起來。DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容。

選擇器

document.getElementById('id')
document.getElementsByName('name')  #對input，select，textarea標籤
document.getElementsByClassName('class')
document.getElementsByTagName('tag')
document.getElementByTagName('tag')

內容

<div id="nid"> hello world!!!</div>

var obj = document.getElementById('nid')
obj.innerText                       # 只獲取文本內容
obj.innerText = "hello"             # 設置文本內容
obj.innerHTML                       # 獲取HTML內容
obj.innerHTML = "<h1>asd</h1>"      # 設置HTML內容



比較特殊的標籤：input系列，textarea標籤，select標籤
需要使用 value屬性操作用戶輸入和選擇的值
obj.value='123'  #設置
obj.value       #獲取

操作文本內容

<!DOCTYPE html>
<html>
<head>
    <title>操作文本內容</title>
</head>
<body>
    <div id="d1">
        <h1>SB</h1>
    </div>

    <h1>特殊的value</h1>
    <h3><input type="button" value="獲取值" onclick="getValue()" /></h3>
    <input id="n2" type="text" />
    <select id="n3">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">廣州</option>
    </select>
    <textarea id="n4"></textarea>



    <script type="text/javascript">
        var Text=document.getElementById('d1');
        console.log(Text.innerText);  //SB 不管嵌套多少標籤只獲取文本內容
        console.log(Text.innerHTML);   //<h1>SB</h1>h1> 

        function getValue(){
            // var obj=document.getElementById("n2");
            // var obj=document.getElementById("n3");
            var obj=document.getElementById("n4");
            alert(obj.value);

            //改變其值
            //obj.value='guangzhou';
        }
        /*
        內容修改獲取
            innnerText   標籤中間文本內容
            innerHTML   標籤中間內容
            value       用戶輸入和選擇的值，input，select，textarea

        */
    </script>
</body>
</html>

創建標籤

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>創建標籤和標籤屬性</title>
</head>
<body>
    <div id="container" class="c1" style="font-size:48px" sb="sb">abc</div>
    <a href="http://www.baidu.com" onclick="return AddElement()">添加</a>

    <script type="text/javascript">
        //設置屬性
        n=document.getElementById('container');
        console.log(n.getAttribute('sb'))
        n.setAttribute('mumu',123);
        console.log(n.innerHTML);
        n.style.fontSize="100px";
        n.style.color="red";

        function AddElement(){
            //創建標籤並添加到containner
            //方式一：
            var tag="<input type='text'>";
            var nid=document.getElementById("container");
            //nid.innerHTML=tag;  //只能創建一個tag
            //升級版、
            container.insertAdjacentHTML("beforeBegin",tag);

            //創建標籤方式二(常用的方式)
            var create_tag=document.createElement('a');
            create_tag.href="http://www.baidu.com";
            create_tag.innerText="百度";
            console.log(create_tag);
            //nid.innerHTML=create_tag;  //沒有達到要求,只能創建一個超鏈接
            nid.appendChild(create_tag);  //可以創建多個，追加模式
            return false;  //事件優先級高先執行事件函數，如果return false 後面的就不會執行了
        }
    </script>
</body>
</html>

標籤屬性

var obj = document.getElementById('container');
如果是標籤中包含的固定屬性，可以直接用.訪問
    obj.id
    obj.id = "nid"
    obj.className
    obj.style.fontSize = "88px";

如果不是標籤中的固定屬性，自定義屬性
    obj.setAttribute(name,value)
    obj.getAttribute(name)
    obj.removeAttribute(name)

提交表單

document.geElementById('form').submit()

小例子

<!DOCTYPE html>
<html>
<head>
    <title>表單提交</title>
</head>
<body>
    <form id="n1" action="http://www.sogou.com/web" method="get">
        <input type="text" name="query"/>
        <!-- <input type="submit" name="提交"> -->
        <input type="button" onclick="Submit()" value="提交">
    </form>

    <script type="text/javascript">
        function Submit(){
            var q=document.getElementsByName('query')[0];
            if(q.value.trim()){ //如果有內容，就提交
                document.getElementById('n1').submit();
                return True;
            }
            else{
                alert('請輸入內容')
                return false
            }

        }
    </script>


</body>
</html>

事件

其他常用的函數

console.log()
alert()
confirm()

// URL和刷新
location.href
location.href = "url"  window.location.reload()

// 定時器
setInterval("alert()",2000);   #每隔多少時間執行,循環執行
clearInterval(obj)  #清除定時器
setTimeout("alert()",1);    #執行一次操作，以後不再執行
clearTimeout(obj)   #清除

實例

搜索框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <title>搜索框</title>
</head>
<body>
    <!-- 當獲取焦點的時候清空這個value -->
    <input type="text" id="search" value="請輸入關鍵字" onfocus="Focus()"  onblur="Blur()" /> 

    <script type="text/javascript">
        /*
        事件：onclick=“函數”  鼠標點擊事件
            onblur="'"  失去焦點的時候
            onfocus=""  獲取焦點的時候
        */
        function Focus(){
            var nid=document.getElementById('search');
            var val=nid.value;
            if (val == '請輸入關鍵字'){
                nid.value=null;
            }
        }

        function Blur(){
            var nid=document.getElementById('search');
            var val=nid.value;
            if(!val.trim()){  //空就是false
                nid.value="請輸入關鍵字";
            }
        }

    </script>
</body>
</html>

跑馬燈

<!DOCTYPE html>
<html>
<head>
    <title>跑馬燈跑馬燈  跑馬燈  跑馬燈跑馬燈</title>
</head>
<body>
    <input type="button" value="停下來" onclick="Stop()" />

    <script type="text/javascript">
        function Stop(){
            //清除定時器
            clearInterval(obj)
        }

        function Func(){
            var text=document.title;
            var first=text.charAt(0);
            var subString=text.substring(1,text.length);
            var newTitle=subString+first;
            document.title=newTitle;
        }

        obj=setInterval("Func()",800);
        //setTimeout("Func()",1)  //幾秒鐘後執行一次操作，以後不再執行
    </script>
</body>
</html>