JaveScript

JaveScript

1.1 JavaScript基本概念

1、JavaScript概述
JavaScript主要用于开发交互式的网页
2、JavaScript由来
1995，网景通信公司的创始人马克·安德森招募一名大将布兰登·艾奇，为网景导航者浏览器开发了JavaScript
3、JavaScript组成
ECMAScript、DOM、BOM三个部分组成

4、JavaScript特点
简单容易使用、可以跨平台、支持面向对象
1.2 开发工具

JavaScript的开发工具主要包括浏览器和代码编辑器，浏览器用于执行、调试JavaScript代码，代码编辑器用于代码编写
浏览器一般由渲染引擎和JavaScript引擎组成

代码编辑器 (任选其一)
Visual Studio Code编辑器
/
HbuilderX 编辑器
/
1.3 JavaScript基本使用

1、JavaScript代码引入方式
行内式
<a href="javascript:alert('Hello');">test</a>

嵌入式
<script>
javascript代码
</script>

外链式
<script src="test.js"></script>

2、常用输入输出语句
类型    语句    说明
输入    prompt()    用于浏览器中弹出输入框，用户可以输入内容
输出    alert()    用于在浏览器中弹出警告框
document.write()    用于在网页中输出内容
console.log()    用于在控制台中输出信息
confirm()    用于提示是否确认事件
3、注释
单行注释：“//”
多行注释：“/**/”

二、JavaScript基本语法

2.1 变量

2.1.1 什么是变量？

变量指的是程序在内存中申请的一块用来存放数据的空间。变量由变量名和变量值组成，通过变量名可以访问变量的值
2.1.2 变量的命名规则

命名规则
-不能以数字开头，且不能含有+、-等运算符
-严格区分大小写
-不能使用JavaScript中的关键字命名
为了提高代码的可读性
要求“见其名知其意”，使用字母、数字、下划线和美元符号来命名，采用驼峰命名方法
多学一招：常见的关键字
JavaScript中常见的关键字
break     case    catch    class    const    continue
debugger    default    delete    do    else    export
extends    finally    for    function     if    import
in    instanceof    new    return     super    switch
this    throw    try    typeof    var    void 
while     with    yield    enum    let    ——
未来保留关键字
implements    package    public
interface    private    static
protected    ——    ——
2.1.3 变量的声明赋值

先声明后赋值
JavaScript中变量通常使用var关键字声明。变量声明完成后，默认值会被设定为undefined，表示未定义
//声明变量
var myName;
var age,sex;
//为变量赋值
myName = '小明';
age = 18;
sex = '男';
声明的同时并赋值
var myName = '小明';
【案例】交换两个变量的值

<script>
var leftHand = '筷子';
var rightHand = '勺子';
var temp = leftHand;
leftHand = rightHand;
rightHand = temp;
console.log(leftHand);
console.log(rightHand);
</script>
2.2 数据类型

2.2.1 数据类型分类

数据类型分类
数据类型    基本数据类型    boolean（布尔型）
number（数字型）
string（字符串型）
 null（空型）
undefined（未定义型）
bigInt（大整数型）
symbol（符号型）
复杂数据类型    object（对象型）
2.2.2 常用数据类型

布尔型（boolean）
只有true（表示成功或成立）和false（表示失败或不成立）
var flag1 = true;
var flag2 = false;
数字型（number）
JavaScript中共的数字可以分为整数和浮点数，数字前面可以用“+、-”表示正、负
//整数
var bin = 0b11010; //二进制
var oct = 032; //八进制
var dec = 26; //十进制
var hex = 0x1a; //十六进制
 
//浮点数
//标准格式
var fnum1 = -7.26;
var fnum2 = 7.26;
//科学计数法
var fnum3 = 3.14E6;
var fnum4 = 8.96E-3;
 
//JavaScript中的最大值和最小值
//Number.MAX_VALUE    最大值 
//Number.MIN_VALUE    最小值
字符串型（string）
JavaScript中使用单引号（''）或双引号（“”）来标注字符串
//单引号字符串
var num = '';  //空字符串
var slogan = '知识';
//双引号字符串
var total = "";  //空字符串
var str = "知识就是力量";
字符串的单引号、双引号可以嵌套使用（不推荐）
如果单引号中使用单引号，或双引号中使用双引号，需要使用""对单引号或双引号进行转义
//单引号中包含双引号
var color = '"red"blue';  //"red"blue
//双引号中包含单引号
var food = "'pizza'bread";  //'pizza'bread
//单引号中包含单引号
var say1 = 'I&#';  //I&#
//双引号中包含双引号
var say2 = ""Tom"";  //"Tom"
JavaScript中常用的转义字符
转义字符    含义
'    一个单引号字符
"    一个双引号字符
n    换行符
t    水平制表符
f    换页符
b    退格符
xhh    由两位十六进制数字hh表示的ISO-8859-1字符。如“x61”表示“a”
v    垂直制表符
r    回车符
\    反斜线
    空字符
uhhhh    由 4位十六进制数字hhhh表示Unicode字符。如“u597d”表示“好”
空型（null）
空型只有一个特殊的null值，表示变量未指向对象，null小写才表示空型
var a = null;
console.log(a);  //null
未定义型（undefined）
未定义型只有一个特殊的值undefined，表示声明的变量还未被赋值
var a;
console.log(a);  //undefined
多学一招：数字型中的特殊值
Infinity（无穷大）-Infinity（无穷小）和NaN（Not a Number ，非数字）
2.2.3 数据类型检测

JavaScript提供了typeof操作符，可以利用typeof操作符进行数据检测，typeof操作符以字符串形式返回检测结果
语法1：
typeof 需要进行数据类型检测的数据
语法2：
typeof(需要进行数据类型检测的数据)
console.log(typeof 2);    //number
console.log(typeof '2');    //string
console.log(typeof true);    //boolean
console.log(typeof null);    //object    历史遗留问题
console.log(typeof undefined);    //undefined
2.2.4 数据类型转换
数据转换为布尔型数据
使用Boolean()可以将给定数据转换为布尔型数据，转换时代表空或者否定的值（如空字符串、数字0、NaN、null和undefined）会被转换为false，其余的值会被转换为true
数据转换为数字型数据
JavaScript提供了parseInt()、parseFloat()和Number()，可以将数据转换为数字型数据
parseInt()
parseInt()会直接省略数据的小数部分，返回数据的整数部分，使用parseInt()将数据转换为数字型数据
console.log(parseInt('123.4'));    //123
需要注意的是，使用parseInt()进行数据类型转换时，parseInt()会自动识别进制
console.log(parseInt('0xF');    //15
如果“0xF”省略0x开头，parseInt()将无法自动识别，此时可以通过第2个参数设置进制数，进制数的取值为2~36
console.log(parseInt('F'));    //NaN
console.log(parseInt('F',16));    //15
parseFloat()
parseFloat()会将数据转换为数字型数据中的浮点数
console.log(parseFloat('123.4');    //123.4
console.log(parseFloat('3.14e-2');    //3.14
Number()
Number()用于将数据转换为数字型数据
console.log(Number('123.a');    //NaN
console.log(Number('123.4');    //123.4
不同类型数据转换为数字型数据的结果
待转换数据    parseInt()转换结果    parseFloat()转换结果    Number()转换结果
纯数字字符串    对应的数字    对应的数字    对应的数字
空字符串    NaN    NaN    0
null     NaN    NaN    0
undefined    NaN    NaN    NaN
false    NaN    NaN    0
true    NaN    NaN    1
数据转换为字符串型数据
JavaScript提供的String()或toString()进行转换，前者可以将任意类型数据转换为字符串型数据，后者只能将除null和undefined之外的数据类型转换为字符串型数据，toString()在进行数据类型转换时，可以通过参数设置，将数字转换为指定进制的字符串
var num1 = 12,num2 = 26;
console.log(String(num1));
console.String());
console.String(2));

3 运算符

2.3.1 算术运算符

JavaScript中常用的算术运算符
运算符    运算    示例    结果
+    加    1+1    2
-    减    6-2    4
*    乘    6*6    36
/    除    3/2    1.5
%    取模（取余）    5%7    5
**    幂运算    2**3    8
++    自增（前置）    a=2;b=++a;    a=3;b=3
++    自增（后置）    a=2;b=a++;    a=3;b=2
--    自减（前置）    a=2;b=--a;    a=1;b=1
--    自减（后置）    a=;b=a--;    a=1;b=2
注意：在进行取模运算时，运算结果的正负取决于被模数（%左边的数）的正负，与模数（%右边的数）的正负无关
·        ··        
多学一招 toFixed()方法
使用toFixed()方法可以规定浮点数的小数位，语法如下：
Fixed(digits)
numObj表示数字型数据或变量；digits表示小数点后数字的个数，超过该参数值会发生四舍五入，参数值介于0~20（包括20），如果忽略该参数，则默认值为0，该方法的返回值的结果是字符串
多学一招 隐式转换
JavaScript中，加号“+”可以用于字符串拼接，使用' '空字符和加号“+”连接其它数据，可以隐式转换为字符串类型，字符串通过算术运算符也可以隐式转换为数字类型
//利用隐式转换将数据转换为数字型数据
console.log('12'-0);    //12
console.log('12'*1);    //12
console.log('12'/1);    //12
 
//利用隐式转换将数据转换为字符串型数据
console.log(12+'');    //12
console.log(true+'');    //true
console.log(null+'');    //null
console.log(undefined+'');    //undefined
【案例】根据用户输入的数据完成求和运算

<script>
var num1 = prompt('请输入第一个要进行运算的数据：');
var num2 = prompt('请输入第二个要进行运算的数据：');
var result = (Number(num1) + Number(num2)).toFixed(2);
if(result == 'NaN'){
    alert('请输入合法的数据');
}else{
    alert(result);
}
</script>
2.3.2 赋值运算符

JavaScript中常用的赋值运算符
运算符    运算    示例    结果
=    赋值    a=3,b=2;    a=3;b=2;
+=    加并赋值    a=3,b=2;a+=b    a=5;b=2;
字符串拼接并赋值    a='abc';a+='def';    a='abcdef';
-=    减并赋值     a=3,b=2;a-=b;    a=1;b=2
*=    乘并赋值    a=3,b=2;a*=b;    a=6;b=2
/=    除并赋值    a=3,b=2;a/=b;    a=1.5;b=2
%=    取模并赋值    a=3,b=2;a%b;    a=1;b=2
**=    幂运算并赋值    a=2;a**=3;    a=8;
<<=    左移位并赋值    a=9,b=2;a<<=b;    a=36;b=2;
>>=    右移位并赋值    a=-9,b=2;a>>=b;    a=-3;b=2;
>>>=    无符号右移位并赋值    a=-9,b=2;a>>>=b    a=1073741821;b=2
&=    按位与并赋值    a=3,b=9;a&=b;    a=1;b=9;
^=    按位异或并赋值    a=3,b=9;a^=b;    a=10;b=9
|=    按位或并赋值    a=3,b=9;a|=b;    a=11;b=9
小提示：当“+=”运算符左右两边同为字符串型数据或有一边为字符串型数据时，将进行字符串拼接并赋值
2.3.3 比较运算符

JavaScript中常用的比较运算符
运算符    运算    示例    结果
>    大于    2>1    true
<    小于    2<1    false
>=    大于或等于    2>=1    true
<=    小于或等于    2<=1    false
==    等于    2==1    false
!=    不等于    2!=1    true
===    全等    2===1    false
!==    不全等    2!==1    true
注意：“==”和“!=”在比较不同类型的数据时，首先会自动将要进行比较的数据转换为相同的数据类型，然后进行比较，而运算符“===”和“!==”在比较不同数据类型的数据时，不会进行数据类型的转换
2.3.4 逻辑运算符

JavaScript中常用的逻辑运算符
运算符    运算    示例    结果
&&    与    a&&b    如果a的值为true，则输出b的值；如果a的值为false，则输出a的值
||    或    a||b    如果a的值为true，则输出a的值；如果a的值为false，则输出b的值
！    非    a!b    
若a为true，则结果为false，否则相反
注意：逻辑运算符在使用时，是按从左到右的顺序进行求值，因此运算时需要注意，可能会出现“短路”的情况。“短路”指的是，如果通过左表达式能够确定最终值，则不运算右表达式的值
2.3.5 三元运算符

三元运算符也称为三元表达式，使用问号“?”和冒号“:”两个符号来连接，根据条件表达式的值来决定问号后面的表达式和冒号后面的表达式哪个被执行，语法如下：
条件表达式 ? 表达式1 : 表达式2
var age = 18;
var status = age >= 18 ? '已成年' : '未成年';
console.log(status);    //已成年
2.3.6 位运算符

位运算符用来对数据进行二进制运算，在运算时，位运算符会将参与运算的操作数视为由二进制数（0和1）组成的32位的串
位运算符
运算符    名称    说明
&    按位“与”    将操作数进行按位“与”运算，如果两个二进制位都是1，则该位的运算结果为1，否则为0
|    按位“或”    将操作数进行按位“或”运算，只要二进制位上有一个值是1，该位的运算结果为1，否则为0
~    按位“非”    将操作数进行按位“非”运算，如果二进制位为0，则按位“非”的结果为1；如果二进制位为1，则按位非的结果为0
^    按位“异或”    将操作数进行按位“异或”运算，如果二进制位相同，则按位“异或”的结果为0，否则为1
<<    左移    将操作数的二进制按照指定位数向左移动，运算时，右边的空位补0，左边移走的部分舍去
>>    右移    将操作数的二进制按照指定位数向右移动，运算时，左边的空位补根据原数的符号位补0或者1，原来是负数就补1，是正数就补0
>>>    无符号右移    将操作数的二进制按照指定位数向右移动，不考虑原数的正负，运算时，左边的空位补0
注意：JavaScript中的位运算仅能对数字型的数据进行运算。在对数字进行位运算之前，程序会将所有的操作数转换为二进制，然后逐位运算
例如：
使用“~15”对15进行按位“非”运算，过程如下：
~        0000000  0000000  0000000  00001111
          11111111  11111111  11111111  11111000
上述运算结果为补码，符号位（最左边的一位）是1表示负数，为了将其转换为十进制，我们需要计算其原码
          11111111  11111111  11111111  11110000        补码
          11111111  11111111  11111111  11101111        反码（补码减1）
          10000000  00000000  00000000  00010000       原码 
计算原码之后得到“~15”的结果对应的十进制数字为-16
2.3.7 运算符优先级

JavaScript中运算符的优先级
结合方向    运算符
无    ()
左    .  []  new(有参数，无结合性)
右    new(无参数)
无    ++(后置)  --(后置)
右    !  ~  -（负数） +（正数）++（前置）--（前置）typeof  void  delete
右    **
左    *  /  %
左    +  -
左    <<  >>  >>>
左    <  <=   >  >=  in  instatnceof
左    ==  !=  ===  !==
左    &
左    ^
左    |
左    &&
左    ||
右    ?:
右    =  +=  *=  /=  %  <<=  >>=  >>>=  &=  ^=  |=
左    ,
小提示：运算符优先级高低由上到下递减，同一个单元格的运算符具有相同的优先级，左结合方向表示同级运算符的执行顺序方向从左向右，右结合方向则表示同级运算符的执行顺序从右向左，小括号“()”是优先级最高的运算符，运算时，要先计算小括号内的表达式。当表达式中有多个小括号时，最内层小括号中的表达式优先级最高
【案例】计算圆的周长和面积

<script>
var r = prompt('请输入圆的半径');
r = Number(r);
var c = 2 * 3.14 * r;
var s = 3.14 * r * r;
alert('圆的周长为：' + c.toFixed(2));
alert('圆的面积为：' + s.toFixed(2));
</script>
2.5 流程控制

2.5.1 选择结构

if 语句
语法格式1：
if(条件表达式){
语句块;
}
语法格式2:
if(条件表达式){
语句块1;
}else{
语句块2;
}
语法格式3：
if(条件表达式1){
语句块1;
}else if(条件表达式2){
语句块2 }
...
else if(条件表达式n){
语句块n;
} else{
语句块n+1;
}
<script>
var score = 90;
if(score >= 90){
    console.log('优秀');
}else if(score >= 80){
    console.log('良好');
}else if(score >= 70){
    console.log('中等');
}else if(score >= 60){
    console.log('良好');
}else{
    console.log('不及格');
}
</script>
switch语句
语法格式
switch(表达式){
case 常量1：
执行语句;
break;
case 常量2：
执行语句;
break;
...
default
执行语句;
break;
}
<script>
var week = 6;
switch(week){
    case 1:
    console.log('星期一');
    break;
    case 2:
    console.log('星期二');
    break;
    case 3:
    console.log('星期三');
    break;
    case 4:
    console.log('星期四');
    break;
    case 5:
    console.log('星期五');
    break;
    case 6:
    console.log('星期六');
    break;
    case 7:
    console.log('星期日');
    break;
    default:
    console.log('请输入合法数1~7其中一个');
}
</script>
【案例】查询水果的价格

<script>
var fruit = prompt('请输入要查询的水果');
switch(fruit){
    case '苹果':
    alert('苹果的价格是4元/斤');
    break;
    case '香蕉':
    alert('香蕉的价格是3元/斤');
    break;
    case '西瓜':
    alert('西瓜的价格是2元/斤');
    break;
    case '葡萄':
    alert('葡萄的价格是10元/斤');
    break;    
    default: 
    alert('没有此水果');       
}
</script>
2.5.2 循环结构

循环结构之一：while循环

1、凡是循环结构，就一定会有4个要素
①初始化条件
②循环条件  变量或表达式为boolean
③循环体
④迭代部分

2、while的格式
①
while(②){
③
④
}

执行过程：①→②→③→④→②→③→...→②

for和while可以相互转换
循环结构之一：do-while循环

1、凡是循环结构，就一定会有4个要素
①初始化条件
②循环条件  变量或表达式为boolean
③循环体
④迭代部分

2、while的格式
①
do{
③
④
}while(②);

执行过程：①→③→④→②→③→④...→②
循环结构之一：for循环

1、java中规范了3种循环结构：for、while、do-while
2、凡是循环结构，就一定会有4个要素
①初始化条件
②循环条件  变量或表达式为boolean
③循环体
④迭代部分

3、for循环的格式

for(①;②;④){
   ③；
}
   
执行过程：①→②→③→④→②→③→...→②
“无限”循环的结果的使用

1、格式：while(true)或for(;;)

嵌套循环的使用

1、嵌套循环：是指一个循环结构A的循环体是另一个循环结构B
-外层循环：循环结构A
-内层循环：循环结构B

2、说明：
①内层循环充当外层循环的循环体
②两层嵌套循环，外层循环控制行数，内层循环处理列数
③外层执行m次，内层循环执行n，内层循环的循环体执行m*n次
④实际开发基本不会出现三层循环，三层的循环结构少见
2.5.3 跳转语句

break和continue关键字的使用
   
           使用范围         在循环结构中的作用                   相同点
break：    switch-case                             在此关键字的后面不能声明执行语句
           循环结构中     结束（或跳出）当前循环结构
continue： 循环结构中     结束（或跳出）当次循环

2、带标签的break和continue
3、开发中，break的使用频率要远高于continue
【案例】输出金字塔

<script>
var str = '';
var level = prompt('请设置金字塔的层数');
//获取输入的纯数字，其余情况皆转为NaN
level = parseInt(level) && Number(level);
//判断用户输入是否合法
if(isNaN(level)){
    alert('金字塔层数必须是纯数字');
}
//循环遍历金字塔的层数
for(var i  = 1;i <= level;++i){
    //计算“*”前的空格并累加到str中
    var blank = level - i;
    for(var k = 0;k < blank; ++k){
        str += ' ';
    }
    //计算“*”的数量并累加到str中
    var star = i * 2 - 1;
    for(var j = 0;j < star; ++j){
        str += '*';
    }
    //换行
    str += 'n';
}
console.log(str);
</script>