JavaScript 01

1. 为什么学习 JavaScript?

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

HTML 定义了网页的内容

CSS 描述了网页的布局

JavaScript 控制了网页的行为

2. 什么是JavaScript？

JavaScript 是一个面向对象的脚本语言，目前互联网上较流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

面向对象是一种编程思想

面向对象是从面向过程升华而来。

面向过程--例如：从电视塔到钟楼 

将从电视塔开始到钟楼结束中途所经历的每一步都要记录  【公交车】

面向对象--例如：从电视塔到钟楼 

 将电视塔作为起始对象，钟楼作为结束对象 【滴滴】

脚本语言--编写好以后放到运行环境中直接就能运行的语言。

3. JavaScript的作用

1. JavaScript：直接写入HTML输入流

<h2 id="h2"></h2>
    <input type="button" value="直接写入HTML 输入流" onclick="test1();">


 function test1() {
            // document.write("<h2>测试直接写入HTML输入流</h2>;")
            document.getElementById("h2").innerHTML = "测试直接写入HTML 输入流";
        }

2. javascript：改变HTML 图像

 <input type="button" value="改变HTML图像" onclick="test2();">
    <img id="img1" src="imgs/avatar2.png">


function test2() {
            // document.getElementById("img1").src = "imgs/avatar3.png";
            document.getElementById("img1").style.display = "block";
            document.getElementById("img1").style.border = "20px solid black";
            document.getElementById("img1").style.width = "300px";
        }

3. javascript:验证输入

<input id="text1" type="text" placeholder="手机号码"><span id="error"></span>
    <input type="button" value="获取验证码" onclick="test3();">


 function test3() {
            var phone = document.getElementById("text1").value;
            var spanob = document.getElementById("error");
            if (phone == "13474687266") {
                alert("123456");
            } else {
                spanob.innerText = "手机号码有误!";
            }
        }

4. JavaScript 用法

如需在 HTML 页面中插入 JavaScript，请使用 script 标签。

script标签可被放置在 HTML 页面的 body 和 head 部分中。

JavaScript 函数和事件

function 函数名称(){} -- 结构函数

οnclick="函数名称()" -- 点击事件

事件触发函数执行

外部的 JavaScript

1.创建独立的javascript文件

 <input type="button" value="测试" onclick="testscript();">


function testscript() {
    alert("测试引入外部js");
}


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

5. JavaScript 输出显示数据

以后会经常编写JavaScript代码，判断自己的代码执行是否正常，那么就需要JavaScript 输出显示数据，来查看程序的运行结果

1. 使用 window.alert() 弹出警告框。

<input type="button" value="使用 window.alert() 弹出警告框" onclick="test1()" ;>

function test1() {
            var a = 100;
            var b = 20;
            var c = a / b;
            // window.alert(c);
            alert(c);
}

2. 使用 document.write() 方法将内容写到 HTML 文档中。

 <input type="button" value="document.write() 方法将内容写到HTML 文档中" onclick="test2()" ;>

function test2() {
            var a = 100;
            var b = 20;
            var c = a / b;
            document.write(c)
        }

3. 使用 innerHTML 写入到 HTML 元素。

 <input type="button" value="innerHTML 写入到HTML 元素" onclick="test3()" ;>
    <h4 id="h4"></h4>

 <input type="button" value="innerHTML 写入到HTML 元素" onclick="test3()" ;>
    <h4 id="h4"></h4>

4. 使用 console.log() 写入到浏览器的控制台。[推荐]

<input type="button" value="console.log() 写入到浏览器的控制台" onclick="test4()" ;>
</body>


function test4() {
            var a = 100;
            var b = 20;
            var c = a / b;
            console.log(c);
        }

6. JavaScript 注释

单行注释以 // 开头

多行注释以 /* 开始，以 */ 结尾。

多行注释可以包含单行注释，但多行注释不能包含多行注释