三、js基础

html：负责一个页面的结构
css：负责一个页面的样式
js：负责与用户进行交互。

一、javascript的历史（网景和微软之争）

1989 年，为了加强大学与科学机构之间的信息共享，人们发明了万维网（WWW）。一年后，第一款网页浏览器诞生了，它被简单的命名为：万维网。
然而，第一款商业化的浏览器在这几年后才诞生  ，导航者——它是由网景通信公司于 1993 年推出的。

在那之前，万维网一直是静态的，只有 HTML 可用。为了扩大及深入发展万维网，网景通信公司发明了 JavaScript(当时叫 Mocha)。JS 的目标是创建一种更富于交互性的动态网站。与软件开发人员相比，设计师的可用性更为重要。因此，代码必须要轻便、简易和简单。

为了不落后于IE，网景公司和sun公司合作。此时sun公司创建的java语言，声势也逐渐壮大。
网景创建了 JS 的工作原型。在很短的时间内，JavaScript 就集成到了他们的 Web 浏览器中。它借用了java的名称。名称改为javascript。

1995年，导航者浏览器迅速扩张，占据70%的市场份额。网景公司的股价一路飙升。

微软找网景合作，但被拒绝。微软立马投入20亿美元，在一年的时间，发布了JScript。并且，JScript和IE浏览器进行绑定销售，并且免费销售。（95年的时候，一款浏览器卖到45美元）


1998年，网景被美国在线的公司收购，到2003年宣布破产。

1998年，网景公司将微软告上法庭--恶意竞争，官司一直没有定下来。
等到网景公司即将破产，微软才决定赔偿7亿美元。网景公司拿出2千万美元成立了一个基金会（Mozilia） ，并把浏览器的源代码全部公开。



由于网景公司挣钱了。浏览器市场迅速爆满，市场上各种各样的浏览器都出现了。造成web页面开发的兼容性问题。

1997年。欧洲的计算机制造商协会（ECMA）组织出来给javascript规定协议。

			1.ECMAScript（这个协议只是规定了基本的语法而已）
			2.BOM（浏览器对象模型）
			3.DOM（文档对象模型）

二、javascript

2.1 javascript的特点

				1.跨平台
				2.安全性（js的代码不能直接访问硬盘的内容）
				3.js区分大小写

2.2 javascript和java的区别

1.js是网景公司的产品。java是sun公司的产品
2.js是基于对象的语言（js中有对象，但不具备封装、继承、多态的特征），java是面向对象的语言。
3.js是解释型语言。java是解释、编译型语言。
4.js是弱类型语言，java是强类型语言。

三、基础语法

3.1 javascript的引入（javascript的编写）

	1.使用<script>标签体进行编写。
		
			<script type="text/javascript" > 
					alert("hello world")
			</script>

	2.引入外部的js文件
	
		<script  type="text/javascript"   src="./1.js"  ></script>
		注意：script标签有开始标签和结束标签。如果写一个不起作用。

3.2 注释

3.2.1 html注释

             <!--注释 -->

3.3.2 css的注释

			/*  注释的内容  */

3.3.3 javascript的注释

		单行注释    //注释的内容
		多行注释    /*注释的内容*/

3.3 声明变量

	<script type="text/javascript" >
		var a ="hello word";
		var b="dog ";
		document.write("<a>"+a+b+"</a>")
	</script>

注意事项：

1. 声明变量使用var关键字， 声明的变量可以存储任意类型的数据。
2. 变量的类型是由存储的值决定的。变量声明后，类型可以改变。
3. 后定义的同名变量会覆盖前面的同名变量
4. 声明变量时，var关键字可以省略。不建议省略。

3.4 javascript数据类型

3.4.1 js的数据类型

	number 小数与整数
	string 字符串（js没有字符的概念，只有字符串，字符串可有由单引号或双引号包住）
	boolean 布尔数据类型
	undefined  undefined代表该变量没有被赋值。

3.4.2 查看变量的数据类型

			typeof   变量名      查看变量的数据格式

	<script type="text/javascript" >
		var a ="hello word";
		var b="dog ";
		document.write(typeof a);
	</script>

3.4.3 判断变量是否是一个数字

		isNaN（"123"）      
		    判断变量是否为一个数字，不是一个数字返回true。是一个数字返回false

<script type="text/javascript">				
			var a;
			document.write("10数据类型:"+(typeof 10));
			document.write("abc数据类型:"+(typeof "abc"));
			document.write("true数据类型:"+(typeof true));	
			document.write("a数据类型:"+(typeof a))	;
	</script>

3.4.4 字符串与数字的转化

		字符串转数字
			    parseInt（）   把字符串转化为整数
			    
			    parseFloat（） 把字符串转化为整数

parseInt方法基础应用：

	<script type="text/javascript">
				
			var a ="12ab1212";
			document.write(parseInt(a)); //输出 12
	</script>

	<script type="text/javascript">
				
			var a ="as12";
			document.write(parseInt(a)); //输出 NaN
	</script>

	<script type="text/javascript">
				
			var a ="012";
			document.write(parseInt(a)); //输出 12
	</script>

四、运算符

4.1 算数运算符

				+ （加法、正数、连接符）

	<script type="text/javascript">
				
			var a =1;
			document.write(a+1); //输出 2
			document.write(a+true); //输出 2
			document.write(a+false); //输出 1

	</script>

			/ （除法）
					如果两个整数相处不等于整数时，结果还是小数。和java不同。

	<script type="text/javascript">
				
			var a =12;
			document.write(a/5); //输出 2.4

	</script>

4.2 比较运算符

字符串与字符串的比较规则：
1.能找到对应位置上的不同字符，那么就比较第一个不同字符的大小。
2.不能找到对应位置上的不同字符，那么就比较长度。


凡是数字与字符串进行比较，会先把字符串转为数字在进行比较。

4.3 逻辑运算符

复制运算符

4.4 三目运算符

			布尔表达式？值1：值2

五、流程控制语句

5.1 if语句

			var a=12;
			if（a>13）{
					...
			}else if(a>4){
					...
			}


			if语句的特殊之处：
						1.if语句的条件不仅可以写布尔表达式，
						  还可以写任意类型的数据。
						
						 对于number类型。 非0为true 。0位false；
						 对于string类型。 内容不为空为true，内容空的时候为false
			 			 对于undefined类型。为false；
			 			 

		<script type="text/javascript">
				
			var a=12;	
			if(a){
				alert("a");
			}

	</script>

5.2 switch语句

			var s=“a”；
			switch（s）{
				case 常量1 ：
				
				case 常量2：
			}


		 
		  switch特殊之处：
						case后面不仅可以为常量，也可以为变量或表达式。

						<script type="text/javascript">
									
								var a=12;	
								var b=13;
								switch(a){
									 case 11: console.log("1");break;	
									 case b: console.log("1");break;
									 case b>10?10:a: console.log("1");break;
								}
					
						</script>

五、 循环语句

5.1 基本循环语句

		
				while（条件）{}
				do{}while（条件）
				for（var i=0;i<100;i++）{}
		

5.2 for-in 语句

		for-in循环语句
				for（var s in arr ）{ }
		
			作用：
				1.遍历数组的元素下标。（使用for-in遍历数组遍历的是下标）
				2.遍历对象的所有属性（使用for-in遍历对象时，遍历的是对象的属性名）

>>>>>> for-in遍历数组（遍历的是数组的下标）

    <script type="text/javascript">
		
		var arr=[12,34,12,5];
		for(var index in arr){

			document.write(arr[index]+",");
		}

	</script>

>>>>>>for-in遍历对象 （遍历的是对象的属性名）

<script type="text/javascript">
		
		 function Person(id,name){
		 	this.id=id;
		 	this.name=name;
		 }

		 var obj = new  Person(12,"x");

		 for(var  pro  in  obj){
		 	document.write(obj[pro]+".");
		 }

	</script>

六、 with语句

			
			with（obj）{
					直接调用obj的方法。
			}
	
			使用with语句，调用对象的方法或属性时，
			不用重复指定对象。简化书写。

>>>>>> 不使用with语句

  <script type="text/javascript">
		
		 	document.write("我");
		 	document.write("是");
		 	document.write("小");
		 	document.write("明");

	</script>

>>>>>> 使用with语句，可以简化书写

<script type="text/javascript">
			
			with(document){
				write("我");
		 		write("是");
		 		write("小");
		 		write("明");
			}
		

	</script>