How to understand JS
We talked about the introduction of html before, which is like making the shell of a robot, but no matter how beautiful the shell is, it is also flashy. It can also be understood that you want a good-looking robot, and you also want it to do housework and hard work.
JavaScript is a network scripting language, generally used for web development to
realize the functions in the web.
js is an interpreted language. When we compile the C language, we will find that the following compilation is successful, and then the exe file appears, and then run the exe file, which is Directly compiled into machine language, but js is not compiled and run, but interprets while running, instead of directly generating machine language, first produces intermediate code, and then the interpreter interprets and runs
ECMAScript 6.0. ES6 for short: is the version standard of JS. 2015.06 release.
The important thing is said three times, read the documentation
JavaScript
ES6 more
JS—bring web pages to life
A simple small example will take you to understand the effect of js.
First, give the webpage a "face"
<!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>
Let the face move.
Click on the hair, and the hair disappears.
Let’s make the blinking motion appear when clicking on the left eye.
Click on the right eye to switch the eyes.
Click on the mouth to speak (there is a voice, the animation cannot be displayed, and the brain fills in by itself. The voice content: I am a code husky, you can find it on the Internet Online speech synthesis to synthesize mp3 by itself, or play your own mp3 file)
Click on the beard to have a surprise
<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>
Isn’t it fun?
We define a face ourselves and define the functions of the face.
From this article, we start to learn the basics of js.
Let's make our faces move! Come on! Ori give it!
The way to learn JS,
learn more, practice more see the document
JavaScript manual
ES6 tutorial
Hello everyone, I am a code husky, a student of network engineering in the Software College, because I am a "dog", and I can eat meat for thousands of miles. I want to share what I learned during university and make progress with everyone. However, due to the limited level, there will inevitably be some mistakes in the blog. If there are any omissions, please let me know! For the time being, only update on the csdn platform, the blog homepage: https://blog.csdn.net/qq_42027681 .
未经本人允许，禁止转载
Will be launched later
Front-end: vue entry vue development applet, etc.
Back-end: java entry springboot entry, etc.
Server: MySQL entry server simple instructions cloud server to run the project
python: recommended not to warm up, be sure to see
the use of some plug-ins, etc.
The way of university is also in oneself, study hard, youth
with passion. If you are interested in programming, you can join our QQ group to communicate: 974178910
if you have any questions, you can leave a message below, and you will reply if you see it.