学会JavaScript这一篇就够了~
文章目录
开头引言：我所使用的编译环境是
WebStorm 2019.3.1 x64
【One】 JavaScript语言基础
一、数据类型
JavaScript的数据类型分为基本数据类型和复合数据类型。
1、数值型
数值型（number）是最基本的数据类型，和其他程序设计语言的不同之处在于，它不区分整形数值和浮点型数值，在JavaScript中，所有的数值都是由浮点型表示的。
数值型包括以下几种类型：
-
十进制：以10为基数，由0~9组成的数字序列 -
八进制：以8为基数、由0~7组成的序列 -
十六进制：以16为基数、由0~9、a（A） ~ f（F）组成的序列 -
浮点型数据：可以具有小数点，它可以由传统计数法（例如：1.234）和科学计数法（例如：6e+3）表示 -
特殊值InfInity：特殊的值Infinity（无穷大），如果一个数值超出了JavaScript表示的最大或最小值表示的范为，就会输出Infinty或-Infinty -
特殊值NaN：Not a Number，即非数字，在进行数值运算时，产生了未知的结果或错误，就会返回NaN。
以下的代码总结了以上几种类型的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数值型数据</title>
</head>
<body>
<script type="text/javascript">
document.write("RGB颜色的#6699FF的三种颜色的色值分别为：");
document.write("<p>R："+0x66);
document.write("<br>G："+0x99);
document.write("<br>B："+0xFF);
document.write("<hr>");
document.write("输出房屋的单价、面积和总价：");
var dj=8500;var mj=80;
document.write("房屋单价："+dj);
document.write("<br>房屋面积："+mj);
document.write("<br>房屋总价："+(dj*mj)+"元");
document.write("<hr>");
document.write("科学计数法表示的浮点数的输出结果：");
document.write("<p>");
document.write(3e+6 + "<br>");
document.write(3.5e3 + "<br>");
document.write(1.236E-2);
document.write("<hr>");
document.write("特殊值Infinity<br>");
document.write(1/0);
document.write("<br>"+-1/0);
document.write("<hr>");
document.write("特殊值NaN<br>");
document.write(0/0);
</script>
</body>
</html>
大功告成！看一下效果：
2、字符串型
字符串（string）是由0个或多个字符组成的序列，它可以包含大小写字母、数字、标点符号或其他字符，同时也可以包含汉字。字符型的数据包含在单引号或双引号中，由单引号定界的字符串中可以含有双引号，同样由双引号定界的字符串可以包含单引号。
有的时候，字符串中使用的引号会产生匹配混乱的问题，例如：
"字符串是包含在单引号'或双引号"中的"
对于这种情况，必须使用转义字符，和C语言一样，JavaScript中的转义字符是\，通过转义字符可以在字符串中添加不可显示的特殊字符，或者防止引号匹配混乱的问题。如上面的例子，可以这样写：
"字符串是包含在单引号\'或双引号\"中的"
下表列出了JavaScript中常用的转义字符：
| 转义字符 | 描述 | 转义字符 | 描述 |
|---|---|---|---|
\b |
退格 | \v |
垂直制表符 |
\n |
换行 | \r |
回车符 |
\t |
水平制表符，Tab空格 | \\ |
反斜杠 |
\f |
换页 | \OOO |
八进制整数，范围000~777 |
\' |
单引号 | \xHH |
十六进制整数 |
\" |
双引号 | \uhhhh |
十六进制编码的Unicode字符 |
在alert语句中使用转义字符\n的代码如下：
alert("Web：\nHTML\nCSS\nJavaScript");
效果图：
但是在document.write()中使用转义字符时，只有将其放在格式化文本块中才会起作用，所以脚本必须放在<pre>和</pre>的标记内。例如：
document.write("<pre>Hello\nJavaScript</pre>");
效果如下：
3、布尔型
布尔型的值只有真和假，即true和false，它通常在JavaScript程序中用来作为比较后的所得的结果，通常用于控制结构，例如：
if(n==1) //如果这个值为真，m加一
m = m+1;
else //否则，n加一
n = n+1;
二、常量和变量
每一种计算机语言都有自己的数据结构。在JavaScript种，常量和变量时数据结构的重要组成部分。
1、常量
常量是指在程序运行过程种保持不变的数据。例如，123是数值型常量，”JavaScript脚本“是字符串型常量。
2、变量——例子：输出球员的信息
变量是指一个已经命名的存储单元，它的作用就是为数据操作提供存放信息的容器。变量的值可能会随着程序的执行而改变。
变量有两个基本特征：变量名和变量值。变量名的命名规则是必须以字母或下划线开头，其他字符可以数字、字母或下划线，不能与关键字重名，不能包含空格、加号或减号等其他字符。变量的名字严格区分大小写。
JavaScript的变量可以任意命名，但在进行编程的时候，最好还是遵守匈利亚命名规范，起一个便于记忆，且有意义的变量名称，增加程序的可读性。
变量的声明：
由关键字var声明，语法格式如下：
var name;
var a,b,c; //同时声明a,b,c三个变量
变量的赋值：
var Blog = "学会JavaScript这一篇就够了~"; //声明变量并进行初始化赋值
注意：
- 如果只是声明了变量，并未对其赋值，则其默认值为
undefined - 可以使用var语句重复声明同一个变量，也可以在重复声明变量时为该变量赋一个新值，新值会覆盖前一个赋的值
变量的类型：
变量的类型是指变量的值所属的数据类型，它可以时数值型、字符串型或布尔型等，因为JavaScript是一种弱类型的程序语言，所以可以把任意类型的数据赋值给变量。比如：
var num = 100 ; //定义数值型变量
num = "JavaScript这一篇就够了~"; //定义字符串型变量
例子：输出球员的信息
直接上代码，将科比的信息都存储在了变量里面：
<h1 style="font-size: 24px;">科比·布莱恩特</h1>
<script type="text/javascript">
var alias="小飞侠"; //定义别名变量
var height = 198; //定义身高变量
var score = 33643; //定义总得分变量
var achievment="五届NBA总冠军"; //定义主要成就变量
var position="得分后卫/小前锋"; //定义场上位置变量
document.write("别名："+alias+"<br>"); //输出
document.write("身高："+height+"厘米<br>");
document.write("总得分："+score+"分<br>");
document.write("主要成就："+achievment+"<br>");
document.write("场上位置："+position+"<br>");
</script>
大功告成，看一下效果：
三、运算符
运算符也称为操作符，它是完成一系列操作的符号。运算符用于将一个或几个值进行计算而生成一个新的值，对齐进行计算的值称为操作数，操作数可以是常量或变量。
1、算术运算符——例子：将华氏度转换为摄氏度
算术运算符用于在程序种进行加、减、乘、除等运算，下标列出了JavaScript常用的算术运算符：
| 运算符 | 描述 | 示例 |
|---|---|---|
+ |
加法运算符 | 4+6 //返回值为10 |
- |
减法运算符 | 7-2 //返回值为5 |
* |
乘法运算符 | 7*3 //返回值为21 |
/ |
除法运算符 | 12/3 //返回值为4 |
% |
求模运算符 | 7%4 //返回值为3 |
++ |
自增运算符 | x=1;y=x++;z=++x; // y的值为1，z的值为3，x的值为4 |
-- |
自减运算符 | x=6;y=x–;y=–x; // y的值为6，z的值为4，x的值为4 |
例子：将华氏度转换为摄氏度
直接上代码：
<h2>西红市当前气温</h2>
<script type="text/javascript">
var degreeF = 68; //定义表示华氏温度
var degreeC = 0; //定义表示摄氏度
degreeC=5/9*(degreeF-32); //运算
document.write("华氏度："+degreeF+"°F <br>");
document.write("摄氏度："+degreeC+"°C");
</script>
大功告成，看一下效果：
2、字符串运算符——例子：显示票房信息
字符串运算符是用于两个字符串数据之前的运算符，它的作用是将两个字符串拼接起来。如下表所示：
| 运算符 | 描述 | 示例 |
|---|---|---|
+ |
连接两个字符串 | "学会JavaScript"+"这一篇就够了~" |
+= |
连接两个字符串并将结果赋给第一个字符串 | var name="学会JavaScript"; name+="这一篇就够了"; |
例子：显示票房信息
<script type="text/javascript">
var movieName,director,type,actor,boxOffice; //声明变量
movieName="美人鱼";director="周星驰";
type="喜剧、爱情、科幻";actor="邓超、林允";
boxOffice=33.9;
alert("影片名称："+movieName+"\n导演："+director+"\n类型："+
type+"\n主演："+actor+"\n票房："+boxOffice+"亿");
</script>
大功告成，效果如下：
3、比较运算符——例子：比较两个数值的大小
下表是JavaScript种常用的比较运算符：
| 运算符 | 描述 | 示例 |
|---|---|---|
< |
小于 | 1<6 返回值为false |
> |
大于 | 7>10 返回值为false |
<= |
小于等于 | 10<=10 返回值为true |
>= |
大于等于 | 3>=6 返回值为false |
== |
等于。只根据表面值进行判断，不涉及数据类型 | “17”==17 返回值为true |
=== |
绝对等于。根据表面值和数据类型同时进行判断 | “17”===17 返回值为false |
!= |
不等于。只根据表面值进行判断，不涉及数据类型 | “17”!=17 返回值为false |
!== |
绝对不等于。根据表面值和数据类型同时进行判断 | “17”!==17返回值为true |
例子：比较两个数值的大小
直接写代码：
<script type="text/javascript">
var age=25;
document.write("age变量的值为："+age+"<p>");
document.write("age>20：");
document.write(age>20);
document.write("<br> age<20：");
document.write(age<20);
document.write("<br>age==20：");
document.write(age==20);
</script>
大功告成！看一下效果：
4、赋值运算符
下表给出了赋值运算符：
| 运算符 | 描述 | 示例 |
|---|---|---|
= |
将右边表达式的值赋值给左边的变量 | Name = “wzq” |
+= |
将运算符左边的变量加上右边表达式的变量赋值给左边的变量 | a += b |
-= |
将运算符左边的变量减去右边表达式的变量赋值给左边的变量 | a -= b |
*= |
将运算符左边的变量乘上右边表达式的变量赋值给左边的变量 | a *= b |
/= |
将运算符左边的变量除以右边表达式的变量赋值给左边的变量 | a /= b |
%= |
将运算符左边的变量用右边的表达式求模，并将结果赋给左边的变量 | a %= b |
5、逻辑运算符
逻辑运算符用于对一个或多个布尔值进行逻辑运算，和C语言一样，由与或非组成。
| 运算符 | 1 逻辑 1 | 1 逻辑 0 | 0 逻辑 1 | 0 逻辑 0 |
|---|---|---|---|---|
&& |
true |
false |
false |
false |
|| |
true |
true |
true |
false |
关于非!运算，非真即为假，非假即为真
6、条件运算符
即为三目运算符，语法格式如下：
表达式?结果1:结果2;
例如：
var a=10,b=10;
alert(a==b?"相等":"不相等");
结果弹出对话框，输出相等
7、其他运算符
逗号运算符： 逗号运算符用于将多个表达式排在一起，而整个表达式的值为最后一个表达式的值。例如：
var a,b,c,d;
a=(b=3,c=5,d=6);
alert("a的值为"+a);
输出a的值为6
typeof运算符： 用于判断一个操作数的数据类型，它可以返回一个字符串，该字符串的说明了操作数是什么数据类型。这对于判断一个变量是否已被定义特别关键。语法格式如下：
typeof 操作数
下表为不同数据类型使用typeof运算符的返回值
| 数据类型 | 返回值 | 数据类型 | 返回值 |
|---|---|---|---|
| 数值 | number |
null | object |
| 字符串 | string |
对象 | object |
| 布尔值 | boolean |
函数 | object |
| undefined | undefined |
new运算符： 在JavaScript种有很多内置对象，通过new运算符可以用来创建一个新的内置对象实例，语法如下：
对象实例名称 = new 对象类型（参数）
对象实例名称 = new 对象类型
8、运算符优先级
JavaScript运算符都有明确的优先级与结合性。优先级较高的运算符将先于优先级较低的运算符进行运算，下图展示了运算符的优先级：
【Two】JavaScript基本语句
一、条件判断语句
即if、if…else、if…else if、switch等语句，用于判断
1、if 语句——例子：输出考试等级
简单if语句， 格式如下：
if(表达式){
语句
}
执行流程图：if…else语句 ，语法格式如下：
if(表达式){
语句1
}else{
语句2
}
执行过程流程图如下：if…else if语句，语法格式如下：
if(表达式1){
语句1
}
else if(表达式2){
语句2
}
else{
语句3
}
执行过程流程图如下：
例子：输出考试成绩对应的等级
比较简单，直接上代码：
<script type="text/javascript">
var grade="";
var score=85;
if(score>=90) grade="优秀";
else if(score>=75) grade="良好";
else if(score>=60) grade="及格";
else grade="不及格";
alert("周星星的考试成绩"+grade);
</script>
效果如下：
2、switch语句——例子：输出奖项及奖品
多路分支语句，其语法格式如下：
switch(表达式){
case 常量表达式1：
语句1;
break;
case 常量表达式2：
语句2;
break;
……
case 常量表达式n：
语句n;
break;
default:
语句n+1;
break;
}
执行过程流程图如下：
例子：输出奖项级别及奖品
过程简单，直接上代码：
<script type="text/javascript">
var grade="",prize="";
var code=3;
switch (code) {
case 1:
grade="一等奖";
prize="博主一人";
break;
case 2:
grade="二等奖";
prize="博主室友二人";
break;
case 3:
grade="三等奖";
prize="天然足球场西北风五斤";
break;
default:
grade="安慰奖";
prize="天然足球场西北风一斤";
break;
}
alert("该员工获得了"+grade+"\n奖品是"+prize);
</script>
二、循环语句
即while、do…while、for语句
1、循环基本语句while、do…while、for、循环的嵌套
while语句 ，语法格式如下：
while(表达式){
语句
}
执行过程流程图：do…while语句 ，语法格式如下:
do{
语句
}while(表达式);
执行过程流程图如下图所示：for语句，语法格式如下：
for(初始化表达式;条件表达式;迭代表达式){
语句
}
执行过程流程图：
例子：计算100以内的所有奇数之和
过程简单，直接上代码：
<script type="text/javascript">
var i=0,sum=0;
for(i=1;i<100;i++)
if(i%2!=0)
sum+=i;
alert("100以内的所有奇数之和为："+sum);
</script>
效果如下：
当然，循环语句也可以进行嵌套，在一个循环里面嵌套一个循环就实现了嵌套，下面通过输出九九乘法口诀表展示嵌套的使用
过程简单，代码如下:
<h1>输出乘法口诀表</h1>
<script type="text/javascript">
var i,j;
for(i=1;i<10;i++){
for(j=1;j<=i;j++)
document.write(j+"x"+i+"="+j*i+" ");
document.write("<br>");
}
</script>
效果如下：
2、循环控制语句break和continue
continue语句用于跳过本次循环，并开始下一次循环，其语法格式如下：
continue;
例如，在for语句中通过continue语句输出10以内不包括5的自然数的代码如下：
var i;
for(i = 1 ; i <= 10 ; i ++ ){
if(i==5) continue;
document.write(i+"\n");
}
break语句用与，跳出循环，并开始执行下一调语句，其语法格式如下：
break;
例如，在for语句中通过break语句找到第一个能被5和3整除的数字
var i;
for(i = 1 ; i <= 10 ; i ++ ){
if(i%3==0&&i%5==0)
break;
document.write("i="+i);
}
三、异常处理语句
JavaScript的异常处理语句是从Java移植过来的，用于处理程序中出现的莫名其妙的错误，增加了代码的健壮性。
1、try…catch…finally语句
具体语法格式如下：
try{
somestatements;
}catch(exception){
somestatements;
}finally{
somestatements;
}
参数说明：
-
try：尝试执行代码的关键字 -
catch：捕捉异常的关键字 -
finally：最终一定会被处理的代码的关键字，该关键字和后面的大括号中的语句可以省略
例如， 当在程序中输入了不正确的方法名charat时，将弹出catch区域中的异常提示信息，并且最终弹出finally区域中的信息提示。程序如下：
<script type="text/javascript">
var str="I like JavaScript";
try {
document.write(str.charat(5));
}catch (exception) {
alert("运行时有异常发生");
}finally {
alert("结束try…catch…finally语句");
}
</script>
2、Error对象
try…catch…finally语句中的catch通常捕捉的对象为Error对象，当运行JavaScript代码时，如果产生了错误或异常，JS就会生成一个Error对象的实例来描述错误，该实例中包含了一些特定的错误信息。
Error对象有以下两个属性：
-
name：表示异常类型的字符串 -
message：实际的异常信息
例如：
<script type="text/javascript">
var str="I like JavaScript";
try {
document.write(str.charat(5));
}catch (exception) {
alert("实际的错误消息为："+exception.message+"\n错误的类型字符串为："+exception.name);
}finally {
alert("结束try…catch…finally语句");
}
</script>
如下图所示：
3、使用throw语句抛出异常
有些JavaScript代码并没有语法上的错误，但存在逻辑错误。对于这种错误，JS不会抛出异常，这样就需要创建一个Error对象的实例，并使用throw来抛出异常。在程序中使用throw语句可以有目的地抛出异常。
语法格式如下：
throw new Error("somestatements");
例如，除数为0时的情况：
程序如下：
<script type="text/javascript">
try{
var num=1/0;
if(num=="Infinity")
throw new Error("除数不可以为0");
}catch (e) {
alert(e.message);
}
</script>
效果如下：
【Three】函数
函数就是可以作为一个逻辑单元对待的一组JavaScript代码。使用函数可以使代码更为简洁、提高重用性。
一、函数的定义和调用
1、函数的定义
在JavaScript中，可以使用function语句来定义一个函数。这种形式是由关键字function、函数名加一组参数以及置于大括号中需要执行的一段代码构成的。语法格式如下：
function 函数名([参数1，参数2，……]){
语句
[return 返回值]
}
参数说明：
-
函数名：必选，函数名必须是唯一的，并且命名必须区分大小写 -
参数：可选，用于指定参数列表，多个参数时候，中间必须用,间隔，最多不可以超过255个参数 -
语句：必选，函数体的内容，用于实现函数的功能的语句。 -
返回值：可选，用于返回函数值。返回值可以是表达式、变量或常量
例如定义一个计算价格的函数：
function account(price,number){
var sum = price*number;
return sum;
}
2、函数的调用
函数需要调用才会执行，要执行一个函数需要在特定的位置调用函数。
（1）函数的简单调用
语法如下：
函数名(传递给函数的参数1，传递给函数的参数2，……);
函数的定义语句通常被放在
HTML文件的<head>段中，函数的调用可以放在HTML文件中的任何一个位置。
例如定义一个函数OutputImage()，这个函数的功能是在页面中输出一张图片，然后通过函数的调用这个函数实现图片的输出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调用函数输出一张图片</title>
<script type="text/javascript">
function OutputImage() {
document.write("<img src='1.jpg'>"); //图片需要拖到项目文件夹内
}
</script>
</head>
<body>
<script type="text/javascript">
OutputImage();
</script>
</body>
</html>
效果如下：
（4）在事件响应中调用函数
当用户单击某个按钮或某个复选框时都将触发事件。
例如，当用户单击某个按钮时执行相应的函数，可以使用如下单吗实现该功能：
函数：
function test() {
alert("我喜欢JavaScript");
}
调用：
<form action="" method="post" name="form1">
<input type="button" value="提交" onclick="test()">
<!-- 在事件触发时调用自定义函数-->
</form>
效果如下：
（3）通过连接调用函数
函数除了可以在响应事件中被调用之外，还可以在连接中被调用。在<a>标记中的href属性中使用javascript: 函数名()格式来调用函数，当用户点击这个连接时，相关函数会被执行。
格式：
<a href="javascript:test();">单击连接</a>
二、函数的参数——例子：输出图书的名称和作者
在定义函数时，将指定的参数称为形式参数，简称为形参；而将调用函数时实际传递的值称为实际参数，简称实参。在JS中定义函数参数的格式如下：
function 函数名(形参1,形参2,……){
函数体
}
调用的格式：
函数名(实参1,实参2,……);
例子：输出图书的名称和作者
<head>里面代码如下：
<script type="text/javascript">
function show(BookName,author) {
alert("图书名称："+BookName+"\n图书作者："+author);
}
</script>
<body>里面：
<script type="text/javascript">
show("射雕英雄传","金庸");
</script>
效果如下：
三、函数的返回值——例子：计算购物车中商品总价
对于函数调用，既可以通过参数向函数传递数据，函数也可以返回数据，即返回值，语法格式如下：
return 表达式;
这条语句作用是结束函数，并把后面的表达式的值作为函数的返回值。
例如：计算购物车中商品总价
<head>标签内：
<script type="text/javascript">
function price(unitPrice,number) {
var total = unitPrice*number;
return total;
}
</script>
<body>标签内：
<script type="text/javascript">
alert("总价："+price(5000,2));
</script>
效果如下：
四、嵌套函数
嵌套函数就是指在一个函数的函数体中使用了其他的函数。嵌套函数的使用包括函数的嵌套定义和函数的嵌套调用。
1、函数的嵌套定义
函数的嵌套定义是指：在某个函数内，再定义别的函数，语法格式如下：
function outFun(){
function inFun(x,y){
alert(x+y);
}
inFun(1,5);
}
outFun();
个人觉得很鸡肋，对象（这里的对象指的不是男或女朋友）他不香吗？？
剩下的明天更新！我的背好疼~呜呜呜呜
2、函数的嵌套调用——例子：获取选手的平均分
五、递归函数
六、变量的作用域
1、全局变量和局部变量
2、变量的优先级
七、内置函数
1、数值的处理函数
2、字符串处理函数
八、定义匿名函数
1、在表达式中定义函数
2、使用Function()构造函数
【Four】对象
【Five】数组
【Six】String对象
上一篇： 学习git，看这一篇文章，稳妥学会！
下一篇： 11.设计模式之中介者模式