web前端开发技术笔记（web前端入门JavaScript笔记二）
作用域是指变量函数一个作用范围，规定了变量和函数的在哪里去掉用，JS不会报错
理解
强调思考
num1 = ???; 222
num2 = ???; 报错
已知：声明全局变量的时候不是用var 是隐式声明
原理：当在局部作用域中声明一个全局变量的时候，首先他会在局部作用域去找个变量，如果没有，则向上查找 【全局作用域】，当找到了变量，则个这个变量重新赋值，如果没有找到就声明
注意：必须要调用函数
全局作用域
局部作用域
3.作用域链 说明在定义局部作用域的时候，声明多个作用域，并且是包含关系的一个集合，调用函数，叫做作用域的链
图解
运行结果：111
运行结果:222
练习2上图图解结果：
i:4
J:5
<script>
var num = 111;
function fn1() {
var num = 222;
function fn2(){
num = 333;
function fn3(){
num = 444;
}
fn3();
}
console.log(num);
fn2();
console.log(num);
}
fn1();
console.log(num);
</script>
<script>
var str='字符串1';
function fun(str){
var str='字符串2';
function str(){
str = '字符串3'
}
console.log(str);
}
fun();
</script>
结论：局部变量>局部函数>形参>全局变量
5.总结 作用域概念：规定变量和函数的作用范围，在那个区域调用不会出现JS错误 类型局部作用域
全局作用域
作用域链一些函数的集合
调用的时候，如果局部作用域声明了全局变量，那么这个时候会向上查找，一直找到为止，如果找到重新复制，没有找到则声明。如果找到的是一个局部变量【var】 ，则停止向上查找
变量访问的优先级别局部作用域下的全局变量>函数>函数形参>全局变量
注意：
全局变量
全局作用域
局部变量
局部作用域
BOM 浏览器对象1.BOM简介Browser object model 【BOM】 浏览器对象模型
2.BOM作用我们JS有能力来操作浏览器
3.BOM的分类
Window 浏览器操作对象， 对象想的顶层
Location 地址栏操作对象
history 操作对象
Document 网页操作对象
Screen 浏览器屏幕操作对象
二、Window对象1.属性和方法
声明的全局变量全部放在了window 对象中
属性：innerWidth 获取网页的宽度
document.documentElement.clientWidth 兼容低版本浏览器
innerHeight 获取网页的高度
document.documentElement.clientHeight 兼容低版本浏览器
说明：高度宽度受状态栏的影响
兼容性问题：
IE 6/7/8 低版本浏览器
高版本浏览器
IE9 以上
兼容性浏览器
谷歌、火狐、苹果浏览器
方法：alert
prompt
confirm
open(要打开的网页地址，窗口的名字，窗口的外观设置参数)
close()
print()
2.延时器 设置延时器描述：
当加载网页的时候，需要让程序等待一段时间在来执行【只是执行一次】
语法：
setTimeout(‘fun’,s);
说明：
Fun:要调用的函数 fun “fun()”
S: 毫秒
返回值：当前的定时器的一个表示 。
清楚延时器语法：
clearTimeout(t);
功能：
清楚延时器 定义的操作方法，终止其运行
参数：
T: 定义延时器返回的参数
实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<input onclick="fun();" type="button" value="点击显示" >
</body>
<script>
function fun(){
//设置一个延时器
setTimeout(function(){
alert('弹出');
},5000);
}
</script>
</html>
描述：
当访问网页的时候，定时执行一段代码【执行多次】
语法：
setInterval(‘fun’,s);
说明：
同上
清楚定时器描述：
清楚定时器，不让代码继续执行
语法：
clearInterval(t);
案例：点击发送倒计时效果
1.点击按钮怎加点击事件
2.修改按钮里面的内容【value=”重新获取验证码（事件）”】
3.让按钮不能再次进行点击【disabled 按钮的一个属性】
4.增加倒计时的效果
setTimeout 执行一次
setInterval 执行多次
三、screen屏幕对象操作属性：
Screen.width 获取屏幕的宽度
Screen.height 获取屏幕的高度
screen.availWidth 不包含任务栏
screen.availHeight 不包含任务栏
说明：浏览器的信息对象
appName : 浏览器发行型的版本
appVersion: 用户浏览器的版本信息
UserAgent: 用户使用的浏览器的信息
使用:UserAgent 可以获取用户的详细访问信息，通过邮件的形式，将用户的报错发送到邮件中区， 这样我们可以快速定位问题所在
五、location 对象属性
Location.href 浏览器地址的重定向
方法：
Location.reload(); 刷新当前页面 ， loaction.href = location.href ;
六、history 对象用来记录用户访问了哪些网页
属性
Length 长度 ： 记录浏览的个数
方法：
History.go(-1) 正数代表的是URL 向前， 负数 URL向后
History.back(); 一步一步的返回 <-
History.forward(); 前进->
DOM文档对象模型1.DOM简介Document object model 文档对象模型
2.DOM作用使JS有操作HTML的能力
3.DOM的分类 核心 DOM对所有的DOM对象进行一个节点操作
增加节点，查找节点
HTML DOM对HTML下的节点进行查找， 快速定位。增加节点等。。。
CSS DOM节点有CSS属性 style=’样式’
也有直接操作样式的属性和方法
节点对象.style.样式属性有JS转换=属性的值
事件 DOM节点中的onclick /onchange ....
JS 直接操作的事件对象和方法
三、核心DOM（1）1.DOM的分层结构 / 树形结构（节点树） 概念在HTML中，将结构使用一个类似于 倒立的树状结构
图解
根节点 HTML 一个页面只能有一个跟节点
子节点 某个节点的下一级节点
父节点 某个子节点的上一级
兄弟节点 并列关系的两个节点
空白节点 ：空格、换行
3、节点操作公共的属性（语法）1）取子节点
节点对象.firstChild 获取节点的第一个子节点
节点对象. lastChild 获取节点的最后一个子节点
节点对象.children 获取节点下的所有子节点 不包含空白节点
节点对象.childNodes 获取节点下的所有子节点 包含空白节点
2）获取兄弟节点
对象.nextSibling 获取节点的下一个兄弟节点
对象.previousSibling 获取节点的上一个兄弟节点
3）获取父节点
对象.parentNode 获取上一级的节点
4）获取文本节点的值
对象.nodeName 获取选中的节点的名称
对象.nodeValue 获取选中的节点的值
思考：获取表单的值用什么？
案例
获取小红文本节点，并弹出值
<div><ul><li>老王</li><li>小红</li><li>隔壁老王</li></ul></div>
案例：
1）语法
document.getElementById(‘id属性的值’);
作用：根据节点里面的ID的属性来获取节点对象
document.getElementsByClassName(‘类名’)
作用：根据节点里面的class的属性来获取节点对象
document.getElementsByTagName(‘标签名称’)
作用：根据标签名称来获取要操作的标签对象
document.getElementsByName(‘属性名称’);
作用：根据标签的属性来获取要操作的标签对象
2）练习
<div id="first">床前明月光</div>
<div class="second">地上鞋两双</div>
<p class="second" name='nameValue'>自己去想象</p>
1）语法
对象.setAttribute(); //对节点对象增加属性
对象.removeAttribute(); //删除节点属性
对象.getAttribute(“属性名称”); //获取节点属性的值
2）练习
思考：通过获取网页指定节点返回的对象.属性名获取属性值和getAttribute有什么区别？
使用对象.属性名称 只能获取系统预定义的属性， 但是使用 getAttribute 这个方法可以获取自定义属性
3、获取元素内容属性
1）说明
对象.innerHTML //获取包含了html标签的内容
对象.innerText //获取文本内容，将标签过滤
2）练习
自觉完成
五、核心DOM（2）【★】1.节点创建对象.createElement(‘标签名称’); //创建节点对象
对象.createTextNode(‘标签里面的内容’); //给节点对象增加内容
2.节点追加对象.appendChild(‘追加的内容’); 最后面增加节点
对象.insertBefore(新节点对象，旧几点对象) //追加到节点的前面
3.节点删除对象.removeChild(); 删除子节点
课堂案例给下面的诗增加标题《春晓》，并且在后面追加最后一句诗
<ul>
<li>春眠不觉晓</li>
<li>处处蚊子咬</li>
<li>点上蚊香后</li>
<ul>
<script>
objUl = document.getElementsByTagName('ul');
//获取具体的操作节点
ul1 = objUl[0];
//创建节点
tmpObj = document.createElement('li');
//给临时的节点增加内容
tmp2Obj = document.createTextNode("全部死光光");
//将内容追加进去
tmpObj.appendChild(tmp2Obj);
//增加新的li节点
ul1.appendChild(tmpObj);
//创建头部标签
tmpObj = document.createElement('li');
//头部内容
tmp2Obj = document.createTextNode('<春晓>');
//把内容加到对象中区
tmpObj.appendChild(tmp2Obj);
console.log(ul1);
console.log(ul1.children);
//将创建的节点写入到ul中去
ul1.insertBefore(tmpObj,ul1.children[0]);
console.log(objUl);
</script>
使用 JS 的内置操作样式属性来改变DOM的样式
2.语法节点对象.style.JS的样式属性=’样式的值’;
CSS定义: Font-Size:14px;
JS 定义 ： fontSize = 14px;
3.CSS属性转换JS规则如果CSS样式没有“-” 那么我们直接可以来使用
如果CSS样式有“-”那么我们直接去掉“-”将后面的单词的首字字母大写即可
用户对网页的所有操作称之为事件
2、事件类别1）鼠标事件
2）键盘事件
3）表单事件
4）焦点事件
5）UI事件
Onload使用说明：用户打开一个网页，进入网页的加载过程，如果使用了onload , 那么，等页面中的所有HTML结构全部加载完成后来运行
设置事件
<a 事件=“函数(值)”></a> //在标签中的事件绑定
<script> 对象.事件=function(){}</script> //设置事件
<script> 对象.事件=null</script> //取消事件
1）设置（取消）DOM1级事件
多学一招 onclick=”函数(this)”
2）设置（取消）DOM2级事件
语法
ie6、7、8
添加DOM2级：attachEvent(事件名称,事件流);
取消DOM2级：dectachEvent(‘事件名称’);
主流浏览器
添加DOM2级：addEventListener(“事件名称”,事件流);
取消DOM2级：removeEventListener(“事件名称”);
脚下留心：
如果在主流的浏览器使用的时候click 是不加 on
在低版本的的浏览器中使用onclick 要加on
3）添加同类型的事件
通过DOM1级添加同类型的事件，只
一级事件会进行覆盖，最后定义的会覆盖前面定义的
通过DOM2级添加的同类型事件，
定义的每个事件都会执行一次
1、什么是事件流多个事件的集合，统称为时间流
︴案例
1）事件流种类
冒泡事件 ： 事件是由内向外
捕获类型 ： 事件是由外到内
2）说明
在主浏览器中使用 addEventListener(事件类型,处理函数,true) ;才会有捕获类型。
在版本的浏览器中没有捕获类型，只有冒泡类型。
DOM1级是冒泡类型
3）验证
DOM1级就是冒泡型事件，无法改变
DOM2级事件IE9以下统一冒泡型事件，无法改变
DOM2级事件IE9及以上，默认冒泡事件；可通过更改第三个参数动态设置事件事件流：true表示捕捉型，false表示冒泡型
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
