【javascrpit】
【简介】
1.web三层
结构层 HTML 从语义的角度，描述页面结构
样式层 CSS 从审美的角度，美化页面
行为层 JavaScript 从交互的角度，提升用户体验
2. 历史
3. javaScript和ECMAScript的关系
ECMAScript不是一门语言，而是一个标准，符合这个标准的语言有JavaScript
、ActionScript（flash中使用的语言）等。
4. js的发展趋势 - 承担更多的责任
03年之前，JavaScript被认为是牛皮鲜，用于制作页面上的广告，弹窗，漂浮效果
什么东西让人烦，什么东西就是js开发的，所以浏览器就推出了禁用js功能
04年js的命运改变了，google带头使用Ajax技术，
那时候开始，人们开始逐渐提升用户体验
比如百度的智能感应
07年乔布斯推出iphone，也推动了js的发展，js在移动页面中也是不可或缺
10年，H5推出的新技术Canvas（画布），可以在上面进行游戏制作，用的就是js，比如水果忍者
11年，Node.js诞生，使得js可以开发服务器程序了
【JavaScript】
基于对象和事件驱动的语言，应用于客户端
- 基于对象：提供了很多的对象，可以直接拿过来使用
- 事件驱动：html做网页静态效果，JavaScript做动态效果
- 客户端：浏览器
js的特点
1. 交互性 - 信息的动态交互
2. 安全性 - js不能访问本地磁盘的文件
3. 跨平台性 - 只要能够能够js的浏览器，都可以运行
* java和JavaScript的关系 - 毫无关系
【JavaScript的组成】
1. ECMAScript
- ECMA：欧洲计算机协会
- 由ECMA组织制定的js的语法，语句，变量...
2. BOM
- Broswer Object Model：浏览器对象模型
- 比如 window 整个浏览器窗体（可以省略）
location 地址栏
document 整个页面的所有内容都属于文档对象
status 左下角的状态栏
3. DOM
- Document Object Model：文档对象模型
- 对浏览器的文档对象进行操作，比如添加一行内容，删除一行内容，修改一行内容
【和HTML的结合方式】
1. <script type="text/javascript"> js代码 </script>
2. 使用script标签，引入外部的js文件
- 创建一个js文件，写js代码
- 不要再往script标签里写js代码了，不会执行
3.在html页面的位置
一般放在最后,网页都是按行加载的,先加载静态文字图片,再加载动态的事件比较好,增加用户的浏览体验
【js的调试方式】
1.alert大法:
强制在页面弹窗
2.console.log():
在浏览器调试界面的console中显示
3.prompt
带输入的弹窗
【js的原始类型和声明变量】
* 定义变量，都使用关键字 var
1. js的原始类型（5个）
- string 字符串
var str = "abc"
- number 数字
var num = 123;
- boolean 布尔类型
var flag = true;
- null
var date = new Date();
获取对象的引用，null表示对象引用为空，但是也属于object
- undifined
表示定义一个变量，但是没有赋值
如 var a;
2. typeof() 查看变量的数据类型
【js的控制语句】
1. 判断语句
- if
- switch
2. 循环语句
- for
- while
- do-while
【运算符】
1. js不区分整数和小数
123/1000*1000 结果是 123
2. 字符串的加减
如果相加，做的是字符串拼接
如果相减，做的是减法运算
如果提示NaN，表示不是一个数字
console.log(res == res2); // 每个NaN都是独一无二的 不等的
console.log(isNaN(res)); // 判断一个变量是不是NaN 要用isNaN
3. boolean类型的运算
true - 表示这个值是1
false - 表示这个值是0
boolean可以参加加减法运算
4. == 和 === 的区别
都是做判断，
== 比较的只是值
=== 比较的是值和类型
【向页面输出内容】
document.write()
可以向页面输出变量，固定值和HTML代码
【js数组】
1. 定义方式
- var arr = [1,2,3]; var aa = [1,"4",true];
- 使用内置对象 Array
var arr = new Array(5) // 定义一个长度为5的数组
arr[0] = 1;
- 使用内置对象Array
var arr = new Array(3,4,5); // 定义一个数组，数组里面的元素是3,4,5
2. 数组里有一个属性 length，可以获取到数组的长度
3. 数组的长度是可变的
4. 数组可以存放不同的数据类型
类似java中的泛型?(有待商榷)
【js的函数】
1. 定义方式
- 命名函数
function 方法名(参数列表){
方法体;
返回值可有可无（根据实际需要）
}
- 匿名函数
var func = function(参数列表){
方法体和返回值
}
- 动态函数：
使用内置对象Function（用的很少）
var func = new Function("参数列表","方法体和返回值");
【全局变量和局部变量】
1. 全局变量
在script标签内部定义一个变量，这个变量在页面中js部分都可以使用
2. 局部变量
在方法内部定义一个变量，只能在方法内部使用
【script标签放置位置】
html标签放在<body></body>标签内
约定放在</body>标签的后面
【string对象】
1. 创建string对象
var s1 = new String('abc');
var s2 = String('123');
var str = "abc"
常用的为第三种
2. 函数和属性
- 属性 length 字符串的长度
- 函数
（1）与HTML相关的函数
- bold(): 加粗
- fontcolor()：设置字符串颜色
- fontsize()：设置字体大小,参数1~7
- link()：将字符串显示成超链接,参数为url,链接到地址
- sub() 下标
- sup() 上标
（2）与java相似的函数
- concat()：连接字符串,可以有多参
concat(“a”,”b”,”c”),依次拼接
- charAt()：返回指定位置的字符串,索引从0开始
- indexOf()：返回字符串位置,返回的是匹配到的第一个字符串的位置
- split()：切分字符串，成数组
- replace()：替换字符串
- substr(start,length) 获取子串(开始的索引,长度)
- substring(start,stop) 获取子串(开始的索引,结束的索引,前闭后开)
【array对象】
1. 创建方式（3种）
var arr = [1,2,3];
var arr = new Array(3);
2. 属性：length
3. 函数
- concat()：连接数组
- join()：根据指定的字符分割数组
- push()： 向数组末尾添加元素，返回数组新的长度
// 数组里push进另一个数组, 被push的数组会成为新数组中的一个元素
// 跟concat有本质区别
- pop()：删除最后一个元素，返回删除的那个元素
- reverse()：颠倒数组中的元素
- sort();排序,无参就默认排序,数字从小到大
【date对象】
1. js里获取当前时间
var date = new Date();
date.toLocalString();
2. 获取当前的年
getYear():获取1900年开始的偏移年数:118
getFullYear():获取公元年数:2018
3. 获取当前的月（返回的是 0-11 ）
getMonth()
4. 获取当前的星期（返回的是0-6）
getDay()
星期日作为一周的第一天，星期日返回的是0
星期一到星期六返回的是 1-6
5. 获取当前的日
getDate() 得到当前的天
6. 获取当前的小时
getHours()
7. 获取当前的分钟
getMinutes()
8. 获取当前的秒
getSeconds()
9. 时间戳
getTime()
1970至今偏移的毫秒数
【Math】
- 数学运算
- 里面都是静态方法，使用Math.方法()
ceil(x)：向上舍入
floor(x)：向下舍入
round(x)：四舍五入
random():随机生成0~1的随机数
max(x,y):返回最大的参数
min(x,y):返回最小的参数
pow(x,y)：x的y次方
【js的全局函数】
由于不属于任何一个对象，所以直接使用
1. eval();
参数内放入js代码,直接执行
2. encodeURI() 对字符编码
把中文字符转换成可以保存的形式
decodeURI() 对字符解码
转换回中文格式
3. isNaN() 判断当前的字符串是否不是数字
- 如果是数字 - false
- 如果不是数字 - true
4. parseInt() 类型转换
转换成数字,注意:
转换的字符串只取到第一个非数字为止
例:
var str = "123a";var num = parseInt(str);
num=123
var str=”a”, parseInt(str);
num=NaN;
var str=”123a11”, parseInt(str);
num=123;
【js的函数重载】
函数(或对象方法)完全靠函数名称唯一确定，JS不将参数列表作为区分函数的依据。
更关键的是，在JS中，函数是作为一种特殊对象类型存在的，
函数的名字只是一个普通的变量，本质与var a = 1中的变量a没什么区别。
所以如果你先后定义了两个同名函数，
实际上相当于先后将两个函数对象绑定到了同一个变量上，
所以后者必然覆盖前者，不会共存，也自然不存在重载了。
1. 什么是重载？
方法名相同，参数列表不同
2. js的重载是否存在？
不存在
只会调用最后一个方法
传递的参数都保存在了arguments数组里面
* 可以通过其他方式模拟重载
调用argument数组(直接调用)就可以实现
例:
参数累加:遍历argument数组的元素,累加即可
【监听和委托事件】
1.
监听事件：html可以监听用户的行为事件（onxxx的属性）
委托机制：html标签监听到发生了某个事件，委托的处理方法（js函数）
例:
<input type="button" value="停止" onclick="my_stop()" />
红色的是监听时间
绿色的是委托的方法
2. js中的监听事件
焦点事件
onfocus 获得焦点
onblur 失去焦点
onchange 当内容改变
鼠标事件
onclick 鼠标单击
ondbclick 鼠标双击
onmouseover 鼠标进入区域
onmouseout 鼠标离开区域
onmousemove 鼠标在区域内移动
onmousedown 鼠标按下
onmouseup 鼠标弹起
键盘事件
onkeydown 键盘按下
onkeyup 键盘弹起
onkeypress 键盘回显
表单事件
onsubmit 表单提交
窗体事件
onload 窗体加载完毕
onscroll 窗体滚动事件
【bom对象】
bom: 浏览器对象模型
BOM和HTML DOM关系图
- navigator 获取客户机的信息（浏览器的信息）
vavigator.appName 获取浏览器名
- screen 屏幕的信息
screen.width
screen.height
- location：请求url地址
href属性
- 获取到请求的url地址
= 设置url地址
- history：请求的url的历史记录
- 到访问的上一个页面
history.back()
history.go(-1)
- 到访问的下一个页面
history.forward()
history.go(1)
- window
窗口对象
顶层对面
所有的BOM对象都是在window里面操作的
- 方法
window.alert()：页面弹框，显示内容
confirm()： 确认框
确认为true,取消为false
prompt()：输入对话框
open()：打开一个新的窗口
- open(url, "" , 窗口特征，比如宽度和高度)
close()：关闭浏览器窗帘
- window.close()
- 做定时器
setInterval("js", 毫秒数)
每N毫秒执行一次js代码，返回一个id
setTimeout("js"，毫秒数)
在毫秒数之后执行，但是只会执行一次，返回一个id
clearInterval(id),根据id 清除对应的 setInterval 设置的定时器
clearTimeout(id),根据id 清除对应的 setInterval 设置的定时器
【DOM】
DOM：文档对象模型
- 文档
超文本标记文档 html xml
- 对象
提供了属性和方法
- 模型
使用属性和方法操作超文本标记文档
* 可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作
想要对标记型文档进行操作，首先需要对标记型文档里面的所有内容封装成对象
- 需要把HTML里面的标签、属性、文本内容都封装成对象
document：整个文档
element：标签对象
属性对象：很多
title 返回当前文档的标题
url 返回当前文档的url
文本对象：
Node节点对象：这些对象的父对象
* DHTML：是很多技术的简称
HTML:封装数据
CSS：设置样式
DOM：操作HTML文档
JavaScript：专门指js的语法语句（ECMAScript）
【document对象】
表示整个文档
- 常用方法
write();显示在页面上,如果是html语言,就执行
getElementsByName();多个标签,返回元素数组
getElementById();单个标签,返回单个元素
close();不常用