js入门(ES6)[一]---让网页动起来的js

如何理解JS

我们之前讲了html入门，就像是做机器人的外壳，但是光有外壳，再好看也华而不实，也可以理解成你想要一个好看的机器人，同时也想它能做家务勤劳啥的

JavaScript是一种网络的脚本语言,一般用于web开发
实现web中功能
js是解释型语言，我们在编译c语言时，会发现下面有个编译成功，然后出现exe文件，再运行exe文件，就是直接编译成机器语言，但是js不是编译后运行，而是边运行边解释，不直接生成机器语言，先生产中间代码，然后由解释器边解释边运行
ECMAScript 6.0 简称ES6:是JS的版本标准，2015.06 发版。

重要的事情说三遍，多看文档
JavaScript
ES6

JS—赋予网页生命

一个简单的小示例带你了解js的效果

首先，给网页一个”脸”
在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style> .head{ width: 180px;height: 130px;border: 1px solid black; } .hair{ width: 180px;height: 30px;background-color: black;color: white;text-align: center; } .beard{ width: 180px;height: 15px;background-color: black;color: white;text-align: center;position: relative;top: 62px;font-size: 5px; } </style>
    </head>
    <body>
        <div class="head">
            <div class="hair">头发</div>
            <div style="position: relative;left: 18px;top: 5px;">
                <input type="button" value="左眼" />
                <input type="button" value="右眼" style="position: relative;left: 50px;" />
                <input type="button" value="嘴巴" style="position: absolute;left: 50px;top: 50px;"/>
            </div>
            <div class="beard">胡子</div>
        </div>
    </body>
</html>

让脸动起来
点击头发，头发消失
我们让点击左眼出现眨眼动作
点击右眼切换眼睛
点击嘴巴说话(有语音，动图无法展示，自行脑补，语音内容:我是代码哈士奇，可以在网上找在线语音合成自行合成mp3使用，或者播放自己的mp3文件)
点击胡子有惊喜
在这里插入图片描述

<body>
        <div class="head">
            <div class="hair" id="hair" onclick="noHair()">头发</div>
            <div style="position: relative;left: 18px;top: 5px;">
                <input type="button" value="左眼" id="leftEye" style="height: 22px;" onclick="blinkEye()"/>
                <input type="button" value="右眼" id="rightEye" style="position:absolute;left: 100px;" onclick="changeEyse()"/>
                <input type="button" value="嘴巴" style="position: absolute;left: 50px;top: 50px;" onclick="speak()"/>
            </div>
            <div class="beard" id="beard" onclick="changeBeard()">胡子</div>    
        </div>
        <script type="text/javascript"> function noHair(){ let hair = document.getElementById("hair"); hair.style.backgroundColor = "white"; setTimeout(function(){ alert("头发都没有");},1000) } function blinkEye(){ let leftEye = document.getElementById("leftEye"); leftEye.style.height = "2px"; setTimeout(function(){ leftEye.style.height="22px"},100) } function changeEyse(){ let rightEye = document.getElementById("rightEye"); if(rightEye.type=="button"){ rightEye.type = "image"; rightEye.src = "./eye.PNG"; }else{ rightEye.type = "button"; } } function speak(){ let audio = new Audio("./speak.mp3"); audio.play(); } function changeBeard(){ let beard = document.getElementById("beard"); beard.innerText = "我是小可爱"; } </script>
    </body>

是不是很好玩呢
我们自己定义了一张脸，定义了脸的功能。
从这篇文章开始我们开始学习js基础
让我们一起让脸动起来吧！加油！奥里给！

学习JS的方法
多学多练习多看文档
JavaScript手册
ES6教程

大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：https://blog.csdn.net/qq_42027681。

未经本人允许，禁止转载

在这里插入图片描述