JavaScript-ECMAScript、BOM、DOM

Q1：javaScript组成

1.ECMAScript描述了该语言的语法和基本对象，如类型、运算、流程控制、面向对象、异常

2.文档对象模型(DOM),描述了处理网页内容的方法和接口

3.浏览器对象模型(BOM)，描述了与浏览器进行交互的方法和接口

Q2:JavaScript脚本语言特点

1:解释型的脚本语言

2:简单

3:动态性

4:跨平台性

Q3:数据类型

5种原始数据类型：Undefined、Null、Boolean、Number和String,Object是引用类型

Q4:值为underfine的情况

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script>//js对象var user = {name: "张学友",address: "中国香港"};var users={id:1,name:"老张"};console.log(users.age);console.log(user.age);//访问对象中的属性，未定义
             var i;console.log(i);function show(obj){console.log(obj);    return obj;};var result=show(3);console.log(result);console.log(null==undefined);console.log("----------------");console.log(typeof(user));console.log(typeof(null));                        console.log(typeof(undefined));console.log("");console.log(!!"");　　　　　　　 //是否不为数字,is Not a Numberconsole.log(isNaN("five"));</script></body>
</html>

Q5:数组

1：数组一些方法

Array 对数组的内部支持
Array.concat( ) 连接数组
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.length 数组的大小
Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 给数组添加元素
Array.reverse( ) 颠倒数组中元素的顺序
Array.shift( ) 将元素移出数组
Array.slice( ) 返回数组的一部分
Array.sort( ) 对数组元素进行排序
Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串
Array.unshift( ) 在数组头部插入一个元素

实例:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script>//数组的创建var arr1=new Array();var arr2=[];//语法糖var arr3=new Array(1,2,3,4,"x","y");var arr4=new Array(10);//指定长度var arr5=[1,2,3,4,5,6,7];//定义并赋值//访问与修改console.log("-------访问------")console.log(arr3[4]);console.log("-------修改------")arr3[4]="z";console.log(arr3[4]);//添加元素console.log("-------往末尾添加元素------")//添加单个元素arr3.push(5);console.log(arr3);//添加多个元素arr3.push(6,"张");console.log(arr3);console.log("-------添加到开始------");arr3.unshift("第一个");console.log(arr3);console.log("-------添加到中间------");arr3.splice(1,0,"第二个","第三个");console.log(arr3);arr3.splice(1,1,"第二个","第三个");console.log(arr3);//删除console.log("--------移除最后一个元素并返回该元素值-----");arr3.pop();console.log(arr3);console.log("--------移除最前一个元素并返回该元素值-----");arr3.shift();console.log(arr3);console.log("------删除从指定位置deletePos开始的指定数量deleteCount的元素-------");arr3.splice(0,3);console.log(arr3);console.log("-----截取和合并-----");//截取var slice1=arr3.slice(0,3);console.log(slice1);//合并var concat1=arr3.concat(arr5);console.log(concat1);//拷贝var slice2=arr3.slice(0);console.log(slice2);var concat2=arr3.concat();console.log(concat2);//排序//正序
            arr5.sort();console.log(arr5);//倒序
            arr5.reverse();console.log(arr5);console.log("------合并成字符-----");var join1=arr5.join(",");console.log(join1);console.log("-- 拆分成数组----------");var str="w s z y w";var split1=str.split(" ");console.log(split1);</script></body>
</html>

Q5：DOM操作

实例1：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>商品管理</title><style type="text/css">.t {width: 100%;margin: 0 auto;}#table1 {border-collapse: collapse;width: 100%;}tr td:last-child {text-align: center;}a {margin: 0 5px;}span {font-size: 12px;color: red;}#fie {width: 400px;border-radius: 5px;}#date,#id,#name,#price {width: 169px;}.trbc{background-color: red;color: #fff;}</style></head><body><div class="t"><table id="table1" border="1" cellspacing="1" cellpadding="0"><thead><tr><th><input type="checkbox" id="che" /><label for="che">全选</label></th><th>商品编号</th><th>名称</th><th>价格</th><th>上货日期</th><th>是否下架</th><th>操作</th></tr></thead><tbody id="tbody"></tbody></table><fieldset id="fie"><legend>添加/更新</legend><p><label for="id">商品编号：</label><input type="text" id="id" /><span id="sum"></span></p><p><label for="name">商品名称：</label><input type="text" id="name" /><span id="log"></span></p><p><label for="price">商品价格：</label><input type="text" id="price" /><span id="pri"></span></p><p><label for="date">上货日期：</label><input type="date" id="date" /><span id="da"></span></p><p><label>是否下架：</label><input type="radio" name="state" value="是" />是<input type="radio" name="state" value="否" checked="checked" />否</p><p><input type="button" id="add" value="添加" /><input type="button" id="update" value="更新" /><input type="button" id="delAll" value="删除选中项" /></p></fieldset></div><script type="text/javascript">var arr = [{number: "201300001",name: "lenovo A820T",price: 650.0,date: "2013-01-07",state: "否"},{number: "201300007",name: "Acer 星锐 4752G",price: 4000.8,date: "2013-01-01",state: "是"},{number: "201300009",name: "ZTE U880",price: 450.0,date: "2013-01-07",state: "否"}];var app = {init: function() {var tr = "";for(var i = 0; i < arr.length; i++) {tr += "<tr>";tr += "<td><input type='checkbox' value='" + i + "' class='che'/></td>";tr += "<td>" + arr[i].number + "</td>";tr += "<td>" + arr[i].name + "</td>";tr += "<td>" + arr[i].price + "</td>";tr += "<td>" + arr[i].date + "</td>";tr += "<td>";if(arr[i].state==="是"){tr += "<input type='checkbox' value='" + i + "' class='state' checked='checked' disabled='disabled'/>";}else{tr += "<input type='checkbox' value='" + i + "' class='state' disabled='disabled'/>";}tr += "</td>";tr += "<td>";tr += "<a class='del' href='##' data-id='" + i + "'>删除</a>";tr += "<a class='edit' href='##' data-id='" + i + "'>修改</a>";tr += "<a class='finish' href='##' data-id='" + i + "'>详细</a>";tr += "</td>";tr += "</tr>";}document.getElementById("tbody").innerHTML = tr;app.event();},//验证,基于对象验证
                verify: function(tar) {if(!(tar.number && /^[\d]{9}$/.test(tar.number))) {document.getElementById("sum").innerText = "*只能输入九位的数字";return false;} else {document.getElementById("sum").innerText = "";}if(!(tar.name && /^.{1,30}$/.test(tar.name))) {document.getElementById("log").innerText = "*长度只能是1-30位";return false;} else {document.getElementById("log").innerText = "";}if(!(tar.price && /^\d+(\.\d+)?$/.test(tar.price))) {document.getElementById("pri").innerText = "*只能输入正数，如0.98";return false;} else {document.getElementById("pri").innerText = "";}if(tar.date == "") {document.getElementById("da").innerText = "*必须选择";return false;} else {document.getElementById("da").innerText = "";}return true;},event: function() {//绑定事件，删除var del = document.getElementsByClassName("del");for(var i = 0; i < del.length; i++) {del[i].onclick = function() {if(confirm("您确定要删除吗？")) {var id = this.getAttribute("data-id");arr.splice(id, 1);alert("删除成功");app.init();} else {return false;}}};//绑定事件，添加document.getElementById("add").onclick = function() {var state1 = document.getElementsByName("state");var state2;for(var i = 0; i < state1.length; i++) {if(state1[i].checked == true) {state2 = state1[i].value;}}var ware = {number: document.getElementById("id").value,name: document.getElementById("name").value,price: document.getElementById("price").value,date: document.getElementById("date").value,state: state2};if(app.verify(ware)) {arr.push(ware); //正则校验app.init(); //添加成功重新渲染页面
                        }};//绑定事件，编辑var edit = document.getElementsByClassName("edit");for(var i = 0; i < edit.length; i++) {edit[i].onclick = function() {id = this.getAttribute("data-id");document.getElementById("id").value = arr[id].number;document.getElementById("name").value = arr[id].name;document.getElementById("price").value = arr[id].price;document.getElementById("date").value = arr[id].date;var state = document.getElementsByName("state");for(var i = 0; i < state.length; i++) {if(state[i].value == arr[id].state) {state[i].checked = true;}}}};//绑定事件，更新document.getElementById("update").onclick = function() {var state1 = document.getElementsByName("state");var state2;for(var i = 0; i < state1.length; i++) {if(state1[i].checked == true) {state2 = state1[i].value;}}var ware = {number: document.getElementById("id").value,name: document.getElementById("name").value,price: document.getElementById("price").value,date: document.getElementById("date").value,state: state2};if(app.verify(ware)) {arr.splice(id,1,ware);app.init(); //添加成功重新渲染页面
                        }};//绑定事件，多删除document.getElementById("delAll").onclick = function() {var cheAll = document.getElementsByClassName("che");var index = [];for(var i = 0; i < cheAll.length; i++) {if(cheAll[i].checked == true) {index.push(cheAll[i].value);};};if(index.length > 0) {if(confirm("您确定要删除这些数据吗？")) {for(var i = index.length; i >= 0; i--) {arr.splice(index.pop(), 1);}app.init(); }} else {alert("您未选择");}};//绑定事件，全选,反选document.getElementById("che").onclick = function() {var cheAll = document.getElementsByClassName("che");if(this.checked == true) {for(var i = 0; i < cheAll.length; i++) {cheAll[i].checked = true;};} else if(this.checked == false) {for(var i = 0; i < cheAll.length; i++) {cheAll[i].checked = false;};}};//绑定事件，高亮显示var tbody = document.getElementById("tbody").childNodes;for (var i = 0; i < tbody.length; i++) {tbody[i].onmousemove = function(){this.className="trbc";}tbody[i].onmouseout = function(){this.className="";}}//绑定事件，定时判断复选框是否全部选中
                    setInterval(function() {var cheAll = document.getElementsByClassName("che");var index = [];for(var i = 0; i < cheAll.length; i++) {if(cheAll[i].checked == true) {index.push(cheAll[i].value);};};if(cheAll.length != index.length) {document.getElementById("che").checked = false;} else if(index.length === 0) {document.getElementById("che").checked = false;} else {document.getElementById("che").checked = true;}}, 14);}};app.init();</script></body></html>

View Code

实例2:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>table,tr,td{border:1px solid red;border-collapse: collapse;}table{width: 100%;text-align: center;}input[type="button"]{width: 80px;}tbody tr td:last-child{width: 400px;}</style><body><table id="table"><thead><td><input type="checkbox" id="checkFather" οnclick="checkFather()"/></td><td>编号</td><td>任务</td><td>转态</td><td>操作</td></thead><tbody id="tbody"></tbody></table><fieldset><legend>数据添加</legend><p><label>编号</label><input type="text" placeholder="情输入编号" id="id"/></p><p><label>任务</label><input type="text" placeholder="情输入任务" id="task"/></p><p><label>状态</label><select id="state"><option value="未完成">未完成</option><option value="完成">完成</option></select></p><p><input type="button" value="添加" id="btnAdd" οnclick="add()"/><input type="button" value="修改" id="btnUpdate" οnclick="update()"/><input type="button" value="多项删除" id="btnDelMore" οnclick="delMore()"/></p></fieldset><script>var updateid="";var data=[{id:1,task:"上网",state:"未完成"},{id:2,task:"看电视",state:"完成"},{id:3,task:"听歌",state:"未完成"}];select();function select(){var t=document.getElementById("tbody").getElementsByTagName("tr");for(var j=t.length-1;j>=0;j--){t[j].remove();}for(var i=0;i<data.length;i++){var tr=document.createElement("tr");var chkSon=document.createElement("input");chkSon.setAttribute("type","checkbox");chkSon.setAttribute("class","chkSon");chkSon.setAttribute("value",i);chkSon.setAttribute("onclick","javascript:checkSon()");var tdId=document.createElement("td");tdId.innerHTML=data[i].id;var tdTask=document.createElement("td");tdTask.innerHTML=data[i].task;var tdState=document.createElement("td");tdState.innerHTML=data[i].state;var Adel=document.createElement("input");Adel.setAttribute("type","button");Adel.setAttribute("value","删除");Adel.setAttribute("onclick","javascript:del("+i+")");var Astate=document.createElement("input");var states=data[i].state;if(states=="完成"){states="未完成";}else{states="完成";};Astate.setAttribute("type","button");Astate.setAttribute("value",states);Astate.setAttribute("onclick","javascript:astate("+i+")");var Aedit=document.createElement("input");Aedit.setAttribute("type","button");Aedit.setAttribute("value","编辑");Aedit.setAttribute("onclick","javascript:edit(this,"+i+")");var Atd=document.createElement("td");Atd.appendChild(Adel);Atd.appendChild(Astate);Atd.appendChild(Aedit);tr.appendChild(chkSon);tr.appendChild(tdId);tr.appendChild(tdTask);tr.appendChild(tdState);tr.appendChild(Atd);document.getElementById("tbody").appendChild(tr);}};function delMore(){var tdcheck=document.getElementsByClassName("chkSon");for(var i=tdcheck.length-1;i>=0;i--){if(tdcheck[i].checked){var chkid=tdcheck[i].value;data.splice(chkid,1);}}select();};function astate(obj){var states=data[obj].state;if(states=="完成"){states="未完成";}else{states="完成";};data[obj].state=states;select();};function del(obj){data.splice(obj,1);select();};function edit(obj,i){var td=obj.parentNode.parentNode.childNodes;document.getElementById("id").value=td[1].innerText;document.getElementById("task").value=td[2].innerText;document.getElementById("state").value=td[3].innerText;updateid=i;};function update(){alert(updateid);data[updateid].task=document.getElementById("task").value;data[updateid].state=document.getElementById("state").value;select();};function checkFather(){var tdcheck=document.getElementsByClassName("chkSon");var tdcheckFather=document.getElementById("checkFather");if(tdcheckFather.checked){for (var i=0;i<tdcheck.length;i++) {tdcheck[i].checked="checked";}}else{for (var i=0;i<tdcheck.length;i++) {tdcheck[i].checked=false;}}};function checkSon(){var len=0;var tdcheck=document.getElementsByClassName("chkSon");for(var i=0;i<tdcheck.length;i++){if(tdcheck[i].checked){len++;}}var tdcheckFather=document.getElementById("checkFather");if(len<tdcheck.length){tdcheckFather.checked=false;}else{tdcheckFather.checked="checked";}};function add(){var id=document.getElementById("id").value;var task=document.getElementById("task").value;var state=document.getElementById("state").value;data.push({id:id,task:task,state:state});select();};</script></body>
</html>

结果:

另一种渲染表格的实例:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>table,tr,td{border:1px solid red;border-collapse: collapse;}table{width: 100%;text-align: center;}input[type="button"]{width: 80px;}tbody tr td:last-child{width: 400px;}</style><body><table id="table"><thead><td><input type="checkbox" id="checkFather" οnclick="checkFather()"/></td><td>编号</td><td>任务</td><td>转态</td><td>操作</td></thead><tbody id="tbody"></tbody></table><fieldset><legend>数据添加</legend><p><label>编号</label><input type="text" placeholder="情输入编号" id="id"/></p><p><label>任务</label><input type="text" placeholder="情输入任务" id="task"/></p><p><label>状态</label><select id="state"><option value="未完成">未完成</option><option value="完成">完成</option></select></p><p><input type="button" value="添加" id="btnAdd" οnclick="add()"/><input type="button" value="修改" id="btnUpdate" οnclick="update()"/><input type="button" value="多项删除" id="btnDelMore" οnclick="delMore()"/></p></fieldset><script>var data=[{"id":1,"task":"上网","state":"未完成"},{"id":2,"task":"看电视","state":"完成"},{id:3,task:"听歌",state:"未完成"}];select();function select(){for(var j=0;j<data.length;j++){var chkSon=document.createElement("input");chkSon.setAttribute("type","checkbox");var tr=document.getElementById("tbody").insertRow();var Adel=document.createElement("input");Adel.setAttribute("type","button");Adel.setAttribute("value","删除");var Astate=document.createElement("input");var states=data[j].state;if(states=="完成"){states="未完成";}else{states="完成";};Astate.setAttribute("type","button");Astate.setAttribute("value",states);var Aedit=document.createElement("input");Aedit.setAttribute("type","button");Aedit.setAttribute("value","编辑");tr.insertCell().appendChild(chkSon);for(var key in data[j]){tr.insertCell().innerHTML=data[j][key];}var t=tr.insertCell();t.appendChild(Adel);t.appendChild(Astate);t.appendChild(Aedit);}};</script></body>
</html>

转载于:https://www.cnblogs.com/zywds/p/9950325.html

JavaScript-ECMAScript、BOM、DOM相关推荐

javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄事件句柄类型说明 onabort 事件句柄图像加载被中断 onblur 事件句柄元素失去焦点 onfocus 事 ...
JavaScript函数和BOM及DOM编程（详细总结-无尿点）
JavaScript函数和BOM及DOM编程(详细总结-无尿点) javascript 函数一.javascript函数 1.1 概述 1.2 常见的系统函数 1.2.1 eval 1.2.2 pa ...
Python|并发编程|爬虫|单线程|多线程|异步I/O|360图片|Selenium及JavaScript|Scrapy框架|BOM 和 DOM 操作简介|语言基础50课：学习（12）
文章目录系列目录原项目地址第37课:并发编程在爬虫中的应用单线程版本多线程版本异步I/O版本总结第38课:抓取网页动态内容 Selenium 介绍使用Selenium 加载页面查找 ...
项目管理的几个概念（WBS、OBS、RBS、BOM、CWS、CA）总结与区分
项目管理的几个概念(WBS.OBS.RBS.BOM.CWS.CA)总结与区分 http://www.cnitpm.com/pm/4164.html 1.WBS ( Work Breakdown St ...
JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）...
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...
javascript组成-ECMAScript、bom、dom
javascript组成 1. javascript组成 1.1 ECMAScript(js的一些语法) 1.2 BOM:browser object model ----浏览器对象模型 bom中包含 ...
Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...
JavaScript(四)——面向对象编程、BOM、DOM、表单验证、jQuery
文章目录 1. 面向对象编程 2. 操作BOM对象(重点) 3. 操作DOM对象(重点) 4. 操作表单(验证) 5. jQuery 1. 面向对象编程 (1) 原型对象 javascript.Jav ...
javascript / DOM、BOM、document、window 区别和联系
作者:Vkki 链接:https://www.zhihu.com/question/33453164/answer/56549408 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...
JavaScript基础（3）-JS中的面向对象、定时器、BOM、位置信息
一.创建对象的几种常用方式. 1.使用Object或对象字面量创建对象: a.使用Object()内置的构造函数来创建对象,例如: var student = new Object(); // 创建一 ...

JavaScript-ECMAScript、BOM、DOM

JavaScript-ECMAScript、BOM、DOM相关推荐

最新文章

热门文章