01-js的基本概念
js:支持面向对象的跨平台脚本语言
1.脚本语言: 依赖于其他语言才能执行 - 依赖于html才能执行,js是嵌套在html中脚本功能
2.跨平台: 可以在不同的平台上运行, windows linux mac ios 安卓
3.支持面向对象: 使用面向对象的思想进行js代码的编程
js的应用场景:
1.表单验证: 对用户输入的数据进行验证,验证通过后进行数据的提交
2.网页特效: 轮播图/放大镜/点击缩放/动画
3.游戏开发: 2维平面下的小游戏为主, 4399小游戏,贪吃蛇/推箱子/飞机大战.....
4.物联网: 门禁/摄像头监控/自动售货机....
5.网页开发/app/小程序...
js的组成
ECMAScript DOM BOM
ECMAScript: 语法标准
DOM: 操作HTML文档
BOM: 操作浏览器
js的书写方法:
内联式
外联式
行内式
02-js的输出方式:
js的输出方式
// 1.以弹窗形式输出:alert('文本')
// alert('你好世界')
// 应用场景:登陆成功.失败/删除成功.失败/用户名被占用
// 2.以文本式输出:document.write(123456)
// document.write('你好世界')
// 应用场景: 通常给body添加内容
// 3.可以输入内容的弹窗:prompt('文本')
// prompt('请输入金额:')
// 应用场景: 给表单添加内容,表格添加内容
//4. 询问用户是否确认此操作:confirm('文本')
// confirm('是否确认此操作');
// 应用场景: 敏感操作:进行支付,确认和取消 删除操作:确认删除,取消删除
// 5.在浏览器的控制台中输出:console.log()
// console.log('你好控制台');
// 应用场景:在开发过程中,调试代码使用,不会影响代码的整体运行效果
// alert('测试')
03-变量:
// 变量的概念: 存储数据的容器,处在内存中,一个变量就是在电脑内存空间中存储数据的一个小的内存空间
// var 变量名字
// 变量名的命名规则:字母 数字 下划线 美元符号组成,不能是数字开头,不能是用关键字当做变量名
// = : 赋值符号,作用:把等号右边的数据放到等号左边的变量空间中
// 定义变量: var a a = 100 简写-> var a = 100
// 可以一次性定义多个变量,变量与变量之间用逗号,隔开
// 定义变量未赋值,返回undefined(空)
// var a
// a = 100
// var b
// b = 200
// var c
// c = a + b
// console.log(c);
// var a = 300
// var b = 200
// var c = a + b
// console.log(c);
// var a = 10,b = 20
// console.log(a);
// console.log(b);
// console.log(a,b);
04-数据类型:
数字(number): 整数,小数,负数,0 1 3.14 -2 0
字符串型(string): 用单引号或者双引号包裹的任意字符
布尔型(boolean): 代表事物的真与假 true(真) false(假)
未定义型(undefined): 定义变量未赋值
对象(object): 一个数据集合体 [1,2,3,4,5] {name:'张三',age:18} null
05-数字类型的数据:
// 1.不同进制之间的数字
/*
八进制:由八个数字组成,01234567,没有一个单独的数字表示8
十进制:由十个数字组成,0123456789,没有一个单独的数字表示10
十六进制:由0123456789,ABCDEF组成,没有一个单独的数据表示16
*/
// var a = 012
// var a = 0x11
// console.log(a);
// 2.科学计数法
// var num = 3e+5 //3乘以10的5次方
// var num = 3e-5 //3乘以10的-5次方
// console.log(num);
// 3.数值范围
// 运算的最大值
// console.log(Number.MAX_VALUE);
// 运算的最小值
// console.log(Number.MIN_VALUE);
//无穷大 Infinity
// console.log(1 / 0);
//无穷小 -Infinity
// console.log(-1 / 0);
// 1.NaN
// var a = 'abc'
// var b = 123
// var c = a - b
// console.log(c);
/*
NaN : not a number,表示一个非数字的特殊值
注意事项:
1.NaN的类型是number类型的,表示一个非数字
2.NaN不等于任何值,包括NaN自己
3.通过isNaN判断数据是否为数字,返回false的时候,表示是一个数字,返回true的时候,表示不是一个数字
*/
// var a = 'abc'
// var b = 123
// var c = a - b
// console.log(c == c);
// console.log(typeof c);
// console.log(isNaN(a));//true
// console.log(isNaN(b));//false
// 2.小数
// console.log(0.1 + 0.2);
// console.log(0.2 + 0.3);
// console.log(0.1 + 0.7);
// console.log(0.2 + 0.2);
//解决方法:
//1.根据小数点后面的位置数,乘以对应的整数,最终在除以这个整数
// console.log((0.1*10 + 0.2*10) / 10);
//2.使用toFixed(数字),方法来强制保留小数点后几位
// var a = 0.1 + 0.2
// console.log(a.toFixed(1));
06-字符串类型的数据:
字符串类型的数据:
单引号 ''
双引号 ""
单引号中可以放双引号,双引号中可以放单引号 . 两者均不可以放置自身
\:转意符号 - 把引号的特性去除掉变成普通的引号
``:
1.支持换行书写文本内容
2.支持解析变量的功能
document.write 可以输出html标签,单独的字符串可以通过+拼接成一个更大的字符串
输出的内容中有一方是字符串类型的数据 + 运算的时候,另一方会悄悄变成字符串,在进行拼接
07-对象类型的数据:
对象类型的数据:
[] : 数组
{} : 对象
null : 空
08-运算符:
/*
1.算数运算
+ - * / %(余数)
*/
// console.log(1 + 2);
// console.log(1 - 2);
// console.log(1 * 2);
// console.log(10 / 2);
// console.log(20 % 3);
/*
2.关系运算
> < >= <= ==等于 ===全等 !=不等于 !==不全等
==相等:判断符号两边的值是否相等,不看数据的类型
===全等:先判断符号两边数据的类型时候相等,不相等直接返回false,相等的话,继续比较数据是否相等
关系运算的结果之后两种情况, true false
*/
// console.log(3 > 2);//true
// console.log(3 < 2);//false
// console.log(3 >= 2);//true
// console.log(3 <= 2);//false
// var a = 1
// var b = '1'
// console.log(a == b);//true
// console.log(a != b);//false
// console.log(a === b);//fasle
// console.log(a !== b);//true
/*
3.赋值运算
+= : 自己先加之后,再赋值给自己
-= : 自己先减之后,再赋值给自己
*= : 自己先乘之后,再赋值给自己
/= : 自己先除之后,再赋值给自己
%= : 自己先求余之后,再赋值给自己
*/
// var a = 5
// a = a + 1
// a += 1
// a = a - 2
// a -= 2
// a = a * 3
// a *= 3
// a = a / 5
// a /= 5
// a = a % 3
// a %= 3
// console.log(a);
9-逻辑运算:
/*
逻辑运算:
&&(与,并且) 左右两边的结果均为true的时候,最终才是true,否则就是false
||(或者) 左右两边只要有一个为true,最终的结果就是true,两边都是false的时候,最终结果才为false
!(非,取反) 将true处理成false 将false处理成true
*/
// 模特招聘: 要求年龄在18以上 并且 年龄在30以下. 小红:20岁
// var age = 20
// var result = age > 18 && age < 30
// console.log(result);
// 小红打算嫁给小明. 小明:身高在160以上,或者 你有100000块钱的陪嫁. 小红:身高-155 陪嫁-200000
// var height = 155
// var money = 90000
// var result = height > 160 || money > 100000
// console.log(result);
// var height = 155
// var money = 90000
// var result = !(height > 160 || money > 100000)
// console.log(result);
10-自增自减运算:
/*
++ 自增
当++放在变量后面的时候,先输出,或者先赋值之后,在自增
当++放在变量前面的时候,先自增,在输出或者赋值
当--放在变量后面的时候,先输出,或者先赋值之后,在自减
当--放在变量前面的时候,先自减,在输出或者赋值
注意:自增或者之间运算的时候需要使用变量,不能直接拿数字进行自增或自减
*/
// var a = 1
// a++
// ++a
// console.log(a);
// var a = 1
// console.log(a++);//1
// console.log(a);//2
// var b = 1
// var c = b++
// console.log(c);//1
// console.log(b);//2
// var d = 2
// console.log(++d);
// console.log(d);
// var e = 2
// var f = ++e
// console.log(f);
// console.log(e);
// var a = 1
// console.log(a++ + a++);
// console.log(a);
/*
1 此时的a=2 +
2 此时的a=3
*/
// console.log(a++ + ++a);
// console.log(a);
/*
1 此时a=2 +
3 此时a=3
*/
// console.log(a++ + a++ + ++a);
// console.log(a);
/*
1 此时a=2 +
2 此时a=3 +
4 此时a=4
*/
// console.log(++a + a++ + ++a + a++);
// console.log(a);
/*
2 此时a=2 +
2 此时a=3 +
4 此时a=4 +
4 此时a=5
*/
// var a = 5
// console.log(a--);
// console.log(a);
// var b = 3
// var c = b--
// console.log(c);
// console.log(b);
// console.log(--a);
// console.log(a);
// var d = 2
// var c = --d
// console.log(c);
// console.log(d);
// var a = 5
// console.log(a-- + --a);
// console.log(a);
/*
5 此时a=4 +
3 此时a=3
*/
// console.log(a-- + a-- + --a + --a);
// console.log(a);
/*
5 此时a=4 +
4 此时a=3 +
2 此时a=2 +
1 此时a=1
*/
// console.log(a++ + a-- - ++a - --a);
// console.log(a);
/*
5 此时a=6 +
6 此时a=5 -
6 此时a=6 -
5 此时a=5
*/
// console.log(3++);