javascript基础

javascript（JS）

什么是javascript呢

一款运行再浏览器的脚本编程语言
（服务器运行的javascript称为 nodeJS）

javascript 有什么用？

主要是嵌入在网页中和用户进行交互（DOM文档，BOM浏览器操作，事件，ajax）

javascript 写在哪儿？

• script 标签内
• .js 文件内-通过src属性引入
• html标签事件属性内
• 写在a标签的href属性内

javascript的注释

• 单行注释 //
• 多行注释 /* 注释内容 */
  多行注释不能嵌套

作用

1. 方便我们阅读沟通（其他同事去理解代码）
2. 临时移除一部分的代码（注释过的代码js解析的时候会忽略）

JS中如何输出

1. 通过console.log("需要输出的内容")
2. document.write("要输出到页面中")
3. 通过alert("警告内容")

JS最佳实践

1. js代码是从上至下逐行执行
2. 每行代码的结尾应该有个分号;
3. js 中的标点符号都是英文的标点符号

变量

存储数据的一个容器

为什么要使用变量

• 简化操作
• 灵活程序

变量命名的规则

• 必须是 字母 数组 _ $ 组成
• 不能一数字开头
• 不能是javascript的关键字 （var）

推荐的规则

1. 尽量用英文（拼音也可以）
2. 命令要有意义 c1 c2 c3 （通过名大概就要知道变量值是什么）
3. 可以采用驼峰写法，下划线写法 bestNumber best_number (尽量统一)

变量声明的方法

1. 声明即赋值

var num = 100;

2. 先声明后赋值

var num;
num = 100;

3. 声明多个用逗号隔开；

var name = 'mumu',age = 18;
var name,age;
name = 'mumu';
age = 18;

数据的类型

• 值类型：数值Number 字符串String 布尔Boolean 未定义 undefined
• 引用类型：对象 Object 数组Array 函数 function null 空

不同的数据类表现形式

数值 Number

• 整数 var age = 18
• 小数 var money = 108.08
• 负数 var degree = -2

字符串 String

• 用单引号'或者"包裹

var str = "Davie";
var name = 'Defu';
// 单引号里面可以嵌入双引号 ，双引号里面可以嵌入单引号 

转义字符串
表达一些特殊的符号

单引号 \'
双引号 \"
换行   \n

布尔值 Boolean

• 表示对或者错
• 只有两个取值 true对 false错

未定义 undefined

• 变量声明没有赋值

赋值运算符号 =

数学运算符号

加 +
减 -
乘 *
除 /
余数 %
优先()
先乘除后加减 有括号的先算括号内容

累计运算
+= 累加
-= 累减
*= 累乘
/= 累除

第增运算符号
++ 累加1
– 累减1

比较运算符（true 或者 false）

1. 比大小（数值Number）

> 大于
< 小于
>= 大于等于
<= 小于等于

2. 是否相等（任意类型可以比较）

== 值相等
=== 严格等于（值和类型都需要相等）

字符串运算符号

+ 字符串连接符号
+= 字符串累计连接

当字符串与其他类型的数据连接时候 会把其他类型的数据自动转换为字符串

var a = 100;
var b = "10";
alert(a + b); // "10010"

如何把字符串转换为数字

praseInt(字符串) 把字符串转换整数
praseFloat(字符串) 把字符串转换为小数
*=1  把字符串强制转换为数字
如果转换不成功则 结果为 NaN （not a number）

逻辑运算符号

&& 逻辑且
|| 逻辑或
!  逻辑非

逻辑运算符号 与赋值运算；

var a = false || 10;  // a 的值为10

falsely变量
通过两次转!! 值为false 变量为falsely变量

• 空字符串
• 数字0
• false
• undefined
• null
  其他都为truly变量

JS 中数据类型的判断

• typeof
• instanceOf
• constructor
• isArray
• Object.prototype.toString.call(判断对象)；

typeof

能够判断数值类型（简单数据类型）和函数
typeof其他的引用类型（复杂数据类型）得到的结果都是undefined

<script>
		var a = 123;
		var b = "abc";
		var c = false;
		var d;
		var e = {};
		var f = [];
		var h = null;
		function fun() {}
		console.log(typeof(a)) //number
		console.log(typeof(b)) //string
		console.log(typeof(c)) //boolean
		console.log(typeof(d)) //undefind
		console.log(typeof(e)) //object
		console.log(typeof(fun)) //funcation
		console.log(typeof(null)) //object
		console.log(typeof(NaN))  //number
		console.log(typeof(f)) //object
</script>

JS分支

if

javascript 代码是从上至下逐行执行；
分支让我们可以 跳过代码去执行下行

if(表达式){
	执行语句;
}
如果表达式为truely变量 执行语句才会执行
如果表达式为falsely 变量 执行语句会跳过

if else

if(表达式){
	执行语句1;
}else{
	执行语句2;
}
表达式的结果为truely变量则执行语句1 否则执行语句2

三目运算

表达式?语句1:语句2;
如果表达式为truely变量则执行语句1 否则执行语句2;

多重if

if(表达式1){
	语句1；
}else if(表达式2){
	语句2；
}else if(表达式n){
	语句n；
}else{
	语句其他;
}
// 如果表达式1 为true 则执行语句1 否则 查看表达式2
// 如果表达式2 为true 则执行语句2 否则 查看表达式n
// 如果表达式n 为true 则执行语句n 否则 执行其他语句；

switch

switch(index){
	case 1:
		alert("尊为武林盟主");
	break;
	case 1:
		alert("尊为武林盟主");
	break;
	case 2:
		alert("武当掌门");
	break;
	case 3:
		alert("峨眉掌门");
	break;
	default:
		alert("逐出师门");
}
index 是执行地图条件
break 跳出语句
default 默认
// 多重功if 偏重于处理区间条件
// switch 偏重于确定的某个值

多个条件的结合 逻辑 || && ! ()

var 变量提升问题

在js在编译代码是会把var声明的变量 提升在所有代码的最前面 赋值为undefined

如果试图去访问没有声明的变量 会报错（xxx is not defined）

/* js在编译代码是会把var声明的变量提升在最前面*/
	var num;
	alert(num);
	console.log("你好呀变量");
	num =18; 
		

alert(num);
		console.log("你好呀变量");
		var num = 18;
		alert(num);
		if(false){
		var num = 50;
		 }

 var num；
		if(false){ num = 50};
		alert(num);
		alert(abc);
		//abc is not defined 错误

循环

做重复而有规律的语句

while

var i = 1; 						// 	A	初始化循环变量
while(i<=10){ 					// 	B 	循环结束条件
	document.write(i+"<br/>") 	// 	C 	执行语句
	i++                      	//  D 	更新循环变量
}
执行循环是  
A B C D
B C D
B C D
B 如果值为false 循环结束

do While

至少会执行一次
先执行一次后在进行判断

do{
	执行语句；
}while（条件判断）

for

使用频率最高的循环方式

for(A循环初始条件 ; B循环的终止条件 ; C变更循环){
	D循环语句;
}
执行循序
A B D C
B D C
B为false 终止循环

例如1到100的相加的求和

<script>
			for(var i=1,total=0,a = 1 ;i<=100;i++){
				total+=i;
				
				a++;
				if (a%8==0) {
					document.write(`<br>`)
				}
				
				if(i==100){
					document.write(`${i}`)
				}else{
					document.write(`${i}+`)
				}	
			}
			document.write(`=${total}`)
</script>

continue

结束当次循环 ，执行 下一次循环

break

终止循环

多重循环

1. 循环里面嵌套循环
2. 如果一功能三层循环还没有完成 最好是想别的办法

例如：九九乘法表

<script>
document.write("<table border='0'>")
		for (var i = 1; i <= 9; i++) {
			document.write(`<tr>`);
			for (var j = 1; j <= i; j++) {
				document.write(`<td>${i}×${j}=${i*j}</td>`)
			}0
			document.write(`</tr>`)
		}
	document.write("</table>")
</script>