JavaScript基础

JavaScript
CS 开发 客户端开发。用户需要安全客户端应用。

	BS  开发	基于浏览器的程序，	

1、JavaScript的简介
（1）什么是JavaScript：是基于对象和事件驱动的语言，应用于客户端。
* 基于对象：
** java是面向对象，使用对象需要创建
** js里面提供好了一些对象，直接使用

* 事件驱动：每次滑动鼠标，变换一张图片，点击实现点击事件，鼠标悬停事件等，都是事件。

* 客户端：指的是浏览器

（2）JavaScript的特点（三个）
第一个：交互性 
		通过事件，驱动响应代码。
第二个：安全性  
	** JavaScript不能访问本地硬盘里面的文件
第三个：跨平台性
	** 在java里面跨平台，通过虚拟机实现的  jre
	** JavaScript跨平台，只要在系统里面安装了支持JavaScript的浏览器，可以运行JavaScript

（3）Java和JavaScript区别（雷锋和雷峰塔）

第一，java是sun公司，现在是oracle；JavaScript是网景公司
第二，java是面向对象的语言，js是基于对象的语言 
第三，java跨平台需要依靠虚拟机实现，JavaScript只需要浏览器可以运行
第四，JavaScript弱类型语言，java是强类型的语言
	** 比如在java里面定义一个变量 int a = 10;   int b = "10";不正确
	** 在JavaScript里面定义变量都是使用一个关键字 var a = 10;  var b = "10"; var c = true;
第五，java运行先编译通过虚拟机运行，JavaScript直接使用浏览器运行，
									解释运行，浏览器负责解析。

（4）JavaScript由三部分组成
第一部分：ECMAScript
	** 又ECMA组织制定语句，语法
第二部分：BOM
	** broswer object  model：浏览器对象模型
第三部分：DOM
	** document object model：文档对象模型

2、js和html的结合方式
* 有三种结合方式

第一种：在具备事件响应的标签中 直接使用。Button标签， a 标签等
		<button onclick="javascript:alert('111')"> 按钮点击事件 </button>
		<a href="javascript:alert('222')"> a标签的跳转事件</a>


第二种：使用html中的script标签 <script type="text/javascript"> js代码 </script>
	** 代码
	 <script type="text/javascript">
		alert("aaa");
	 </script>
	
	** js的注释有两种
		//单行注释
		/*
		多行注释
		*/

第三种：使用html的script标签，引入外部的js文件
	<script type="text/javascript" src="js文件的路径"></script>
	* 使用第二种方式的时候有两点注意
	注意一：不要在script标签里面写js代码了，不会执行
	注意二：结束script标签 </script>，不要在标签内结束
	* 代码
	 <script type="text/javascript" src="1.js">
		//不要在script标签里面写js代码了，不会执行
		alert("aaa");
	</script>

3、js的变量声明和数据类型
（1）在js里面如何声明变量，都是使用一个关键字var
* var a = 10;
（2）js的原始类型
* 在java里面有基本的数据类型？八个
* js的原始类型有五个
第一，string：字符串类型
* var a = “abc”;
第二，number：数字类型
* var b = 10;
第三，boolean：布尔类型 true false
* var c = true;
第四，null
* null是特殊的引用类型
* 表示对象引用为空
* 比如 var date = null;
第五，undefined
* 表示定义了一个变量，但是没有赋值
* var a;没有赋值

（3）typeof(变量的名称): 查看当前变量的类型
	* alert(typeof(a));

4、js的引用类型和类型转换
* 引用对象
** Object 对象：所有对象都由这个对象继承而来
** Boolean 对象：Boolean 原始类型的引用类型
** Number 对象： Number 原始类型的引用类型

* 类型转换
** 转换成字符串
** 转换成数字：parseInt() 和 parseFloat() 
** 强制类型转换
Boolean(value) - 把给定的值转换成 Boolean 型； 
Number(value) - 把给定的值转换成数字（可以是整数或浮点数）； 
String(value) - 把给定的值转换成字符串； 

5、js的语句
* 在java里面语句：if 、 switch 、while do-while for
* java里面的switch语句，数据类型要求：是否支持string类型？在jdk1.7开始支持的

（1）if 语句
* 代码
//if语句
var a = 10;
if(a==10) {
	alert("10");
} else {
	alert("other");
}		

（2）switch语句
* 在java里面 
switch(a) {
	case 10:
	 break;
	case 20:
	 break;
	default:
	....
}
* 代码
var b = 5;
switch(b) {
	case 4:
		alert("4");
		break;
	case 5:
		alert("5");
		break;
	default:
		alert("other");
}

（3）while循环语句
* 代码
//while语句
var i = 4;
while(i<6) {
	alert(i);
	i++;
}

（4）for循环语句
* 代码
//for语句
for(var i=0;i<3;i++) {
	alert(i);
}

（5）使用document.write()向页面输出内容
* 可以向页面输出变量		
* 可以向页面直接输出html代码
** 	document.write(i);
	document.write("<br/>");

6、练习：向页面输出99乘法表
（1）document.write可以直接向页面输出html代码
（2）html中的属性和属性值之间可以使用双引号，也可以使用单引号
（3）代码
document.write(“

”);
//循环9行
for(var i=1;i<=9;i++) {
document.write(“”);
//循环每行的部分
for(var j=1;j<=i;j++) {
document.write(““);
}
//document.write(”
“);
document.write(”“);
}
document.write(”

”); //向页面输出内容 document.write(j+““+i+”="+ij); document.write(”

");

7、js的运算符
（1）算术运算符
+ - * /…

（2）赋值运算符
+=含义： x+=y 相当于 x=x+y 

（3）比较运算符
==：表示条件的判断，如果是=，表示赋值

（4）逻辑运算符
&&  ||  !

（5）js的运算符和java不同的内容
第一个：js里面不区分整数和小数
* 比如 var a = 123/1000*1000,如果在java里面结果是 0
* js里面的结果：123

第二个：字符串的相加和相减操作
* 字符串相加是字符串的拼接操作，字符串相减是真正的相减运算，如果字符串不是数字提示NaN
* //字符串的相加和相减
var b = "10";
document.write(b+1); //字符串拼接
document.write("<hr/>");
document.write(b-1); //真正相减的运算

document.write("<hr/>");
var c = "a";
document.write(c-1); //NaN 

第三个：boolean类型相加和相减的操作
* 如果布尔类型值是true，把类型当成1运算；如果布尔类型值是false，把类型当成0运算
//布尔类型相加和相减操作
var flag = true;
document.write(flag+1); // 2,当boolean类型是true时候，把类型当成1运算

document.write("<hr/>");
var flag1 = false;
document.write(flag1+1); //1,当boolean类型是false时候，把类型当成0运算

第四个：==和===区别
* ==  比较的是值
* === 比较的是值和类型

* 代码
  var mm = "10";
    if(mm == 10) {
        alert("10");
    } else {
        alert("other");
    }
	//------------------------
	  var mm = "10";
    if(mm === 10) {
        alert("10");
    } else {
        alert("other");
    }

8、js的数组
* 什么是数组：定义一个变量只能存一个值，想要存多个值，可以使用数组进行存储
* js里面定义数组的方式
第一个：var arr1 = [];
第二个：var arr2 = [“10”,10,true]; //可以写任意的类型
第三种：var arr3 = new Array(3);
** 表示定义数组名称是arr3，数组的长度是3
第四种：var arr4 = new Array(4,5,6);
** 表示定义数组名称是arr4，数组里面的值4 5 6

* 数组里面的属性：查看数组的长度 length

* 获取数组里面的值
** 遍历数组得到里面的值
//遍历
for(var i=0;i<arr3.length;i++) {
	var a = arr3[i];
	document.write(a);
	document.write("<br/>");
}

* 数组的长度：在js里面数组的长度可变的
** 数组的长度是最大的下标+1，之间如果没有赋值直接默认是空字符串

9、js的string对象
（1）字符串对象
* 创建字符串：var a = “abc”; var b = new String(“bb”);
（2）属性 length 字符串的长度
（3）方法
第一类：与html相关的方法（设置字符串的样式的方法）
= bold() 使用粗体显示字符串。
** document.write(a.bold());

= fontcolor() 使用指定的颜色来显示字符串。 
** document.write(a.fontcolor("red"));

= fontsize() 使用指定的尺寸来显示字符串。 
** document.write(a.fontsize(7));

= link() 将字符串显示为链接 
** document.write(a.link("04-练习99乘法表.html"));

第二类：与java相似的方法（在java里面也有类似的方法）
= charAt() 返回在指定位置的字符。 如果位置不存在字符，返回空字符串""
** var str = "abcdefg";
document.write(str.charAt(1));

= concat() 连接字符串 
** document.write(str.concat(str1));

= indexOf() 检索字符串，得到检索的字符的位置，如果没有找到返回-1 
** var str2 = "ABCD";
document.write(str2.indexOf("R"));

= split() 把字符串分割为字符串数组 
** var str3 = "a-b-c";
var arr = str3.split("-");
document.write("length: "+arr.length);

= substr() 从起始索引号提取字符串中指定数目的字符。 
= substring() 提取字符串中两个指定的索引号之间的字符 
** var str4 = "MARYJACKLUCY";
document.write(str4.substr(2,3));  
//RYJ, 第一个参数表示从哪个位置开始，第二个参数表示向后取几个位置的值
document.write("<br/>");
document.write(str4.substring(2,3)); 
//R ，第一个参数表示从哪个位置开始，第二个参数到哪个位置结束（不包含这个位置） [2,3)