1.引入方式
内部脚本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 内部脚本 -->
<script>
alert('hello js');
</script>
</body>
</html>
外部脚本
alert.js代码
alert("hello world");<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./JS/alert.js"></script>
</body>
</html>
书写语法
变量
数据类型
使用typeof 看他的类型
运算符
将其他类型转化成数字，用 parseInt （）
函数
对象
1.Array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
var arr=new Array(1,2,3);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
arr[10]=10;
console.log(arr);
console.log(arr[5]);
</script>
</html>
2.String
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
var str='helloworld';
console.log(str);
console.log(str.charAt(4));
console.log(str.length);
console.log(str.indexOf('wo'));
console.log(str.substring(5,10));
</script>
</html>
3.json
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
var user='{"name":"jack","age":18,"gender":"male"}';
var jsobsject=JSON.parse(user);
alert(jsobsject.name);
var jsonStr = JSON.stringify(jsobsject);
console.log(jsonStr);
</script>
</html>
4.BOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
var result=confirm("你确定删除吗");
alert (result);
var i=0;
setInterval(function(){
i++;
console.log("这是第"+i+"次");
},2000);
setTimeout(function(){
alert("周期到了");
},5000);
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
alert(location.href);
location.href="http://baidu.com"
</script>
</html>
5.DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img id="h1" src="jpg/xinlang.jpg" ><br>
<div class="cls">你好呀</div> <br>
<div class="cls">我好呀</div> <br>
<input type="checkbox" name="hobby" > 电影
<input type="checkbox" name="hobby" > 旅游
<input type="checkbox" name="hobby" > 游戏
</body>
<script>
// //获取Element元素
// //根据ID获取
// var img=document.getElementById('h1');
// alert(img);
// //根据标签获取
// var divs=document.getElementsByTagName('div');
// for (let i = 0; i < divs.length; i++) {
// alert(divs[i]);
// }
//根据name属性获取
var ins=document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
alert(ins[i]);
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img id="h1" src="jpg/xinlang.jpg" ><br>
<div class="cls">你好呀</div> <br>
<div class="cls">我好呀</div> <br>
<input type="checkbox" name="hobby" > 电影
<input type="checkbox" name="hobby" > 旅游
<input type="checkbox" name="hobby" > 游戏
</body>
<script>
// //获取Element元素
// //根据ID获取
// var img=document.getElementById('h1');
// alert(img);
// //根据标签获取
// var divs=document.getElementsByTagName('div');
// for (let i = 0; i < divs.length; i++) {
// alert(divs[i]);
// }
// //根据name属性获取
// var ins=document.getElementsByName('hobby');
// for (let i = 0; i < ins.length; i++) {
// alert(ins[i]);
// }
//根据class属性获取
var divs=document.getElementsByClassName('cls');
var div1=divs[0];
div1.innerHTML="hello world";
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img id="h1" src="jpg/xinlang.jpg" ><br>
<div class="cls">你好呀</div> <br>
<div class="cls">我好呀</div> <br>
<input type="checkbox" name="hobby" > 电影
<input type="checkbox" name="hobby" > 旅游
<input type="checkbox" name="hobby" > 游戏
</body>
<script>
// //获取Element元素
// //根据ID获取
// var img=document.getElementById('h1');
// alert(img);
// //根据标签获取
// var divs=document.getElementsByTagName('div');
// for (let i = 0; i < divs.length; i++) {
// alert(divs[i]);
// }
// //根据name属性获取
// var ins=document.getElementsByName('hobby');
// for (let i = 0; i < ins.length; i++) {
// alert(ins[i]);
// }
//根据class属性获取
// var divs=document.getElementsByClassName('cls');
// var div1=divs[0];
// div1.innerHTML="hello world";
var img=document.getElementById('h1');
img.src="jpg/xinlang-2.jpg";
var ins=document.getElementsByTagName("div");
for (let index = 0; index < ins.length; index++) {
var temp=ins[index];
ins[index].innerHTML+="<font color='red'>very good</font>"
console.log(temp);
}
</script>
</html>
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img id="h1" src="jpg/xinlang.jpg" ><br>
<div class="cls">你好呀</div> <br>
<div class="cls">我好呀</div> <br>
<input type="button" value="按钮1" id="btn1" onclick="on()"> <br>
<input type="button" value="按钮2" id="btn2"> <br>
</body>
<script>
function on(){
alert("按键1被点击了");
}
document.getElementById('btn2').onclick=function(){
alert("按键2被点击了");
}
</script>
</html>
