初识JavaScript

来源：互联网发布：粒子群算法伪代码编辑：程序博客网时间：2024/05/11 04:04

初识JavaScript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

<script !src="" language="JavaScript">       var i =0;</script>Var 定义一个变量

引用JavaScript的三种方法：

第一种方法：在元素的属性里直接添加代码

<button id="b1" name="b2" onclick="var i=0;console.info('hello')">点我</button>

第二种方法：直接在head标签内部放置一个script标签

<script >var i =0;    function print(){        alert("hello word");    }    <button onclick="print();">点我</button></script>

第三种引用方式，通过引入一个外部文件，使用JavaScript

<script src="j1.js"></script>

Js控制标签：

通过获取到相应id的标签，从而设置属性

document.getElementById()  获取标签的id<script>    function tdemo(){        var i1 = document.getElementById("i1");        var i2 = document.getElementById("i2");        var i3 = document.getElementById("i3");        i3.value = parseInt(i1.value) +　parseInt(i2.value)    }</script><body>    <input type="text" value="0" id="i1" maxlength="2"><br>    <input type="text" value="0" id="i2"><br>    <button id="b1" onclick="tdemo();">点击相加</button><br>    <input type="text" id="i3" value="0"></body>

为了能更好的调试代码，我们要开始习惯使用谷歌浏览器，内置了有非常强大的网页调试工具

下载地址：

链接：http://pan.baidu.com/s/1c15A4Ys 密码：u6r6

按F12或者 Ctrl + Shift + C 打开调试界面

Console 控制台调试

按ESC键打开Console控制台

或者点击：Console 查看控制台

也是可以看到控制台的。

Console控制台可以直接运行JS代码

document.getElementById("i2").value="56";

可以直接应用在网页上

document.getElementById('i1').style.display=”none”;

效果：

利用JS实现网页的收缩和展开

以下是完整网页代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>后台</title>    <style>        #d0{            position: fixed;            background-color: black;            width: 100%;            top: 0;            left: 0;            height: 50px;            z-index: 1;        }        #d1{            position: absolute;            background-color: #8e8e8e;            width: 17%;            height: 100%;            left: 0;            top: 50px;        }        #d2{            position: absolute;            background-color:lightgreen;            width: 83%;            height: 100%;            left: 17%;            top: 50px;        }        button{            top: 17%;            height: 45px;            width: 70px;            background: coral;            font-size: 10px;            color:black;        }    </style>    <script>        /*         * 创建人：零度         * 创建时间：2017-1-11         * 功能：收缩菜单栏         * */        function shrink(){            document.getElementById('d1').style.width = "1%";            document.getElementById('d2').style.width = "100%";            document.getElementById('d2').style.left = "1%";        }        /*        * 创建人：零度        * 创建时间：2017-1-11        * 功能：展开菜单栏        * */        function expand(){            document.getElementById('d1').style.width = "17%";            document.getElementById('d2').style.width = "83%";            document.getElementById('d2').style.left = "17%";        }        /*         * 创建人：零度         * 创建时间：2017-1-11         * 功能：当导航栏已经展开的时候，点击就可以收缩，并且文字要变成"展开"         * 当导航栏已经收缩的时候，点击就可以展开，并且文字要变成"收缩"         * */        function shrinkOrExpand(){            var d1 = document.getElementById("d1");            var d2 = document.getElementById("d2");            var d3 = document.getElementById('d3')            if (d3.innerHTML=="收缩"){                console.info("15%");                //1、先把d1的宽度调整为5%                d1.style.width="1%"                //2、把d2的宽度调整为94%                d2.style.width="100%"                d2.style.left="1%"                //3、把按钮的内容调整为展开                d3.innerHTML = "展开"            }else {                //1、先把d1的宽度调整为5%                d1.style.width="17%"                //2、把d2的宽度调整为94%                d2.style.width="83%"                d2.style.left="17%"                //3、把按钮的内容调整为展开                d3.innerHTML = "收缩"            }        }    </script></head><body>    <div id="d0"></div>    <div id="d1"></div>    <div id="d2">        <button id="b1" name="b1" onclick="shrink();">收缩</button>        <button id="b2" name="b2" onclick="expand();">展开</button>        <button id="d3" name="d3" onclick="shrinkOrExpand();">收缩</button>    </div></body></html>