02.js介绍,入门,js引入,变量,值类型,运算符

js介绍,入门,js引入,变量,值类型,运算符

开始学习js

js三大部分

$$js三大部分=\{\begin{array}{l}ECMAScript\\ DOM\\ BOM\end{array}$$

1. 如何引入js?

   • 页面内嵌

     js后缀就是javascript文件
     .htm/.html是同一个类型的原因：windows 98只允许一个文件后缀名最多是三位，所以.ht也行，所以javascript的后缀就是js，而不能写全称

     开发标准：外部引入js文件

     要求 结构(html) 行为(javascript) 样式(css) 相分离

     目的：

     1. 看起来清晰
     2. 维护起来好维护

     在既有外部文件引用，又有内部的情况下优先使用外部。

     	<!-- 类型改成text/tpl为了存储代码，当仓库，故意让代码无法执行。 -->
     	<script type="text/javascript" src="02-introduce2.js">
     		// 后面分号不能少
     		document.write('张杰真帅！');
     		// 引入外部文件（因为同路径，所以直接写文件名）
     	</script>
     

2. 为符合web标准(w3c标准中的一项)结构、样式、行为相分离，通常会采用外部引入

$$javascript=\{\begin{array}{l}页面级javascript\\ 外部级javascript\end{array}$$

基本语法

$$变量(variable)=\{\begin{array}{l}变量声明\{\begin{array}{l}声明、赋值分解\\ 单一var\end{array}\\ \\ 命名规则\{\begin{array}{l}1.变量名必须以英文字母{、}_{、}美元符号开头\\ 2.变量名可以包括英文字母{、}_{、}美元符号、数字\\ 3.不可以用系统的关键字、保留字作为变量名\end{array}\end{array}$$

ps：html和css是计算机语言，撑死叫脚本语言，不是编程语言。

编程语言最基础得有变量，变量：存放数据，以便后续使用。
$$变量(类似冰箱)=\{\begin{array}{l}1.放有用的东西(没用的扔垃圾桶)\\ 2.放的东西方便以后使用\end{array}$$

变量声明过程

声明、赋值分解
	<script type="text/javascript">
		// 注意：行之间不能有空行，不然打印不出来。
		// 1.声明变量：向系统申请了一个房间，房间名字叫做a。
		// var a;
		// 2.变量赋值：把100放进房间里(100赋值给a)
		要房间和数据进去不一定同步。(开房之后不一定立马进房间，可以先出去逛逛。)
		// a = 100;
		// 上面两步简写成
		var a = 100;
		var b = 200;
		var c = 300;
		var d = 400;
		var e = 500;
		document.write(a+b+c+d+e);
		// 上面这样每个都定义一次有点太繁琐
		比如：张三带着一群女朋友分别开房，不会一次又一次的去前台开五次房，而是一下子开好五间房。
		// 正确写法：告诉系统给我开五个房间出来。
单一var模式	(开发标准是竖着写，后面可赋值，注意是逗号分隔，最后才是分号。分号是语句结束标志。)
		var a = 10,
            b = 20,
            c = 30,
            d = 40,
            e = 50;
			document.write(a,b,c,d,e)
	</script>

// a初始值是10，下面又把20赋值给a，a就变成了20,原来的10就没了。
var a = 10;
a = 20;

命名规则

// 1.变量名必须以英文字母、_、美元符号开头
	var a111;
	var _111;
    var $111;
// 2.变量名可以包括英文字母、_、美元符号、数字
    var a1_1;
    var $1_$;
// 3.不可以用系统的关键字、保留字作为变量名
    var var = 10;（不行）
    var main = 10;（不行）
    var float = 10;（不行）（保留字：当前系统可能没用，但是升级以后可能会用到）

关键字

break	else	new	var
case	finally	return	void
catch	for	switch	while
default	if	throw
delete	in	try
do	instanceof	typeof

保留字

abstract	enum	int	short
boolean	export	interface	static
byte	extends	long	super
char	final	native	synchronized
class	float	package	throws
const	goto	private	transient
debugger	implements	protected	volatile
double	import	public

值类型—数据类型

var a =  10;
var b = 10;
var c;
// （先把等号后面的内容计算完才会赋值给c）
c = a + b;
document.write(c);

不可改变的原始值(栈数据stack)

​ 栈;先进后出,就好比忘杯子放硬币，最先放进去的最后才能拿出来。

原始值：Number,String,Boolean,undefined,null

$$语言=\{\begin{array}{l}1.动态语言：基本上都是解释型语言，解释型语言基本上全是脚本语言。\\ 2.静态语言\end{array}$$

Number：数字
String：字符串""
Boolean:true false
undefined:未定义的值，定义变量名打印之后就会提示未定义。
null:空，表示占位，可以用于覆盖已经定义的方法。

// 原始值（js很灵活，可以不同类型互相赋值。）
var a = 10;
// a = "abc"
var b = a;
a = 20;
document.write(b); // a的值赋值给b后b变成10，然后将20赋值给a，a的值是20。

// 记住：原始值是不可改变的
var num = 100;
num = 200;  
// 这里的赋值过程为：1001这个房间放num = 100,200先存到1002这个房间，然后把1002房间名改成num,把1001的房间名num恢复成1001，里面的100这个值等着下次有新值的时候覆盖。

// ps:删除东西只是把数据和变量之间的关系剪断了，就好比1001里面有值，但是没有变量名，所以找不到了。

// 手机内存不足之后清空数据其实也没有删除，只是抹除了指针，再次存东西时会进行二轮覆盖，把清空的部分上的数据进行覆盖。

栈数据stack

​ ps:区分原始值和引用值的原因是两种值的赋值情况不一样。

​ 栈内存和栈内存之间的赋值是通过拷贝。

引用值（堆数据heap)

array,object, function……date RegExp

// 引用值
// array object function……date RegExp
// var arr = [1,2,3,4,5,false,"abc"]
var arr = [1];
var arr1 = arr ;
arr,push(2);   // push是往数组里面加元素
document,write(arr);   //结果为1,2
document,write(arr1);   //结果也为1,2(这里是引用，会跟着变化。) 

堆数据heap

// 1.申请房间 (图1)
var arr = [1,2];
// 2.引用值特殊处理(栈里面存储引用的堆数据的地址)
var arr1 = arr; // （图2）引用值赋值给引用值，拷过去的是地址。
// （图3） 这里的arr是重新申请了一个房间，arr存储的引用地址发生改变。
arr = [1,3];  // 插入是用push
document.write(arr1); // 打印结果是1,2
document.write(arr); // 打印结果是1,3，

var arr =[1,2];
var arr1 = arr;
arr.push(3); // push就是往原数组内插元素

图1：栈



图2：堆



图3：指向新的地址



图4：push使用

#### js语句基本规则

1. 语句后面要用分号结束";" // 函数、for循环、if后面不需要加({}后不用加分号)

2. js语法错误会引发后续代码终止，但不会影响其它js代码块

   错误分成两种：

   • 低级错误(语法解析错误)

     // 解释型语言就是读一行执行一行，执行之前会通篇扫描代码(有中文符号等低级错误会直接报错）
     var a = 10；
     document.write(a)：  // 中文符号导致编译错误，会报错而不会继续往下执行(不影响之前的代码运行)
     var b = 10;
     document.write(b);
     

   • 逻辑错误（标准错误，情有可原）

     // 打印一个没有定义的变量等
     var a = 10;
     document.write(b);
     

3. 书写格式要规范，“=＋/ -"两边都应该有空格

   // a = b + c - d   
   // b = a / c
   

   js运算符

   运算操作符

   “+”

   1.数学运算、字符串链接

   // 数字相加
   var a = 1 + 2;
   document.write(a);
   

   2.任何数据类型加字符串都等于字符串

   // 字符串相加
   var a = "a" + "b";
   document.write(a);  // 打印结果：ab（String）
   
   // String + int
   var a = "a" + 1;
   document.write(a);  // 打印结果：a1（String）
   
   var a = "a" + 1 + 1;
   document.write(a);  // 打印结果：a11（String）
   
   var a = 1 + 1 + "a" + 1 + 1;
   document.write(a);  // 打印结果：2a11
   
   var a = 1 + 1 + "a" + (1 + 2);  // ()优先级最高
   document.write(a);  // 打印结果：2a3
   
   var a = 1 + 1 + "a" + “(1 + 2)”;  // ()优先级最高
   document.write(a);  // 打印结果：2a（1 + 2）
   

   “_”，“*“，“/ “，“%”，”=“，“()”

   var a = 5 - 1;
   document.write(a);  // 打印结果4
   
   var a = 5 * 1;
   document.write(a);  // 打印结果5
   
   var a = 0 / 0;
   document.write(a);  // 打印结果NaN（Not A Number）
   
   var a = 1 / 0;
   document.write(a);  // 打印结果Infinity(无穷)
   
   var a = -1 / 0;
   document.write(a);  // 打印结果-Infinity(负无穷)
   
   var a = 5 % 2;
   document.write(a);  // 打印结果1 
   

   优先级"=“最弱，"()"优先级较高

   “++“.”– – “、”+=“, “– =”，“/=”，“*=“，“%=”

   var a = 10;
   a = a + 1;
   ==> a++   // 自身加1再赋值给自身
   
   a++  // 先执行语句后++
   var a = 10;
   document.write(a++); // 打印结果是10，打印完a赋值之后变11
   document.write(a); // 打印结果是11
   
   ++a  // 赋值再执行语句
   var a = 10;
   document.write(++a); // 打印结果是11
   document.write(a); // 打印结果还是11
   
   // 赋值的顺序自右向左，计算的顺序自左向右。
   var a = 10;
   var b = ++a - 1 + a++;   // 运算结果11-1+11=21  运算完之后a变成12
   document.write(b + " "  + a);  //打印结果：21 12
   
   a--  // 先执行语句后--
   var a = 10;
   document.write(a--); // 打印结果是10，打印完a赋值之后变9
   document.write(a); // 打印结果是9
   
   --a  // 赋值再执行语句
   var a = 10;
   document.write(--a); // 打印结果是9
   document.write(a); // 打印结果还是9
   
   var a = 10;
   a += 10;  ==> a = a + 10;
   a += 1; ==> a++  ==> a = a + 1;
   a += 10 + 1； ==> a = a+ 10 + 1;
   a *= 2;  ==> a = a * 2;
   a /= 2;  ==> a = a / 2;
   a %= 2;  ==> a = a % 2;
   

练习

1.写出打印结果

var a = (10 * 3 - 4 / 2 + 1) % 2,   // 运算过程： （30-2+1）% 2 = 1
    b = 3;
b %= a + 3;  // b = b % a + 3 =3 % 1 + 3 = 3
document.write(a++); // 打印结果 1,打印完a变成2
document.write(<br>);  // <br>换行
document.write(--b); // --b=2

// 2.请交换a,b的值
// 方法一：利用中间变量
var a = 123;
var b = 234;
var c = a;
var a = b;
var b = c;
document.write(a);  // 234
document.write(b);  // 123

// 方法二：先把和赋值给a
a = a + b;
b = a - b;
a = a - b;  // a -= b