HTML JavaScripts

JavaScript

JavaScript是一門編程語言，瀏覽器內置了JavaScript語言的解釋器，因此在瀏覽器上按照JavaScript語言的規則編寫相應代碼之，瀏覽器能夠解釋並作出相應的處理。

一、JavaScript代碼存在形式

方式一
    <script type"text/javascript" src="js文件"></script>
方式二
    <script type"text/javascript">
        js代碼內容
    <script>

二、JavaScript代碼存在的位置

Html的head中
Html的body代碼底部（推薦）
因爲Html代碼是從上到下執行，若是Head中的js代碼耗時嚴重，就會致使用戶長時間沒法看到頁面，若是放置在body代碼塊底部，那麼即便js代碼耗時嚴重，也不會影響用戶看到頁面效果，只是js實現特效慢而已。

 

如： 
<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
<script>
    alert('123');
</script>

三、變量

全局變量
局部變量 （儘可能使用局部變量 避免出錯）
JavaScript中變量的聲明是一個很是容易出錯的點，局部變量必須是一個var開頭，則默認表示全局變量
局部變量：   var name = "chen"
全局變量:   age = 18
var a1='chen',a2='zhang',a3=1 多行聲明變量

四、 註釋

單行註釋 //
多行註釋 /*   */

五、 基本數據類型

數字

兩種方式
    var age = 18;
    var age = Number("18")；
將一個字符串轉換爲數字類型
    Number('123');
    parseInt（'123'）;
    n2='123';
    a=parseInt(n2); # 必須賦值給變量纔會生效，不會直接將原變量的類型進行改變
    轉換爲float類型
    parsefloat('18.9');
調試js
    console.log(age);
    age 類型 console.log(age,typeof age);
    或者在html F12中的Console裏也能夠直接進行測試和調試

字符串

var age = '18';
var name = String("chen");
var age_str = String(18);
經常使用方法
obj.trim()過濾空格
obj.charAt(index) 獲取下標對應的字符串
obj.substring(start,end)返回位於String對象中指定位置的子字符串
obj.indexOf(char)返回字符串索引位置
obj.length 字符串長度

數組

num = [11,22,33]
    num.unshift("aa") 前插入
    num.push（'bb''） 後插入 追加
    num.splice(1,0,'bbb')指定插入(中間的0必需要加，只有爲0的時候纔會幫你去插入)
    li.splice(1,3) 刪除索引位置後的三個元素 （obj.splice(index,count)         數組指定位置後count個字符）
    li.slice(0,2) 切片
    num.pop() 刪除最後一個值，並獲取
    num.shift() 刪除第一個值
    num.concat(n) 數組合並
        n=['a','b']
    num.rerverse（）  翻轉
    num.join('-') 字符串格式化

字典（js中的字典是數組僞造出來的「數組(字典)）

dic = {'k1':'v1'}

序列化

s=JSON.stringify(dic)
     JSON.parse(s)

布爾

Boolean(1) true
    Boolean(0) false

undefined

undefined表示未定義值

null

null是一個特殊值

六、條件語句

for 循環
        數組
            var li = [11,22,33,44];
            for(var index in li){
                console.log(index,li[index]);
                }
            for (var i=0;i<li.length;i++){
                console.log(i,li[i])；
            }
        字典
            var dic = {"k1":11,"k2":22}
            for (var key in dic){
                console.log(key)；
            }

        while 循環
            while (li.length<10){
                console.log("小於10")
                li.push("aa")
                console.log(li)
                continue

            }
        switch 循環
            switch (li){
                case li.length <5:
                    console.log("小於5");
                    break;
                case li.length < 8:
                    console.log("小於8");
                    break;
                default:
                    console.log("大於8")
            }
        try 異常檢錯
            try{
                li.sasasasasas(2)
            }
                catch (e){
                    console.log("異常")
                }
                finally {
                    console.log("完成")
                }

七、函數

function func1(arg){
            console.log(arg);
            return "aaa";
        };
        var ret = fun1("123");
        console.log(ret)

        匿名函數
        var f = function(arg){
            console.log(arg);
        }
        f(1234)

        自執行函數
            ()();
            (function(arg){
                console.log("111",arg)
                })("chen");

    10 類（函數模擬類）
        function fun1(name,age){
            this.Name = name;
            this.Age = age;
            this.fun2 = function(arg){
                return this.Name + arg;
            }
        }
        var obj = new fun1("chen","18");
        console.log(obj.Name);
        console.log(obj.Age);
        var ret = obj.fun2("66666")
        console.log(ret);

Dom

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

注：通常說的JS讓頁面動起來泛指JavaScript和Dom
一、選擇器

document.getElementByid('id');
document.getElementsByname('name');
document.getElementsByTagName('tagname');
document.getElementsByClassName('c1');

二、操做內容

obj.innerText   獲取文本內容
obj.innerText = 'hello' 設置文本內容
obj.innerHtml   獲取html內容
obj.innerHtml = <h1>hello</h1>

var nid = document.getElementByid('myid') 獲取用戶id的值的信息
nid.innerText="change_id"</script> 修改信息

特殊的：
    input系列
    textarea標籤
    select標籤
    對於上述的特殊的標籤能夠用value屬性修改標籤的value值

三、建立標籤

需求 點擊添加 添加文本框

添加

方式一：
    <div  id="container">       
    </div>
    <a href="http://www.baidu.com" onclick="return AddElement()">添加</a>

    var nid = document.getElementById("container");
    var tag = "<input type='text'/>";
    nid.innerHTML = tag;
    return false
    注意:若是，建立按鈕有href屬性，又有onclick屬性，則先觸發onclick屬性，在觸發href屬性，若不想觸發href，則刪除或者函數返回false

上述添加只能添加一次，就失效了，由於它是替換了div裏的元素
 

方式二：
    <div  id="container">       
    </div>
    <a href="http://www.baidu.com" onclick="return AddElement()">添加</a>
    function AddElement(){
    var createObj = document.createElement("a")
    createObj.href = "http://www.baidu.com";
    createObj.innerText = "百度"
    var nid = document.getElementById("container");
    nid.appendChild(createObj);}
    return false
實例二：（替換樣式）
    function bb(){
        nid = document.getElementById("aa")
        nid.style.color = "blue"
        nid.style.fontSize = "160px"}

四、標籤屬性

function aa(){
var nid = document.getElementById('container')
console.log(nid.id)
console.log(nid.className)
console.log(nid.style.fontSize='88px')

}

五、提交表單

document.geElementById('form').submit()
---------
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form id="aa" action="https://www.sogou.com/web" method="get">
        <input name="query" type="text"/>
        <input type="submit"  value="提交">
        <!--另外一種方式-->
        <div onclick="mysubmit()">提交</div>
    
    </form>
    <script>
        function mysubmit(){
            document.getElementById("aa").submit();
        }
    </script>
    </body>
    </html>

六、事件

屬性	此事件發生在什麼時候...
onabort	圖像的加載被中斷。
onblur	元素失去焦點。
onchange	域的內容被改變。
onclick	當用戶點擊某個對象調用的事件句柄。
ondblclick	當用戶雙擊某個對象時調用的事件句柄。
onerror	在加載文檔或圖像時發生錯誤。
onfocus	元素得到焦點。
onkeydown	某個鍵盤按鍵被按下。
onkeypress	某個鍵盤按鍵被按下並鬆開。
onkeyup	某個鍵盤按鍵被鬆開。
onload	一張頁面或者一副圖像加載完成。
onmousedown	鼠標按鈕被按下。
onmousemove	鼠標被移動。
onmouseout	鼠標從某元素已開。
onmouseover	鼠標移動到某元素之上。
onmouseup	鼠標按鍵被鬆開。
onreset	重置按鈕被點擊。
onresize	窗口或框架被從新調整大小。
onselect	文本被選中。
onsubmit	確認按鈕被點擊。
onunload	用戶退出頁面。

特殊的：

window.onload = function(){}
    //jQuery：$(document).ready(function(){})
    //onload是全部DOM元素建立、圖片加載完畢後才觸發的。而ready則是DOM元素建立完畢後觸發的，不等圖片加載完畢。圖片尚未渲染，就能夠進行事件的執行。

特殊參數：this,event
七、其餘功能

console.log()
//用於顯示一個帶有指定消息和 OK 及取消按鈕的警告框
alert() 
//用於顯示一個帶有指定消息和 OK 及取消按鈕的對話框
confirm()
 
// URL和刷新
location.href
location.href = "url"  window.location.reload()
 
// 定時器
/*setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。*/
setInterval("alert()",2000);   
//clearInterval() 方法可取消由 setInterval() 設置的 timeout。clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。
clearInterval(obj)
//超時時間
setTimeout();   
clearTimeout(obj)

實例

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' >
    <title>歡迎blue shit蒞臨指導&nbsp;&nbsp;</title>
    <script type='text/javascript'>
        function Go(){
            var content = document.title;
            var firstChar = content.charAt(0)
            var sub = content.substring(1,content.length)
            document.title = sub + firstChar;
        }
        setInterval('Go()',1000);
    </script>
</head>
<body>    
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    
    <style>
        .gray{
            color:gray;
        }
        .black{
            color:black;
        }
    </style>
    <script type="text/javascript">
        function Enter(){
           var id= document.getElementById("tip")
           id.className = 'black';
           if(id.value=='請輸入關鍵字'||id.value.trim()==''){
                id.value = ''
           }
        }
        function Leave(){
            var id= document.getElementById("tip")
            var val = id.value;
            if(val.length==0||id.value.trim()==''){
                id.value = '請輸入關鍵字'
                id.className = 'gray';
            }else{
                id.className = 'black';
            }
        }
    </script>
</head>
<body>
    <input type='text' class='gray' id='tip' value='請輸入關鍵字' onfocus='Enter();'  onblur='Leave();'/>
</body>
</html>

搜索框