整理来源:pink老师的前端课程
链接:JavaScript前端课程-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续
文章目录
预备知识
JS组成
- ECMAScript:javascript语法
- DOM:页面文档对象模型
- BOM:浏览器对象模型
ECMAScript
ECMAScript是由ECMA国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMAScript 语言的实现和扩展。
ECMAScript: ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准.
-
DOM
文档对象模型(DocumentObiet Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。 -
BOM
BOM(Browser Object Model,简称BOM)是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等
JS三种书写方式
JS有3种书写位置,分别为行内、内嵌和外部。
行内
<body>
<!-- 1.行内的js:直接写在元素内部 -->
<input type="button" value="行内js" onclick="alert('HELLO,行内js')">
</body>
位置:标签内。
内嵌
<!-- 2.内嵌的js -->
<script>
alert('hello,内嵌js')
</script>
位置:<head>
标签内或者<body>
标签内或者</body>
和</html>
之间都可以。
外部
<!-- 3.外部的js -->
<!-- 引用方法 -->
<script src="my.js"></script>
位置:<head>
标签内或者<body>
标签内或者</body>
和</html>
之间都可以。
注意:外部引用时,<script>
和</script>
之间不要写代码。
<!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">
<!-- 2.内嵌的js(位置1) -->
<script>
alert('hello,内嵌js')
</script>
<!-- 3.外部的js (位置1)-->
<!-- 引用方法 -->
<script src="my.js"></script>
<!-- 注意:外部引用时,<script>和</script>之间不要写代码。 -->
<title>JS的三种书写方式</title>
</head>
<body>
<!-- 1.行内的js:直接写在元素内部 -->
<input type="button" value="行内js" onclick="alert('HELLO,行内js')">
<!-- 2.内嵌的js(位置1) -->
<script>
alert('hello,内嵌js')
</script>
<!-- 3.外部的js (位置2)-->
<!-- 引用方法 -->
<script src="my.js"></script>
</body>
<!-- 2.内嵌的js(位置2) -->
<script>
alert('hello,内嵌js')
</script>
<!-- 3.外部的js(位置3) -->
<!-- 引用方法 -->
<script src="my.js"></script>
</html>
JS输入输出语句
JS提供的一些输入输出语句:
方法 | 说明 | 归属 | 效果 |
---|---|---|---|
alert(msg) | 浏览器弹出警示框 | 浏览器 | |
console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 | |
prompt(info) | 浏览器弹出输入框,用户可以输入 | 浏览器 |
- 怎么找控制器console在这篇博文中有描述->link
实现代码:
//输出语句
// 1.alert(msg),弹出警示框,展示给用户看的
alert("hello,alert()")
//2.console.log(msg),控制台输出,展示给程序员测试用的
console.log("hello,console")
//输入语句
//prompt('info'),弹出一个输入框,展示给用户看
prompt('请输入你的姓名')
拓展
解释型语言vs编译型语言
计算机不能直接理解任何除机器语言以外的语言,所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具,被称为翻译器。
- 翻译器翻译的方式有两种:一个是
编译
,另外一个是解释
。两种方式之间的区别在于翻译的时间点不同
。 - 编译器是在
代码执行之前
进行编译,生成中间代码文件。 - 解释器是在
运行时进行及时解释
,并立即执行(当编译器以解释方式运行的时候,也称之为解释器)。
执行过程
标识符、关键字、保留字
- 标识符
标识(zhi4)符:就是指开发人员为变量、属性、函数、参数取的名字。
标识符不能是关键字或保留字。
- 关键字
关键字:是指JS本身已经使用了的字,不能再用它们充当变量名、方法名
包括 :break
、case
、catch
、continue
、default
、delete
、do
、else
、finally
、for
、function
、if
、in
、instanceof
、new
、return
、switch
、this
、throw
、try
、typeof
、var
、void
、while
、with
等. - 保留字
保留字:实际上就是预留的“关键字”意思是现在虽然还不是关键字,但是未来可能会成为关键字,同样不能使用它们当变量名或方法名。
包括:boolean
、byte
、char
、class
、const
、debugger
、double
、enum
、export
、extends
、fimal
、float
、goto
、implements
、import
、int
、interface
、long
、mative
、package
、private
、protected
、public
、short
、static
、super
、synchronized
、throws
、transient
、volatile
等。
变量
变量的声明
声明变量方式:var
、let
//变量
// 1.声明一个age变量
var age;
// 2.赋值 把值存入这个变量中
age = 18;
// 3.输出结果
console.log(age);
// 4.变量的初始化
var myname = "dodo";
console.log(myname);
效果:
案例输出:
代码:
<!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>JS输入输出</title>
<script>
var hername='长野原宵宫'
var address='长野原烟花店'
var jpname='Yoimiya'
var birthday='6月21日'
var age=18
var mingzuo='琉金座'
console.log(hername);
console.log(address);
console.log(jpname);
console.log(birthday);
console.log(age);
console.log(mingzuo);
</script>
</head>
<body>
</body>
</html>
效果:
变量的使用
案例:
1.弹出一个输入框,提示用户输入姓名。
2.弹出一个对话框,输出用户刚刚输入的姓名。
代码:
//1.用户输入姓名,存储到一个uname的变量里面
var uname = prompt('请输入您的姓名');
//2.输出这个用户名
alert('欢迎您!'+uname)
效果:
点击前 | 点击后 |
---|---|
变量细节
代码:
<!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>变量细节拓展</title>
<script>
//1.更新变量后,以最后一次更新的值为准
var myname='dodo';
console.log(myname);
myname='dodola';
console.log(myname);
//2.可以同时声明多个变量,逗号隔开
var age=18,address='稻妻',hername='Yomiya';
//3.声明变量的特殊情况
//3.1只声明不赋值,结果是undefined 未定义的
var sex;
console.log(sex);//undefined
//3.2不声明,不赋值,直接使用会报错
//console.log(lover);
//报错
//3.3不声明直接赋值,在js中是允许的,会变成全局变量
tel=110;
console.log(tel);
</script>
</head>
<body>
</body>
</html>
效果
变量命名规范
- 由字母(A-Z a-z)、数字(0-9)、下划线(_)、美元符号($)组成,如: usrAge,num01,name。
- 严格区分大小写。var app;和 var App;是两个变量。
- 不能以数字开头。18age 是错误的。
- 不能 是关键字、保留字。例如 :var、for、while。
- 变量名必须有意义。MMD、BBD、nl、age。
- 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myFirstName。
数据类型
基本数据类型
javascript中的简单数据类型及其说明如下:
简单数据类型 | 说明 | 默认值 |
---|---|---|
Number | 数字型,包含整数值和浮点数值,如21、0.21 | 0 |
Boolean | 布尔值类型,如true、false,等价于1和0 | false |
String | 字符串类型,如“张三”,注意js里面字符串都带引号 | "" |
Undefined | var a;声明了变量a但是没有给值,此时a=undefined | undefined |
Null | var a=null;声明了变量a为空值 | null |
数字型 Number
var num = 10;//num数字型
var pi = 3.14;//pi数字型
//1.八进制
//0~7 我们程序里面数字前加0表示八进制
var num1 = 010;
console.log(num1);//8
//console.log()输出的时候会默认以10进制输出
var num2 = 012;
console.log(num2);//10
//2.十六进制
//0~9 a~f
//#ffffff数字的前面加0x表示十六进制
var num3 = 0x9;
console.log(num3);//9
var num4 = 0xa;
console.log(num4);//10
//3.数字型的最大值
console.log(Number.MAX_VALUE);//1.7976931348623157e+308
//4.数字型的最小值
console.log(Number.MIN_VALUE);//5e-324
/*————————————————————————————————————*/
//5.无穷大
console.log(Number.MAX_VALUE * 2);//Infinity 无穷大
//6.无穷小
console.log(-Number.MAX_VALUE * 2);//-Infinity 无穷小
//7.非数字
//NaN,Not A Number,代表一个非数值
console.log('pink' - 100);//NaN
结果展示
isNaN()
这个方法用来判断非数字,并且返回一个值,如果是数字返回的是false,如果不是数字返回的是true。
console.log(isNaN(12));//false
console.log(isNaN('pink'));//true
字符串型 String
字符串型可以是引号中的任意文本,其语法为双引号""
和单引号''
var mystr1 = "江山 我站在云端";
var mystr2 = '慢慢 往中原方向';
var mystr3=前方 散落着村庄
//报错,没有使用引号会被认为是js代码,但js并没有这些语法
因为html标签里属性使用的是双引号,这里我们更推荐单引号。
- 字符串引号嵌套
外双内单,外单内双
var mystr3 = "'长安' 在兵荒马乱";//外双内单
var mystr4 = '"长安" 在兵荒马乱';//外单内双
//var mystr5 = '长安 在兵荒马乱";//报错
//不能单双混用
- 字符串转义符
转义字符都是\开头
转义符 | 解释说明 |
---|---|
\n | 换行符,n是newline的意思 |
\\ | 斜杠\ |
\' | 单引号’ |
\" | 双引号" |
\t | tab缩进 |
\b | 空格,b是blank的意思 |
- 字符串长度
通过字符串的length
属性可以获取整个字符串的长度
//检测获取字符串的长度length
var str1 = "But a man is not made for defeat.A man can be destroyed but not defeated.";
console.log(str1.length);//73
var str2 = "人不是生来要给打败的,你尽可把他消灭掉,可就是打不败他。";
console.log(str2.length);//28
- 字符串拼接
- 多个字符串之间可以使用+进行拼接,拼接方式为
字符串+任何类型=拼接之后的新字符串
- 拼接前会把字符串相加的任何类型转成字符串,再拼接成一个新的字符串。
//字符串拼接+
//字符串+任何类型=拼接之后的新字符串
console.log('望着天' + ' ' + '眼看北斗七星坠入地平线');
//望着天 眼看北斗七星坠入地平线
console.log('瞬间' + 2000);
//瞬间2000
console.log(1999 + '英雄豪杰');
//1999英雄豪杰
console.log('如同鬼魅般出现'+true);
//如同鬼魅般出现true
console.log(12 + 12);
//24
console.log('12'+13);
//1213
//变量和字符串相连
var age = 4;
console.log('图图今年'+age+'岁啦');
//图图今年4岁啦
数值相加,字符相连。
布尔型Boolean
布尔型有两个值:true
和false
。其中true表示真(对),false表示假(错)。
var flag1 = true;
var flag0 = false;
console.log(flag1 + 1);//2
console.log(flag0 + 1);//1
Undefined和Null
Undefined
:一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或相加时,注意结果)。
Null
:一个声明变量给null值,里面存的值为空(学习对象时,我们继续研究null)。
//undefined:未定义数据类型
var str;
console.log(str);//undefined
var variable = undefined;
console.log(variable);//undrfined
//undefined+字符串型,以字符串型输出
console.log(variable + 'Asuka');//undefinedAsuka
//undefined+数字,输出是NaN(Not a Number)
console.log(variable + 1);//NaN
//null:空值
var space = null;
console.log(space);//null
console.log(space + 'Asuka');//nullAsuka
console.log(space + 1);//1
输出结果:
获取数据类型
typeof
使用
var num = 10;
console.log(typeof num);//number
var str = 'Asuka';
console.log(typeof str);//string
var flag = true;
console.log(typeof flag);//true
var vari = undefined;
console.log(typeof vari);//undefined
var tim = null;
console.log(typeof tim);//object
//--------------小细节
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);//string
//说明prompt取过来的值是字符串型
输出结果:
也可以通过代码颜色、编译器输出的值的颜色、控制器的输出值颜色快速判断
字面量
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。(一眼看上去就知道它表示的是什么类型)
- 数字字面量:8,9,10
- 字符串字面量:‘别看我只是一只羊’、“羊儿的聪明你难以想象”
- 布尔字面量:true、false
数据类型转换
如上小细节中展示的,使用表单、prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型,通俗来讲,就是把一种数据类型转换的变量为另一种数据类型
转换为字符串类型
方式 | 说明 | 使用案例 |
---|---|---|
toString() | 转成字符串 | var num=1;alert(num.toString(); |
String() 强制转换 | 转成字符串 | var num=1;alert(String(num); |
加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num=1;alert(num+'我是字符串'); |
var num1 = 10;
console.log(num1);//10
//1.利用变量属性 变量.toString()
var str1 = num1.toString();
console.log(num1.toString());//10
console.log(str1);//10
//2.利用函数方法 String(变量)
var num2 = 20;
console.log(String(num2));//20
console.log(num2);//20
//3.利用+拼接字符串实现转换(隐式转换)
num3 = 30;
console.log(num3+' is a string');
输出结果:
转换为数字型(重点)
方式 | 说明 | 案例 |
---|---|---|
parseInt(string) 函数 | 将string类型转成整数数值型 | parseInt('11415') |
parseFloat(string) 函数 | 将string类型转成浮点数数值型 | parseFloat('114.15') |
Number() 强制转换函数 | 将string类型转换为数值型 | Number('12') |
js隐式转换(-*/) | 利用算术运算隐式转换为数值型 | '12'-11 |
parseInt(string)
函数和parseFloat(string)
函数
var age = prompt('请输入您的年龄')
//1.parseInt(变量) 可以把变量转换为数字型,得到的是整数
console.log(parseInt(age));
console.log(parseInt('3.14'));//3取整
console.log(parseInt('114.15'));//114取整
console.log(parseInt('120px'));//120之后的px去掉
console.log(parseInt('Asuka'));//NaN
//2.parseFloat(变量)
console.log(parseFloat('3.14'));//3.14
console.log(parseFloat('120px'));//120
console.log(parseFloat('Asuka'));//NaN
//3.利用Number(变量)
var str = '123';
console.log(Number(str));//123
console.log(Number('456'));//456
//4.利用算术运算- * / (隐式转换)
console.log('123'-23);//100
控制器输出结果展示:
注意不要用加号,否则会被认为是拼接字符串
转换为布尔型
方式 | 说明 | 案例 |
---|---|---|
Boolean() 函数 | 其他类型转换为布尔型 | Boolean('true) |
- 代表空、否定的值会被转换为
false
,如''
、0
、NaN
、null
、undefined
。 - 其余值都会被转换为
true
。
//Boolean()函数
console.log(Boolean(''));
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean('你好吗?'));
console.log(Boolean('我很好'));
console.log(Boolean(123));
运算符
算术运算符
运算符 | 名称 | 作用 | 示例 |
---|---|---|---|
+ | 加法 | 两个数相加。 | 6 + 9 |
- | 减法 | 从左边减去右边的数。 | 20 - 15 |
* | 乘法 | 两个数相乘。 | 3 * 7 |
/ | 除法 | 用右边的数除左边的数 | 10 / 5 |
% | 求余 (有时候也叫取模) | 在你将左边的数分成同右边数字相同的若干整数部分后,返回剩下的余数 | 8 % 3 (返回 2,8 除以 3 的倍数,余下 2。) |
** | 幂 | 取底数的指数次方,即指数所指定的底数相乘。它在 EcmaScript 2016 中首次引入。 | 5 ** 5 (返回 3125,相当于 5 * 5 * 5 * 5 * 5 。) |
注意浮点数!
//1.加减乘除幂
console.log(5 + 2);//7
console.log(5 - 2);//3
console.log(5 * 2);//10
console.log(5 / 2);//2.5
console.log(5 ** 5);//3125
console.log('------------------');
//2.取模
console.log(5 % 2);//1
console.log(2 % 5);//2
console.log(4 % 2);//0
console.log('------------------');
//3.1浮点数运算里面会有问题(注意)
console.log(0.1 + 0.2);//0.30000000000000004
console.log(0.07 * 100);//7.000000000000001
//3.2不能直接拿浮点数来进行相比较是否相等
var num = 0.1 + 0.2;
console.log(num == 0.3);//false
控制器结果:
表达式和返回值
表达式:是由数字、运算符、变量等以能求得数值有意义排列方式所得的组合。
简单理解:是由数字、运算符、变量等组成的式子。
比如:
console.log(1+1);//2
1+1
是表达,而2是这个表达式的返回值。
递增和递减运算符
运算符 | 名称 | 作用 | 示例 |
---|---|---|---|
++ 、-- | 自加、自减 | 反复把一个变量加 1 或减 1 | Count++; 、x--; 、++num1 、 --num2 |
++
和--
可以放在变量前面,也可以放在变量后面。放在变量前面时,可以称为前置递增(递减)运算符
,放在变量后面时,可以称为后置递增(递减)运算符
。
- 前置递增运算符
++num;
前置递增,就是自加1,类似于num=num+1;
但是++num写起来更简单。
先加1,再返回值。 - 后置递增运算符
num++
后置递增,也是自加1,类似于num=num+1;
但是是先返回原值,后自加1。
注意加以区别判断。
var num1 = 10, num2 = 30;
console.log(++num1);//11
console.log(num1);//11
console.log(num2++);//30
console.log(num2);//31
console.log(++num1 + 10);//22
console.log(num2++ + 10);//41
开发时,大多使用后置递增/递减,并且代码独占一行,例如:num++
、或num--
。
比较运算符
概念:比较运算符(关系运算符)是两个数据进行比较时所使用的的运算符,比较运算后,会返回一个布尔值(true/false)
作为比较运算的结果。
运算符 | 名称 | 作用 | 示例 |
---|---|---|---|
=== | 严格等于 | 测试左右值是否相同 | 5 === 2 + 4 |
!== | 严格不等于 | 测试左右值是否不相同 | 5 !== 2 + 3 |
< | 小于 | 测试左值是否小于右值。 | 10 < 6 |
> | 大于 | 测试左值是否大于右值 | 10 > 20 |
<= | 小于或等于 | 测试左值是否小于或等于右值。 | 3 <= 2 |
>= | 大于或等于 | 测试左值是否大于或等于正确值。 | 5 >= 4 |
console.log(3 >= 5);//false
console.log(3 <= 5);//true
//1.程序运算里面的等于符号是==,默认转换数据类型会把字符串型的数据转换为数字型。
console.log(3 == 5);//false
console.log('喂' == '楚雨荨');//false
console.log('甄玉娆' == '甄玉娆');//true
console.log(18 == 18);//true
console.log(18 == '18');//true
console.log(14 != 14);//false
//2.我们程序里的全等===要求两边的值和数据类型都一样
console.log(18==='18');//false
=小结
符号 | 作用 | 用法 |
---|---|---|
= | 赋值 | 把右边赋给左边 |
== | 判断 | 判断两边的值是否相等(注意此时有隐式转换) |
=== | 全等 | 判断两边的值和数据类型是否完全相同 |
逻辑运算符
概念:逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值
,后面开发中经常用于多个条件的判断。
运算符 | 名称 | 作用 | 示例 |
---|---|---|---|
&& | 与 | / | (x < 10 && y > 1) 为 true |
∣ \mid ∣ ∣ \mid ∣ | 或 | / | (x == 5 ∣ \mid ∣ ∣ \mid ∣ y == 5) 为 false |
! | 非 | / | !(x == y) 为 true |
逻辑中断
短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值。
- 逻辑与
- 语法:表达式1&&表达式2
- 如果第一个表达式的值为真,则返回表达式2
- 如果第一个表达式的值为假,则返回表达式1
//1.逻辑与
console.log(123 && 456);//456
console.log(0 && 123);//0
console.log(0 && 1 + 2 && 456 + 789);//0
- 逻辑或
- 语法:表达式1||表达式2
- 如果表达式1结果为真,则返回表达式1
- 如果表达式1结果为假,则返回表达式2
//2.逻辑或
console.log(123 || 456);//123
console.log(123 || 456 || 789);//123
console.log(0 || 456 || 123);//456
练习:
//练习
var num = 0;
console.log(123 || num++);//123
console.log(num);//0
赋值运算符
运算符 | 名称 | 作用 | 示例 |
---|---|---|---|
= | 赋值 | 只是将右边的值赋给左边的变量 | let x = 3 、x=y |
+= | 加法赋值 | 右边的数值加上左边的变量,然后再返回新的变量。 | x = 3; x += 4; 等价于x = 3; x = x + 4; |
-= | 减法赋值 | 左边的变量减去右边的数值,然后再返回新的变量。 | x = 6; x -= 3; 等价于x = 6; x = x - 3; |
*= | 乘法赋值 | 左边的变量乘以右边的数值,然后再返回新的变量。 | x = 2; x *= 3; 等价于x = 2; x = x * 3; |
/= | 除法赋值 | 左边的变量除以右边的数值,然后再返回新的变量。 | x = 10; x /= 5; 等价于x = 10; x = x / 5; |
运算符优先级
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ 、-- 、! |
3 | 算术运算符 | 先* 、/ 、% 后+ 、- |
4 | 关系运算符 | > 、>= 、< 、<= |
5 | 相等运算符 | == 、!= 、=== 、!== |
6 | 逻辑运算符 | 先&& 后
∣
\mid
∣
∣
\mid
∣ |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
- 一元运算符中逻辑非优先级很高
- 逻辑与比逻辑非优先级高