JavaScript
JS是一种运行在客户端的脚本语言（高级编程语言）。
一、基本概念
1、作用
表单验证，网页特效，服务端开发（node.js），桌面程序，APP开发，控制硬件（物联网），游戏开发。
2、浏览器
浏览器分为渲染引擎（内核）、JS引擎（JS解释器）两部分。渲染引擎用来解析HTML/CSS;而JS引擎用来读取JS代码并对其处理后运行。
白龙网研发发现，浏览器本身决不会执行JS代码，而是通过内置的JS引擎解释器来执行JS代码，JS引擎逐行解释每一句源码（转换为机器语言），然后让计算机去执行。因此，JS语言归为脚本语言，会逐行解释执行。
3、组成
ECMAscript（JavaScript/Jscript）
DOM：文档对象类型
BOM、浏览器对象类型
4、形式
JS有行内JS、内嵌JS、外部JS三种形式。
<!-- 内嵌JS -->
<script>
alert('刷新一下看看，有什么效果？')
</script>
</head>
<body>
<!-- 行内JS，出现在元素当中，配合一些鼠标事件执行 -->
<input type="text" value="唐伯虎" onclick="alert('弹出一个秋水')">
<!-- 外部js -->
<script src="./my.js"></script>
</body>
5、注释
有两种：单行注释（ctr+/）、多行注释(默认是alt+shift+/，可以在设置中修改为其它形式,例如，可以把默认快捷键修改成：ctr+shift+/)。另外，使用alt
6、输入/输出
<script>
// 提示用户输入信息
prompt('请输入您的年龄：');
// 向用户输出信息
alert('你输入的内容是18');
// 这个输出是让程序员看的，用以测试内容是否正常输出
console.log('我是程序员，我能看到哈哈');
</script>
二、变量
1、基本概念
变量可以理解为一个盒子，一个容器，用来获取数据，甚至修改数据。专业的说法是：变量是从内容申请的一个存放数据的空间。它由变量名、变量值两部分组成。
2、初始化
变量在使用的时候，要先声明，再赋值，然后才能使用；当然，可以在声明变量的同时给变量赋值，这叫变量的初始化。
<script>
var age = 18;
console.log(age);
</script>
案例：定义一个变量，并输出：
<script>
var age = 18;
var myname = '卡西';
var address = '火影村';
var email = 'kaxi@sina.com';
var salary = '2000';
console.log(age);
console.log(myname);
console.log(address);
console.log(address);
console.log(salary);
</script>
案例：通过一个变量，输出用户输入的内容。
<script>
// 弹出输入框提示用户输入内容，并把内容存储到变量/空间
var myname = prompt('请输入用户名');
// 使用警告框弹出用户输入的内容
alert(myname);
</script>
//更新变量，变量的值以最后一次赋值的数值为准
var myname = '张三';
console.log(myname);
myname = 'lisi';
console.log(myname);
//声明多个变量以及赋值时，每个变量/变量值之间有逗号隔开
var age = 18,myname = 'wangwu';
console.log(age);
console.log(myname);
//特殊情况
//1.只声明变量不赋值变量，会提示未定义
var address;
console.log(address);
//2.不声明只赋值变量时，可以输出，但是不提倡
qq = '1234567';
console.log(qq);
//3.不声明不赋值,会报错未定义
console.log(abc);
</script>
3、命名
以字母、数字、下划线、美元符组成，严格区分大小写，名称在语义化，遵循驼峰命名法（首字母小写，后面每个单词首字母要大写），不能数字开头，不能使用关键字和保留字。console.log(name);这个变量name 虽然没有声明，没有定义，但是也不会报错，这是个特殊的变量，特殊对待即可。
4、交换变量
借助临时变量，实现两个变量之间的交换。具体来说，先把青苹果放到临时变量中，此时静苹果所在的盒子空置出来；然后把红苹果放到青苹果的盒子里，此时红苹果的盒子空了出来；最后到临时盒子中的青苹果再放到空置的红苹果盒子中去。如此，就实现了两个盒子中内容的交换。
<script>
var greenApple = '青苹果',
redApple ='红苹果';
console.log(greenApple);
console.log(redApple);
var temp;
temp = greenApple;
greenApple = redApple;
redApple = temp;
console.log(greenApple);
console.log(redApple);
</script>
三、数据类型
1、常用数据类型
不同的数据类型占用的空间是不同的，为了充分利用存储空间，于是定义了数据类型。而变量内存中一个存储数据的空间，故而需要了解变量有哪些数据类型。
JS是一种弱类型的语言，他的数据类型只有在程序执行的过程中，根据等号右侧的值来确定。不像C语言，定义的时候，就已经规定的变量的数据类型。JS是动态语言，因此，它的数据类型也是可以变化的。
<script>
var x = 10;//数字型
x = 'apple';//字符型
console.log(x);
</script>
（1）简单数据类型
A.数字型
number，包含整型、浮点型两种类型，默认值是0.
a.不同的数值类型
<script>
//整型号、浮点型
var num = 10;
var PI = 3.14;
console.log(num);
console.log(PI);
</script>
b.不同进制的数值
<script>
// 数字在二进制、八进制、十进制、十六进制
var X = 010;//8进制以0开头，数字范围是0~7
console.log(X);
//十六进制以0x开头，数值范围0~9 a~f
var num3 = 0x9;
var num4 = 0xb;
console.log(num3);
console.log(num4);
</script>
c.最值
<script>
//最大值与最小值
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
</script>
d.特殊数值
有三个，分别是无穷大，无穷小，非数值。
<script>
//无穷大、无穷小
console.log(Number.MAX_VALUE * 2);//超过最大值，就是无穷大
console.log(-Number.MIN_VALUE * 2);//比最小值还小，就是无穷小
console.log('bailong' - 100);//字符减数字，无法判断数据类型，故而是非数值
</script>
e.判断非数字
<script>
//isNaN，判断非数字的方法，不是数字，返回true，是数字返回false
console.log(isNaN('bailong'));
console.log(isNaN(888));
</script>
B.布尔值类型
boolean,包含true,false两种类型，默认值是false。
当布尔类型参与数值去处时，true被当作1业处理，false被当作0来处理。
<script>
var flag = true;
var flag1 = false;
console.log(flag);
console.log(flag1);
console.log(true + 1);
console.log(false + 1);
</script>
C.字符串类型
String ,字符串都带引号，默认是单引号，也可以写双引号。
a.嵌套字符串
有一个原则：外双内单，或者外单内双。
<script>
//外双内单，或者外单内双
console.log('我是"白龙网"的站长');
console.log("我是'白龙网'的站长");
</script>
b.转义字符
转义字符以\开头，常用的有：换行、缩进、空格、反斜杠、双引号、星号等。
<script>
//外双内单，或者外单内双
console.log('白龙\n网');//换行
console.log('白龙\t网');//缩进
console.log('白龙\b网');//空格
console.log('白龙\\网');//反斜杠
console.log('It\'s a pen');//单引号
console.log('白龙\*网');//星号
</script>
c.字符串长度
字符串长度用length()属性来统计。
<script>
//
var site = 'www.bailong.org.cn';
console.log(site.length)
</script>
d.字符串拼接
字符串用+拼接，原则是“字符相连，数值相加”，即字符串通过加号，与其它任何类型的内容拼接，结果仍然是字符串；而两个数值通过加号连接起来，结果自然是数值了。
<script>
//拼接
console.log('白龙' + '网');
console.log('白龙网' + 10);
console.log('白龙网' + true);
console.log(12 + 12);
//字符串与变量拼接时，坚持“引引加加”的原则
var age = 18;
console.log('白龙网已经上线' + age + '年多了');
</script>
案例：使用上述学习的知识点，实现的一个交互效果，一般分为三步：用户输入、程序处理、结果输出。
<script>
var age = prompt('请输入您的年龄：');
var str = '您已经\b' + age + '\b岁了';
alert(str);
</script>
D.未定义
undefined，声明了变量，但是没有给赋值，默认是undefined。
<script>
var str;
var variable = undefined;
console.log(str);
console.log(variable);
console.log(undefined + '白龙网');//与字符串相加，结果仍然是字符串
console.log(undefined + 1);//与数字相加，结果是NaN
</script>
E.空值
null,声明了变量，但值为空，默认值是null。
<script>
var space = null;
console.log(null);//输出null
console.log(null + '白龙网');//与字符器相加，结果是字符串
console.log(null + 1);//与数字相加，结果是数字
</script>
（2）复杂数据类型
2、获取数据类型
（1）基本数据类型
<script>
var num = 18;
console.log(typeof num);//数字类型number
var str = '白龙网';
console.log(typeof str);//字符串string
var flag = true;
console.log(typeof flag);//布尔型boolean
var uf = undefined;
console.log(typeof uf);//未定义undefined
var st = null;
console.log(typeof st);//对象 object
</script>
字面量：是固定值的表示方法，即通过字面就能看出他是什么数据类型。有数字字面量、字符串字面量、布尔字面量等形式。
（2）复杂数据类型
3、转换数据类型
（1）转换为字符串
<script>
var num = 10;
console.log(typeof num);
var str = num.toString();//1.tostring()把数字类型转化为字符串类型
console.log(typeof str);
console.log(String(num));//2.String()转换变量为字符串
console.log(num + '');//3.用加号把数字转换为字符串
</script>
（2）转换为数字类型
<script>
//1.parseInt()把字符串转换成数字类型：整型
console.log(parseInt('123'));//parseInt()把字符串转换成数字类型
console.log(parseInt('200px'));//parseInt()可自动去掉数字后面的单位
console.log(parseInt('3.41'));//parseInt()不接受浮点数
//2.parseFloat()把字符串转换成数字类型：浮点型
console.log(parseFloat('3.14'));
console.log(parseFloat('670.6px'));
//3.Number()把字符串转换成数字类型:整型，或者浮点型
console.log(Number('567'));
console.log(Number('89.6'));
//4.用运算符-，*，/把字符串转换成数字类型
console.log('20' - 0);
console.log('30' * 1);
console.log('40' / 1);
</script>
案例：输入出生年份，计算年龄
<script>
// 输入出生年份，计算年龄
var year = prompt('请输入您的年龄:');
var age = 2022 - year;//隐性计算，把获取的字符串转换成了数字
alert('您已经' + age + '岁了！ ');
</script>
案例：简单计算器
<script>
// 输入出生年份，计算年龄
var new1 = prompt('请输入一个数：');
var news2 = prompt('请再输入一个数：');
var sum = parseFloat(new1) + parseFloat(news2);//用户输入的内容是字符串，因此需要使用parseFloat()把字符串转换为数值。
alert('求和:' + sum);
</script>
案例：输入姓名、年龄、性别，并打印输出
<script>
var names = prompt('请输入你的姓名：');
var age = prompt('请输入您的年龄：');
var sex = prompt('请输入您的性别：');
alert('您的姓名是：' + names + '\n您的年龄是：' + age + '\n您的性别是：' + sex);
</script>
（3）转换为布尔类型
<script>
//转换为布尔型时，只有这个5个值转换结果为false
console.log(Boolean(''));
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log('--------------------------');
//其它类型转换为布尔型，结果都是true
console.log(Boolean('白龙网'));
console.log(Boolean('123'));
console.log(Boolean(123.4));
</script>
编译，类似于吃炒菜，要等所有菜炒好之后，才能开始吃，因此他的专业含义是：先编译后执行，如JAVA。
解释：类似于吃火锅，可以边吃边涮，因此他的留底是一边解释一边执行，如JavaScript。
四、运算符
运算符，也叫操作符。
1、算术运算符
常用的算术运算符也加、减、乘、除、取余。扩展开来，我们可以了解，由数字、变量、运算符组成的式子叫表达式，表达式的返回结果叫返回值；通常计算机是先计算右边的内容，然后把结果赋值给左边。
<script>
console.log(1 + 1);
console.log(1 - 1);
console.log(1 * 1);
console.log(1 / 1);
//取余
console.log(5 % 2);
//浮点数进行运算，会出现精度问题，因此他结果不是0.30000000000000004
console.log(0.1 + 0.2 );
//由于操作浮点数会存在精度问题，故而num的对比结果是false
var num = 0.1 + 0.2
console.log(num == 0.3);
</script>
2、递增递减运算符
递增运算符必须与变量配合使用，分为两种，一是前置递增运算符，他的特点是先变量自加1，再表达式返回值；二是后置递增运算符，他的特点是先表达式返回原值，再变量自加1。在单独使用过程中，前置递增与后置递增的处理结果是相同的；但是，在表达式中，前置递增与后置递增是不同的，主要涉及变量、表达式的值，要区分对待。前置递减与后置递减的使用方法与上类同。另外，要需要的是，前置运算符与后置运算符分别单独使用时，结果是相同的；在表达式中出现时，结果是不同的。
（1）递增运算符
<script>
//先自加1，再返回值
var num = 10;
++num;
console.log(num);//此时的num=11
console.log(++num +1);//此时num=12，所以返回值是13
//单独使用时，前置递增与后置递增的计算结果是一样的。
var age = 18;
age++;
console.log(age);
var year = 2022;
console.log(year++ + 5);//在表达式中使用year++=2022，所以返回值是2027
console.log(year);//使用后，year自加1，结果是2023
//前置递增与后置递增在表达式中是不同的
var a = 1;
console.log(++a +1);//结果=3
var b = 1;
console.log(b++ +1);//b++先返回1，表达式=1+1=2
console.log(b);//先返回值，b再加1
</script>
如果还是不理解前置与后置递增运算符，可以再看看这个案例：
<script>
//先自加1，再返回值
var e = 10;
var f = e++ + ++e;//e++=10 e=11;e=12,++e=12
console.log(f);
</script>
3、比较运算符
对两个数据进行比较，返回结果是布尔型（true/false）。需要注意的是，一个等号是赋值，即把右边的结果赋值给左边；二个等号表示判断，数值相同即为真；三个等号表示全等，即数值相同，数据类型相同，才为真。
<script>
console.log(2 > 1);
console.log( 2 < 1);
//两个等号，表示数值相同，就返回true
console.log(2 == 1);
console.log(2 >= 1);
console.log(2 <= 1);
console.log(2 != 1);
//三个等号，表示数值和数据类型完全相同,才返回true
console.log(2 === '2');
console.log(2 !== '2');
</script>
4、逻辑运算符
逻辑运算符有3个，逻辑与，逻辑或，逻辑非，运算结果是布尔型（true/false）。
（1）与或非
<script>
//逻辑与&&，一假全假
console.log(10 > 8 && 9 < 11);
console.log(10 > 8 && 9 > 11);
//逻辑或者||，一真全真
console.log(10 > 8 || 8 > 11);
console.log(2 > 1 || 3 < 45);
//逻辑非!,相反
console.log(!false);
console.log(!true);
</script>
（2）逻辑与短路运算
除了用“与或非”的定义运算外，还可以通过逻辑与短路的方法来计算。即：当表达式1为真时，返回表达式2；当表达式1为假时，返回表达式1。
如果有空，或者否定，为假，其余为真，5个特殊的为假：0,'',null,NaN,undefined。
布尔值也可以参与逻辑与运算。
参与逻辑与运算的可以是值，也可以是表达式。如果返回的是数值，结果就是数值；如果返回的表达式有比较运算符，那么结果就是true/false。
<script>
console.log(0 && 2);
console.log(888 && 999);
console.log(1 && 8 > 9);
console.log(1 > 8 && 9 > 8);
</script>
（3）逻辑或中断运算
逻辑或者中断运算时，当表达式1为真，则返回表达式1；当表达式1为假，则返回表达式2。因此，逻辑中断运算会影响程序执行结果。
<script>
var num = 0;
console.log(888 || num++);//表达式1为真，结果返回888
console.log(num);//表达式2没有参与运算，因此num=0
</script>
5、赋值运算符
为了简体操作而生，前面有学到自加1，自减1的运算符；通过赋值去处符，可以每次自加、减、乘、除、取余任意数，操作空间更大了。
<script>
var num = 10;
num += 1;
console.log(num);//11
num -= 2;
console.log(num);//9
num *= 3;
console.log(num);//27
num /= 2;
console.log(num);//13.5
num = 15;
num %= 2;
console.log(num);//1
</script>
6、运算符的优先级
（1）小括号（）优先级最高
（2）一元运算符：++ -- ！
（3）算术运算符：先* / %，后+ -
（4）比较运算符：> >= < <= == != === !==
（5）逻辑运算符：先 && 后 ||
（6）赋值运算符：= *= /= %= += -=
（7）逗号：,