本文介绍了JavaScript的基础知识，包括变量、作用域、预解析、函数、事件和对象的使用。详细阐述了变量的声明、作用域链、预解析规则以及函数的递归调用。同时，讲解了事件处理程序、对象的创建与操作，以及如何定义和调用方法。此外，还通过实例展示了如何利用JavaScript解决实际问题，如计算偶数个数、求最大值、判断素数等。
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>
5651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
