学习笔记--JavaScript--Day01

JavaScript

1.JS概述

1.什么是JavaScript?
	简称JS,是一种运行于JS解释器或执行引擎中的脚本代码,是一种浏览器解释型语言;主要用来实现页面的交互与动态效果。
2.JS的组成
	1.核心语法 -ECMAScript
		规范了JS的基本语法
	2.浏览器对象模型 BOM(Browser Object Model)
		提供了一系列操作浏览器的方法,不同的浏览器之间会有所不同。
	3.文档对象模型 DOM(Document Object Model)
		提供了一系列操作文档的方法

2.JS使用方式

1.在元素标签中绑定JS代码,主要指JS事件
	什么是事件: 
		用户	在元素上所激发的行为操作(如单击操作)
	语法: 
		<标签 onclick="JS 操作">
		JS操作如果涉及代码非常多,一般会抽离出来单独写在JS文件中,如果是简单的代码,可以以属性值字符串的形式书写。
	实例:
		<div onclick='console.log("hello");'>
2.将JS代码嵌套在文档中,使用<script></script>标签
	语法: 
		<script>
			JS代码
		</script>
	注意: 
		<script></script>标签可以书写在文档的任意位置,可以书写多次,但是不同的位置会影响代码最终的执行效果。
	特点: 
		网页加载到标签时就会执行内部的JS代码。
	实例:
		<script>
			console.log('内容'); #开发人员的调试代码,在控制台输出。
			document.write('内容'); #在页面中输出,但是会重写网页主体内容,要慎用。
		</script>
3.外部链接(如同创建.css文件一样)
	语法: 
		创建外部的JS文件 xxx.js,在文档中使用<script src="JS路径"></script>标签引入。
		src: 
			src引入的外部资源是网页加载所必须的一部分,网页在加载src文件时,会等待文件加载完毕在执行后面的代码。
		href: 
			网页在加载href文件时,不会等待加载完毕,边加载边向后执行。
	注意: 
		在JS的引入标签中不能再书写任何JS代码。
	常用操作: 
		1. alert(); #普通的网页弹窗
		2. prompt(); #接收用户输入的弹窗,同时返回用户输入的内容
		3. document.write("<h1>hello world!</h1>");
		  注：
			1.在使用事件方式写入时，会重写网页内容(事件涉及网页刷新)。
			2.可以识别HTML标签，脚本代码可以在文档任何地方书写，如果是普通写入,不涉及事件，区分代码的书写位置，会在当前位置中插入。如果是在head中嵌入，内容会作为body的首行内容显示。
		4. console.log(); #控制台输出,多用于代码调试。

3.JS基础语法

1.JS是由语句组成的
	-JS语句可以由运算符、关键字、表达式组成
	-JS语句必须以英文分号结束(;)
	-JS中严格区分大小写
		console.log();#正确
		Console.log();#错误
	-所有涉及的标点符号，必须使用英文
2.JS注释
	-单行注释 //
	-多行注释 /* 开始, */结束

4.JS的变量与常量

1.变量(数据可以随时被更改)
	1.创建变量
		-先声明，后赋值，使用关键字 var 进行声明;
			声明： var 变量名;
			赋值： 变量名 = 值;
		-声明的同时赋值
			var 变量名 = 值;
		-同时声明多个变量
			var m,n,q;
			var a=1, b=2, c=3;
		-输出变量的值
			var uname = "wca";
			console.log(uname);
			console.log(uname,uage); #输出多个值
			console.log("姓名: ",uname);
			console.log("姓名: " + uname); #拼接字符串
			document.write(uname);
			alert(uname);
	2.注意
		1.声明变量时,关键字var可以省略，但不建议省略,容易出问题;
		2.变量只声明未赋值,如var a; 变量默认值为undefined;
	3.变量名的命名规范
		-不能与JS中的关键字和保留字冲突
			-常见关键字
				var default break class function for while do ... name
		-自定义的变量名可以由数字、字母、下划线、美元符($)组成，但不能以数字开头;
		-变量名称严格区分大小写;
		-命名尽量有意义，尽可能见名知义;
		-多个单词组成变量名,采用小驼峰标识;
	4.变量的使用方式
		1.赋值
			赋值符号 =
			作用：
				将赋值符号右边的值 赋给 左边的变量;
		2.访问
			-直接输出
				console.log(uname);
			-变量出现在赋值符号的右边，表示访问变量的值;
		3.注意
			赋值符号的左边只能是变量;
2.常量
	1.一经声明就不允许被修改的数据就是常量
	2.语法:
		const 常量名 = 值;
		注意：
			-常量在声明的同时必须赋值;
			-为了与变量区分,常量名一般采用全大写的方式
		et:
			const PI = 3.1415926;
	3.操作小数位
		保留当前变量小数点后n位
		toFixed(n);

5.数据类型

1.基本数据类型
	1.数字类型(number)，表示32位的整数或者是64位的浮点数
		1字节 = 8位
		1.整数
			十进制表示：
			八进制表示：以数字0开头
			十六进制：以数字0和字母x( 0x )为前缀
		注意：
			使用console.log()输出整数时，不管用哪一种进制表示，输出的结果都会转换成十进制。
		2.小数
			1.小数点计数法，如3.14
			2.指数计数法，如1.5e3 (等于 1.5 * 10的三次方 = 1500)
				e表示以10为底,后面的数表示10的次方数
	2.字符串类型
		string类型，可以由Unicode的字符、数字或标点来表示
		注意：
			1.字符串在使用时必须以""或''引起来
			2.每个字符都有对应的Unicode码
		1.查看字符的Unicode码
			方法：charCodeAt(index);
			作用：
				-用来查看指定位置的字符对应的Unicode码
				-如果不指定索引，则默认返回第一个字符对应的Unicode码
				-Unicode编码中前128位与ASCII码值一样
					var s="hello";
					s.charCodeAt(2); #查看字母l所对应的Unicode码
		2.查看中文字符对应的Unicode码
			-首先需要将码值转换为16进制，再进行汉字字符的转换
			et:
				var s = "张";
				var r = s.charCodeAt();
				r = r.toString(16);
				console.log(r);  # "5f20"
			16进制字符串转汉字字符，需要添加\u转义，如
				var s = "\u5f20"
			注意：
				这里不能使用字符串拼接，如：
				var s = "\u" + "5f20"; # 语法错误
			中文范围：
				"\u4e00" ~ "\u9fa5"
			转义字符
				\n : 换行
				\t : 制表符
				\" : "
				\' : '
	3.布尔类型 boolean
		用来表示真或假，可以参与数字运算
	4.undefined
		1.变量声明未赋值时
		2.访问对象不存在的属性时
	5.null
		空类型
2.判断数据类型
	typeof
	使用：
		typeof n 或者 typeof(n)
3.引用数据类型
	数组 函数 对象

6.数据类型转换

-相同数据类型的变量进行转换时，保持数据类型一致
1.隐式数据类型转换
	1.number + string
		当字符串与其他数据类型(包括Boolean类型)相加时，+表示字符串的拼接，不再是数学运算
		转换规则：
			将非字符串类型的数据转换成字符串之后进行拼接，最终结果为字符串。
	2.number + Boolean
		将布尔类型转换为数字再进行数学运算
2.强制类型转换
	1. toString()
		将任意非字符串类型的数据转换为字符串类型,并返回转换后的结果
	2. Number()
		将数字的字符串或者是布尔值转换成number类型，如果字符串中包含非数字字符，转换失败，结果返回 NaN (Not a Number)
	3. parseInt()
		解析字符串中的整数，只解析字符串开头中的数字，如果字符串不是以数字开头的，返回NaN，并且只解析整数部分(如包含小数位，小数位不解析)
		如果parseInt方法的参数不是字符串，会自动使用toString()转换成字符串之后，再进行解析
	4. parseFloat()
		解析字符串中的数字，包含整数和小数部分，同样的，如果不是以数字开头的字符串，结果返回NaN;指数计数法的小数，按普通小数一样表示

7.运算符（1）

1.赋值运算符 =
2.算术运算符 
	+ - * / % (加减乘除、取余)
	++ -- 自增自减运算符
	注意：
		1.自增或自减运算符在单独与变量结合时，放前面与放后面没区别
			a++ ++a 
		2.如果自增或自减运算符与其他运算符结合使用，要区分前缀和后缀
			-先找变量，从变量位置从右向左结合运算符
			-如果做前缀，先++/--,再进行赋值或其他运算;
			-如果做后缀，就先结合其他运算符，再进行++/--;
			如：
				num = 5;
				var res = num++;
				结果： res = 5   num = 6
				var res = ++num;
				结果： res = 6   num = 6