JavaScript 简介

JavaScript简介

JavaScript简史


Netscape公司的布兰登·艾奇（Brendan Eich），1995年开发LiveScript为了搭上被媒体超热的Java的热潮，改名为JavaScript。 微软在Internet Explorer 3 中加入JScript
1997年，以 JavaScript 1.1 为蓝本的由欧洲计算机制造商协会（ECMA，European Computer Manufacturers Association）完成ECMA-262 定义名为ECMAScript 1998年，ISO/IEC（国标标准化组织和国际电工委员会）也采用了ECMAScript 作为标准（即ISO/IEC-16262）

JavaScript实现


JavaScript包括 ECMAScript ，DOM ，BOM 核心（ECMAScript）
ECMA-262 第1版：本质上与Netscape的JavaScript 1.1 相同——只不过删除了所有针对浏览器的代码并作了一些较小的改动。 ECMA-262 第2版：这一版中内容的更新是为了与ISO/IEC-16262 保持严格一致，没有作任何新增、修改或删节处理。
ECMA-262 第3版：才是对该标准第一次真正的修改。修改的内容涉及字符串处理、错误定义和数值输出。这一版还新增了对正则表达式、新控制语句、try-catch 异常处理的支持，并围绕标准的国际化做出了一些小的修改。 ECMA-262 第4版：不仅包含了强类型变量、新语句和新数据结构、真正的类和经典继承，还定义了与数据交互的新方式。
与此同时，TC39 下属的一个小组也提出了一个名为ECMAScript 3.1 的替代性建议，该建议只对这
门语言进行了较少的改进。
ECMA-262 第5版：ECMAScript 3.1 成为ECMA-262 第5 版，并于2009 年12 月3 日正式发布。第五版澄清第三版中已知的歧义并添加了原生JSON解析，
继承的方法和高级属性定义，严格模式。 文档对象模型（DOM）（提供访问和操作网页内容的方法和接口）
文档对象模型（DOM，Document Object Model）是针对XML 但经过扩展用于HTML 的应用程序编
程接口（API，Application Programming Interface）。 其他DOM 标准
SVG（Scalable Vector Graphic，可伸缩矢量图）1.0； MathML（Mathematical Markup Language，数学标记语言）1.0；
SMIL（Synchronized Multimedia Integration Language，同步多媒体集成语言）。 浏览器对象模型（BOM）（提供与浏览器交互的方法和接口）
出新浏览器窗口的功能； 移动、缩放和关闭浏览器窗口的功能；
提供浏览器详细信息的navigator 对象； 提供浏览器所加载页面的详细信息的location 对象；
提供用户显示器分辨率详细信息的screen 对象； 对cookies 的支持；
* 像XMLHttpRequest 和IE 的ActiveXObject 这样的自定义对象。

在HTML 中使用JavaScript

script元素


6个属性 async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或
等待加载其他脚本。只对外部脚本文件有效。
charset：可选。表示通过src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值，
因此这个属性很少有人用。 defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有
效。
language：已废弃。原来用于表示编写代码使用的脚本语言（如JavaScript、JavaScript1.2
或VBScript）。大多数浏览器会忽略这个属性，因此也没有必要再用了。 src：可选。表示包含要执行代码的外部文件。
type：可选。可以看成是language 的替代属性(默认值为text/javascript) 注意转义
1
2
3
4
5
6
<script type="text/javascript">
    function sayScript(){
        alert("<\/script>");
        //此处要加转义符
    }
</script>


注意不可省略
1
2
3
4
<script type="text/javascript" src="example.js"><script/>
<!--注意：此处不能写成
  <script type="text/javascript" src="example.js"/>
-->
 带有src 属性的\元素不应该在其\和\标签之间再
包含额外的JavaScript 代码。如果包含了嵌入的代码，则只会下载并执行外部
脚本文件，嵌入的代码会被忽略。

无论如何包含代码，只要不存在defer 和async 属性，浏览器都会按照\元素在页面中
出现的先后顺序对它们依次进行解析。（解析完第一个才会解析第二个） 由于浏览器会先解析完不使用defer 属性的\元素中的代码，然后再解析后面的内容，
所以一般应该把\元素放在页面最后，即主要内容后面，\标签前面。

嵌入代码与外部文件

  • 外部文件的优点：
    • 可维护性
    • 可缓存（如果有两个页面都使用同一个文件，那么这个文件只需下载一次。）
    • 适应未来（不存在上面提到的转义问题）

noscript元素

  • 浏览器不支持脚本,或者浏览器支持脚本，但脚本被禁用时会显示标签中的文本。

评论和共享

MongoDB 基本语法

开启服务：
  • --dbpath D:\mongodb\db```
    1
    2
    3

    ##### **Shell 启动：**
    - ```mongo
查看集合：
  • dbs```
    1
    2
    3

    ##### **删除集合：**
    - ```db.rumoob.drop()
选择集合：
  • test```
    1
    2
    3
    4


    ##### **查看文档：**
    - ```show collections
删除文档：
  • 1
    2
    3
    4


    ##### **插入元组：**
    - ```db.mydb.insert({'name':'killer'},{'password':'121021'})
查找元组：
  • 1
    - ```db.mydb.find().pretty()    //整齐排列
  • 1
    2
    3

    ##### **修改元组：**
    - ```db.col.update({'title':'test'},{$set:{'likes':100}});
  • "_id" : ObjectId("56064f89ade2f21f36b03136","name":"kill master")});```
    1
    2
    3

    ##### **删除元组：**
    - ```db.col.remove({'name':'killer'})

评论和共享

CMD快速配置IP地址和DNS

将IP和DNS配置为静态

  • netsh interface ip set address 以太网 static 123.123.123.123 255.255.255.192 123.123.123.1
  • netsh interface ip set dns "以太网" static 202.207.0.1

将IP和DNS配置为动态

  • netsh interface ip set address "以太网" dhcp
  • netsh interface ip set dns "以太网" dhcp

也可以写入到 .bat 批处理脚本中

评论和共享

BrowserSync 使用手册

全局安装


1
npm install -g browser-sync

项目中安装


1
npm install --save-dev browser-sync

启动 BrowserSync


1
2
3
4
5
6
7
8
9
//监听一个文件
browser-sync start --server --files "css/*.css"

//监听多个文件
// 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"

//指定端口
browser-sync start --server --port "3031" --files "**/*.css, **/*.html"

中文官网文档


www.browsersync.cn

评论和共享

JavaScript 事件捕获和冒泡

规范

在最新的 DOM 规范中，事件的捕获与冒泡是通过 addEventListener(...arg) 的第三个参数的 capture来指定的。默认为 false,也就是默认冒泡。

1
2
3
4
5
addEventListener(type, listener, {
    capture: false,
    passive: false,
    once: false
})

addEventListener 第三个参数

触发规则

event

在多个嵌套情况下，捕获的触发是从外到内的，冒泡则相反。先进行捕获，然后是冒泡。

这里要注意一点，在最后的一层中，先触发冒泡或捕获决定于代码中出现的先后，先出现的先执行。

不是所有的事件都能冒泡，例如：blur、focus、load、unload

DOM事件流

同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

DOM事件模型最独特的性质是，文本节点也触发事件

绑定事件方式

在一个支持W3C DOM的浏览器中，像这样一般的绑定事件方式，是采用的事件冒泡方式。

1
2
3
ele.onclick = ()=>{
    //doSomething
}

IE浏览器

IE只支持事件冒泡，不支持事件捕获，它也不支持 addEventListener 函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数 attachEvent。

1
2
3
ele.attachEvent("onclick", ()=>{
    //doSomething
});

阻止事件传播：

  • 在W3c中，使用 stopPropagation() 方法
  • 在IE下设置 cancelBubble = true
    在捕获的过程中 stopPropagation(); 后，后面的冒泡过程也不会发生了

阻止事件的默认行为

  • 在W3c中，使用 preventDefault(); 方法；
  • 在IE下设置 window.event.returnValue = false;

评论和共享

用 Express,Socket.io 搭建 WebSocket 服务器

首先搭建一个express的项目

添加一个index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>

安装socket.io插件


1
npm install --save socket.io

在index.js 中添加代码


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendfile('index.html');
});

io.on('connection', function(socket){
  console.log('a user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

在index.html中添加代码


1
2
3
4
<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

这样就能看到用户链接信息了

将index.js改成


1
2
3
4
5
6
io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});

这样就能看到用户退出信息了

在index.html中添加代码


1
2
3
4
5
6
7
8
9
10
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  var socket = io();
  $('form').submit(function(){
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
  });
</script>

1
2
3
4
5
6
io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
  });
  //服务器打印消息
});

完成发送给服务器数据

在index.html中添加代码


1
2
3
4
5
6
7
8
9
10
11
<script>
  var socket = io();
  $('form').submit(function(){
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
  });
  socket.on('chat message', function(msg){
    $('#messages').append($('<li>').text(msg));
  });
</script>

1
2
3
4
5
io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

完成服务器给前端返回数据

评论和共享

  • 第 1 页 共 1 页
作者的图片

Archie Shi

Nothing to say


Front-End Development Engineer