js的写法
js跟css一样,script标签可以放在网页的任何位置,script标签也可以写多个:
多个标签之间的变量也是可以互相使用的:
但这种情况必须上面定义,下面输出,不能在上面输出,下面定义。
因为,js代码的预解析,只能在当前这个script标签中,不能对整个html生效。
作用域
能起到作用的区域就叫做作用域。定义在不同区域的变量,他的作用域是不一样的。
不在任何一个函数中定义的变量叫全局变量。他的作用域是定义之后的所有文档区域。
例:
在函数中定义的变量叫局部变量。他的作用域是当前这个函数中,函数外不能使用。 例:
如果全局和局部都有同名的变量,局部输出时如何输出呢?
变量在输出时,首先考虑当前作用域,当前作用域中就会输出当前作用域中的变量,如果当前作用域中没有,才会考 虑外面的全局。
作用域链
函数是写在全局中,也就是说,局部作用域是被嵌套全局作用域中的。函数中也是可以定义函数的,也就是局部作用 域中可以再有局部作用域,这样就形成了作用域的嵌套,我们将这个链式结构叫做作用域链。
例:
这段代码的作用域链如下:
作用域链有助于我们分析变量的使用以及赋值规则,规则如下:
1、当使用变量(将变量当做值赋值,输出变量,使用变量计算)的时候,先在当前作用域中找是否定义过变量,如果 定义过,就使用;如果没有定义过,就去上一级作用域中找是否定义过,定义过就使用,没有定义就继续去上 级作用域中找,......直到找到全局,全局中如果定义过,使用的就是全局中的变量;如果全局中没有定义过,报 错:XXX is not defined
2、当给一个变量赋值的时候,先在当前作用域中找是否定义过这个变量,如果定义过,就给这个变量赋值;如果 没有定义过,就去上级作用域中找是否定义过,找到就赋值,没找到就继续去上级作用域中找,......直到找到全 局,全局中定义过,就给这个全局变量赋值,如果全局没有定义过,就在全局定义这个变量并赋值
练习:
结论:
1. 全局中有预解析,局部中也有预解析,局部的预解析,只能在局部中进行,不会将变量提升到全局
2. 使用连等的方式定义变量并赋值,只有第一个有定义过程,其余的都是直接赋值
3. 函数定义好以后,函数名就跟变量名一样,可以使用函数名修改这个空间中的值
4. 局部的预解析会在形参赋值之后,预解析中的函数会覆盖掉形参赋的值
递归函数
递归函数就是在函数中调用自己。
事件
js中的事件指的是用户在网页中的行为,例如:鼠标点击、鼠标移动、。。。。。。
事件通常由3个要素组成:
1. 事件源:触发事件的标签元素,例如,点击的是div、还是button 。。。
2. 事件类型:行为的类型,是单击还是双击,还是右击。。。
3. 事件处理程序:事件触发后要做的事情 - 函数
例:
事件类型
事件的其他写法:
注意:如果给事件赋值函数名,千万不能加小括号调用 事件还可以写在行内:
注意:在行内的事件中调用函数一定要加小括号调用才行
js可以像css一样有3种写法:
行内写法:事件
内联写法:平常写的代码
外联写法:项目中要将js代码放在一个文件中,在html中引入js文件
对象
如果我们存储一个人信息的姓名和年龄,需要两个变量:
如果存储另一个人的信息,需要再次定义两个变量,但是变量名不能重复,因为重复会覆盖掉上面的变量:
从上面4个变量,可以看出来,每个变量都是独立的,互相之间是没有联系的,如果要将多个变量组合在一起去描述 一个人的信息,变量之间没有关系是很容易弄错的。
为了让多个值之间有联系,确保多个值就是用来描述一个人的,就需要对象这种数据来处理。 在学习数据类型的时候,学习过对象这种数据类型,他的表现形式:
这三种不同的表现形式指的都是对象。我们让多个不同的值描述一个人,重点看使用 {} 定义的对象。
定义对象
这样定义的对象是空数据,其中什么也没有。对象中的值,是由键值对组成。 键值对是指在描述一个事物的时候,需要一个名字,对应一个值,例如:
定义有数据的对象,键和值之间使用冒号隔开,键值对之间使用逗号隔开:
对象有一个特性,第一次打开的时候,只能看到Object,再次刷新页面, 会显示里面的数据:
对象中键值对的数量没有限制,可以有任意多个:
对象中的键都是字符串,只是正常情况下可以省略引号,但如果键中包含连字符,就不能省略引号了:
从输出的结果中能看到,书写顺序和显示的顺序是不同的,因为对象中的键值对是没有顺序的。
对象的基本操作
访问对象中的值:
例:
对象的遍历:
遍历的意思就是将每一个值都访问一遍。
js提供了专门用来遍历对象的操作语法:
例:
注意:遍历对象时,输出对象中的值,必须使用 对象 代表键的变量 这种形式来输出。
因为,如果使用 . 来访问的话,是有歧义的:
如果使用一个变量来代替 name 这个键:
此时,浏览器会将 obj.a 识别为:我们正在访问obj中键为 a 的值, . 后面的内容,表示对象中的键的名称,所以此 时只能使用 [] 的形式来访问:
此时 [] 中的 a 是一个变量,因为没有加引号,代表 ['name'] 。
给对象添加属性:
打印对象的结果:
如果设置的属性名是对象中已经存在的呢?
打印结果:
删除对象中的键值对:
例:
方法概念
对象中值的类型是没有限制的,可以是任意类型。当值不是函数的时候,我们将这个键值对叫做对象的属性,当值是 一个函数的时候,我们将这个键值对叫做对象的方法。
name 就是对象 obj2 的属性, study 就是对象 obj2 方法
方法的访问和属性是一样的:
构造函数
对象除了上面直接使用 {} 的形式来创建,还可以使用函数来创建,任意一个函数在调用的前面加 new 关键字,就可以得到一个对象。例:
当一个函数被用来创建对象使用的时候,这个函数就叫做构造函数。
上面的函数 fn 需要自己创建,js系统为了方便创建对象,提供了一个专门用来创建对象的函数: Object
我们创建对象也可以使用这种方式去创建。其中的 Object 函数就是js系统提供的构造函数。 使用构造函数创建对象并给对象添加键值对:
练习题
-
用函数求出n(n>=1)以内所有偶数的个数,n是变量,可以变化
-
用函数求任意三个数的最大值
-
用函数判断一个数字是否是素数
-
一个游戏,前20关,每一关得关卡数分数;21-30关,每一关得10分;31-40关,每一关得20分;41-49关,每一关得30分;50关,得100分。输入你现在闯到的关卡数,求你现在拥有的分数
-
标准体重:男士体重=身高-100±3 女士体重=身高-110±3。写个函数,输入身高、体重、性别,输出偏重、偏瘦、正常。
-
输入一个年份,判断是否是闰年,得到布尔值
-
求两个任意数字的数学运算结果
var a = parseInt(prompt("输入第一个数字:")); var b = parseInt(prompt("输入第二个数字:")); var fuhao = prompt("输入运算的符号(仅限+-*/):")
-
编写一个函数,计算三个数字的大小,按从小到大顺序输出
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
// 1.求数字n以内偶数的个数
// function fn(n){
// // var n = 5;
// // 定义计数器
// var k = 0;
// // 循环n以内的所有数字
// for(var a=n;a>=1;a--){
// // 判断是否是偶数
// if(a%2 === 0){
// k++
// }
// }
// // console.log(k);
// return k;
// }
// var a = fn(5)
// var b = fn(7)
// console.log(a, b);
// 2.求三个数的最大值
// function fn(a, b, c){
// // var a = 1;
// // var b = 2;
// // var c = 3;
// var max = a>b? a>c?a:c : b>c?b:c;
// // console.log(max);
// return max
// }
// var a = fn(1,2,3)
// var b = fn(3,4,5)
// console.log(a,b);
// 3.判断素数
// var num = 8;
// // var b = 1
// for(var a=2;a<num;a++){
// if(num%a === 0){
// console.log("不是素数");
// // b = 2
// // 因为已经知道结果了,就没有继续循环下一次了
// break
// }
// }
// // 如果没有被break完整运行结束了,a的值最终会是num
// // 如果循环中的条件成立过 - 有过一个数字能整除 - break - a的值最终不可能是num
// // console.log(a);
// // if(b === 1){
// // console.log("素数");
// // }
// // 通过判断a的值是否是num,来得到循环是否被break过 - if是否成立过
// if(a === num){
// console.log("是素数");
// }
// function fn(num){
// // var num = 8;
// for(var a=2;a<num;a++){
// if(num%a === 0){
// // console.log("不是素数");
// return false
// break
// }
// }
// if(a === num){
// // console.log("是素数");
// return true
// }
// }
// function fn(num){
// for(var a=2;a<num;a++){
// if(num%a === 0){
// return false
// // return能将大范围的函数都结束了,循环在函数中的,所有循环也就结束了 - break有点多余了
// // break
// }
// }
// // 如果上面的if成立过,就不可能执行到这里
// // 如果上面的if没有成立过,就一定会执行到这里
// // 如果代码执行到这里了,只能说上面的if没有成立过
// // 所有下面不用判断,能执行过的时候,就说明循环完整的运行过了,if没有成立过
// return true
// }
// var a = fn(5)
// var b = fn(8)
// console.log(a,b);
// 4.一个游戏,前20关,每一关得关卡数分数;21-30关,每一关得10分;31-40关,每一关得20分;41-49关,每一关得30分;50关,得100分。输入你现在闯到的关卡数,求你现在拥有的分数
// function fn(guan){
// // var guan = 31;
// var sum = 0
// for(var i=1;i<=guan;i++){
// if(i<=20){
// sum += i
// }else if(i>20 && i<=30){
// sum += 10
// }else if(i>30 && i<=40){
// sum += 20
// }else if(i>40 && i<50){
// sum += 30
// }else if(i === 50){
// sum += 100
// }
// }
// // console.log(sum);
// return sum
// }
// var a = fn(20)
// var b = fn(31)
// console.log(a,b);
// 5.标准体重:男士体重=身高-100±3 女士体重=身高-110±3。写个函数,输入身高、体重、性别,输出偏重、偏瘦、正常。
// var height = 180
// var weight = 69
// var sex = "女"
// if(sex === '男'){
// var standard = height - 100
// }else{
// var standard = height - 110
// }
// if(weight>=standard-3 && weight<=standard+3){
// console.log("正常的");
// }else if(weight>standard+3){
// console.log("重");
// }else if(weight<standard-3){
// console.log("瘦");
// }
// function fn(height,weight,sex){
// // var height = 180
// // var weight = 69
// // var sex = "女"
// if(sex === '男'){
// var standard = height - 100
// }else{
// var standard = height - 110
// }
// if(weight>standard+3){
// // console.log("重");
// return '重'
// }else if(weight<standard-3){
// // console.log("偏瘦");
// return '瘦'
// }else {
// // console.log("正常");
// return '正好'
// }
// }
// var res = fn(180,88,'男')
// console.log(res);
// 6.判断闰年
// function fn(year){
// if(year%4 === 0 && year % 100 !== 0 || year % 400 === 0){
// return true
// }
// return false;
// }
// var res = fn(1000)
// console.log(res);
// 7.任意两个数字的数学运算
// function fn(){
// var a = parseInt(prompt("输入第一个数字:"));
// var b = parseInt(prompt("输入第二个数字:"));
// var fuhao = prompt("输入运算的符号(仅限+-*/):")
// switch(fuhao){
// case '+':
// var res = a + b;
// break;
// case '-':
// var res = a - b;
// break;
// case '*':
// var res = a * b;
// break;
// case '/':
// var res = a / b;
// break;
// default:
// // console.log("符号不对");
// return false;
// }
// // console.log(res);
// return res
// }
// var a = fn()
// console.log(a);
// 8.编写一个函数,计算三个数字的大小,按从小到大顺序输出
// function fn(){
// var a = +prompt('输入第一个:')
// var b = +prompt('输入第二个:')
// var c = +prompt('输入第三个:')
// if(a>b && b>c){
// console.log('a>b>c');
// }else if(a>c && c>b){
// console.log("a>c>b");
// }else if(b>a && a>c){
// console.log("b>a>c");
// }else if(b>c && c>a){
// console.log("b>c>a");
// }else if(c>a && a>b){
// console.log("c>a>b");
// }else if(c>b && b>a){
// console.log("c>b>a");
// }
// }
// fn()
// '10' '2' '3'
// 3 > 2 >10
// console.log('我'>'你');
</script>
</html>