Web前端（四）：JavaScript

JavaScript简称JS，是一种主要用作web开发的脚本语言，当然也可用作小程序开发、APP开发等用途，是通过镶嵌在HTML中来实现自身的功能的。JS、HTML、CSS往往一起出现，共同完成应用的开发。和HTML、CSS类似，JS也有一套标准——ECMAScript，2015年发布了第六版的ECMAScript也就是目前应用的标准，也称ES6。

JS在网页设计中主要负责网页的逻辑部分，比如说点击一个按钮会发生什么事情，如何调用后台接口等等，这些都是JS主要的负责模块。顺便提一句，为了方便全栈开发者，还可以直接使用JS来写后台（NodeJS）。JS是非常庞大的一个模块，需要很长时间的使用和学习才能掌握，接下来简单介绍一下简单的JS用法。

首先，JS也和CSS一样，都是需要镶嵌在HTML中才能发挥作用，所以也和CSS一样，JS的语句也可以通过两种方式实现。一种是直接写在.html文件中，通过<script></script>标签对包裹，这样浏览器就能够自动解析运行了。但是这样子不利于代码的管理，尤其是当网页代码很多时，看起来会十分地头疼。所以一般都是采用第二种方法，单独创建一个.js文件，然后把JS代码写好后，在通过标签引入:<script type="text/javascript" src="./demo.js"></script>到.html文件的<html></html>标签内，一般放置在body底部，以免元素渲染未完成导致JS出错。

在引入完成后，就可以来使用JS来完成一些操作了了。首先，在之前的web前端（二）中提到过，传统的网页开发有一个特点就是对DOM的操作，通过JS就能很灵活地对DOM进行操作。

//直接在按钮上绑定事件
<button id="btn" onclick="document.getElementById('demo').innerHTML = Date()">
点击这里来显示日期和时间
</button>
//或者通过获取元素再添加事件
<button id="btn" class="btn" onclick="change()">点击显示日期和时间</button>
<img src="" alt="" id="img">
<script>
    function change() {
        var btn = document.getElementById('btn'); //通过id获取元素
	btn.innerHTML = Date();  //改变HTML内容
    	document.getElementsByClassName('btn').style.fontSize = "25px";  //通过class获取元素，改变CSS样式
        document.getElementById('img').src = "https://mu-mu.cn/blog/wpcontent/uploads/2020/06/cropped-16894-scaled-1.jpg"//改变属性
    }
</script>

除了对DOM的操作，还有很多操作也是我们经常会使用到的。

1、常用作用户交互和调试

window.alert("hello");  //以弹框的形式出现
window.confirm("hello");  //以确认框的形式出现,返回为true or false
window.prompt("请输入你的名字：")  //以弹出输入框的形式出现,返回值为输入的内容
console.log(btn);  //打印在开发者中，按F12，点击console查看

2、用户进入及离开页面时会触发的事件：onload 和 onunload
<body onload = "change()">

3、当input内容发生改变时会触发的事件：onchange
<input type="text" οnchange="change()">

4、与鼠标有关的事件：onmouseover 和 onmouseout和onclick (onmousedown+onmouseup)。

5、获取浏览器尺寸：
console.log(window.innerWidth,window.innerHeight)

6、与时间有关的函数：setTimeout在等待指定的毫秒数后执行函数，只执行一次。
window.setTimeout(function, milliseconds);
setInterval(function, milliseconds); //会一直执行
clearTimeout(timer)和clearInterval(timer) //清除计时器

7、与后台进行数据交互：Ajax。Ajax是一种异步请求数据的方式，可以在不刷新页面的情况下更新网页，所谓的异步，就是与页面的加载、渲染等工作并发进行，能够极大地提升效率且不会与正在执行的事务发生冲突，但是也正是因为事件发生的顺序是未知的，容易发生一些错误。以下是最原始的Ajax请求形式。

var xhttp = new XMLHttpRequest();  //创建XMLHttpRequest对象
xhttp.open("POST", "url", true);  //规定请求类型、url、同步和异步
xhttp.send(obj);  //发送请求（可带参数）
xhttp.setRequestHeader("token","value")  //添加请求头部信息
xhttp.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200){ //4代表请求已完成且响应已就绪；200表示服务器OK
      console.log(this.responseText);
    }
};

以上就是JS最基础也是最常用的用法，掌握了这些用法之后，再结合之前学过的HTML和CSS，我们就能动手设计开发自己的网页了。但是JS毕竟是一种语言，还有很多东西是我没有提到的，也有很多东西是我也不懂的。关于JS的语法和更多用法，有兴趣和需要的话还是得自己去学习摸索吧！

另外，如果你有兴趣，或者是有问题想要与我探讨，欢迎来访问我的博客：https:mu-mu.cn/blog

Web前端（四）：JavaScript

猜你喜欢