JavaWeb(4)JavaScript高级
1. DOM简单学习
1. DOM的功能:控制HTML文档的内容
2. 获取页面标签(元素)对象(Element):document.getElementById(“id值”):通过元素的id值获取元素对象
3. 操作Element对象
1. 修改属性值1. 明确获取的对象是哪一个2. 查看API文档,找到其中的属性
2. 修改标签体内容属性:innerHTML1. 获取元素对象2. 使用innerHTML属性修改标签体内容
4. 代码示例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>01_DOM_获取元素对象</title></head><body><img src="img/off.gif" id="light" ><h1 id="title">悔创阿里杰克马</h1><script type="text/javascript">//通过id获取元素对象var light = document.getElementById("light");alert("我要换图片了...");light.src = "img/on.gif";//1.获取h1标签对象var title = document.getElementById("title");alert("我要换内容了...");title.innerHTML = "不识妻美刘强东";</script></body>
</html>
2. 事件简单学习
1. 事件的功能:某些组件被执行了某些操作后,触发某些代码的执行
2. 如何绑定事件:
(1)直接在HTML标签上,指定事件的属性(操作),属性值就是JS代码
(2)通过JS获取元素,指定事件属性,设置一个函数
3. 代码示例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>事件绑定</title></head><body>//直接在HTML标签上,指定事件的属性(操作),属性值就是JS代码<img src="img/off.gif" id="light" onclick="fun();"><img src="img/off.gif" id="light2"><script type="text/javascript">function fun(){alert("我被点了...");alert("我又被点了...");}function fun2(){alert("咋老点我...");}//通过JS获取元素,指定事件属性,设置一个函数//1.获取light2的对象var light2 = document.getElementById("light2");//2.绑定事件light2.onclick = fun2;</script></body>
</html>
4. 案例1:电灯开关
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><img src="img/off.gif" id="light" ><script type="text/javascript">//1.获取图片对象var ligth = document.getElementById("light");var flag = false; //默认灯是灭的 off图片//2.绑定单击事件light.onclick = function(){if(flag){ //判断如果灯是开的,则灭掉light.src = "img/off.gif";flag = false;}else{light.src = "img/on.gif";flag = true;}}</script></body>
</html>
3. BOM
1. BOM的概念:Browser Object Model:浏览器对象模型(也就是将浏览器的各个组成部分封装成对象)
2. 组成
(1)Window:窗口对象
(2)History:历史纪录对象
(3)Location:地址栏对象
(4)Navigator:浏览器对象
(5)Screen:屏幕对象
3. Window:窗口对象
(1)创建:Window对象不需要创建,可以直接对window进行使用:window.方法名(),window可以省略不写
(2)方法:
1. 与弹出框有关的方法: alert() 显示带有一段消息和一个确认按钮的警告框。confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。* 如果用户点击确定按钮,则方法返回true* 如果用户点击取消按钮,则方法返回falseprompt() 显示可提示用户输入的对话框。* 返回值:获取用户输入的值
2. 与打开关闭有关的方法:close() 关闭浏览器窗口。* 谁调用我 ,我关谁open() 打开一个新的浏览器窗口* 返回新的Window对象
3. 与定时器有关的方式setTimeout() 在指定的毫秒数后调用函数或计算表达式。* 参数:1. js代码或者方法对象2. 毫秒值* 返回值:唯一标识,用于取消定时器clearTimeout() 取消由 setTimeout() 方法设置的 timeout。setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。clearInterval() 取消由 setInterval() 设置的 timeout。
(3)属性:
1. 获取其他BOM对象:historylocationNavigatorScreen:
2. 获取DOM对象document
(4)代码示例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" id="openbtn" value="打开窗口" /><input type="button" id="colsebtn" value="关闭窗口" /><script type="text/javascript">//1. 与弹出框有关的方法: //alert() 显示带有一段消息和一个确认按钮的警告框。alert("hello world");window.alert("hello world");//confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。// * 如果用户点击确定按钮,则方法返回true// * 如果用户点击取消按钮,则方法返回falsevar flag = confirm("你确定要退出吗?");if(flag){alert("欢迎下次光临~");}else{alert("大兄弟再考虑考虑~");}// prompt() 显示可提示用户输入的对话框。// * 返回值:获取用户输入的值var result = prompt("请输入用户名");alert(result);//2. 与打开关闭有关的方法: //open() 打开一个新的浏览器窗口// * 返回新的Window对象var openBtn = document.getElementById("openbtn");var newWindow;openBtn.onclick = function(){newWindow = open("https://www.baidu.com");}//close() 关闭浏览器窗口。// * 谁调用我 ,我关谁var closeBtn = document.getElementById("colsebtn");closeBtn.onclick = function(){newWindow.close();}//3. 与定时器有关的方式function fun(){alert("boom~");}//setTimeout() 在指定的毫秒数后调用函数或计算表达式。// * 参数:// 1. js代码或者方法对象// 2. 毫秒值// * 返回值:唯一标识,用于取消定时器//clearTimeout() 取消由 setTimeout() 方法设置的 timeout。var timer1 = setTimeout(fun,2000);clearTimeout(timer1);//setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。//clearInterval() 取消由 setInterval() 设置的 timeout。var timer2 = setInterval(fun,1000);clearInterval(timer2);</script></body>
</html>
(5)案例2:轮播图
- 页面效果:三张图片来回播放,间隔3s
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><img src="img/banner_1.jpg" id="img" width="100%"><script type="text/javascript">//1.修改图片src属性var img = document.getElementById("img");var i = 1;function fun(){i++;//判断i是否大于3if(i > 3){i = 1;}else{//修改图片src属性img.src = "img/banner_" + i + ".jpg";}}//2.设置定时器setInterval(fun,3000);</script></body>
</html>
4. Location:地址栏对象
(1)创建
1. window.location
2. location
(2)方法
reload():重新加载当前文档(刷新)
(3)属性
href:设置或返回完整的URL
(4)代码示例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" name="" id="btn" value="刷新" /><input type="button" name="" id="goBaidu" value="去百度" /><script type="text/javascript">//reload方法,定义一个按钮,点击按钮,刷新当前页面var btn = document.getElementById("btn");btn.onclick = function(){location.reload();}//href:设置或返回完整的URL//获取hrefvar href = location.href;alert(href); //点击按钮去访问百度//1.获取按钮var goBaidu = document.getElementById("goBaidu");//2.绑定单击事件goBaidu.onclick = function(){location.href = "https://www.baidu.com";}</script></body>
</html>
(5)案例3:自动跳转页面
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">p{text-align: center;}span{color: red;}</style></head><body><p><span id="time">5</span>秒之后,自动跳转到百度</p><script type="text/javascript">/*页面效果:倒计时5秒后,将自动跳转到百度首页*/var s = 5;var time = document.getElementById("time");//定义一个方法,获取span标签,修改span标签体内容,时间--function showTime(){s--;if(s <= 0){location.href = "https://www.baidu.com";}time.innerHTML = s + "";}//设置定时器,1s执行一次该方法setInterval(showTime,1000);</script></body></html>
5. History:历史记录对象
(1)创建
1. window.history
2. history
(2)方法
1. back():加载history列表的前一个URL
2. forward():加载history列表的后一个URL
3. go(参数):加载history列表的某一个具体页面正数:前进几个历史记录负数:后退几个历史纪录
(3)属性
length:返回当前窗口历史记录列表中的URL数量
(4)代码示例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><a href="https://www.baidu.com">进入百度</a><input type="button" name="" id="forward" value="前进" /><input type="button" name="" id="back" value="后退" /><input type="button" name="" id="btn" value="获取历史记录的个数" /><script type="text/javascript">//1. back():加载history列表的前一个URLvar back = document.getElementById("back");back.onclick = function(){history.back();//相当于history.go(-1)}//2. forward():加载history列表的后一个URLvar forward = document.getElementById("forward");forward.onclick = function(){history.forward();//相当于history.go(1)}//3. go(参数):加载history列表的某一个具体页面// 正数:前进几个历史记录// 负数:后退几个历史纪录//length:返回当前窗口历史记录列表中的URL数量var btn = document.getElementById("btn");btn.onclick = function(){alert(history.length);}</script></body>
</html>
4. DOM
1. DOM的概念:Document Object Model:文档对象模型(将标记语言文档的各个组成部分封装为对象,可以使用这些对象对标记语言文档进行CRUD(增删改查)的动态操作)
2. DOM模型:
(1)Document:文档对象
(2)Element:元素对象
(3)Node:节点对象
(4)Attribute:属性对象
(5)Text:文本对象
(6)Comment:注释对象
(7)HTML DOM:针对HTML稳当的标准模型
3. Document:文档对象
(1)创建:在HTML DOM模型中可以使用window对象来获取
1. window.document
2. document
(2)方法:
1. 获取Element对象:1. getElementById():根据id属性值获取元素对象。id属性值一般唯一2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组4. getElementsByName():根据name属性值获取元素对象们。返回值是一个数组
2. 创建其他DOM对象1. createAttribute(name)2. createComment()3. createElement()4. createTextNode()
(3)代码示例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div class="cls1">div4</div><div class="cls1">div5</div><input type="text" name="username" id="" value="" /><br><script type="text/javascript">//获取Element对象://1. getElementById():根据id属性值获取元素对象。id属性值一般唯一var div1 = document.getElementById("div1");document.write(div1); //[object HTMLDivElement]document.write("<br>");//2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组var divs = document.getElementsByTagName("div");document.write(divs.length); //5document.write("<br>"); //3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组var div_cls = document.getElementsByClassName("cls1");document.write(div_cls.length); //2document.write("<br>"); //4. getElementsByName():根据name属性值获取元素对象们。返回值是一个数组var ele_username = document.getElementsByName("username");document.write(ele_username.length); //1document.write("<br>"); //创建其他DOM对象//1. createAttribute(name)//2. createComment()//3. createElement()//4. createTextNode()var table = document.createElement("table");document.write(table); //[object HTMLTableElement]</script></body>
</html>
4. Element:元素对象
(1)创建/获取:通过document来获取
(2)方法:
1. removeAttribute():删除属性
2. setAttribute():设置属性
(3)代码示例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><a>点我!!!</a><input type="button" name="" id="btn_set" value="设置属性" /><input type="button" name="" id="btn_remove" value="删除属性" /><script type="text/javascript">//设置属性var btn_set = document.getElementById("btn_set");btn_set.onclick = function(){//获取a标签var ele_a = document.getElementsByTagName("a")[0];//setAttribute():设置属性ele_a.setAttribute("href","https://www.baidu.com");}//删除属性var btn_remove = document.getElementById("btn_remove");btn_remove.onclick = function(){//获取a标签var ele_a = document.getElementsByTagName("a")[0];//removeAttribute():删除属性ele_a.removeAttribute("href");}</script></body>
</html>
5. Node:节点对象
(1)是Document,Element,Attribute,Text,Comment的父对象
(2)特点:所有DOM对象都可以被认为是一个节点
(3)方法
CURD DOM树
1. appendChild():向节点的子节点列表的结尾添加新的子节点
2. removeChild():删除(并返回)当前节点的指定子节点
3. repalceChild():用新节点替换一个子节点
(4)属性
parentNode:返回节点的父节点
(5)代码示例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{border: 1px solid red;}#div1{width: 200px;height: 200px;}#div2{width: 100px;height: 100px;}#div3{width: 100px;height: 100px;}</style></head><body><div id="div1"><div id="div2">div2</div>div1</div><!-- 超链接功能:1. 可以被点击2. 点击后跳转到href指定的url需求:保留1功能,去掉2功能实现:href = "javascript:void(0);" --><a href="javascript:void(0);" id="del">删除子节点</a><a href="javascript:void(0);" id="add">添加子节点</a><script type="text/javascript">//删除子节点//1.获取超链接var del = document.getElementById("del");//2.绑定单击事件del.onclick = function(){var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");div1.removeChild(div2);}//添加子节点//1.获取超链接var add = document.getElementById("add");//2.绑定单击事件add.onclick = function(){var div1 = document.getElementById("div1");var div3 = document.createElement("div");div3.setAttribute("id","div3")div1.appendChild(div3);}</script></body>
</html>
(6)案例4:动态表格
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">table {border: 1px solid red;margin: auto;width: 500px;}td,th {text-align: center;border: 1px solid red;}div {text-align: center;margin: 50px;}</style></head><body><div id=""><input type="text" id="id" placeholder="请输入id" /><input type="text" id="name" placeholder="请输入name" /><input type="text" id="gender" placeholder="请输入gender" /><input type="button" id="btn_add" value="添加" /></div><table><!-- <caption> 定义表格标题 --><caption>学生信息表</caption><tr><th>id</td><th>name</td><th>gender</td><th>operate</td></tr><tr><td>1</td><td>卡牌大师</td><td>男</td><td><a href="javacsript:void(0);" onclick="delTr(this);">del</a></td></tr><tr><td>2</td><td>祖安狂人</td><td>男</td><td><a href="javacsript:void(0);" onclick="delTr(this);">del</a></td></tr><tr><td>3</td><td>暗影猎手</td><td>女</td><td><a href="javacsript:void(0);" onclick="delTr(this);">del</a></td></tr></table><script type="text/javascript">//添加功能//1.给添加功能绑定点击事件document.getElementById("btn_add").onclick = function() {//2.获取文本框的内容var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;//3.创建td,赋值td的标签体//id的tdvar td_id = document.createElement("td");var text_id = document.createTextNode(id);td_id.appendChild(text_id);//name的tdvar td_name = document.createElement("td");var text_name = document.createTextNode(name);td_name.appendChild(text_name);//gender的tdvar td_gender = document.createElement("td");var text_gender = document.createTextNode(gender);td_gender.appendChild(text_gender);//a标签的tdvar td_a = document.createElement("td");var ele_a = document.createElement("a");ele_a.setAttribute("href", "javascript:void(0);");ele_a.setAttribute("onclick", "delTr(this);");var text_a = document.createTextNode("del");ele_a.appendChild(text_a);td_a.appendChild(ele_a);//4.创建trvar tr = document.createElement("tr");//5.添加td到tr中tr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_gender);tr.appendChild(td_a);//6.获取tablevar table = document.getElementsByTagName("table")[0];table.appendChild(tr);}//删除方法function delTr(obj) {var table = obj.parentNode.parentNode.parentNode;var tr = obj.parentNode.parentNode;table.removeChild(tr);}</script></body>
</html>
6. HTML DOM
(1)标签体的设置和获取:innerHTML
(2)使用HTML元素对象的属性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="div1">div1</div><div id="div2">div2</div><script type="text/javascript">var div1 = document.getElementById("div1");/* var innerHTML1 = div1.innerHTML;document.write(innerHTML1); //div1 *///div标签中替换一个文本输入框div1.innerHTML = "<input type='text'>";//div标签中追加一个文本输入框var div2 = document.getElementById("div2");div2.innerHTML += "<input type='text'>";</script></body>
</html>
(3)控制元素样式
1. 使用元素的style属性来设置例如:div.style.border = "1px red solid"div.style.width = "200px"div.style.fontSize = "20px"2. 提前定义好选择器的样式,通过元素的className属性来设置其class属性值
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.d2{border: 1px solid yellow;font-size: 20px;background-color: yellow;}</style></head><body><div id="div1">div1</div><div id="div2">div2</div><script type="text/javascript">var div1 = document.getElementById("div1");div1.onclick = function(){//修改样式方式1div1.style.border = "1px solid pink";div1.style.fontSize = "20px";div1.style.backgroundColor = "pink";}var div2 = document.getElementById("div2");div2.onclick = function(){//修改样式方式2div2.className = "d2";}</script></body>
</html>
5. 事件监听机制
1. 概念:某些组件被执行了某些操作后,触发某些代码的执行
名词解释:1. 事件:某些操作。如双击,单击,键盘按下,鼠标移动2. 事件源:组件(标签)。如按钮,文本输入框3. 监听器:代码4. 注册监听:将事件,事件源,监听器结合在一起。当事件源上发生了某个事件,就会触发某些代码的执行
2. 常见的事件:
1. 点击事件:1. onclick:单击事件2. ondblclick:双击事件
2. 焦点事件1. onblur:失去焦点。常用于表单验证2. onfocus:元素获得焦点。
3. 加载事件:1. onload:一张页面或一幅图像完成加载。
4. 鼠标事件:1. onmousedown 鼠标按钮被按下。定义方法时,定义一个形参接收event对象,event可以获取鼠标点了哪个键 2. onmouseup 鼠标按键被松开。3. onmousemove 鼠标被移动。4. onmouseover 鼠标移到某元素之上。5. onmouseout 鼠标从某元素移开。
5. 键盘事件:1. onkeydown 某个键盘按键被按下。 2. onkeyup 某个键盘按键被松开。3. onkeypress 某个键盘按键被按下并松开。
6. 选中和改变1. onchange 域的内容被改变。2. onselect 文本被选中。
7. 表单事件:1. onsubmit 确认按钮被点击。可以去阻止表单提交(校验用户名..)表单返回false,则阻止被提交2. onreset 重置按钮被点击。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="#" method="" id="form" onclick="return checkForm"><input type="" name="username" id="username" value="" /><select id="city"><option>--请选择--</option><option>北京</option><option>上海</option><option>西安</option></select><input type="submit" name="" id="" value="提交" /></form><script type="text/javascript">//1. 点击事件:// 1. onclick:单击事件// 2. ondblclick:双击事件//2. 焦点事件// 1. onblur:失去焦点。常用于表单验证// 2. onfocus:元素获得焦点。document.getElementById("username").onblur = function(){alert("失去焦点了...")}//3. 加载事件:// 1. onload:一张页面或一幅图像完成加载。//4. 鼠标事件:// 1. onmousedown 鼠标按钮被按下。定义方法时,定义一个形参接收event对象,event可以获取鼠标点了哪个键 document.getElementById("username").onmousedown = function(event){alert(event.button);}// 2. onmouseup 鼠标按键被松开。// 3. onmousemove 鼠标被移动。// 4. onmouseover 鼠标移到某元素之上。document.getElementById("username").onmouseover = function(){alert("鼠标过来了...");}// 5. onmouseout 鼠标从某元素移开。//5. 键盘事件:// 1. onkeydown 某个键盘按键被按下。 document.getElementById("username").onkeydown = function(event){if(event.keyCode == 13){alert("提交表单");}}// 2. onkeyup 某个键盘按键被松开。// 3. onkeypress 某个键盘按键被按下并松开。//6. 选中和改变// 1. onchange 域的内容被改变。document.getElementById("username").onchange = function(event){alert("改变了...");}// 2. onselect 文本被选中。//7. 表单事件:// 1. onsubmit 确认按钮被点击。// 可以去阻止表单提交(校验用户名..)// 表单返回false,则阻止被提交document.getElementById("form").onsubmit = function(){//校验用户名是否正确var flag = false;return falg;}// 2. onreset 重置按钮被点击。function checkForm(){return true;}</script></body>
</html>
6. 两个案例
1. 案例1:表格全选
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">table {border: 1px solid;width: 500px;margin-left: 30%;}td,th {text-align: center;border: 1px solid;}div {margin-top: 10px;margin-left: 30%;}.out {background-color: white;}.over {background-color: pink;}</style></head><body><table><caption>学生信息表</caption><tr><th><input type="checkbox" name="cb" id="firstCb"></th><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td><input type="checkbox" name="cb"></td><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0);">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>3</td><td>岳不群</td><td>?</td><td><a href="javascript:void(0);">删除</a></td></tr></table><div><input type="button" id="selectAll" value="全选"><input type="button" id="unSelectAll" value="全不选"><input type="button" id="selectRev" value="反选"></div><script type="text/javascript">//全选功能//1.给全选按钮绑定单击事件document.getElementById("selectAll").onclick = function(){ //2.获取所有的checkboxvar cbs = document.getElementsByName("cb");//3.遍历for(var i = 0;i < cbs.length;i++){//设置每一个状态为选中cbs[i].checked = true;}}//全不选功能//1.给全不选按钮绑定单击事件document.getElementById("unSelectAll").onclick = function(){ //2.获取所有的checkboxvar cbs = document.getElementsByName("cb");//3.遍历for(var i = 0;i < cbs.length;i++){//设置每一个状态为未选中cbs[i].checked = false;}}//反选功能//1.给反选按钮绑定单击事件document.getElementById("selectRev").onclick = function(){ //2.获取所有的checkboxvar cbs = document.getElementsByName("cb");//3.遍历for(var i = 0;i < cbs.length;i++){//设置每一个状态为相反cbs[i].checked = !cbs[i].checked;}}//根据第一个选择框选择//1.给第一个选择框绑定单击事件document.getElementById("firstCb").onclick = function(){//2.获取所有的checkboxvar cbs = document.getElementsByName("cb");//3.遍历for(var i = 0;i < cbs.length;i++){//设置每一个状态与第一个选择框相同cbs[i].checked = this.checked;}}//给所有tr绑定鼠标移动到元素之上和移出元素的事件var trs = document.getElementsByTagName("tr");for(var i = 0;i < trs.length;i++){//移到元素上trs[i].onmouseover = function(){this.className = "over";}//移出元素trs[i].onmouseout = function(){this.className = "out";}}</script></body>
</html>
JavaWeb(4)JavaScript高级相关推荐
- 《JavaScript高级程序设计(第3版)》教程大纲
词条 <JavaScript高级程序设计>是2006年人民邮电出版社出版的图书,作者是(美)(Nicholas C.Zakas)扎卡斯.本书适合有一定编程经验的开发人员阅读,也可作为高校相 ...
- 前端红宝书《JavaScript高级程序设计》核心知识总结
此文是对<JavaScript 高级程序设计>一书难点的总结,也是笔者在看了 3 遍之后的一些梳理和感想,希望能借此巩固js的基础和对一些核心概念有更深入的了解. 摘要 JS基本的数据类型 ...
- 《JavaScript高级程序设计》(第2版)上市
本书是技术畅销书<JavaScript高级程序设计> 的第2版,几乎全部更新.重写 了上一版的内容,融入了作者近几年来奋战在前端开发一线的宝贵经验 , 是学习和提高JavaScript ...
- 攻下《JavaScript高级程序设计》——第二章 在HTML中使用JavaScript
从上一章我们知道了,JavaScript是一种专门为网页交互而设计的脚本语言,那么,它就免不了和HTML打交道,所以在设计JavaScript的时候,Netscape首要面临的就是,怎么让HTML和J ...
- 《javascript高级程序设计》笔记:内存与执行环境
上一篇:<javascript高级程序设计>笔记:继承 近几篇博客都会围绕着图中的知识点展开 由于javascript是一门具有自动垃圾收集机制的编程语言,开发者不必担心内存的分配和回收的 ...
- 《javascript高级程序设计》笔记:变量对象与预解析
上一篇:<javascript高级程序设计>笔记:内存与执行环境 上篇文章中说到: (1)当执行流进入函数时,对应的执行环境就会生成 (2)执行环境创建时会生成变量对象,确定作用域链,确定 ...
- javascript 高级程序设计_JavaScript 经典「红宝书」,几代前端人的入门选择
人的一生中总要读几本经典书,在这个"经典"泛滥的年代,什么才是权威的代表,我想大概是一本的书的口碑,能积累下上佳口碑的书,往往也是能经得住时间推敲的.比如这本: 相信许多前端开发者 ...
- 《Javascript高级程序设计》读书笔记之对象创建
<javascript高级程序设计>读过有两遍了,有些重要内容总是会忘记,写一下读书笔记备忘 创建对象 工厂模式 工厂模式优点:有了封装的概念,解决了创建多个相似对象的问题 缺点:没有解决 ...
- 【读书笔记】JavaScript高级编程(二)
2019独角兽企业重金招聘Python工程师标准>>> 书中第3章 基本概念摘要(一) 3.3 变量 使用var操作符定义的变量将成为定义该变量的作用域中的局部变量.也就是说,如果在 ...
- JavaScript高级程序设计(第3版)非扫描版
前端学习js的红皮书 文档:JavaScript高级程序设计(第3版)非扫?.. 文档:JavaScript高级程序设计(第3版)非扫?.. 链接:http://note.youdao.com/not ...
最新文章
- CUDA Samples: dot product(使用零拷贝内存)
- DB2 日期时间函数
- Python基于socket实现的TCP服务端
- 10个月产品演化之路-快速试错,快速反应,探索产品成功之道
- 【Linux】一步一步学Linux——chmod命令(110)
- 2021ICPC(沈阳) - String Problem(后缀树+贪心)
- .NET Core 迁移躺坑记续集--Win下莫名其妙的超时
- csstd超出部分用...替换
- 解决 No converter found for return value of type 的问题
- iOS开发1小时快速入门
- IGP LDP同步技术剖析
- 笔记本+显示器常用设置总结
- 手撕promise.all以及promise.race
- Apollo + Springboot 整合(多环境版)
- HtmlUnit的简单例子
- Android 自定义viewpage + videoview 实现竖屏视频播放效果
- 模拟股票涨跌功能(jquery应用4)
- Must use destructuring props assignmenteslint
- 类的设计和实现II---销售数据统计
- 大数据分析师,比数据分析师厉害在哪
热门文章
- QT 实现滚屏显示多张漂亮美眉图片(可放大缩小)
- pr-流程、界面、操作流程1
- 装完黑苹果怎么装windows_黑苹果安装教程,小编教你黑苹果怎么安装
- 经典电影配乐推荐【转载】
- 巨噬细胞膜包覆的负载二氧化锰MnO2和顺铂Pt的仿生纳米粒(齐岳)
- 高考之后,泪眼婆娑,爱很脆弱
- Flutter Container 组件
- Node.js + Web Socket 打造即时聊天程序嗨聊(1)
- matlab的udt,西门子PLC的UDT是干什么的?如何使用?终于讲清楚了
- 未启用远程计算机的访问,技术员解决win10系统连接远程提示未启用对服务器的远程访问的技巧...