JavaScript
先来写个最简单的js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="function.js"></script>
</head>
<body>
</body>
</html>
先在html引入script标签,里面是function.js文件
然后在function.js文件中写js代码
var x=1;
var y=2;
var result=x+y;
alert(result);
alert方法是一个提示框
所以我们打开html,会发现
出现了提示框,里面是result
然后我们来写一个简单的循环
x=0;
while(x<10){
x++;
console.log(x);
}
结果是
再来写for循环
for(i=0; i<10; i++){
console.log(i);
}
JavaScript对象Object
var student={
name: 'abc',
age: 20
}
console.log(student)
方法function
function add(a,b){
return a+b;
}
var a=add(1,2);
console.log(a);
Event事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red {
width: 200px;
height: 200px;
border: 2px solid red;
}
.blue {
width: 200px;
height: 200px;
border: 2px solid blue;
}
</style>
</head>
<body>
<div class="red" id="div01"></div>
</body>
<script>
var changeClass = function () {
if (this.className == 'red') {
this.className = 'blue';
} else {
this.className = 'red';
}
}
var target = document.getElementById("div01");
target.addEventListener('mouseover', changeClass)
target.addEventListener('mouseout', changeClass)
</script>
</html>