JS基础学习笔记

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>