渡一教育公开课web前端开发JavaScript精英课学习笔记（二）变量类型，运算符

JavaScript引入方式

内嵌 

<script type = "text/javascript">
    document.write('hello,javascript!');
</script>

两个<script></script>代码块错误，不会互相影响。

<script type = "text/javascript">
    document.write(hello);
    document.write('这里不能被执行！');
</script>
<script type = "text/javascript">
    document.write('这里还可以执行');
</script>

引用文件

使用引用文件方式时，在<script></script>代码块中的代码就不会被运行。

<script type="text/javascript" src="js文件位置">这里不会被执行</script>

注：开发方式一般都是结构（html）、行为（JavaScript）、样式（css）相分离，所以多采用引用文件方式。

JavaScript基本语法

变量（variable）

<script type = "text/javascript">
    var a;                    //声明变量
    var b,
        c = 0,
        d = true;             //同时声明多个变量并可赋初始值
    a = 'hello,javascript!';  //变量赋值
    document.write(a);        //使用变量
</script>

变量类型

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

<script type = "text/javascript">
  var a = 10;//变量的类型按赋值的类型决定的，a 为Number。
  var b = a; //变量的类型按赋值的类型决定的，a 也为Number。
  a = 20;
  document.write("a的值：" + a + "<br/>");
  document.write("b的值：" + b + "<br/>");
  //a的值：20
  //b的值：10
  //原始值变量存储空间是相互独立的，修改 a 变量的值，不会影响 b 变量的值。
</script>

引用值：Object、Array（数组）、function（函数）等。

引用类型的变量存储的是指向存储空间的地址，多个引用类型的变量可以指向相同的存储空间。

相当于一个人（存储空间）有多个联系方式（引用值变量），通过不同的联系方式（引用值变量）都可以找到这个人（存储空间）。

<script type = "text/javascript">
  var a = [1,2,3,4];//变量的类型按赋值的类型决定的，a 为Array。
  var b = a;        //变量的类型按赋值的类型决定的，b 为Array并与 a 指向相同的存储空间。
  a.push(5);        //通过变量 a 向存储空间添加数据。
  document.write("a的值：" + a + "<br/>");
  document.write("b的值：" + b + "<br/>");
  //a的值：1,2,3,4,5
  //b的值：1,2,3,4,5
  //引用值变量存储的是存储空间的地址，修改变量 a 的值，也就是修改了存储空间中的值，因为 b 的存储空间与 a 相同所以值也变更。
</script>

变量命名规则

变量首字母以英文字母、_（下划线）、$ 开头。

变量可以包含英文字母、_（下划线）、$ 、数字。

不能以JavaScript的关键字、保留字命名变量。

算术运算符

+ - * / % ++ --

"+" 作用：数字相加运算、字符串连接，任何数据类型 “+” 字符串都会转成字符串。 

()作为一个数学运算中的基本符号，在计算机程序中也被大量使用，最基本的就是提高运算优先级。

赋值运算符

 = += -= *= /= %=

赋值运算符优先级最低

 

<script type = "text/javascript">
    //运算符运用，确定不了优先级时，用()提升表达式优先级（推荐）。
	var d = 10;
	var e = 10;
	document.write("++d:" + (++d) + "<br/>");
	document.write("e++:" + (e++) + "<br/>");
	document.write("d:" + d + " - " + "e:" + e + "<br/>"); 
	
	var a = 10;
	var b = ++a - 1 + a++;
	document.write("b:" + b + " - " + "a:" + a + "<br/>"); 
 
	var c = 10;
	c += 10 + 1;
	document.write("c:" + c);
</script>

<script type = "text/javascript">
    //交换两个数
	var a = 123;
	var b = 234;
	a = a + b;
	b = a - b;
	a = a - b;
	document.write("a:" + a + " b:" + b);
</script>

比较运算符

== === != < > <= >=

<script type = "text/javascript">
	var sp = ",";        //输出时用于分割
	var a = "10" > "2";  //字符串顺序比较各位字符的ASCII码
	var b = 10 > 2;
	var c = 10 == 2;
	var d = 10 != 2;
	var e = Infinity == Infinity;  //无穷大比较
	var f = NaN == NaN;            //非数比较特殊，自己不等于自己
	var g = null == null;
	var h = undefined == undefined;
	document.write(a,sp,b,sp,c,sp,d,sp,e,sp,f,sp,g,sp,h);
</script>

逻辑运算符

&& || !

<script type = "text/javascript">
	//逻辑运算符&&：左面表达式如果为真，返回右面表达式的值，否则返回左面表达式的值。
	//undefined, null, NaN, "", 0, false 都为假;
	var sp = ",",
		a = 1 && 2,
		b = 1 && 0,
		c = 1 && true,
		d = 1 && false,
		e = 0 && 2,
		f = 0 && 0,
		g = 0 && true,
		h = 0 && false; 
	document.write(a,sp,b,sp,c,sp,d,sp,e,sp,f,sp,g,sp,h);
	//逻辑运算符||：左面表达式如果为真，返回左面表达式的值，否则返回右面表达式的值。
		a = 1 || 2;
		b = 1 || 0;
		c = 1 || true;
		d = 1 || false;
		e = 0 || 2;
		f = 0 || 0;
		g = 0 || true;
		h = 0 || false;
	document.write(a,sp,b,sp,c,sp,d,sp,e,sp,f,sp,g,sp,h);
	//逻辑运算符！：把表达式转成Boolean类型并取反。
	document.write(!a,sp,!b,sp,!c,sp,!d,sp,!e,sp,!f,sp,!g,sp,!h);
</script>

位运算符

略：基本不用

条件运算符

? :

<script type = "text/javascript">
	var a = 8;
	var b = 2;
	document.write(a > b ? a - b : b - a);
	//如果 a 大于 b，则执行 a - b，否则执行 b - a。
</script>