Tips:这个只是作者的学习笔记,仅作参考。
目录
一.JS是什么
(一).JS的由来
在90年代初,浏览器技术并不发达,浏览器上展示的网页只能以浏览为主,没有用户的交互功能,就像我们现在看到的新闻网页,只能浏览,没有动效,无法通过点击或拖拽实现有趣的效果。网络技术也不发达,数据传送很慢,网速仅有28.8kb/s,不像我们现在的网络,动辄百兆千兆。
基于这样一个背景,用户在进行注册账号的时候,输入的账号等信息,点击提交把数据发送到服务器的时候,传送速度慢,用户需要等待很长时间,才能得到服务器的反馈。例如在表单中输入账号等信息,点击提交后,用户需要耐心等待大概30s的时间,才能知道注册是否成功,关键像两次密码输入不一致、用户名被占用、用户名不合法、密码长度不合法等校验工作,都需要将数据传送给服务器进行验证,每次传送都需要耗费流量,当时的流量费用特别高,给用户操作网页带来了极大的烦恼。
为了解决这个问题,作为当时最受欢迎的浏览器公司网景(Netscape)公司,率先提出了解决方案:将数据校验工作放在浏览器上进行,当浏览器上数据验证通过没有问题之后,再将数据发送给服务器处理,可以减少数据传送次数,节省流量,也节省了传送验证的时间,大大的提高用户体验感。但这需要在浏览器上运行一些脚本才可以实现。
1995年5月,网景公司委派公司程序员布兰登·艾奇(Brendan Eich)开发一些脚本来实现公司的这一创举。在网景公司的设计理念中,这些脚本要使用Java语言来写,因为公司的高管都是Java语言的脑残粉。可是布兰登·艾奇对Java语言完全不感兴趣,所以他用了10个工作日的时间,抱着应付交差的态度匆匆设计出了一门脚本语言:LiveScript。这门语言在后面发布的时候,希望能蹭到Java的热度,将LiveScript改名为JavaScript。简称JS。
JS完美解决了浏览器和服务器交互时间长的问题,也实现了用户和浏览器的交互功能和动态效果,网景公司风头无俩,笑傲江湖。微软看到网景公司的风光,也进军浏览器领域,并借鉴JS开发了属于自己IE浏览器的脚本语言JScript,并捆绑在自己的windows系统产品中,给网景造成了很大的冲击。
于是,网景公司上书IT界的龙头老大欧洲计算机制造商协会(ECMA)公司,要求主持公道,ECMA出面,将JavaScript改名为ECMAScript,简称ES,并制定了浏览器脚本语言的操作标准。不过在IT界,我们把这门语言还称之为JavaScript,只有在版本更新迭代的官方称呼中,叫做ECMAScript。
(二).JS的概念
支持面向对象的跨平台脚本语言。
概念理解:
脚本语言:依赖别的语言才能运行
html必须在浏览器中才能运行,js嵌套在html中才能运行
跨平台:可以在不同的平台上运行
windows、linux、安卓。。。
支持面向对象
使用面向对象的思想编程
(三).JS和H5的关系
广义的H5,指的是大前端,内容包括HTML+CSS+HTML5+CSS3+JavaScript+前端框架(Vue+React+Angular)+移动端开发(App+小程序)+NodeJS后端技术+跟JavaScript相关的其他技术。。。
狭义的H5,特指HTML的第5个版本,新增了一些语义化标签,新增了一些input的type属性color time data range,新增了一些选择器。。。
HTML5的强大之处,不在于新语法,而在于很多HTML5的标签,支持了JS的操作,例如:自定义多媒体布局并控制多媒体播放 pause(暂停)play(开始)、canvas标签做画布绘图
(四).JS的应用场景
-
表单验证:对用户输入数据进行验证,数据验证通过后,进行提交
-
网页特效:实现用户跟网页的交互,并展示有趣的效果,例如:轮播图、放大镜
-
游戏开发:网页游戏,例如4399小游戏、网页贪吃蛇、。。。
-
物联网:门禁、摄像头监控、自动售货机。。。
-
网页开发、app、小程序开发 。
(五).JS的组成
js的组成示意图 |
---|
ECMAScript:语法标准
DOM:操作HTML文档的标准
BOM:操作浏览器的标准
二.JS的基本使用
(一).JS的书写方式
跟css样式一样,JS书写方式也有三种,内联,外联以及行内
1.内联式
JS是脚本语言,运行需要依赖HTML,HTML是由标签组成的,所以JS在HTML中就体现为一个script双标签。JS的代码就写在这个标签中。
这个标签可以放在HTML文档的任意位置,但在不同的位置,对于代码的执行有一定的影响,因为HTML的解析是按照顺序执行的,对于初学者,建议将script标签放在body结束之后。
当浏览器在执行HTML代码的时候,就会解析其中的script标签,并运行JS代码。
2.外联式
将JS代码放进一个名为.js后缀的文件中,通过script标签的src属性个将文件导入
Tips:一个script标签,只能作为内联或外联使用,不可以同时使用
3.行内式
将JS代码写在标签上,作为属性的值使用。
<!-- 2.内嵌式的js -->
<script>
// alert('靓仔正')
document.write('HelloWorld')
</script>
<!-- 3.外联式的js 双标签内部不能写代码-->
<script src="./01.js"></script>
</head>
<body>
<!-- 1.行内式的js 直接写到元素内部 -->
<!-- <input type="button" value="靓仔正" onclick="alert('鸿蒙')"> -->
<a href="javascript:alert('靓仔正')">莫挨老子</a>
</body>
js在html中以script双标签表现,可以放在网页任何一个地方,内联/外联/行内。建议初期放在body结束之后。
(二).JS的注释
<script>
// 1.单行注释 ctrl + /
/*2.多行注释 默认快捷键:shift + alt + a
2.多行注释 修改后:ctrl + alt +/ */
</script>
(三).JS的输出
所谓输出,其实就是将内容显示在网页中,和HTML不同,JS代码不会主动显示在网页中。要显示指定的内容,需要特殊方法指定才能显示在网页中,这个指定显示的方式就叫做输出。
1.可输入内容的弹窗:
2.弹窗: 一般用作提示:
3. 文本输出:
4.控制台输出:
5.询问是否确认:
代码如下:
<script>
// 输入框 - prompt
prompt('请输入你的手机号')
//alert 弹出警示框 输出的 展示给用户的
alert('你号没了')
// document.write 文本输出
document.write('Hello World')
// console 控制台输出,给码农测试用的
console.log('敲成这样还学什么?')
// 询问用户是否确认操作
confirm('芝士雪豹?')
</script>
Tips:在js代码中,没刚结束可以加分号,也可以不加
三.变量
(一).概念
在JS中,我们把存储数据用的容器,称之为变量。变量这种容器,处于内存中。
也就是说,一个变量就是内存中存储数据用的一个内存空间。
(二).定义变量
变量不是一打开网页就直接存在的 - 需要我们指定创建
语法:
var 变量名;
var是一个关键字,也就是JS内部指定有特殊作用的单词
(三).变量名的规则
变量名由字母、数字、下划线、美元符号组成,不能用数字开头,不能使用关键字作为变量名。
关键字如下:
(四).变量本质
定义变量的过程,就是在内存开辟了一个空间,名字是变量名,如下图:
(五).赋值
定义好变量就是在内存开辟好了空间,但空间中什么也没有,是一个空的空间。
我们定义变量的目的是给其中放入数据,给变量中放数据的过程,我们称之为赋值。
赋值需要用到一个符号叫赋值符:=
这个符号在编程中,不代表相等,代表赋值
赋值重点:
-
赋值符左边的一定是一个变量,准备接收数据
-
赋值符右边的一定是一个具体的值或者能得到值的一个表达式
-
赋值符的唯一作用就是将右边得到的值放在左边的变量容器中
(六).常用操作
<script>
// 累加操作
// 平常-如果要加的次数很多就很累很麻烦
console.log(1)
console.log(1 + 2)
console.log(1 + 2 + 3)
// 解决方案 将得到的数据放入容器,输出容器内容即可
a = 1
document.write(a)
b = a + 2
document.write(b)
c = b + 3
document.write(c)
// 定义变量并赋值
var d = 10;
var e = 20;
var f = d + e;
// 也可以定义多个变量,在定义时负值,每个变量之间用逗号隔开;
// 定义变量a=10,b=20
var a = 10, b = 20;
// 定义变量a和b都是20
var a, b = 20;
// 定义变量a和b,但a=10
var a = 10, b;
</script>
四.数据类型
(一).如何输出?
<script>
// 错误示范 - 文本输入没带引号
document.write(10010)
// 数字可以,输出文字不行,会报错.因为不加引号会被识别为变量名,该变量名还未被定义
document.write(靓仔正)
// 由上可知,中文可以用作变量名(但是最好别用)
var 靓仔正 = 888;
console.log(靓仔正)
// 正确案例 - 中文文本输出
document.write('靓仔正');
</script>
从上面的示例中,可以看到,输出数字不需要加引号,但是输出一段话就需要加引号,也就是说,数据有时候不需要加引号,但有时候就需要加引号,这是因为数据的类型不一致造成的。
js中可以输出数字,输出一段带引号的话,还可以输出哪些数据?
数字、带引号的数据、没有赋值的变量、true、false、[]数据、{}数据、null
根据他们的用途和特性,可以将数据分为以下几类:
类型 | 示例 | 备注 |
---|---|---|
数字型(number) | 1 -2 3.14 300 | 包括整数、小数、负数 |
字符串型(string) | "你很帅吗?" '收皮' | 用引号引起来的任意多任意字符,单引号和双引号都行 |
布尔型(boolean) | true false | 代表事物的两面性,真和假,描述判断的两种结果的数据 |
未定义型(undefined) | var a | 代表定义过未赋值的变量 |
对象(object) | null [1,2,3] {name:张三} | 代表一个集合 |
(二).类型检测
使用typeof(被检测的内容)
可以得出一个内容的类型。
<script>
// typeof可以检测内容的类型
// 但其实typeof不是非得括号框柱,直接空格也行
//数字型
console.log(typeof(-1233456));
// 字符串型
console.log(typeof"靓仔正真帅")
// 布尔型
console.log(typeof(true));
console.log(typeof(x));
// 对象
console.log(typeof([1,2,3]));
console.log(typeof {name:"靓仔正",age:12});
console.log(typeof(null));
</script>
效果如下:
Tips:typeof(x)可以谢伟typeof x,用小括号or空格都可以
(三).数字类型
1.不同进制的数
我们一般使用使用的数字是十进制的,但是在js中我们还可以使用八进制和十六进制。
10进制:由10个数字组成,0123456789组成,没有一个单独的数字代表10
8进制:由8个数字组成,01234567组成,没有一个单独的数字代表8
十六进制:由16个数字组成,0123456789ABCDEF组成,没有一个单独的数字代表16
<script>
// 八进制 - 1234567,现在版本建议前缀不要直接用0,而是0o
var a = 0o10;
console.log(a);
// 十六进制
var b = 0xA;
var c = 0xb;
console.log(b)
console.log(c)
</script>
效果如下:
2.科学计数法
数字的表达当中,有一种叫科学记数法,js中的数字也可以使用科学记数法来表示
<script>
// 当一次数字很大的时候,可以用科学计数法表示
// 3*10的5次方
var num = 3e+5
// 5*10的-3次方
var num = 5e-3
</script>
3.数值范围
内存大和小有什么区别呢?存储的数据多和少的区别。
那计算机存储数据是没有限制的吗?不是,计算机能表达的数字也有极限值:
最小值:Number.MIN_VALUE,这个值为: 5e-324
最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
无穷大:Infinity 1/0
无穷小:-Infinity -1/0
4.NaN
在js中,NaN用来表示一个非数字的特殊值,当发现无法进行运算时,js不会报错,而是会返回一个NaN
NaN的注意事项:
-
NaN的类型是number类型的,表示一个非数字
-
NaN不等于任何值,包括NaN本身
-
通过isNaN()可以判断是否是一个数字,返回false的时候,表示是一个数字。
// 先将变量a定义为字符串
var a = "abc";
// 再定义b=数字
var b = 2;
// 定义c=a减去b
var c = a - b;
// 输出到控制台 结果为NaN,意为非数字(not a number)
console.log(c);//Nan
// 判定类型 是否不是数字,
// 也就是如果是数字就会返回false,如果不是数字就会返回true
console.log(isNaN(a));
console.log(isNaN(b));
效果如下:
5.小数
计算机中的小数在进行运算的时候,有时会碰到小数点精度不准确的现象
计算机内部所能识别的数据只有二进制,当我们进行10进制数字运算的时候,在计算机内部需要先将数据转为2进制,然后运算,再将结果转为10进制给出来。10进制的小数进行2进制转换的时候,根据转换规则,有些小数会进行无限死循环,最终在后面数字太多的时候只能四舍五入,所以其实最终并没有很精确的转为2进制,所以只能给出一个大概的值。有时候会有两个大概的值相加,在转换10进制的时候正好能转换了,也会计算的比较精准。
// 因为计算机内部识别的数据只有二进制,我们进行十进制运算时
// 计算机内部需要将十进制转为二进制进行计算再转回十进制,所以会有计算误差
// 例如:以下计算的结果值为0.300000000000000004
console.log(0.1 + 0.2)
// 解决方法:
// 方法一:小数点后有多少位就乘以相应整数,再除去该整数
console.log((0.01*100+0.02*100)/100)
// 方法二:使用toFixed工具强行保留小数点后位数
var a = 0.01 + 0.02
console.log(a.toFixed(3))
效果如下:
(四).字符串类型
字符串所使用的引号,在js中,单引号和双引号是没有区别的,使用哪个都一样。
字符串中的字符是任意字符,即只要在键盘上能输入的字符都是可以的。
单引号和双引号也是字符串的字符:
<script>
// 单双引号本身就是一种字符串
var str1 = " ' "//一个单引号字符的字符串
var str2= ' " '//一个双引号字符的字符串
/* !注意:双引号中不能包含双引号,单引号中也不能包裹双引号
因为浏览器解析字符串时,遇到出开头外的第一个引号时就会默认引号结束了 */
// 错误示范
// var str = '钟大帅说:"整个教室只有一个靓仔,那个靓仔说:'我不是靓仔'"';
//解决方案:将引号转义成普通字符,去掉引号对于字符串的特殊含义
//转义就是给引号前面加反引号\
var str = '钟大帅说:"整个教室只有一个靓仔,那个靓仔说:\'我不是靓仔\'"';
// js输出标签
// js可以输出标签,让页面元素具有标签特性,但输出时一定要将标签当成字符串输出
document.write("<b>靓仔正</b>");
document.write("<i>");
document.write("我倾斜了");
document.write("</i>");
// 字符串拼接
// 可以用变量代替每一次输出
var a = '<i>';
var b = '文字倾斜';
var c = '</i>'
document.write(a)
document.write(b)
document.write(c)
// 还可以用+字拼成大字符串输出
document.write(a + b + c)
</script>
(五).对象类型
object类型,在js中有3种表现形式,分别是:
-
null
-
用[]定义的数据
-
用{}定义的数据
(六).undefined类型
当一个变量定义好了,但是没有给这个变量赋值,也就是没有给这个容器中放入数据,这个变量的默认值就是undefined,类型也是undefined。
五.运算符
(一).关系运算(比较运算)
运算符 | 描述 |
---|---|
> | 大于 |
>= | 大于等于 |
< | 小于 |
<= | 小于等于 |
== | 等于(主要用于判断两边的值是否相等) |
=== | 全等于(先判断两边的类型是否相等,类型相等再判断值是否相等) |
!= | 不等于,等于的反义词,等于为false的时候,不等于就为true |
!== | 不全等,全等的反义词,全等为false的时候,不全等就为true |
关系运算最后的结果只有两种,一种是真,一种是假,也就是布尔型的true
和false
<script>
var a = 8;
var b = "8";
// > - 大于
console.log(a>3);//true
// >= - 大于等于
console.log(a >= 4);//true
// < - 小于
console.log(a < 8);//false
// =< - 小于等于
console.log(a <= 8);//true
// == - 等于(主要用于判断两边的值是否相等)
console.log(a == 7);//false
// === - 全等于(先判断两边类型是否相等,类型相等再判断值是否相等)
// 虽然a的值等于8等于b,但是b的8加了双引号,类型不一样了,一个是数字一个是字符串
console.log(a === b)//false
// != - 不等于,等于的反义词,等于false时,不等于就为true
console.log(a != 8)//false
// !== - 不全等,全等的反义词,全等为flase,不全等为true
console.log(a !== 8);//false
</script>
(二).赋值运算
符号 | 描述 | 示例 |
---|---|---|
+= | 自己先加后,再赋值给自己 | var a = 1; a += 2; 相当于a先加2,结果赋值给a |
-= | 自己先减后,再赋值自己 | var a = 1; a -= 1; 相当于a先减1,结果赋值给a |
*= | 自己先乘后,再赋值自己 | var a = 1; a *= 3; 相当于a先乘3,结果赋值给a |
/= | 自己先除后,再赋值自己 | var a = 4; a /= 2; 相当于a先除2,结果赋值给a |
%= | 自己先余后,再赋值自己 | var a = 5; a %= 2; 相当于a先余2,结果赋值给a |
<script>
var a = 8;
// += - 先给自己添加,在赋值给自己
a += 2;//a+2 = a
console.log(a);
// -= - 先自减再赋值给自己
a -= 3;//a-3 = a
console.log(a);
// *= - 先自乘再赋值给自己
a *= 4;//a*4 = a
console.log(a);
// /= - 先自除在赋值给自己
a /= 5;// a/5 = a
console.log(a);
// %= - 先自余再赋值给自己
a %= 6;// a%6 = a
console.log(a);
</script>
(三).逻辑运算
逻辑运算一般用于判断多个关系运算,得出最后结果。
运算符 | 描述 |
---|---|
&&(与,并且) | 左右两边都为true,最后结果才为true,否则就是false |
||(或者) | 左右两边只要有一个true,最后结果就为true,否则就是false |
!(非,取反) | 将true处理为false,将false处理为true |
逻辑运算最后得出的结果也是布尔型。
// 先定义一个变量,并赋值任意数
var age = 24;
// && - 与,并且 要求两边都为true结果就会为true,否则为flase
var result = age > 18 && age < 30;
console.log(result);
// || - 或者 左右两边只要有一个true,最后结果就为true,否则为flase
result = age < 18 || age > 30;
console.log(result);
// ! - 非,取反 将true处理为false,将false处理为true
result = !(age < 30);
console.log(result);
(四).自增自减运算
<script>
var a = 1
// ++ 表示让一个数字递增1
a++
console.log(a);
++a
console.log(a);
// 但是当递增运算遇到赋值或者输出的时候,++放在前面和后面就有区别了
// +号放后面
var a = 1
// 此时是先输出,再递增
console.log('此时a的值为:' + a++);
console.log('此时a的值为:' + a);
var b = 1
var c = b++
console.log('此时b的值为:' + b);
console.log('此时c的值为:' + c);
// +号放前面
var a = 1
// 此时是先递增再输出
console.log('此时a的值为:'+ ++a);
console.log('此时a的值为:'+a);
var b = 1
var c = ++b
console.log('此时c的值为:'+c);
console.log('此时b的值为:'+b);
</script>
当++放在前面的时候,就先进行递增运算, 后进行输出或赋值。
符号:-- 表示让一个数字递减1
使用方法和注意事项与递增一样。
递增递减运算需要使用变量,不能使用具体数字
六.类型转换
(一).强制转换
1.转换为布尔型
语法: Boolean(arg)
Boolean(arg)
-
非0数字转换为布尔型为true,0转换为布尔型为false
-
非空字符串转换为布尔型为true,空字符串转换为布尔型为false
-
undefined转换为布尔型为false
-
null转换为布尔型为false
2.转换为字符串
语法: String(arg)
-
true转换为字符串仍为 true,false转换为字符串仍为false
-
null转换为字符串扔为null
-
undefined转换为字符串仍为undefined
3.转换为数字
语法:
Number(str)
-
NaN代表不是数字,但是他是数字类型(没有意义的数字)
-
非数字字符串转换后都是NaN(NaN是一个不是数字的数字类型)
-
true转为数字为1,false转为数字为0
-
undefined转换为数字为NaN
-
null转化为数字为0
使用函数强制转换为数字
语法:
parseInt(arg) # 强制转换为整数
parseFloat(arg) # 强制转换为小数
-
小数转换为整数只取整数,向下取整
-
首位非数字的字符串强转为整数为NaN,首位是数字的字符串强转为整数是首位的数字
-
布尔型强转为数字为NaN
-
undefined强转为数字为NaN
-
null强转为数字为NaN
补充:使用toString()
方法强制转换为字符串,转换结果和String()函数一样
<script>
var a = 123456;
b = true
var c = a.toString();
var d = b.toString();
console.log(c);
console.log(typeof c);
console.log(d)
console.log(typeof d);
</script>
注意:这个方法不能给undefined和null使用
(二).隐形转换
比较运算时发生隐形转换,例:
-
如果两个值都是字符串,则进行比较编码值
-
如果有一个值为数字或布尔型,则转换为数字进行比较
-
字符串进行比较的时候首字符进行比较,相等再进行后面的字符比较。参照阿斯克码表。
数字运算时会转换为数字型,例如:
var str = "100"
var a = str % 10
// true转数字默认为1,flase默认为0
var b = true + 1
console.log(a);
console.log(b);
拼接运算时也会发生字符串转换
var a = "1"
console.log(a + 12);
七.进制
我们平常使用的数字是十进制的,由0~9这10个数字组成,没有一个单独的数字代表10,要表示10,需要向前进一位,所以是10进制。
计算机内部还会使用二进制、八进制和十六进制。
二进制由0和1两个数字组成,没有一个数字表示2,要表示2,需要向前进一位。
同理八进制由0~7这8个数字组成。表示8的时候要向前进一位。
十六进制由0~9和a~f这16个数字组成,使用f来表示15,表示1要向前进一位。
(一)其他进制转10进制
转成10进制:以进制为底,幂从右往左依次为0次方,1次方,2次方…,乘以当前当前数字在10进制中的结果,所有乘积相加
例:
1.16进制的FF转为10进制:
示意图
2.2进制的11011转为10进制
示意图
(二).10进制转其他进制
10进制的11转2进制
反向取余数
示意图