day15--JavaScript语言

JavaScript

    JavaScript是一门单独的编程语言。浏览器内置JavaScript的解释器。 

    独立的语言，浏览器具有js解释器。

    存在与HTML中，在HTML中写JavaScript，存在形式是<script></script>

    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) 

    　　数字

            　　1、数字（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循环

        1、循环时，循环的元素是索引

　　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）

    　　1、找到标签

　　　　　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 //上一个兄弟节点

　　　2、操作标签

　　　　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

posted @ 2017-10-05 08:14  （野生程序员）  阅读(324)  评论(0)  编辑  收藏  举报