1.作用域
全局作用域:在整个js文件之内,或者在函数内部无声明,直接赋值
局部作用域:在函数内的变量(不能再外部使用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 全局变量
var num = 10;
function fun() {
// 局部变量
var num1 = 20;
// 全局变量
num2 = 30;
}
console.log(num)
// 不能使用
console.log(num1)
console.log(num2)
// 作用域链
function fun1() {
var num3 = 10;
function fun2() {
var num3 = 333
// 离得近的
console.log(num3)
}
}
</script>
</head>
<body>
</body>
</html>
2.预解析
js运行时,js引擎先进行预解析,再执行代码。
预解析:分为变量预解析和函数预解析。分为变量预解析就是把所有var 变量名 提到前面执行。函数预解析就是函数声明提升到前面
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
console.log(num);
// 会输出undefined,因为预解析,var num会被先执行
var num = 10;
fun();
var fun = function(){
console.log(44);
}
// 会报错,因为var fun,fun不是函数
fun1();
function fun1() {
console.log(33312);
}
// 不会报错,因为预解析将函数声明提升到前面
</script>
</head>
<body>
</body>
</html>
3.js对象
对象包括属性和行为
创建对象的方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 创建对象方法
// 1.字面量
var obj = {
name: 'mingda',
sex: '男',
age: 18,
sayHi: function() {
console.log('hi');
}
};
// 使用对象
console.log(obj.age);
console.log(obj['sex']);
obj.sayHi();
// 2.利用new
var obj1 = new Object();
obj1.name = 'di';
obj1.age = 19;
obj1.sayHello = function() {
console.log('hello');
}
// 使用对象
alert(obj1.name);
alert(ob1['sex']);
obj1.sayHello();
//3.利用构造函数
function King(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
this.say = function() {
console.log('hi');
}
}
bob = new King('bob', 'man', 19);
alert(bob.name);
al = new King('alice', 'woman', 20);
al.say();
// 遍历对象
var obj2 = {
name: 'mingda',
sex: 'man',
age: 18,
fun: function() {
console.log('hi')
}
};
for(var k in obj2) {
// 输出对象属性
console.log(k);
// 输出对象值
console.log(obj2[k]);
}
</script>
</head>
<body>
</body>
</html>
4.内置对象
常见Math,Date,Array,String
推荐查阅文档:https://developer.mozilla.org/zh-CN/docs/Web
Math
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// Math不是构造函数,使用不需要new
console.log();(Math.max(1,2,3))
console.log();(Math.PI)
console.log(Math.max());
// 取整
console.log(Math.floor(1.2));
console.log(Math.ceil(1.3));
console.log(Math.round(3.4));
// 0-1之间随机小数
console.log(Math.random());
// 返回任意数之间的
function getRandom(max, min) {
var ran = Math.floor(Math.random() * (max - min + 1) + min);
return ran
};
getRandom(10, 20);
</script>
</head>
<body>
</body>
</html>
猜数字游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function getRandom(max, min) {
var ran = Math.floor(Math.random() * (max - min + 1) + min);
return ran
};
correct = getRandom(1, 100);
status = true;
while(status) {
guess = parseInt(prompt('输入的数字'));
if(correct == guess) {
alert('你猜对啦!');
status_1 = parseInt(prompt('输入的数字选择\n1.再玩一次\n2.退出'));
if(status_1 = '2'){
status = false;
break;
}else{
status =true
}
}else if(correct < guess) {
alert('你猜大了!');
}else if(correct > guess) {
alert('你猜小了!');
}
};
</script>
</head>
<body>
</body>
</html>