初认JavaScript

初认JavaScript

什么是JavaScript，JS能干什么

JavaScript 是前端的编程语言是一种基于对象和事件驱动的解释型脚本语言

JavaScript 的组成ECMAScript语言基础标准，BOM浏览器对象模型，DOM文档对象模型

JavaScript 可以实现表单验证，提交数据给后台，页面动效，改变页面布局，后端开发，app，小程序开发。

JavaScript写在什么位置？

	<script>
		js代码
	</script>

javascript作为一种脚本语言可以放在html页面中任何位置，需写在script标签中

JavaScript的格式与注释

一行代码的结束就被认定为语句的结束，通常在结尾加上一个分号";"来表示语句的结束。

注释的作用是提高代码的可读性

单行注释，在注释内容前加符号 “//”

多行注释以"/“开始，以”/"结束。

什么是变量

变量是内存中用于存储某种或某些数值的空间，为了进行区分将它们命名就是变量名。

如何定义变量

JavaScript 是一种弱类型语言。无需提前声明变量的类型。

变量需先赋值在使用

var 变量名 (var已被弃用)

let 变量名

命名规范

1. 变量必须使用字母、下划线(_)或者美元符($)开始。
2. 可以使用任意英文字母、数字、下划线(_)或者美元符($)，多个单词用驼峰式写法
3. 不能使用JavaScript关键词与JavaScript保留字
4. 严格区别大小写

JavaScript的数据类型

JavaScript有7种数据类型5种基本数据类型和2种引用数据类型

基本数据类型

1. string 字符串

被引号（单引号或双引号）括起来的文本，使用console.log打印为黑色

也可使用`` 反引号包裹，包裹内容保持原有格式

	<script>
		let a = "字符串"
	
		let str ="I'm OK"
		let str2 ='"特别"的'
	// 单双引号包裹区别
	</script>

也可使用转义字符

• \n = enter 换行
• \t = tab 制表符
• \ 斜杠本身

可使用toString()将变量强制转换为String

2. number 数字

	<script>
		let a = 1;
	</script>

任何数字 + undefined = NaN
NaN=not a number

可使用parseInt() 强制转换为数字，转换遇到第一个非数字时截止

		let x = "123x"
		console.log(parseInt(x))
		//返回123

3. boolean 布尔型

布尔值指代真或假、开或关、是或否 只有两个值 true（1）和false（0），互为取反

	<script>
		let bd = true;
		let dd = false;
	</script>

4. null 空值

	<script>
		let a = null;
	</script>

暂时没想好给什么值的时候用

5. undefined 变量无初始值

	<script>
		let a;
	</script>

没有初始值，没有被初始化，将被赋予undefined，表示这个元素 不存在
undefined值是派生自null值

引用数据类型

1. 数组 Array

数组是一种特殊对象，是带有下标的有序集合，可以使用下标访问数组中的值。[]包裹

	<script>
		let	a = [1,2,3]
		console.log(a[0])
		console.log(a[1])
		console.log(a[2])
	</script>

2. 对象 Object

每个属性都由 键值 构成,值可以是基础数据类型，也可以是对象,对象是“命名值”的无序集合。{}包裹
可使用对象名.属性名 来访问

• null是空的对象引用

	<script>
		let	a = {
			name:"wz",
			age:18,
		}
		console.log(a.name)
		console.log(a.age)
	</script>

如何判断数据类型

使用 typeof 关键字 检测JavaScript数据类型

boolean – 布尔值 true 真，false 假

string – 字符串 被’'，“”，``包裹

number – 代表这个值是数值

undefined – 代表这个值未定义

object – 代表这个值是对象或null

typeof null 的值是object （js底层原因导致）

typeof Array和Object 均返回 Object（Array为特殊的对象）

需使用来判断是否为数组

console.log(Array.isArray (arr));

使用isNaN可判断是否为number：isNaN()返回true为非数值，返回false为数值

		let n = 1;
		let m = "16px";
		console.log(isNaN(n));
		console.log(isNaN(m));

算数运算符

##隐式转换
进行运算时需主要隐式转换

赋值符号 =

        var a=10;
        // 将10赋值给a

+ - * /

加减乘除与数学运算一致，遵循数学运算顺序，需注意隐式转换与精度丢失问题

				console.log(1 + true)	//	2 number
				console.log(true + true)	//	2 number
				console.log(1 + NaN)	//	nan number
				console.log(1 + null)	//	1 number
				console.log(1 + {})	//	1[object object] string
				console.log("hello" + null)	//	hellonull string
				console.log("hello" + undefined)	//	helloundefined string
				console.log(1 + null + 2)	//	3 number
				console.log(1 + 2 + '3')	//		33 string
				console.log(1 + '2' + 3)	//123 string
				console.log('1' + null + 2)	//	1null2 string
				console.log('1' + (null + 2))	//	12 string
				console.log('4' * '7')	//	28 number

++,–

自+1，自-1
对于一个变量自增之后，原变量的值会立即自增1
自增分为两种： ++i 前增量 与 i++ 后增量

• 前自增运算符是先加1，再进行操作数的值，后自增运算符是先使用操作数的值，再加1

		var a=1;
		console.log(a++); //	1
		console.log(++a); //	2

%

取余

		var b=10;
		console.log(b%3);  //1

逻辑运算符

非!

• 正常情况：对一个布尔值进行取反
• 非正常情况：先转换为boolean，再进行运算
• 可以多次取反

		let c = true;
		console.log(!c);	//false
		console.log(!!c);	//true
		

与

true && false 全真为真，一假全假
短路原则 如果左侧表达式为false，返回左侧操作数的值，就停止判断，并不会对右侧操作数进行计算。

console.log(true && true);
//返回true

或

有true就返回true ，一真全真，全假为假
遵循短路原则

console.log(true || console.log('test'));
//返回true 不对右侧进行对比

关系运算符

>,>=,<,<=

用来比较两个值之间的关系。

• 大于小于等于
• 对于非数值进行比较，先转换为数字，再比较

console.log(1 > 'a' );//任何值和NaN都是false

=,!=,!

== 是自动进行类型转换，再比较
=== 并不进行自动类型转换，进行比较
!代表非，取反。! == 与 ! =代表不等于，用法与上面一致。

console.log( '1' == 1 );//true
console.log( true == '1' );// true转换成数字1
console.log( true == '2' );//false
console.log( undefined == null );// undefined 衍生自null 所以为true
console.log(NaN == 1);//false	 NaN不和任何值相等，包括其本身
console.log(NaN == NaN);//false

分支条件语句 if…else

• 如果…就…

	var a=10;
	var b=9;
	if(a>b){
		console.log("表达式为true打印此处")
	} else{
		console.log("表达式为false打印此处")
	}

如果语句块只有1行语句，大括号可以省略

	var a=10;
	if(a!=10){
		console.log("如果a不等于10打印此处")
	} 
	//该if不打印任何内容