JavaScript基础-介绍、变量、数据类型、操作符、流程控制、数组

1、JavaScript介绍

JavaScript是运行在客户端（浏览器）的编程语言
JavaScript最初的目的是为了处理表单的验证操作

JavaScript应用场景

网页特效
服务器开发(Node.js)
命令行工具(Node.js)
桌面程序(Electron)
APP(cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)

JavaScript和HTML、CSS的区别

 HTML：提供网页的结构，提供网页中的内容
 CSS：用来美化网页
 JavaScript：可以用来控制网页内容，给网页增加动态的效果

JavaScript的书写位置

 1. 行内js(不推荐使用)
 	<input type="button" onclick="alert('Hello World')" value="按钮">
 2. 嵌入页面写在<script>标签(不推荐使用)
 	<script>
		alert('Hello World');
	</script>
 4. 外部js文件
 	引入外部js：<script src="js文件路径"></script>

注：

 在javascript里字符串使用时始终用单引号，防止与html里的双引号出现冲突
 引入外部js的script标签里边不能书写javascript

JavaScript变量

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
使用变量可以方便的获取或者修改内存中的数据

如何使用变量

1. var 声明变量
	var age;
2. 变量的赋值
 	var age;
 	age = 18;
3. 声明变量的时候赋值
 	var age = 18;
4. 同时声明多个变量
 	var age,name,sex;
5. 声明多个变量的同时赋值
 	var age = 18,name = '张三';

变量的命名规则和规范

 1. 规则-必须遵守的，不遵守会报错
 	由字母、数字、下划线、$符号组成，不能以数字开头
 	不能是关键字和保留字。例如：for、while
 	区分大小写
 2. 规范-建议遵守的，不遵守不会报错
 	变量名必须有意义
 	遵守驼峰命名法。首字母小写，后面单词的字母需要大写。例如：userName、userPassword

JavaScript数据类型

在c java c#中声明变量的时候就确定了数据类型
在javascript中声明变量的时候并没有确定变量的类型
javascript 弱类型的语言 在代码执行的过程中，会确定变量的类型

简单数据类型
Number、String、Boolean、Undefined、Null

 1. Number
 	数值字面量：数值的固定值的表示法
 	进制：进制算数计算时，八进制和十六进制表示的数值最终都将被转换为十进制数值。
 	浮点数：不要判断两个浮点数是否相等(可以用整数来比较)  浮点数的最高精度是17位小数，但在进行算数计算时其精确度远远不如整数
 	var result = 0.1 + 0.2  //结果不是0.3，而是0.30000000000000004
 	数值判断：
 		NaN:not a number NaN与任何值都不相等，包括他本身
 		isNaN(不是一个数字): is not a number 用来判断一个变量是否是数字
 2. String
 	字符串字面量
 	转义符：
 		\n 换行
 		\t 制表
 		\b 空格
 		\r 回车
 		\\ 斜杠
 		\' 单引号(')
 		\" 双引号(")
 	字符串长度：length属性用来获取字符串的长度
 		var str = '黑马程序猿 Hello world';
 		console.log(str.length);
 	字符串拼接：字符串拼接使用 + 连接
 		如果 + 两边都是数字，那么就是算数功能
  		如果 + 两边 只要有一个是字符串，那么 + 就是字符串拼接功能
 		console.log('hello' + 'world');
 3. Boolean
 	Boolean字面量：true 和 false ,区分大小写
 	计算机内部存储：true 为 1 ，false 为 0
 4. Undefined
 	Undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
 5. Null
 	null表示一个空，变量的值如果想为null，必须手动设置

获取变量的类型

typeof
	var age = 18;
	console.log(typeof age);   --'number'

字面量

在源代码中一个固定值的表示法。
数值字面量：8，9，10
字符串字面量：'黑马程序猿'，"大前端"
布尔字面量：true , false

注释

1. 单行注释：用来描述下面一个或多行代码的作用
	//这是一个变量
	var name = 'John'
2. 多行注释：用来注释多条代码
	/*
	var age = 18;
	console.log(age);
	*/

数据类型转换
使用谷歌浏览器快速查看数据类型：字符串的颜色是黑色的，数值类型、布尔类型是蓝色的，undefined和null是灰色的

转换成字符串类型

 1. toString()
	var num = 5 ;
	console.log(num.toString());
 2. String()
	String()函数存在的意义：有些值没有toString(),这个时候可以使用String().比如：undefined 和 null
 3. 字符串拼接

转换成数值类型

 1. Number()
 	Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN
 	带非数值字符串无法解析，可以解析布尔类型
 2. parseInt()
 	var num1 = parseInt("12.3abc"); //返回12，如果第一个字符是数字会解析直到遇到非数字结束
 	var num2 = parseInt("abc123");  //返回NaN,如果第一个字符不是数字或者符号就返回NaN
 	带非数值字符串可以解析，不可以解析布尔类型
 3. parseFloat()
 	parseFloat()把字符串转换成浮点数
 	parseFloat()和parseInt 非常相似，不同之处在于parseFloat()会解析第一个. 遇到第二个. 或者非数字结束
 	如果解析的内容里只有整数，解析成整数
 	带非数值字符串可以解析，不可以解析布尔类型
 4. 取正或者取负 + -
 	var str = '123';
 	console.log(+str); // 数值类型123
 	带非数值字符串无法解析，布尔类型可以解析
 5. +，-0运算
 	var str = '500';
 	console.log(-str);
 	console.log(str - 0);
 	- 如果一边是数值类型，一边是字符串，会先把字符串转换成数值类型再进行数值的减法运算
 	- 如果字符串转换成数值类型失败，则返回NaN
 	+ 如果有一边是数值类型，一边是字符串，会先把数值类型转换成字符串，再进行字符串的拼接

转换成布尔类型

Boolean()
0 ''(空字符串) null undefined NaN 会转换成false 其它都会转换成true

JavaScript操作符

算数运算符

+ - * / % 

一元运算符：只有一个操作数的运算符
++ 、- -

1. 前置++:先自身加1，再返回表达式的值
	var num1 = 5;
	console.log(++num1);  //6
2. 后置++：先返回表达式的值，再自身加1
	var num2 = 6;
	console.log(num2++); //6
	console.log(num2); //7	

逻辑运算符（布尔运算符）

 1. && 与 两个操作数同时为true,结果为true,否则都是false
 2. || 或 两个操作数有一个为true,结果为true,否则都是false
 3. ! 非 取反

关系运算符（比较运算符）
< > >= <= == != === !==

 == 与 === 的区别：==只进行值的比较，===类型和值同时相等，则相等
 	var result = '55' == 55; //true
 	var result = '55' === 55; //false 值相等，类型不相等
 	var result = 55 === 55; //true

赋值运算符

= += -= *= /= %=

 例如： var num = 0;
 num += 5; // 相等于 num = num + 5;

运算符的优先级

优先级从高到低：
	（）优先级最高
	 一元运算符 ++ -- ！
	 算数运算符 先* / % 后 + -
	 关系运算符 > >= < <=
	 相等运算符 == != === !==
	 逻辑运算符 先&& 后||  

表达式
一个表达式可以产生一个值，有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。
语句
语句可以理解为一个行为，循环语句和判断语句就是典型的语句。一个程序有很多个语句组成，一般情况下;分割一个一个的语句

JavaScript流程控制及应用

流程控制
程序的三种基本结构

 1.顺序结构：从上到下执行的代码
 *程序默认就是由上到下顺序执行的
 2.分支结构：根据不同的情况，执行对应代码
 流程控制语句中条件部分会把后面的值隐士转换成布尔类型
 	(1). if语句
 		if(条件表达式){
 			//执行语句
		}
	
		if(条件表达式){
 			//成立执行语句
		}else{
			//否则执行语句
		}
	
		if(条件1){
 			//成立执行语句
		}else if(条件2){
			//成立执行语句
		}else if(条件3){
			//成立执行语句
		}else{
		//最后默认执行语句
		}
	(2). 三元运算符
		表达式1 ? 表达式2 : 表达式3
			表达式1 布尔类型的表达式  返回一个布尔类型
			当表达式1成立 返回表达式2的值 ，当表达式1不成立 返回表达式3的值 
		是对if...else 语句的一种简化写法
	(3).switch语句
		== 比较的是值 ===比较值和类型
		switch语句中的判断使用的是===
		switch(expression){
			case 常量1:
				语句;
				break;
			case 常量2:
				语句;
				break;
			case 常量3:
				语句;
				break;
			...
			case 常量n:
				语句;
				break;
			default;
				语句;
				break;
		}
 3.循环结构：重复做一件事情
 	在JavaScript,循环语句有三种:while,do...while,for循环
 	(1).while
 		基本语法:
 		//当循环条件为true时,执行循环体
 		//当循环条件为false时,结束循环
 		while(循环条件){
 			//循环体
 		}
		
		//当循环的条件永远是true的时候、我们叫做死循环，写代码时一定要注意避免死循环
	(2).do...while
		do...while 循环和while 循环非常像，二者经常可以相互替代，但是do...while的特点是不管条件成不成立，都会执行一次
		基本语法：
		do{
			//循环体	
		}while(循环条件);
	(3).for
		while 和 do...while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便
		//for循环的表达式质检用的是;号分隔的，千万不要写成,
		for(初始化表达式1;条件表达式2;自增表达式3){
			//循环体4
		}
		执行顺序: 1243 --- 243   ---243(直到循环条件变成false)
			1. 初始化表达式
			2. 判断表达式
			3. 自增表达式
			4. 循环体
	(4).continue和break
		break 破坏循环，终止循环
		continue 跳出本次循环，继续下一次循环
	(5).调试debug
		调试的目的是确定错误的原因和位置，并解决错误
		1、错误:
			语法错误
			逻辑错误
		2、过去调试JavaScript的方式
			alert()
			console.log()
		3、断点调试
			断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后可以一步一步往下调试，调试过程中可以利用watch看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
			调试步骤：
			浏览器中按Fn+f12,sources,找到需要调试的文件，在程序的某一行设置断点
		
	

顺序结构：

分支结构：

循环结构：

JavaScript数组及应用

数组Array 是一种数据类型
数组的字面量： [ ]
数组 可以存储很多项，有顺序，很多项形成一个集合，这个集合就是数组
数组中存储的数据类型可以不一致，但是不推荐这么用

数组的基本操作：

1、如何获取数组中的数据：
	数组名[索引/下标]
  	注：数组中的第一项的索引是从0开始	 
2、获取数组的长度：
	数组名.length
	备注：数组的长度：数组中元素的个数
3、获取数组中的最后一个元素：
	数组名[数组名.length-1]
4、如何修改数组中的元素
	数组名[索引/下标] = 'xxxx'
5、动态改变数组的长度
	增加数组：数组名[n] = 'xxxx'
	注：n>=数组名.length
6、获取数组中的每一项，并打印（遍历数组）
	for(var i = 0;i< 数组名.length;i++){
	console.log(数组名.[i]);
	}

冒泡排序(从小到大)：

	var numbers = [97,66,65,53,23,78];
	//外层循环：控制趟数，每一趟找到一个最大值
	for(var i = 0;i < numbers.length -1 ,i++){
		//内层循环：控制比较的次数，并且判断两个数的大小，把大的数往后放
		for(var j = 0;j < numbers.length -1 - i,i++){
			//两两比较，从小到大排序
			if(numbers[j] > numbers [j+1]){
				var tmp = numbers[j];
				numbers[j] = numbers [j+1];
				numbers[j+1] = tmp;
			}
		}
	}

冒泡排序优化：

	var numbers = [97,66,65,53,23,78];
	//外层循环：控制趟数，每一趟找到一个最大值
	for(var i = 0;i < numbers.length -1 ,i++){
		//假设数据排好顺序了
		var flag = true;
		//内层循环：控制比较的次数，并且判断两个数的大小，把大的数往后放
		for(var j = 0;j < numbers.length -1 - i,i++){
			//两两比较，从小到大排序
			if(numbers[j] > numbers [j+1]){
				//没有排好 
				flag = false;
				//交换位置
				var tmp = numbers[j];
				numbers[j] = numbers [j+1];
				numbers[j+1] = tmp;
			}
		}
		//某一趟结束，判断一下排序是否结束
		//如何判断排序是否排好，根据是否发生了数据交换，如果发生了数据交换说明没有排好
		if( flag = false){
			break;
		}
	}