day15--JavaScript語言

時間  2019-12-06
標籤 day15 day javascript 語言 欄目 JavaScript 简体版
原文   原文鏈接

JavaScriptjavascript

    JavaScript是一門單獨的編程語言。瀏覽器內置JavaScript的解釋器。 html

    獨立的語言，瀏覽器具備js解釋器。java

    存在與HTML中，在HTML中寫JavaScript，存在形式是<script></script>python

    JavaScript的存在形式程序員

    <script type="text/javascript></script>表示JS代碼，或者不寫直接<script></script>，不能寫錯編程

        - Head中(第一種存在形式，HTML代碼的head中）數組

　　　　<script>        (1)種表示方式瀏覽器

　　　　　　//javascript代碼網絡

　　　　　　alert(123);編程語言

　　　　</script>     

　　　　<script type="text/javascript>            (2)種表示方式

　　　　　　//javascript代碼

　　　　　　alert(123);

　　　　</script>

　　- 保存在文件中，<script src="js文件路徑"></script>  （第二種存在形式，js文件裏面，使用src引用到HTML中)

　　  <script>中屬性scr的地址能夠是網絡路徑，JS是讓網頁動起來的。

        因爲咱們老是先讓用戶看到內容，才讓網頁動起來，因此JavaScript的代碼，放在</body>標籤最後面

    下面來看兩段HTML代碼，以下：

    （1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js.js"></script>
</head>
<body>
    <h1>限制性JavaScript的文件，而後纔會執行HTML代碼JS是讓頁面動起來</h1>
</body>
</html>

    此段代碼，打開以後，先加載的是<script>中的代碼，加載完畢以後，纔會加載<HTML>代碼，這樣確定是很差的，由於用戶常常是先看到內容，而後網頁自動加載，這樣纔有更好的體驗，所以<script>的代碼要放在<body>標籤的後面，以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>限制性JavaScript的文件，而後纔會執行HTML代碼JS是讓頁面動起來</h3>
    <h3>先加載HTML內容</h3>
    <h3>JS代碼寫在&lt;body&gt;內部的最下面</h3>
    <script src="http://wwww"></script>
</body>
</html>

    PS：JavaScript文件防止在<body>標籤內部的最下方。

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

    變量：

　　  python:　

　　　　name="alex"

　　  JavaScript

　　　　name = "alex"                   #聲明全局變量

　　　　var name = "eric"             #局部變量，寫JavaScript儘可能都先聲明局部變量

    基本數據類型：(https://www.cnblogs.com/wupeiqi/articles/5602773.html) 

    　　數字

            　　一、數字（Number）

　　　　　JavaScript中不區分整數值和浮點數值，JavaScript中全部數字均用浮點數值表示。

　　　　    轉換：

　　　　　　parseint()    將某值轉換爲Int，數字，不成功則NaN

　　　　　　parseFloat()   將某值轉換爲float類型，不成功則NaN

　　　　    特殊值：

　　　　　　NaN：非數字。可以使用 isNaN(num) 來判斷。

　　　　　　Infinity：無窮大。可以使用 isFinite(num) 來判斷。

　　　寫JS代碼：

　　　　- HTML文件中編寫

　　　　- 臨時，瀏覽器的終端，console

　　    字符串　

　　　　a = "alex"

　　　　a.charAt(索引位置)

　　　　a.substring(起始位置,結束位置)

　　　　a.length  獲取當前字符串的長度

　　　　a.concat()    字符串拼接  >:a = "alex";   >:a.concat("sb")    >:"alexsb"

　　　　obj.indexof(substring,start)     獲取自序列的位置索引

　　　　obj.lastIndexof(substring,start)    從後面獲取子序列位置

　　　　obj.slice(start,end)      切片

　　　列表（數組）

　　　　obj = [11,22,33,44]

　　　　obj.length

　　　　obl.push()                 尾部追加元素

　　　　obj.pop()                  尾部獲取一個元素

　　　　obj.unshift(ele)         頭部插入元素

　　　　obj.shift()                  頭部移除元素

　　　　obj.splice(start,deleteCount,value)插入，刪除或替換數組的元素

　　　　　　obj.splice(n,0,val)    指定位置插入元素

　　　　　　obj.splice(n,1,val)    指定位置替換元素

　　　　　　obj.splice(n,1)          指定位置刪除元素

　　　　obj.join(sep)                     將數組元素連接起來構建一個字符串 >:obj=[11, 666, 999, 44],   >:obj.join("-")  >:"11-666-999-44"

　　　　obj.concat(va1,va2....)                       鏈接數組

　　　　obj.sort()                              排序

　　    字典

　　　　obj = {"k1":"v1","k2":"v2"}

　　　　obj["k1"]                                                   獲取字典裏面元素的值

 

dic = {"k1":"v1","k2":"v2"}
{k1: "v1", k2: "v2"}
dic
{k1: "v1", k2: "v2"}
typeof(dic)
"object"
for(var item in dic){console.log(item);}       #循環的只是鍵（即索引）
VM4738:1 k1
VM4738:1 k2

　　　布爾類型

　　　　true

　　　　false

　條件語句

　　　if(條件) {

　　　　}else  if(條件)  else {}　

比較符號 含義
== 比較值相等
！= 不想等（值不想等）
=== 比較值和類型都相等
！=== 不等於
|| 或
&& 且

    for循環

        一、循環時，循環的元素是索引

　　a = [11,22,33,44]

　　for(var item in a){

　　　　console.log(item);

　　}

　　a = [11,22,33,44]　

　　for(var item in a){

　　　　console.log(a[item]);

　　}

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

        循環列表

　　for(var i=0;i<a.length;i=i+1){}     循環列表的方法

　定時器：

　　setInterval("要執行的代碼",時間間隔) -- 一直間隔執行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //建立一個定時器
        //setInterval("alert(123);",5000);
        //上面setInterval是設置一個定時器，沒5秒出現一個彈框
        function f1(){
            console.log("百度招人好牛逼，都把廣告弄到瀏覽器上面了，只有程序員纔會打開console這個瀏覽器的地方")
        }
        setInterval("f1();",2000)
    </script>
</body>
</html>

    setInterval("string/function",時間),setInterval是設置間隔時間，執行前面的程序，string/函數,Interval是間隔

　alert()   在瀏覽器打印消息

    console.log()：在console處打印。

>:tag = document.getElementById("i1");                  #從網頁中全部HTML中查找Id等於("i1")的標籤
>:content = tag.innerText                               #獲取標籤內部的內容

     函數

    function 函數名(參數1,參數2) {

　　}

    Dom操做    （https://www.cnblogs.com/wupeiqi/articles/5643298.html）

    　　一、找到標籤

　　　　　document.getElementById("id值")     　　　　     id是惟一的，在HTML中

　　　　　document.getElementsByTagName("div")     　　 獲取多個元素，數組形式（列表）

　　　　　document.getElementsByClassName("c1")    　　 獲取多個元素，經過class屬性的值（列表）

　　　　　a、直接查找

方法 做用
document.getElementById 根據ID獲取一個標籤
document.getElementsByName 根據name屬性獲取標籤集合
document.getElementsByClassName  根據class屬性獲取標籤集合
document.getElementsByTagName  根據標籤名獲取標籤集合

　　　　　b、間接查找            　　

獲取標籤 做用
parentElement //父親點標籤元素
children //全部子標籤
firstElementChild //第一個子標籤元素
lastElementChild //最後一個子標籤元素
nextElementSibling //下一個兄弟標籤元素
previousElementSibling //上一個兄弟標籤元素

 

獲取節點 做用
parentNode //父節點
childNodes //全部子節點
firstNode //第一個子節點
lastChild //最後一個子節點
nextSibling // 下一個兄弟節點
previousSibling //上一個兄弟節點

　　　二、操做標籤

　　　　a.InnerText

　　　　　獲取標籤中的文本內容

　　　　　標籤.innerText

　　　　　對標籤內部的文本進行從新賦值

　　　　　標籤.innerText = ""

　　　　b.className

　　　　　tag.className=》 直接總體作操做

　　　　　tag.classList           獲取class標籤集合

　　　　　tag.classList.add("樣式名")      添加指定樣式

　　　　　tag.classList.remove("樣式名")     刪除指定樣式

　　　　ps:

　　　　　　<div onclick="func();">點我</div>

　　　　　　<script>

　　　　　　　　function func(){

　　　　　　　　　　　　　　}

　　　　　　</script>

     下面HTML代碼是一個彈框點擊出現和消失的實現，以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display:none;
        }
        .c1{
            position:fixed;
            left:0;
            top:0;
            right:0;
            bottom:0;
            background-color:black;
            opacity:0.6;
            z-index:9;
        }
        .c2{
            width:500px;
            height:400px;
            background-color:white;
            position:fixed;
            left:50%;
            top:50%;
            margin-left:-250px;
            margin-top:-200px;
            z-index:10;
        }
    </style>
</head>
<body style="margin:0;">
    <div>
        <input type="button" value="添加" onclick="showModel();"/>
        <table>
            <thead>
                <tr>
                    <th>
                        主機名
                    </th>
                    <th>
                        端口
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td>1.1.1.3</td>
                    <td>194</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--遮罩曾開始-->
    <div id="i1" class="c1 hide"></div>
    <!-- 遮罩層結束 -->

    <!-- 彈出框開始 -->
    <div id="i2" class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text"/></p>
        <p>
            <input type="button" value="取消" onclick="hideModel();"/>
            <input type="button" value="肯定" />
        </p>
    </div>
    <!-- 彈出框結束 -->
    <script>
        function showModel(){
            document.getElementById("i1").classList.remove("hide")
            document.getElementById("i2").classList.remove("hide")
        }
        function hideModel(){
            document.getElementById("i1").classList.add('hide')
            document.getElementById("i2").classList.add('hide')
        }
    </script>
</body>
</html>

    checkbox多選框裏面，checked選擇是true,未選擇是false，能夠進行賦值，checked=true或者checked=false

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程