JavaScript 的简介
什么是JavaScript： 是基于对象和事件驱动的语言，应用于客户端，也能依赖nodejs在服务器上运行。 基于对象： java是面向对象，使用对象需要创建； js里面提供好了一些对象，直接使用 事件驱动： 每次滑动鼠标，变换一张图片 客户端： 指的是浏览器
JavaScript的特点
第一个：动态性
第二个：安全性
JavaScript不能访问本地硬盘里面的文件
第三个：跨平台性
JavaScript跨平台，只要在系统里面安装了支持JavaScript的浏览器，可以运行JavaScript
Java和JavaScript区别
（雷锋和雷峰塔）
第一，java是sun公司，现在是oracle；JavaScript是网景公司
第二，java是面向对象的语言，javascript是基于对象的语言
第三，java跨平台需要依靠虚拟机实现，JavaScript只需要浏览器可以运行
第四，JavaScript弱类型语言，java是强类型的语言
比如在java里面定义一个变量 int a = 10; int b = "10";不正确
在JavaScript里面定义变量都是使用一个关键字 var a = 10; var b = "10"; var c = true;
第五，java运行先编译通过虚拟机运行，JavaScript直接使用浏览器运行
JavaScript由三部分组成
第一部分：ECMAScript
由ECMA组织制定语句，语法
第二部分：BOM
broswer object model：浏览器对象模型
第三部分：DOM
document object model ：文档对象模型
js和html的结合方式
有两种结合方式
第一种：使用html中的标签 <script type="text/javascript"> js代码 </script>
代码
<script type="text/javascript">
alert("aaa");
</script>
第二种：使用html的标签，引入外部的js文件
<script type="text/javascript" src="js文件的路径"></script>
代码:
<script type="text/javascript" src="1.js">
//不要在script标签里面写js代码了，不会执行
alert("aaa");
</script>使用第二种方式的时候有两点注意
注意一：不要在script标签里面写js代码了，不会执行
注意二：结束script标签 </script>，不要在标签内结束
js的注释有两种 :
//单行注释
/*
多行注释
*/
变量声明和数据类型
（1）在js里面如何声明变量，都是使用一个关键字var var a = 10;
原始类型有五个：
string：字符串类型。( var a = "abc")
number：数字类型。( var b = 10)
boolean：布尔类型 true false。(var c = true)
null： null是特殊的引用类型，表示对象引用为空。比如 var date = null;
undefined ：表示定义了一个变量，但是没有赋值。 值只有undefined
typeof 变量|值
（3）typeof(变量的名称): 查看当前变量的类型。 alert(typeof(a));
通过typeof可以判断一个值或者变量是否是原始类型,若是原始类型,还可以判断属于那种.
引用类型和类型转换
引用类型
Object 对象：所有对象都由这个对象继承而来
Boolean 对象：Boolean 原始类型的引用类型
Number 对象： Number 原始类型的引用类型
原始类型中的String Number Boolean都是伪对象,可以调用相应的方法
Js有几种弹出方式
警告框:
alert(“文本”)
确认框:
confirm(“文本”)
提示框:
prompt(“文本”,”默认值”)
数组
Array
* 什么是数组：定义一个变量只能存一个值，想要存多个值，可以使用数组进行存储
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
注意：在js里面数组的长度可变的，数组的长度是最大的下标+1，之间如果没有赋值直接默认是空字符串
String:
语法:
new String(值|变量);//返回一个对象
String(值|变量);//返回原始类型
常用方法:
substring(start,end):[start,end)
substr(start,size):从索引为指定的值开始向后截取几个
charAt(index):返回在指定位置的字符。
indexOf(""):返回字符串所在索引
replace():替换
split():切割
常用属性:length
Boolean:
语法:
new Boolean(值|变量);
Boolean(值|变量);
非0数字 非空字符串 非空对象 转成true
Number
语法:
new Number(值|变量);
Number(值|变量);
注意:
null====>0 false====>0 true====>1 字符串的数字=====>对应的数字 其他的(比如字符，标点符号)NaN
Date:
new Date();
常用方法:
toLocalString()
RegExp:正则表达式
语法:
直接量语法 /正则表达式/参数
直接量语法 /正则表达式/
new RegExp("正则表达式")
new RegExp("正则表达式","参数")
参数:
i:忽略大小写
g:全局
常用方法:
test() :返回值为boolean
Math:
Math.常量|方法
Math.PI
Math.random() [0,1)
全局:★
decodeURI() 解码某个编码的 URI。
encodeURI() 把字符串编码为 URI。
Number():强制转换成数字
String():转成字符串
parseInt():尝试转换成整数
parseFloat():尝试转换成小数
eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。
类型转换
** 转换成字符串
** 转换成数字：parseInt() 和 parseFloat()
** 强制类型转换
Boolean(value) - 把给定的值转换成 Boolean 型；
Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
String(value) - 把给定的值转换成字符串;
运算符
（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运算
第四个：==和===区别
==比较的是值， === 比较的是值和类型
ECMAScript 对象
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)
Array对象
（1）创建数组
（2）属性
* length 设置或返回数组中元素的数目
** //length属性
var arr1 = new Array(4,5,6);
document.write(arr1.length);
（3）方法
concat()：连接数组 数组1.concat(数组2);
join()：把数组根据指定字符进行分割
** var arr3 = ["mary","jack","lucy"];
document.write(arr3.join("-"));
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加元素，并返回新的长度
reverse() 颠倒数组中元素的顺序
Math对象
（1）进行数学运算，在Math对象里面的方法，直接使用Math.方法名称进行调用
（2）方法
ceil(x) 对一个数进行向上取整。
floor(x) 对一个数进向下取整。
round(x) 把一个数四舍五入为最接近的整数
random() 返回 0 ~ 1 之间的随机数
** 代码
var a = 10.2;
//ceil(x) 对一个数进行上舍入。
document.write(Math.ceil(a)); //11
document.write("<hr/>");
//floor(x) 对一个数进行下舍入。
document.write(Math.floor(a));
document.write("<hr/>");
//round(x) 把一个数四舍五入为最接近的整数
document.write(Math.round(a));
document.write("<hr/>");
//random() 返回 0 ~ 1 之间的随机数
document.write(Math.random());
//生成0-9之间的随机数 0.0 -- 0.9之间的值
document.write("<hr/>");
document.write(Math.floor(Math.random()*10));
Date对象
（1）进行日期操作的对象
（2）使用Date对象，new Date();
（3）方法
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
得到当前的年 getFullYear() 从 Date 对象以四位数字返回年份
得到当前的月 getMonth() 从 Date 对象返回月份 (0 ~ 11)
得到当前的星期 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
** 如果当前的星期是星期日，返回的是0
** document.write(date.getDay())
得到当前的日 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
得到当前的小时 getHours()
得到当前的分 getMinutes()
得到当前的秒 getSeconds()
得到毫秒数 getTime() 返回 1970 年 1 月 1 日至今的毫秒数
RegRxp对象
（1）RegExp 对象表示正则表达式
（2）正则表达式：规定字符串出现的规范
（3）使用：new RegExp("正则表达式")
（4）方法：
* test() 检索字符串中指定的值。如果存在匹配的字符返回 true,如果不存在匹配的字符返回 false。
（5）代码
//创建正则表达式对象
var reg = new RegExp("[a]");
//创建一个字符串
var name = "lisi";
//使用正则对象匹配字符串
var flag = reg.test(name);
document.write(flag);
BOM对象
文档对象模型(共5个对象)
navigator : 浏览器的信息
screen : 屏幕的信息
history : 访问地址的历史信息
常用方法:go()
Go(-1)
Go(1);
location: 定位信息 (地址栏)设置url
常用属性:
href 设置或返回完整的 URL
location.href:获取
location.href=”url”设置
window ：对象是窗口对象，是顶层对象(可省略不写)
通过window可以获取其他的四个对象
window.location 等价于 location
window.history 等价于 history
。。。。
常用方法: Alert() Confirm()确认框 Prompt 输入框
定时器:
设置定时器
setInterval(code,毫秒数):周期执行
setTimeout(code,毫秒数):延迟多长事件后 只执行一次.
例如:
setInterval(showAd,4000);
serInterval("showAd()",4000);
清除定时器
clearInterval(id):
clearTimeout(id):
打开和关闭
open(url):打开
close():关闭js的全局变量和局部变量
js的全局函数
（1）不属于任何对象，可以使函数
（2）主要的函数
eval(): 把字符串当成js代码执行
** var str = "alert('123456');";
//alert(str);
eval(str);
isNaN() 检查某个值是否是数字
** 如果是数字返回 false,如果不是一个数字返回 true。
parseInt() 解析一个字符串并返回一个整数
** var str1 = "123";
alert(parseInt(str1)+1);
encodeURI() 把字符串编码为 URI
** var str2 = "abc测试中文";
var encodestr2 = encodeURI(str2);
document.write(str2);
document.write("<br/>");
document.write(encodestr2);
decodeURI() 解码某个编码的 URI
** var decodestr2 = decodeURI(encodestr2);
js的函数
在js里面定义函数有三种方式
第一种：使用关键字 function 方法名称(参数列表) { 方法体和返回值 }
注意一：参数列表，不需要写类型（var），直接写参数名称
注意二：返回值，根据实际需要可以有也可以没有
代码
function test1() {
alert("123456");
}
//实现两个数的相加
function add1(a,b) {
var sum = a+b;
return sum;
}
alert(add1(2,3));
第二种：匿名函数，使用关键字function(参数列表) { 方法体和返回值; }
var test1 = function(a,b) {
return a+b;
}
//调用函数alert(test1(3,4));
第三种：动态函数（方法体和返回值，包含参数列表都是通过参数传递进来的）
* 使用js里面的内置对象 new Function("参数列表","方法体和返回值")
var param = "a,b";
var method = "var sum;sum=a+b;return sum;";
var test2 = new Function(param,method);
//调用函数
alert(test2(5,6));
js的函数的重载
js里面是否存在函数的重载？
第一，在js不存在重载
第二，可以使用js函数里面arguments数组模拟重载的效果
（3）模拟重载的效果
* 在js里面有一个数组arguments，保存传递进来的参数，使用这个数组模拟重载的效果
* 代码
//模拟重载的效果
//在js函数里面有一个数组 arguments，保存传递进来的参数的
function add1() {
//alert(arguments.length);
//遍历数组
/*for(var i=0;i<arguments.length;i++) {
alert(arguments[i]);
}*/
//模拟重载的效果（有几个参数，实现这几个参数的相加）
var sum = 0;
for(var i=0;i<arguments.length;i++) {
sum += arguments[i];
}
return sum;
}
//调用
alert(add1(1,2));
alert(add1(1,2,3));
alert(add1(1,2,3,4));
事件
（1）什么是事件：在html的元素里面可以触发事件调用js里面的函数
（2）在html的标签上面如何使用事件
Javascript绑定事件的形式
第一种：在元素绑定回调函数
通过元素的事件属性：<xxx onxx=”韩硕名(参数)”><>
<input type="button" value="第一种方式" οnclick="add1();"/>
第二种：派发事件
<xxx onxx=”韩硕名(参数)”><>
document.getElementById("buttonid1").onclick = function() {
alert("aaaaa");
};
单击事件
onclick：鼠标点击事件
<input type="text" οnclick="test2();"/>
焦点事件
onfocus：获取焦点
onblur ：失去焦点
表单事件
onsubmit 事件会在表单中的确认按钮被点击时发生
<form οnsubmit="return chc()">
onchange ：事件会在域的内容改变时发生,常用在下拉表单中
页面或元素加载事件：
onload ：html页面在加载时候触发事件，调用响应的js方法(先加载页面后调用方法)
<body οnlοad="init()">
onmouseover ： 鼠标被移到某元素之上
onmouseout ： 鼠标从某元素移开
onkeypress[pres] 点击键盘上面的某个键，调用方法
<input type="text" id="textid1" οnkeypress="key1(event);"/>
function key1(obj) {
//alert(obj.keyCode);
//如果点击键盘上面的回车键 ，调用方法 13
if(obj.keyCode==13) {
alert("key1");
}
}
DOM对象
document object model：(文档对象模型)
文档：指的是标记型文档（html、xml）
对象：在对象里面有属性和方法
使用dom里面提供的对象里面的属性和方法，对标记型文档进行操作
当浏览器接受到dom对象， 要想使用dom对象标记型文档进行操作，首先需要解析标记型文档（html为例），html中包含 标签、属性、文本内容
（2）使用dom解析html
解析过程：根据html的层级结构在内存中分配一个树形结构，如下图：
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。它对于我们很好地理解网页各个元素，标签和控件搭配，以及各种js，css等的加载会有一些帮助
DOM方法：
* document对象，代表整个文档
* element对象，代表标签
* 属性对象
* 文本对象
* Node节点对象，是这些对象的父对象，在找不到想要使用的方法，到Node里面找
（3）DHTML的简介
* 不是一种技术，是很多技术的简称。
* 包含的技术：
** html：封装数据
** css：使用属性和属性值修改数据的样式
** ECMAScript：语句和语法
** DOM：对标记型文档进行操作
节点(node)
文档节点 document
元素节点 element
属性节点 attribute
文本节点 text
三种获取特定元素的方法：
getElementById（id）、getElementTagName（标签名）、getElementClassName（class名）
总结:
一份文档就是一颗节点树节点分为: 元素节点、属性节点、和文本节点等getElementById将返回一个对象，该对象对应这文档里的一个特定元素节点。getElementTagName返回一个对象数组，该数组对应文档标签名getElementClassName返回一个对象数组，该数组对应标签的class属性每个节点是一个对象
获取和设置属性
获取属性：getAttribute（属性名）
设置属性：setAttribute（属性名：属性值）
