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

深碍√TFBOYSˉ_ 2022-12-21 09:29 130阅读 0赞

# 如何理解JS #

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

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

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

# JS—赋予网页生命 #

一个简单的小示例带你了解js的效果  
  
**首先，给网页一个"脸"**  
![在这里插入图片描述][20201115235123892.png_pic_center]

<!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文件)  
点击胡子有惊喜  
![在这里插入图片描述][20201116002830259.gif_pic_center]

<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手册][JavaScript]  
[ES6教程][ES6]

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

> `未经本人允许，禁止转载`

![在这里插入图片描述][20201110144238980.gif_pic_center]

后续会推出

前端：vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 1] 一定要看哦  
一些插件的使用等

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]有问题可以下方留言，看到了会回复哦

[JavaScript]: https://www.w3school.com.cn/jsref/index.asp
[ES6]: https://www.runoob.com/w3cnote/es6-tutorial.html
[20201115235123892.png_pic_center]: /images/20221120/67da0339119e4805a3db067a08a9b450.png
[20201116002830259.gif_pic_center]: /images/20221120/9220bd36376847e39111a7938b8fc860.png
[https_blog.csdn.net_qq_42027681]: https://blog.csdn.net/qq_42027681
[20201110144238980.gif_pic_center]: /images/20221120/ede52a5d9b4444beb3ca47c46b793ccc.png
[Link 1]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/36fc3d8b892440e2b2823ec77ec589b0.png