如何理解JS
我们之前讲了html入门,就像是做机器人的外壳,但是光有外壳,再好看也华而不实,也可以理解成你想要一个好看的机器人,同时也想它能做家务勤劳啥的
JavaScript是一种网络的脚本语言,一般用于web开发 实现web中功能 js是解释型语言,我们在编译c语言时,会发现下面有个编译成功,然后出现exe文件,再运行exe文件,就是直接编译成机器语言,但是js不是编译后运行,而是边运行边解释,不直接生成机器语言,先生产中间代码,然后由解释器边解释边运行 ECMAScript 6.0 简称ES6:是JS的版本标准,2015.06 发版。
重要的事情说三遍,多看文档 JavaScript ES6
JS—赋予网页生命
一个简单的小示例带你了解js的效果 首先,给网页一个"脸"
代码语言:javascript复制<!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文件) 点击胡子有惊喜
代码语言:javascript复制 <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。
未经本人允许,禁止转载
后续会推出
前端:vue入门 vue开发小程序 等 后端: java入门 springboot入门等 服务器:mysql入门 服务器简单指令 云服务器运行项目 python:推荐不温卜火 一定要看哦 一些插件的使用等
大学之道亦在自身,努力学习,热血青春