html学习第6天，js学习

js简介：

js是JavaScript的简称。是对网页的行为进行编辑。

js使用：

JavaScript代码是在<script></script>之间进行的。<script></script>标签可以在头标签中也可以在身体标签中实现。当然上述情况均称为内部标签。当然和css一样可以在外部放置脚本然后直接在html中调用。可通过完整的 URL 或相对于当前网页的路径引用外部脚本，使用完整的 URL 来链接至脚本。如果要引用外部脚本，要先在<script></script>标签中定义脚本姓名。注意：定义脚本姓名与外部脚本保存姓名要一致。

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

myScript.js

function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框

使用 document.write() 写入 HTML 输出

使用 innerHTML 写入 HTML 元素

使用 console.log() 写入浏览器控制台

<h2>js输出</h2>

    <script>

        document.write("syjfgdyusaihduyt")

    </script>

 

<h2>js输出</h2>

    <p id="deom"></p>

    <script>

        document.getElementById("deom").innerHTML = "hgyuggggggggg"

    </script> 

h2>

        窗口提示

    </h2>

    <script>alert("dfgysjhukjhjvghcfghdx")</script>

 js可以做什么？

1.js改变html内容

<h2>js能做什么</h2>
    <p id="demo">js能改变HTML内容</p>
    <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点我改变</button>

 

 2.js改变HTML属性

h2>js可以改变html属性</h2>
    <button onclick="document.getElementById('myimge').src='img/2.jpg'">开灯</button>
    <img id="myimge" border="0" src="img/6.jpg" style="text-align: center;">

 

 

3.js改变html元素样式

h2>js改变css样式</h2>
    <p id="demo">js改变HTML元素样式</p>
    <button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">点一下</button>

 

 4.js隐藏和显示html元素

<h2>js隐藏HTML样式</h2>
    <p id="demo">js隐藏HTML元素</p>
    <button type="button" onclick="document.getElementById('demo').style.display='none'">点一下</button>
    <h2>js显示隐藏元素</h2>
    <button type="button" onclick="document.getElementById('demo').style.display='block'">点一下</button>

 

 js能力

 js使用var定义变量名。在使用var时可以定义多个不同类型的变量。而且定义的变量名区分大小写。

h2>js语句</h2>
    <p id="demo"></p>
    <p id="aa"></p>
    <p id="bb"></p>
    <p id="cc"></p>
    <p id="dd"></p>
    <p id="ee"></p>
    <p id="ff"> </p>
    <p id="rr"> </p>
    <script>
        var x, y, z;
        x = 11; y = 111; z = x + y;
        document.getElementById('aa').innerHTML = 2;
        document.getElementById('demo').innerHTML = "z的值是" + z + ".";
        document.getElementById('bb').innerHTML = 'sgyuftrt';
        document.getElementById('cc').innerHTML = "yjgftyrtde";
        document.getElementById('dd').innerHTML = x;
        document.getElementById('ee').innerHTML = x + y;
        var someOne, someone;
        someOne = x;
        someone = y;
        document.getElementById("ff").innerHTML = someone;
        document.getElementById("rr").innerHTML = someOne;


    </script>

 输出结果

 理解undefind与null的区别。undefind是未定义的东西，null是定义其值为空值

<p id="aa"></p>
    <p id="bb"></p>
    <script>
        var wrong;
        notwrong = null;
        document.getElementById("aa").innerHTML = wrong;
        document.getElementById("bb").innerHTML = notwrong;

    </script>

 

<p id="aa"></p>
    <p id="bb"></p>
    <script>
        var wrong;
        notwrong = null;
        document.getElementById("aa").innerHTML = wrong + 1;
        document.getElementById("bb").innerHTML = notwrong + 1;

    </script>

 

 “+”号用法：

一般情况下“+”可以实现数字型的运算和字符串之间的相连。还能再输出时作为连接。当然如果遇到数字型与字符串同时出现，在遇到字符之前进行数字型的加法，遇到字符型不管后面有没有数字型都进行；字符的加法。

<p id="aa"></p>
    <script>
        //var someone = "hbgvfcde" + "" + "hgfds";
        //var someone = 2 + 3 + 5;
        someone = 10 + 2 + "3";
        //遇到”“开始进行字符串的加法
        document.getElementById("aa").innerHTML = someone;
    </script>

定义数组:

<h2>定义变量数组</h2>
    <p id="aa"></p>
    <script>
        var man = ["head", "body", 1, 2];
        document.getElementById("aa").innerHTML = man[0];
    </script>

typeof确定变量类型;

<h2>typeof确定变量类型</h2>
    <p id="aa"></p>
    <script>
        document.getElementById("aa").innerHTML =
            typeof "" + "<br>" +
            typeof "ahgfd" + "<br>" +
            typeof 0 + "<br>" +
            typeof 123 + "<br>" +
            typeof 1.22 + "<br>" +
            typeof (124)

    </script>

 创建对象

<h2>创建对象</h2>
    <p id="aa"></p>
    <p id="demo"></p>
    <script>
        //创建对象
        var person = { name: "jyb", age: 19, eyecolor: "black" };
        //访问对象方法两种a{b,c}.a.b或a["b"];
        document.getElementById("aa").innerHTML = person.name + "已经" + person["age"] + "岁了";

        // 创建对象：
        var person = {
            firstName: "Bill",
            lastName: "Gates",
            id: 12345,
            fullName: function () {
                return this.firstName + " " + this.lastName;
            }
        };

        // 显示对象中的数据：不使用 () 访问函数将返回函数声明而不是函数结果：
        document.getElementById("demo").innerHTML = person.fullName() + "<br>" + person.fullName;
    </script>

 调用函数

 <script>
        function myFunction() {
            document.getElementById("aa").innerHTML = "hello,wordle!";
        }
    </script>
    <p>调用函数</p>
    <button onclick="myFunction()">try</button>
    <p id="aa"></p>

。