JS中的BOM

合集下载

1在html中添加js代码的三种方式以及js中变量，函数

1在html中添加js代码的三种⽅式以及js中变量，函数1.第⼀种⽅式：在时间句柄后太假js代码；例如浏览器弹出对话框;1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"2"/TR/html4/loose.dtd">3<html>4<head>5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">6<title>⽆标题⽂档</title>7</head>89<body>1011121314151617<button type="button" onclick="window.alert('hello world')">请点击我</button>1819</body>20</html>2.第⼆种:让浏览器弹出对话框也可以把js代码写在独⽴脚本块中：1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"2"/TR/html4/loose.dtd">3<html>4<head>5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">67<title>⽆标题⽂档</title>89101112<script type="text/javascript">13//在整个页⾯加载过程中之上⽽下的顺序解释执⾏14//并且alert⽅法具有阻塞作⽤，只有点击确定后alert⽅法才算执⾏完成,页⾯中才会出现"注册"15 alert("hello");16</script>17</head>1819<body>20注册21</body>22</html>3.第三种⽅式:将js⽂件（专门写js代码)引⽤到html中1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"2"/TR/html4/loose.dtd">3<html>4<head>5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">6<title>⽆标题⽂档</title>7<script type="text/javascript" src="1.js">89//这⾥不能写js代码10//alert("你好，世界");11</script>12</head>1314<body>15注册16</body>17</html>4.js中的变量1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"2"/TR/html4/loose.dtd">3<html>4<head>5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">67<title>JS中的变量</title>891011<script type="text/javascript">1213/*141.什么是变量？15 -内存中存储数据的最基本的单元16172.变量怎么声明？18 -java是⼀种强类型的语⾔19强类型：java语⾔是由编译阶段，在编译阶段就确定了变量的数据类型20例如:int i=10;21以上程序通过编译之后，i变量的数据类型从始⾄终都是int类型，不能将其他数据类型的值赋给i变量。

JSのXMLHTTPRequest的属性和方法简介

JSのXMLHTTPRequest的属性和方法简介2011-05-13 23:54:50| 分类：JSの小技巧| 标签：xmlhttp 属性 http 返回备注|字号大中小订阅当然...这也是转的...怕链接失效。

所以偶会复制过来...转自：[个人收集整理]XMLHTTPRequest的属性和方法简介（好东西哦）由于现在在公司负责制作标准的静态页面，为了增强客户体验，所以经常要做些AJAX效果，也学你也和我一样在，学习AJAX。

而设计AJAX时使用的一个重要的技术（工具）就是XMLHTTPRequest对象了。

这里海啸把我学习XMLHTTPRequest 对象的一点资料拿出来跟大家一起分享。

文中的资料都是海啸在学习时在网上收集的，如果您开过，那就再加深下印象吧！（如果您觉得侵犯了您的版权，请联系海啸。

（haixiao_yao@））1、XMLHTTPRequest对象什么是？最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。

XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

（这个功能正是AJAX的一大特点之一：））来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。

客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft? XML Document Object Model (DOM)处理回应。

这里说些题外话，其实这个东西很早就出现了，只是以前浏览器的支持不够，只有IE中才支持，所以大多数的WEB程序员都没有怎么用他，但是现在情况发生了很大地改变，Mozilla和Safari 把它采用为事实上的标准，主流的浏览器都开始支持XMLHTTPRequest对象了。

但是这里需要重点说明的是XMLHTTPRequest目前还不是一个W3C的标准，所以在不同的浏览器上表现也稍有些区别。

【IT专家】使用knockoutJS中的函数将CSS添加到div

本文由我司收集整编，推荐下载，如有疑问，请与我司联系使用knockoutJS 中的函数将CSS 添加到div使用knockoutJS 中的函数将CSS 添加到div[英]Add CSS to a div using a function in knockoutJS I am trying to implement CSS binding in knockoutJS.我正在尝试在knockoutJS 中实现CSS 绑定。

I want to print all the names in the names array, One after another. The catch is thatthere is another array which has some special names.我想打印名称数组中的所有名称,一个接一个。

问题是有另一个数组有一些特殊名称。

All the special names should get “good” CSS class. And the rest, “bad” css class.所有特殊名称都应该得到“好”的CSS 类。

其余的,“坏”的css 课。

Here is something that i have tried:这是我尝试过的东西:HTML!DOCTYPE html html head script src=“code.jquery/jquery.min.js” /script link href=“getbootstrap/dist/css/bootstrap.css”rel=“stylesheet”type=“text/css”/ script src=“getbootstrap/dist/js/bootstrap.js”/script script src=“cdnjs.cloudflare/ajax/libs/knockout/3.0.0/knockout-min.js”/script script src=“code.jquery/jquery-1.9.1.min.js”/script meta charset=“utf-8”title JS Bin /title /head body div data-bind=“foreach: items”div data-bind=“text:$data, css: checkName($data)”/div /div self.items = ko.observableArray([“don”,”bom”,”harry”,”sharry”,”ron”]);s = [“ron”,”harry”]; self.checkName = ko.observable(function(name){ if( $.inArray(name,s) ){ return “good”;else{ return “bad”;ko.applyBindings(new dataModel()); FIDDLE - jsbin/difaluwo/2/editFIDDLE - jsbin/difaluwo/2/editNow its not woking. In console its giving me “Script error. (line 0)”。

Jquery中$（function（）{}）

Jquery中$（function（）{}）1. 在哪书写js⽂件如果我们要执⾏⼀段js代码，我们该怎么办呢？1.我们可以写⼀个js⽂件，在js⽂件⾥写执⾏函数，然后再<script src='...'> ... </script>，进⾏引⽤；2.我们可以直接在HTML页⾯下，插⼊脚本，同样是<script src='...'> ... </script>，两种⽅式没什么区别，唯⼀的区别就是程序的解耦，所以当我们执⾏的js代码不太多时候，我推荐在HTML页⾯下直接书写，反则...。

2. $(function(){}); 其实是⼀个简写，它等同于 jquery 的 $(document).ready(function(){})。

我们知道HTML页⾯在JavaScript⾥⾯有BOM对象和DOM对象，BOM是浏览器对象模型，⽤来获取或设置浏览器的属性、⾏为，例如：新建窗⼝、获取、浏览器版本号等。

DOM是，⽤来获取或设置⽂档中标签的属性，例如获取或者设置input表单的value值。

BOM的内容不多，主要还是DOM。

同样的，我们可以⽤Jquery来操作BOM和DOM，这⼉就引出了本⽂主旨：$(document).ready(function(){})现在我们开始执⾏js⽂件，但这样有个问题，就是对于某些浏览器来说，如果其中的代码涉及到某个 dom 节点的位置在这段代码之后的话就可能会失败。

原因是代码在 html ⽂档的前⾯，浏览器读到它的时候就执⾏了，⽽ dom 节点在它后⾯浏览器还没读取到呢，所以不知道怎样去操作这个节点，于是报错了。

你会说为什么不等到所有节点都读取完了再回头执⾏ js 代码呢？关键是有些代码就是想在页⾯出来⼀部分时就执⾏了啊。

所以对于那些在页⾯读取完才执⾏的代码通常会放到 onload 中去。

但 onload ⼜有⾃⼰的问题，⽐如 onload 的 window 的还有 body 的，执⾏的时机很是不好确定。

nodejs文档

– /jayli/nodejs-kiss
Q&A
• 单线程：多个请求占用一个线程 • 多线程：一个请求占用一个线程 (Web服务的)单线程 vs多线程
单线程的性能优势
Nginx（单线程）vsApache（多线程）
/* 阻塞 */ get_a_request(); //从队列中得到一个请求 handle_request(); //处理这个请求 feedback(); //返回处理结果 get_another_request(); //从队列中获得下一个请求 ... /* 非阻塞 */ get_a_request(); //得到一个请求 handle_request(function(){ //处理这个请求 feedback(); //等到处理完成后，返回处理结果 }); get_another_request(); //从队列中获得下一个请求 ...
– 面向开发者
/ https:///En/JavaScript/ServerSide_JavaScript/Walkthrough
WebServer+SpiderMonkey
浏览器渲染DOM的部分工作分担到服务器
• JavaScript之初 • WebServer之初
运行
相关链接
• NodeJS
–
• YUI3
– /yui/3/
• Nodejs-yui
– pm
–
• Nodejs-kissy
Node.js 实践
拔赤 bachi@ 2010-10-28
NodeJS 初体验：瘦身，速度，灵活，帅!
• • • • •
JavaScript之初 WebServer之初 NodeJS JavaScript的优异表现更进一步：DOM&YUI3

Excel VBA_BOM算法实例集锦

1，BOM算法之一‘2013-5-28‘/forum.php?mod=viewthread&tid=914702&page=1#pid6271907 Public Arr, d, d1, k, tSub lqxs_0527()'适用于加子件本身数量的算法Dim i&, Brr, k2, t2, j&, aa, aSet d = CreateObject("Scripting.Dictionary")Set d1 = CreateObject("Scripting.Dictionary")Sheet5.Activate[d:d] = ""Arr = [a1].CurrentRegionReDim Brr(1 To UBound(Arr), 1 To 1)For i = 2 To UBound(Arr)d(Arr(i, 1)) = d(Arr(i, 1)) & i & ","Nextk = d.keys: t = d.items ‘将层级及行数做成字典For i = 0 To UBound(k)If i = 0 ThenCall yy0(t(i), i)ElseCall yy(t(i), i)End IfNextk2 = d1.keys: t2 = d1.items ': c1 = iFor i = UBound(k2) To 1 Step -1 ‘从最末级开始t2(i) = Left(t2(i), Len(t2(i)) - 1)If InStr(t2(i), "|") Thenaa = Split(t2(i), "|")For j = 0 To UBound(aa)a = Split(aa(j), ",") ‘a(0)-本级行，a(2)- 上级行Brr(a(0), 1) = Brr(a(0), 1) + Arr(a(0), 3) ‘加子件本身数量Brr(a(2), 1) = Brr(a(2), 1) + Brr(a(0), 1) * Arr(a(2), 3)NextElsea = Split(t2(i), ",")Brr(a(0), 1) = Brr(a(0), 1) + Arr(a(0), 3)Brr(a(2), 1) = Brr(a(2), 1) + Brr(a(0), 1) * Arr(a(2), 3)End IfNextRange("d1:d" & UBound(Arr)) = BrrEnd SubSub yy(tt, c)Dim k1, t1, t2, j&, aa, sj, gs, i&t1 = Left(t(c - 1), Len(t(c - 1)) - 1) ‘上一级所在的行t2 = Left(tt, Len(tt) - 1) ‘本级所在的行If InStr(t2, ",") Thenbb = Split(t2, ",")For j = 0 To UBound(bb)If InStr(t1, ",") Thenaa = Split(t1, ",")For i = UBound(aa) To 0 Step -1If Val(bb(j)) > Val(aa(i)) Thensj = aa(i): gs = Arr(bb(j), 3) ‘sj-上级；gs-工时、需求量d1(k(c)) = d1(k(c)) & bb(j) & "," & gs & "," & sj & "|"‘把本级的行bb(j)、工时gs、上级行sj放入新的字典Exit ForEnd IfNextElsesj = t1: gs = Arr(bb(j), 3)d1(k(c)) = d1(k(c)) & bb(j) & "," & gs & "," & sj & "|"End IfNextElsegs = Arr(t2, 3): sj = t2 - 1d1(k(c)) = d1(k(c)) & t2 & "," & gs & "," & sj & "|"End IfEnd SubSub yy0(tt, c) ‘第1级时Dim t1, bb, j&, sj, gst1 = Left(tt, Len(tt) - 1)If InStr(t1, ",") Thenbb = Split(t1, ",")For j = 0 To UBound(bb)sj = bb(j): gs = Arr(bb(j), 3)d1(k(c)) = d1(k(c)) & bb(j) & "," & gs & "," & sj & "|"NextElsegs = Arr(t1, 3): sj = t1d1(k(c)) = d1(k(c)) & t1 & "," & gs & "," & sj & "|"End IfEnd Sub2，BOM算法之二‘2013-5-28‘/thread-716135-1-1.htmlSub lqxs_0528()'适用于不加子件本身数量的算法Dim i&, Brr, k2, t2, j&, aa, aSet d = CreateObject("Scripting.Dictionary")Set d1 = CreateObject("Scripting.Dictionary")Sheet5.Activate[d:d] = ""Arr = [a1].CurrentRegionReDim Brr(1 To UBound(Arr), 1 To 1)For i = 2 To UBound(Arr)d(Arr(i, 1)) = d(Arr(i, 1)) & i & ","Nextk = d.keys: t = d.itemsFor i = 0 To UBound(k)If i = 0 ThenCall yy0(t(i), i)ElseCall yy(t(i), i)End IfNextk2 = d1.keys: t2 = d1.items ': c1 = iFor i = UBound(k2) To 1 Step -1t2(i) = Left(t2(i), Len(t2(i)) - 1)If InStr(t2(i), "|") Thenaa = Split(t2(i), "|")For j = 0 To UBound(aa)a = Split(aa(j), ",")If Brr(a(0), 1) = 0 Then Brr(a(0), 1) = Arr(a(0), 3)Brr(a(2), 1) = Brr(a(2), 1) + Brr(a(0), 1) * Arr(a(2), 3) NextElsea = Split(t2(i), ",")If Brr(a(0), 1) = 0 Then Brr(a(0), 1) = Arr(a(0), 3)Brr(a(2), 1) = Brr(a(2), 1) + Brr(a(0), 1) * Arr(a(2), 3) End IfNextRange("d1:d" & UBound(Arr)) = BrrEnd Sub3，BOM算法之三（成本计算）Sub lqxs_cb0528()'适用于不加子件本身数量的成本算法Dim i&, Brr, k2, t2, j&, aa, a, tt2, zjjSet d = CreateObject("Scripting.Dictionary")Set d1 = CreateObject("Scripting.Dictionary")'Sheet5.Activate[i2:l50000] = ""Arr = [a1].CurrentRegionReDim Brr(1 To UBound(Arr), 1 To 1)For i = 2 To UBound(Arr)d(Arr(i, 1)) = d(Arr(i, 1)) & i & ","Nextk = d.keys: t = d.itemsFor i = 0 To UBound(k)If i = 0 ThenCall yy0(t(i), i)ElseCall yy(t(i), i)End IfNextk2 = d1.keys: t2 = d1.items'For ii = 4 To UBound(Arr, 2)ii = 4For i = UBound(k2) To 1 Step -1tt2 = Left(t2(i), Len(t2(i)) - 1)If InStr(tt2, "|") Thenaa = Split(tt2, "|")For j = 0 To UBound(aa)a = Split(aa(j), ",")If Brr(a(0), ii - 3) = 0 Thenzjj = Arr(a(0), 3) * Arr(a(0), ii)Elsezjj = Brr(a(0), ii - 3)End IfBrr(a(2), ii - 3) = Brr(a(2), ii - 3) + zjj * Arr(a(2), 3)'If Cells(a(0), ii + 5) = 0 Then'zjj = Arr(a(0), 3) * Arr(a(0), ii)'Else'zjj = Cells(a(0), ii + 5)'End If'Cells(a(2), ii + 5) = Cells(a(2), ii + 5) + zjj * Arr(a(2), 3)NextElsea = Split(t2(i), ",")If Brr(a(0), ii - 3) = 0 Then Brr(a(0), ii - 3) = Arr(a(0), 3) * Arr(a(0), ii)Brr(a(2), ii - 3) = Brr(a(2), ii - 3) + Brr(a(0), ii - 3) * Arr(a(2), 3)End IfNextBrr(1, ii - 3) = Cells(1, ii + 5).ValueRange(Cells(1, ii + 5), Cells(UBound(Arr), ii + 5)) = Application.Index(Brr, 0, ii - 3) ': Erase Brr'Range(Cells(1, ii + 5), Cells(UBound(Arr), ii + 5)) = Brr: Erase Brr'NextEnd Sub4，BOM算法之四（工时计算）Sub lqxs_gs0528()'适用于加子件本身数量的工时算法Dim i&, Brr, k2, t2, j&, aa, a,tt2,zjjSet d = CreateObject("Scripting.Dictionary")Set d1 = CreateObject("Scripting.Dictionary")'Sheet5.Activate[j2:l50000] = ""Arr = [a1].CurrentRegionReDim Brr(1 To UBound(Arr), 1 To UBound(Arr, 2) - 3)For i = 2 To UBound(Arr)d(Arr(i, 1)) = d(Arr(i, 1)) & i & ","Nextk = d.keys: t = d.itemsFor i = 0 To UBound(k)If i = 0 ThenCall yy0(t(i), i)ElseCall yy(t(i), i)End IfNextk2 = d1.keys: t2 = d1.itemsFor ii = 5 To UBound(Arr, 2)For i = UBound(k2) To 1 Step -1tt2 = Left(t2(i), Len(t2(i)) - 1)If InStr(tt2, "|") Thenaa = Split(tt2, "|")For j = 0 To UBound(aa)a = Split(aa(j), ",")If Arr(a(0), ii) <> 0 Thenzjj = Arr(a(0), 3) * Arr(a(0), ii)Brr(a(0), ii - 3) = Brr(a(0), ii - 3) + zjjBrr(a(2), ii - 3) = Brr(a(2), ii - 3) + Arr(a(2), 3) * Brr(a(0), ii - 3)ElseBrr(a(2), ii - 3) = Brr(a(2), ii - 3) + Arr(a(2), 3) * Brr(a(0), ii - 3) End IfNextElsea = Split(tt2, ",")If Brr(a(0), ii - 3) = 0 Then Brr(a(0), ii - 3) = Arr(a(0), 3) * Arr(a(0), ii)Brr(a(2), ii - 3) = Brr(a(2), ii - 3) + Brr(a(0), ii - 3) * Arr(a(2), 3)End IfNextBrr(1, ii - 3) = Cells(1, ii + 5).ValueRange(Cells(1, ii + 5), Cells(UBound(Arr), ii + 5)) = Application.Index(Brr, 0, ii - 3) Next End Sub5，BOM算法之五（成本工时计算）Sub lqxs_cbgs0528()'适用于加子件本身数量的工时算法'适用于不加子件本身数量的成本算法Dim i&, Brr, k2, t2, j&, aa, a, tt2, zjjSet d = CreateObject("Scripting.Dictionary")Set d1 = CreateObject("Scripting.Dictionary")'Sheet5.Activate[i2:l50000] = ""Arr = [a1].CurrentRegionReDim Brr(1 To UBound(Arr), 1 To UBound(Arr, 2) - 3)For i = 2 To UBound(Arr)d(Arr(i, 1)) = d(Arr(i, 1)) & i & ","Nextk = d.keys: t = d.itemsFor i = 0 To UBound(k)If i = 0 ThenCall yy0(t(i), i)ElseCall yy(t(i), i)End IfNextk2 = d1.keys: t2 = d1.itemsFor ii = 4 To UBound(Arr, 2)For i = UBound(k2) To 1 Step -1tt2 = Left(t2(i), Len(t2(i)) - 1)If InStr(tt2, "|") Thenaa = Split(tt2, "|")For j = 0 To UBound(aa)a = Split(aa(j), ",")If ii <> 4 ThenIf Arr(a(0), ii) <> 0 Thenzjj = Arr(a(0), 3) * Arr(a(0), ii)Brr(a(0), ii - 3) = Brr(a(0), ii - 3) + zjjBrr(a(2), ii - 3) = Brr(a(2), ii - 3) + Arr(a(2), 3) * Brr(a(0), ii - 3)ElseBrr(a(2), ii - 3) = Brr(a(2), ii - 3) + Arr(a(2), 3) * Brr(a(0), ii - 3)End IfElseIf Brr(a(0), ii - 3) = 0 Thenzjj = Arr(a(0), 3) * Arr(a(0), ii)Elsezjj = Brr(a(0), ii - 3)End IfBrr(a(2), ii - 3) = Brr(a(2), ii - 3) + zjj * Arr(a(2), 3)End IfNextEnd IfNextBrr(1, ii - 3) = Cells(1, ii + 5).ValueNextCells(1, UBound(Arr, 2) + 2).Resize(UBound(Arr), UBound(Arr, 2) - 3) = BrrEnd Sub当看到BOM表格的时候，我们大都会觉得眼花缭乱，被那么多的层级搞糊涂了，我不知道他们在实际工作中是怎么计算的，如果手工计算的话，真是需要足够的耐心和毅力。

课题_使用phantomjs操作DOM并对页面进行截图需要注意的几个问题

phantomjs是一个无界面浏览器，可用于网页截图和前端自动化测试，基于webkit内核（也就是chrome使用的内核），并使用js编写业务脚本来请求、浏览和操作页面。

最近前端监控需要用到phantomjs，特地研究了一下这个组件，遇到几个坑，这里汇总起来，希望对大家尤其是刚入门者有所帮助。

1、如何操作页面中的DOM元素？这个问题比较简单，官方API提供了page.evaluate函数，范例代码：page.evaluate(function(){var plist = document.querySelectorAll("a");//获取所有链接});2、如何滚动到页面底部？部分页面使用了lazyload，比如图片或js的延迟加载，只有滚动到底部才会触发，因此对于这种页面，如果要展示完整的页面，则需设法使底部可见，主要有3个办法：1、使浏览器足够大，这样底部就显示了，可以设置viewPortSize很大：page.viewportSize = {width: 4800,height: 8000};2、通过BOM方法操作滚动条，可以把滚动条滚动到一个很大的值，如：window.scrollTo(0,10000);也可以滚动到适应的高度：window.document.body.scrollTop = document.body.scrollHeight;3、如何延迟截图？页面请求的资源，如图片、异步cgi、js等，返回的时间以及执行的长短都是不确定的，如果截图过早，可能很多空白区域，因此需要定时截图，在打开页面后，使用setTimeout来延迟截图：window.setTimeout(function (){page.render("json2form.png");phantom.exit();}, 1000);4、注意page.evaluate中的回调函数作用域链对于初学者，很可能写出这样的代码（不是吗？看起来很正常，JS支持闭包呀？）：var page = require('webpage').create();var url = 'http://json2form.wikisoft.me//';var globalVar = 1;page.open(url, function (status){if (status != "success"){console.log('FAIL to load the address');}page.evaluate(function(){var x = globalVar;//引用本js的一个全局变量page.method();//执行phantomjs的一个api});});有个问题需要明白，page.evaluate中的函数是在目标网页执行的，其上下文、作用域链已经不能与phantomjs执行这个js同日而语，因此请勿在evaluate中引用phantomjs的api或你这个js文件中的全局变量，否则出了错，都很难定位。

nodeJS

Node.js概述：Node.js官网：1.Node.js是C++编写的基于V8引擎的JS运行时环境。

2.Node.js是一门基于ECMAScript开发的服务器端语言，提供了（全端JS没有的）很多扩展对象。

前端js：1.ES原生对象：String、Number、Boolean、Math、Date、Error、Function、Object、Array、RegExp...2.BOM&DOM3.自定义对象Node.js：1.ES原生对象2.Node.js内置对象3.大量的第三方对象4.自定义对象3.Node.js可以编写独立的服务器应用，无需借助于其他web服务器。

Node.js的意义：1.执行效率比PHP/JSP/JAVA要快2.用一种语言统一了前后端开发。

全栈工程师特点：1.单线程逻辑处理2.非阻塞3.异步I/O处理4.事件驱动编程2.Node.js的两种运行方式：1.交互模式——用于测试读取用户输入、执行运算、输出执行结果、继续下一循环执行方法：输入一行js语句，回车执行2.脚本模式——用于开发把要执行的所有js语句编写在一个独立的js文件中，一次性的提交给nodejs处理。

此文件可以没有后缀执行方法：node d:\xx\xx.js3.Node.js的基础语法及ES6新特性1.数据类型：（1）原始类型string、number、boolean...原始类型数据直接赋值即可（2）引用类型ES原生对象、Node.js对象、自定义对象引用类型通常需要使用new关键字创建2.模板字符串ES6中提供的一种新的字符串形式（1）使用模板方式定义字符串，数据可以实现换行（2）可以使用${}拼接变量，并且可以执行运算3.严格模式ES5中新增一种比普通模式更为严格的js运行模式。

使用方法：（1）在整个脚本文件中启用严格模式在脚本文件的开头："use strict";用于新项目（2）在单个函数内启用严格模式function info(){"use strict";.........}用于老项目维护规则：（1）修改常量的值是非法的——将静默失败升级为错误（2）不允许对未声明的变量赋值（3）匿名函数的this不再指向全局4.变量的作用域全局作用域、局部作用域、块级作用域（ES6中专有）块级作用域：只在当前代码块中使用代码块：任何一个{}都是一个代码块，if/for/while...代码块中使用“let”声明块级作用域变量，出了代码块，便不可使用。

JS（JavaScript）

JS（JavaScript）⼀、JavaScript，运⾏于JavaScript解释器中的，解释型脚本语⾔ 1、JavaScript主要⽤途：JavaScript主要读写HTML元素、在⽹页中嵌⼊动态⽂本、动态修改CSS样式表；对浏览器事件做出响应、表单数据验证、检测访客的浏览器信息等； 2、JavaScript的相关应⽤：验证数据；页⾯特效；数值计算；动态页⾯效果 3、JavaScript位置：我们可以将JavaScript代码放在html⽂件中任何位置，但是我们⼀般放在⽹页的head或者body部分；放在<head>部分，最常⽤的⽅式是在页⾯中head部分放置<script>元素，浏览器解析head部分就会执⾏这个代码，然后才解析页⾯的其余部分；放在<body>部分，JavaScript代码在⽹页读取到该语句的时候就会执⾏。

4、JavaScript引⽤⽅式：1、使⽤<script>标签在HTML⽂件中添加JavaScript代码；2、单独创建⼀个JavaScript⽂件(简称JS⽂件),其⽂件后缀通常为.js，然后将JS代码直接写在JS⽂件中，在HTML中添加如下代码，就可将JS⽂件嵌⼊HTML⽂件中，<script src="script.js"> </script> ；3、放置在HTML标签以on开头的属性即事件处理程序中； 5、JavaScript输出：1、使⽤Windows.alert()弹出警告框；2、使⽤Document.write()⽅法将内容写到HTML⽂档中（ document对象，代表整个HTML ⽂档，可⽤来访问页⾯中的所有元素）；3、使⽤innerHTML写⼊到HTML元素；4、使⽤console.log()写⼊到浏览器的控制台； 6、⼀个完整的JavaScript实现，应该由以下三个部分组成：1、核⼼，ECMAScript；2、⽂档对象模型，DOM，document object model；3、浏览器对象模型，BOM，browser object model；通过核⼼对象，DOM对象，BOM对象，作⽤于HTML元素　⼆、JavaScript核⼼ 1、数据类型，JavaScript数据类型有以下⼏种：数值型：数字可以带⼩数点，也可以不带；字符串型：⽤引号包围的⽂本；布尔型：只有两个取值，true false，⾮0或⾮空为true；null类型：表⽰从未赋值的值，只有⼀种取值null，引⽤⼀个没有定义的变量，返回null；undefined类型：专门⽤来确定⼀个已经创建但是没有初值的变量；数值型，在JavaScript中，所有的数字都是浮点型；　当⼀个数字直接出现在JavaScript程序中时，被称为数值直接量，JavaScript⽀持的数值直接量有整型数据、⼗六进制和⼋进制数据、浮点型数据，注意，负号，是⼀元求反运算符，不是数值直接量的⼀部分； toFixed() ⽅法，可把number四舍五⼊为指定⼩数位数的数字，返回值为string类型，typeof，查看数据类型字符串型，字符串string 是由Unicode字符、数字、标点符号等组成的序列，它是JavaScript⽤来表⽰⽂本的数据类型；字符串型的数据包含在单引号和双引号中；由单引号定界的字符串中可以包含双引号，由双引号定界的字符串中也可以包含单引号；可以采取内双外单的形式让输出的字符串带双引号，如果外双的形式，让字符串带双引号，可以采取转义字符 \" ；字符串可以⽤+号进⾏连接运算；布尔型，布尔数据类型只有两个值，这两个合法的值分别由直接量true和false表⽰，它表⽰某个事物是真或假； JavaScript在必要的时候，将true转化为1，将false转化为0 null类型，null，它表⽰值为空，⽤于定义空的或者不存在的引⽤；如果引⽤⼀个没有定义的变量，则返回⼀个null值，null不等同于空字符串和0；未定义类型，未定义类型的变量是undefined，表⽰变量还没有赋值，或者赋予⼀个不存在的属性值，此外，JavaScript中还有⼀种特殊类型的数字常量NaN，即“⾮数字”,当程序由于某种原因计算错误后，将产⽣⼀个没有意义的数字，此时JavaScript返回的数值就是NaN null undefined的区别是，null表⽰⼀个变量被赋予⼀个空值，⽽undefined则表⽰该变量尚未被赋值转义字符型，以反杠开头的，不可显⽰的特殊字符通常称为控制字符，也被称为转义字符；在document.write( )语句中使⽤转义字符时，只有将其放在格式化⽂本标签<pre></pre>中才会起作⽤ Object类型，复合数据类型；值为基本数据类型的组合；复合数据类型，json的遍历 JavaScript JSON，JSON 英⽂全称 JavaScript Object Notation，是独⽴的语⾔，⽤于存储和传输数据的格式，通常⽤于服务端向⽹页传递数据； JSON 语法规则：数据为键 / 值对；数据由逗号分隔；⼤括号保存对象；⽅括号保存数组； JSON 格式化后为 JavaScript 对象，JSON 格式在语法上与创建 JavaScript 对象代码是相同的，所以 JavaScript 程序可以很容易的将JSON 数据转换为 JavaScript 对象；　<!DOCTYPE html><meta charset="utf-8"><title></title></head><body><script>var text = '{ "sites" : [' +'{ "name":"Runoob" , "url":"" },' +'{ "name":"Google" , "url":"" },' +'{ "name":"Taobao" , "url":"" } ]}';document.writeln(typeof text + "<br/>");var obj = JSON.parse(text);document.writeln(typeof obj.sites + "<br/>");/* obj = obj.sites;for(var i=0; i<obj.length; ++i){document.write(obj[i].name + " " + obj[i].url + "<br/>") ;} */for(var i=0; i<obj.sites.length; ++i)document.write(obj.sites[i].name + " " + obj.sites[i].url + "<br/>") ;</script></body></html>　数据类型的⾃动转换，当字符串与其它类型⽤+连接，其它类型会转为字符串，其它的运算符-,*,/,%都会转换成Number类型；数据类型的强制转换，parseInt()，parseFloat()函数； typeof运算符，把类型信息⽤字符串返回，返回值有6种，number， string， boolean， object， undefined， function 2、变量，变量的主要作⽤是存取数据，提供存放信息的容器；JavaScript 是弱类型语⾔，对变量的定义不需要声明变量类型；JavaScript的变量是动态类型，相同变量可⽤作不同的类型；变量可以⽤关键字var显式声明，隐式声明的变量为全局变量；使⽤var可以同时声明多个变量，变量可以赋值（可以是不同数据类型值），也可以不赋值，只声明未赋值的变量，默认值为undefined； 3、函数，函数的定义是使⽤function关键字实现的，格式如下：function函数名(形式参数列表){函数体语句块;} 函数与其他JavaScript⼀样，必须位于<script></script>标记之间；函数可以有返回值吗，也可以没有返回值，返回值是通过return关键字加表达式实现的；函数的调⽤：作为函数直接调⽤；作为对象的⽅法调⽤；作为构造函数；通过call和apply⽅法间接调⽤； JavaScript 能够在事件发⽣时执⾏，因此，HTML DOM 事件可以调⽤函数，⽐如onmouseover事件；<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><p id="bgcolor" onmouseover="myfunction()" style="background-color: red;color:#FFFFFF;">⿏标指上⾯改变背景⾊</p><script>function myfunction(){var element=document.getElementById("bgcolor");if(element.style.backgroundColor.match("red")){element.style.backgroundColor = "blue";element.style.color = "#FFFFFF";element.innerHTML = "⿏标再指上⾯改变背景⾊";}else{element.style ="background-color: red;";element.style.color = "#FFFFFF";element.innerHTML = "⿏标指上⾯改变背景⾊";}}</script></body></html> 变量的作⽤域<script>var a = "全局变量";function myfun(){document.write(a);var a = "内部变量";document.write(a);document.write(a);</script> 图⽚切换<!DOCTYPE html><html><head><meta charset="UTF-8"><title>图⽚切换</title></head><style>#image{display: block;width: 500px;height: 180px;margin: 10px auto;}#next{margin-left: 350px;}</style><body><img src="./images/1.gif" id="image" /><button id="next">next</button><button id="prev">prev</button><script>var image = document.getElementById('image');var next = document.getElementById("next");var prev = document.getElementById('prev');var nowIndex = 1;var count = 6;next.onclick = function(){nowIndex = nowIndex+1>count?1:nowIndex+1;image.src = "img/"+nowIndex+".jpg";}prev.onclick = function(){nowIndex = nowIndex<=1?count:nowIndex-1;image.src = "img/"+nowIndex+".jpg";}</script></body></html> 4、控制语句，控制语句，if,if else,switch,while,for,try catch try catch<script>var txt="";function message(){try {adddlert("Welcome guest!"); //函数名错误}catch(exception){txt="本页有⼀个错误。

nodejs简单实现中英文翻译

nodejs简单实现中英⽂翻译帮以前同事解决⼀个需求，中⽂项⽬翻译英⽂项⽬~~~考虑到具体实现⽅⾯的问题，如果智能的话，肯定是要做中⽂的语法分析，不过感觉这个有难度。

所以最后的⽅案是遍历⽂件，将中⽂短语匹配出来，再进⾏⼈⼯翻译，将中⽂短语替换成翻译的内容。

当然后期还是需要⼈⼯再检验下，毕竟代码中的中⽂，可能会影响到相关的程序。

这个问题，明显涉及到多线程，⽂件读写，第⼀时间就想到的是 nodejs，虽然nodejs是⼀个主线程，但是异步⽂件读写，事件响应机制，肯定也是调⽤了线程，在实际编程的时候不需要考虑线程的相关的问题。

代码不复杂如下，写完了之后，适当的封装了下var fs = require('fs');var http = require('http');var filePath = 'D:\\WORK_new\\';var logPath = 'D:\\chinese.log';var map = {};var num = 0;var dictionary = (function () {var map = {};return {logPath: 'D:\\chinese.log',set: function (key, val) {map[key] = val || '';},get: function (key) {return map[key]||'';},save2File: function () {fs.writeFile(this.logPath, JSON.stringify(map).replace(/","/g,'",\r\n"'),{encoding:'utf8',flag:'w'}, function (err) {if (err) throw err;});},loadFile: function (callback) {fs.readFile(this.logPath, {encoding:'utf8'},function (err, data) {map = JSON.parse(data);callback();})},translateByGoogle: function (callback) {var index = 0;for (var key in map) {if (map[key] == '') {index++;(function (key) {http.get("/translate_a/t?client=t&hl=zh-CN&sl=zh-CN&tl=en&ie=UTF-8&oe=UTF-8&oc=2&otf=1&ssel=3&tsel=6&sc=2&q="+key, function(res) { res.setEncoding('utf8');var body = "";res.on('data', function (chunk) {body+=chunk;}).on('end', function (){var obj = eval('('+body+')');map[key] = obj[0][0][0];index--;if (index == 0) {callback();}});}).on('error', function(e) {console.log('http error');index--;if (index == 0) {callback();}console.log("Got error: " + e.message);});})(key);}}}}})();function File () {var index = 0;var _readFile = function (pathStr, fileBack, doneBack) {fs.readFile(pathStr,{encoding:'utf8'}, function (err, data) {index--;if (err) {data = "";console.log(err,pathStr)//throw err;}fileBack(data,pathStr);if (index == 0) {doneBack();}});};var _walkDir = function (pathStr, fileBack, doneBack) {fs.readdir(pathStr, function (err, files) {files.forEach(function (file) {if(fs.statSync(pathStr + '/' + file).isDirectory()){_walkDir(pathStr + '/' + file, fileBack, doneBack);} else {if (/.js$|.html$|.htm$|.jsp$/.test(file)){index ++;_readFile(pathStr + '/' + file, fileBack, doneBack);}return;}});});}this.walkDir = function (pathStr, fileBack, doneBack) {index = 0;_walkDir(pathStr, fileBack, doneBack);}}//第⼀步获取中⽂dictionary.logPath = logPath;new File().walkDir(filePath, function (data) {if (!!data) {var match = data.match(/[\u4e00-\u9faf]+/g);if (!!match) {match.forEach(function (mat) {dictionary.set(mat);})}}}, function () {console.log('获取中⽂ OK');dictionary.save2File();})//第⼆步 google翻译/*dictionary.loadFile(function () {dictionary.translateByGoogle(function () {dictionary.save2File();})});*///第三步中⽂替换/*dictionary.loadFile(function () {new File().walkDir(filePath, function (data,pathStr) {fs.writeFile(pathStr, data.replace(/[\u4e00-\u9faf]+/g, function (ch) {return dictionary.get(ch);}),{encoding:'ascii',flag:'w'}, function (err) {if (err) throw err;});}, function () {console.log('中⽂替换 OK');})});*/问题还是有的1.nodejs编码问题，在window环境下对GBK编码⽀持不好，主要是utf8⽂件的处理2.效率上⾯可能可以再通过线程进⾏优化，这块没做深⼊的考虑3.匹配出来，可能有单个的标点符号的短语等情况，需要⼈⼯排查实际情况中，⽂件是GBK的，还有些⽂件是utf8的，后来还是考虑通过脚本语⾔快⼿实现的时候，1.⽂件编码的问题，判断通过搜索判断⽂件⾸位3个字节是不是 ef bb bf，但是这个只是针对有BOM的utf8格式对⽆BOM的utf8格式，需要进⾏字节特征码的判断（有难度，精⼒有限，使⽤了上⾯的⽅案，对于⽆BOM的情况，进⾏⼈⼯排查）。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

BOM
1.什么是BOM?
a)BOM Browers Object Model 浏览器对象模型
2.为什么要学习BOM?
a)因为BOM是浏览器提供给JS操作的一个对象模型，实现了
JS可以通过操作BOM来实现浏览器的各种行为。

起到了桥梁
和接口的作用，类似于空调的控制面板。

BOM的对象。

window对象在JS中是Global对象，window的对象是浏览器中的BOM对象，window中包含两部分：JS语法中的函数和浏览器中的
对象。

window对象的子对象：
document 子对象DOM的对象文档对象模型
frames子对象浏览器框架集合对象
history子对象浏览器历史信息对象
location子对象浏览器位置信息对象
navigator子对象浏览器导航对象，存放浏览器的信息
screen子对象浏览器屏幕对象
frames子对象:window的frame框架访问方式
访问方式大概分为2种：
frames[下标] 访问第N个框架页面的window对象
frame[name名称] 访问框架页面中name属性为指定值的页面的window对象。

window的关系属性：
window 表示当前页面的window对象也就是当前页面的BOM this 表示当前页面的window对象
self 表示当前页面的window对象，在其他语言中self表示类，而JS中没有类所有this和self指向都是对象
parent 如果在顶级页面，parent表示当前页面的window对象，
如果在深层次的页面则表示上一层页面的window对象。

top 如果在顶级页面，top表示当前页面的window对象，如果在其他层次页面，则表示顶级页面的window对象。

opener 打开者后面
窗口位置属性
非火狐浏览器
screenLeft 浏览器窗口距离屏幕左上角的水平距离
screenTop 浏览器窗口距离屏幕左上角的垂直距离火狐浏览器
screenX 浏览器窗口距离屏幕左上角的水平距离
screenY 浏览器窗口距离屏幕左上角的垂直距离
注意；IE浏览器从页面的内容区域(视窗)开始计算距离，而火狐和chrome则从浏览器本身开始计算
窗口位置方法
moveTo(横坐标,纵坐标)
将浏览器窗口移动到指定的位置
moveBy(长度,高度)
将浏览器窗口在当前的位置上移动指定的长度和高度注意：两个参数都有可以为负数。

moveTo中值为负数表示坐标点
moveBy中值为负数则表示反向移动
窗口大小属性
非IE使用
innerHeight 获取当前视窗的高度
innerWidth 获取当前视窗的宽度
IE使用
document.documentElement.clientWidth 获取当前视窗的宽度
document.documentElement.clientHeight 获取当前视窗的高度
浏览器本身的大小（仅限非IE浏览器）
outerHeight 获取浏览器本身的高度
outerWidth 获取浏览器本身的宽度
窗口大小方法
resizeTo(长度,长度) 将浏览器调整到指定的大小
resizeBy(长度,长度) 将浏览器在当前页面的大小基础上调整指定的数值
以上方法仅对单选项卡页面有效，对于多选项卡页面无效，长度可以为负数，正数增大，负数减小。

窗口聚焦方法
foucs() 使得当前页面处于焦点状态
窗口失去焦点方法
blur() 使得当前页面失去焦点状态
屏幕滚动方法
scrollTo(横向位置,纵向位置) 将滚动条移动到指定的位置
scrollBy(横向长度,纵向长度) 将滚动条在当前位置基础上移动指定的长度
注意：长度可以整数，可以负数，一般不设置横向滚动条，因为影响用户体验。

循环执行方法和清除循环执行方法
setInterval(回调函数,时间) 设置循环执行
格式：循环变量=setInterval(回调函数,时间)
回调函数的三种使用方式：
匿名函数传入
声明函数函数名传入
声明函数的函数调用字符串传入
clearInterval(循环执行变量) 清除循环执行
格式：clearInterval(循环变量)
定时执行方法和清除定时执行方法
setTimeout(回调函数，时间)
格式：定时变量=setTimeout(回调函数,时间)
clearTimeout(定时执行变量)
格式：clearTimeout(定时执行变量)
打开关闭页面方法和属性：
opener 表示打开当前页面的页面的window对象
closed 检测当前页面关闭状态的属性
open() 打开一个新页面的方法
格式：open(url地址,打开方式,设置参数,是否替换原有页面);
close() 关闭一个打开的页面的方法
参数名称类型说明
height Number 设置窗体的高度，不能小于100
left Number 说明创建窗体的左坐标，不能为负值location Boolean 窗体是否显示地址栏，默认值为no resizable Boolean 窗体是否允许通过拖动边线调整大小，默认值为no
scrollbars Boolean 窗体中内部超出窗口可视范围时是否允许拖动，默认值为
no
toolbar Boolean 窗体是否显示工具栏，默认值为no top Number 说明创建窗体的上坐标，不能为负值status Boolean 窗体是否显示状态栏，默认值为no width Number 创建窗体的宽度，不能小于100
系统对话框:
alert() 系统警告弹窗
格式：alert(字符串)
confirm() 系统选择弹窗
格式：confirm(提示内容字符串)
返回值:布尔值
prompt() 系统输入弹窗
格式：prompt(提示字符串,默认值字符串);
返回值：用户输入的内容
History子对象:浏览器历史记录对象
length 表示当前页面的历史记录条数
back() 返回上一条历史记录页面
forward() 进入下一条历史记录页面
go() 进入指定的历史记录页面
go常用的方法就是go(1) 和go(-1)
go(1)相当于forward()函数
go(-1)相当于back()函数
location子对象”：浏览器位置信息对象
hash 获取URL锚点之后的内容，主要用来获取锚点名host 返回域名和端口的信息
hostname 返回域名信息(主机名称)
href 用于获取或者设置当前页面的完整URL地址
Origin 返回协议和域名，如果是本地访问近=仅返回协议
pathname 返回当前页面的文件路径信息
port 端口因为80端口默认不现实，所以获取不到
http:80端口
ftp:21端口
...
protocol 返回当前页面的协议本身
search 获取页面get传参值的字符串
assign() 实现页面的跳转操作效果和href属性一样
格式：location.assign(URL地址);
reload() 重新加载（刷新）
格式：location.reload() 普通刷新，读缓存
格式：location.reload(true) 强制刷新，不读缓存，开始时用的多
replace() 页面替换功能，使用1个新页面代替原有页面，效果类似与跳转
replace和assign的区别就是assign会产生新的历史记录，而replace 不会产生新的历史记录。

Navigator子对象浏览器信息检测对象
该对象的主要作用：检测浏览器的版本。

userAgent 用户代理信息返回客户端发送给服务器的user-ageent头信息，常用于浏览器版本检测等。

不需要记cookieEnabled: 是否支持cookie操作
geolocation 浏览器地理位置定位对象。

HTML5中讲online 检测浏览器是否在线。

platform 平台信息
language 当前浏览器的语言。

Screen子对象屏幕子对象
width 当前屏幕分辨率的宽度
height 当前屏幕分辨率的高度
availWidth: 当前屏幕可用宽度
availHeight: 当前屏幕可用高度。