JavaScript

JavaScript
语言基础
一.Hello JavaScript
JavaScript用于网页和用户之间的交互.
完整的javascript由语言基础，BOM和DOM组成
1.通过javascript向文档中输出文本
document是javascript的内置对象，代表浏览器的文档部分
document.write("Hello Javascript"); 向文档写入字符串
2.语言基础，BOM和DOM
完整的javascript由语言基础，BOM和DOM组成。
二.script标签
1.script标签
javascript都是放在script标签中的，一旦加载，就会执行
2.javascript顺序执行
如果有多段script代码，会按照从上到下，顺序执行
3.使用外部js文件
三.注释
1.单行注释 2.多行注释
四.变量
1.使用var声明一个变量
2.关键字var 可有可无，不使用var声明的变量
3.变量命名
五.调试
1.alert进行调试
2.console.log()
六.基本数据类型
undefined，Boolean,Number,String，null
1.声明了但未赋值
当一个变量被声明了，却没有赋值的时候，叫做 undefined
2.数字
javascript中的Number可以表示十进制，八进制，十六进制整数，浮点数，科学记数法
var a=10; //十进制
var b=012;//第一位是0，表示八进制
var c=0xA;//0x开头表示十六进制
var d=3.14;//有小数点表示浮点数
var e=3.14e2;//使用e的幂表示科学计数法
3.字符串
与java不同的是，javascript中没有字符的概念，只有字符串，所以单引号和双引号，都用来表示字符串
4.动态类型
变量的类型是动态的，当值是整数的时候，就是Number类型，当值是字符串的时候，就是String类型
5.变量类型判断
使用typeof来进行判断数据类型 typeof x
6.空对象/对象不存在
null表示一个对象不存在
七.类型转换
1.伪对象
伪对象概念：javascript是一门很有意思的语言，即便是基本类型，也是伪对象，所以他们都有属性和方法。
2.转换为字符串
无论是Number,Boolean还是String都有一个toString方法，用于转换为字符串
a.toString()
3.数字转字符串
Number转换为字符串的时候有默认模式和基模式两种
a.toString() 默认模式，即十进制
a.toString(2) 基模式，二进制
a.toString(8) 基模式，八进制
a.toString(16) 基模式，十六进制
4.字符串转换为数字
javascript分别提供内置函数 parseInt()和parseFloat()，转换为数字
注：如果被转换的字符串，同时由数字和字符构成，那么parseInt会一直定位数字，直到出现非字符。 所以"10abc" 会被转换为 10
parseInt("10") 10
parseFloat("3.14") 3.14
parseInt("10abc") 10
parseInt("hello javascript") NaN
5.转换为Boolean
使用内置函数Boolean() 转换为Boolean值
当转换字符串时：非空即为true
当转换数字时：非0即为true
当转换对象时：非null即为true
Boolean("") false
Boolean("hello javascript") true
Boolean(0) false
Boolean(3.14) true
Boolean(null) false
Boolean(new Object()) true
6.Number()和parseInt()的区别
Number()和parseInt()一样，都可以用来进行数字的转换
区别在于，当转换的内容包含非数字的时候，Number() 会返回NaN(Not a Number)
parseInt() 要看情况，如果以数字开头，就会返回开头的合法数字部分，如果以非数字开头，则返回NaN
parseInt("123abc") 123
Number("123abc") NaN
parseInt("abc123") NaN
7.String()和toString()的区别
String()和toString()一样都会返回字符串，区别在于对null的处理
String()会返回字符串"null"
toString() 就会报错，无法执行
String(null)
null.toString()
八.函数
函数即一段可以重复使用的代码
1.函数
function关键字用于定义一个函数
print即函数的名称
()表示参数列表，像这样就指没有参数
{ 表示函数开始
} 表示函数结束
2.带参数的函数
函数可以接受参数
3.带返回值的函数
九.作用域
1.参数的作用域
一个参数的作用域就在这个函数内部，超出函数就看不见该参数了
2.全局变量的作用域
十.事件
事件是javascript允许html与用户交互的行为。用户任何对网页的操作，都会产生一个事件。例如鼠标移动，鼠标点击，键盘点击等
十一.算数运算符
1.基本算数运算符 + - * / %（取余数）
2.自增，自减运算符
如果 ++放在 前面 ，就是 先运算，后取值。
如果 ++放在 后面 ，就是 先取值，后运算。
3.赋值运算符 =，+=，-=，*=，/=，%=
即把右边的值，赋给左边的变量x
4.+运算符的多态
当两边都是数字的时候 ，表现为算数运算符
当任意一边是字符串的时候，表现为字符串连接符
十二.逻辑运算符
1.基本逻辑运算符
== != > >=
2.绝对等，绝对不等于
与==进行值是否相等的判断不同 ，绝对等 ===还会进行 类型的判断
3.三目运算符
十三.条件语句
十四.循环语句
十五.错误处理
1.调用不存在的函数
2.try catch

对象
JavaScript中的对象是有着属性和方法的一种特殊数据类型。 对象有数字Number，字符串String，日期Date，数组Array，工具对象Math和自定义对象。
一.数字
1.创建一个数字对象
创建一个数字对象：var x=new Number(123); object
var y=123; number
返回对象的类型：typeof x
2.最小值 最大值
返回对象能取到的最大边界Number.MIN_VALUE
返回对象能取到的最小边界Number.MAX_VALUE
3.表示不是数字
NaN，表示不是一个数字。通过非数字创建Number的时候，就会得到NaN
注意： 不能通过 是否等于Number.NaN来判断 是否 “不是一个数字”，应该使用函数 isNaN()
var a=new Number("123abc"); NaN
a==Number.NaN false
isNaN(a) true
4.返回一个数字的小数表达
toFixed返回一个数字的小数表达
a.toFixed(2) 返回一个数字的小数表达，这里保留两位小数
5.返回一个数字的科学计数法表达
a.toExponential()返回一个数字计数法表达
6.返回一个数字对象的基本数字类型
方法 valueOf() 返回一个基本类型的数字 ,通过typeof 判断数据类型可以发现，一种是object,一种是number
var b=a.valueof(); 返回一个基本类型的数字
num1 = parseFloat(num1);

二.字符串
创建字符串 var x="5" String
var y=new String(x); object
type of x
y.length 属性 length 返回字符串的长度
y.charAt(0) charAt 返回指定位置的字符
y.charCodeAt(0) charCodeAt 返回指定位置的字符对应的Unicode码
x.concat(y) concat用于进行字符串拼接
y.indexOf ("a") 获取子字符"a" 第一次出现的位置
y.lastIndexOf ("a") 获取子字符"a" 最后出现的位置
x.localeCompare(y) localeCompare 比较两段字符串是否相同，0即表示相同，非0表示不同
x.substring (0,3) substring 截取一段子字符串(注： 第二个参数，取不到 )
var y = x.split(" "); 通过空格分隔split(" "),得到数组Hello,This,Is,JavaScript
通过空格分隔split(" ",2), 得到数组，并且只保留前两个Hello,This

var y = x.replace("a","o"); 只替换第一个 a
var regS = new RegExp("a","g");
var z = x.replace(regS, "o"); 替换掉所有的 a

type of x所有返回字符串类型的方法，返回的都是基本类型的String 

三.数组
javascript中的数组是动态的，即长度是可以发生变化的。
1.创建数组
创建数组对象的3种方式：

1. new Array() 创建长度是0的数组
2. new Array(5); 创建长度是5的数组,，但是其每一个元素都是undefine
3. new Array(3,1,4,1,5,9,2,6); 根据参数创建数组

2.属性length 获取一个数组的长度

3.遍历数组
for(i=0;i<x.length;i++){ //普通for循环
p(x[i]);
}
for(i in x){ //for in 循环
p(x[i]);
}

4.连接数组
x.concat(y);

5. 通过指定分隔符，返回一个数组的字符串表达
   x.join() 3,1,4
   x.join("@"); 3@1@4

6.分别在最后的位置插入数据和获取数据(获取后删除) push pop
x.push(5);
var e = x.pop();

7.方法 unshift shift ,分别在最开始的位置插入数据和获取数据(获取后删除)
x.unshift (5);
var e = x.shift ();

8.对数组的内容进行排序
x.sort();

9.自定义排序算法
function comparator(v1,v2){
return v2-v1; //v2-v1表示大的放前面，小的放后面
}

x.sort(comparator)

10.对数组的内容进行反转
x.reverse();

11.获取子数组
x.slice(1);
x.slice(1,3); 注意第二个参数取不到

12.删除和插入元素
x.splice (3,2) 表示从位置3开始 ，删除2个元素
x.splice(3,0,1,5) 从位置3开始，删除0个元素，但是插入1和5

四.日期
1.创建日期对象
new Date();
2.年月日
d.getFullYear()
d.getMonth()+1 注意getMonth()返回的月数，是基零的，0代表1月份
d.getDate()
3.时:分:秒:毫秒
d.getHours()
d.getMinutes()
d.getSeconds()
d.getMilliseconds()
4.一周的第几天
var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
var weeks = new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
weeks[day]
5.经历的毫秒数
var time = new Date().getTime(); //从1970/1/1 08:00:00 到今天的毫秒数
6.修改日期和时间
var d=new Date();
d.setFullYear(2012);
d.setMonth(11); //月份时基0的，所以11表示12月
d.setDate(12);
d.setHours(0);
d.setMinutes(0);
d.setSeconds(0);

五.Math
Math是JavaScript的工具对象，用于常见的数学运算
1.自然对数和圆周率
Math.E 表示自然对数
Math.PI 圆周率
2.绝对值
Math.abs(-1)
3.最小最大
Math.min(1,100)
Math.max(1,100)
4.求幂
Math.pow(3,3)
5.四舍五入
Math.round(3.4)
6.随机数
Math.random() 方法 random 取0-1之间的随机数

六.自定义对象
1.通过new Object创建对象
var hero = new Object();
2.通过function设计一个对象
function Hero(name){
this.name = name;
this.kill = function(){
document.write(this.name + "正在杀敌
");
}
}
var gareen = new Hero("盖伦");
3.为已经存在的对象，增加新的方法
Hero.prototype.keng = function(){
document.write(this.name + "正在坑队友
");
}

BOM
BOM即浏览器对象模型（Brower Object Model）
浏览器对象包括
Window(窗口)
Navigator(浏览器)
Screen (客户端屏幕)
History(访问历史)
Location(浏览器地址)

一.window (窗体)
一旦页面加载，就会自动创建window对象，所以无需手动创建window对象。
1.获取文档显示区域的高度和宽度
window.innerWidth 获取文档显示区域的宽度
window.innerHeight 获取文档显示区域的高度
2.获取外部窗体的宽度和高度(外部窗体即浏览器，可能用的是360，火狐，IE, Chrome等等)
window.outerWidth 浏览器的宽度
window.outerHeight 浏览器的高度
3.打开一个新的窗口
myWindow=window.open("/");

二.Navigator （浏览器）
Navigator即浏览器对象，提供浏览器相关的信息
1.打印浏览器相关信息
navigator.appName 浏览器产品名称
navigator.appVersion 浏览器版本号
navigator.appCodeName 浏览器内部代码
navigator.platform 操作系统
navigator.cookieEnabled 是否启用Cookies
navigator.userAgent 浏览器的用户代理报头

三.Screen （客户端屏幕）Screen对象表示用户的屏幕相关信息
1.返回用户的屏幕大小，以及可用屏幕大小
screen.width + "" + screen.height 用户的屏幕分辨
screen.availWidth + "" + screen.availHeight 通常看到的可用区域的高度会比屏幕高度小一点，因为有任务栏的存在。

四.History (访问历史)
用于记录访问历史
1.返回上一次的访问
history.back();
2.返回上上次的访问
history.go(-2);

五.Location (浏览器地址)
1.刷新当前页面
location.reload(); reload方法刷新当前页面
2.跳转到另一个页面
方法一：location="/";
方法二：location.assign("/");
3.Location的其他属性
location.protocol 协议
location.hostname 主机名
location.port 端口号
location.host 主机加端口号
location.pathname 访问的路径
location.hash 锚点
location.search 参数列表

六.弹出框 （实质是浏览器对象window）
浏览器上常见的弹出框有 警告框，确认框，提示框 这些都是通过调用window的方法实现的。
比如警告框用的是window.alert("警告内容")，因为很常用，所以就把window省略掉，直接使用alert
1.警告框 警告框 alert，常用于消息提示，比如注册成功等等
alert("注册成功");
2.确认框 确认框 confirm，常用于危险性操作的确认提示
var d = confirm("是否要删除");
if(true==d) alert("a");
else alert("b");
3.输入框 输入框 prompt，用于弹出一个输入框，供用户输入相关信息
var name = prompt("请输入用户名:"，“该参数为默认值，可无”);
alert("您输入的用户名是:" + name);

七.记时器
1.只执行一次
setTimeout(functionname, 距离开始时间毫秒数 );
2.不停地重复执行
var t = setInterval(printTime,1000);
3.终止重复执行
var t = setInterval(printTime,1000);
clearInterval(t);
4.不要在setInterval调用的函数中使用document.write();
function printTime(){
var d = new Date();
document.write(d.getHours());
document.write(":");
document.write(d.getMinutes());
document.write(":");
document.write(d.getSeconds());
document.close();
}
var t = setInterval(printTime,1000);
而应该使用document.getElementById("time").innerHTML= h+":"+m+":"+s;
原因：部分浏览器，比如firefox有这个问题，其他浏览器没有这个问题，假设setInterval调用的函数是printTime，在printTime中调用document.write(）；只能看到一次打印的效果，这是因为
document.write，会创建一个新的文档，而新的文档里，只会打印出来的时间字符串，并没有
setInterval这些javascript调用，所以只会看到执行一次的效果