Basic FrontEnd

4/15/2019 - 8:19 PM

<html>

<head>
    <script type="text/javascript">
        // helper函数
        function validate_required(field, alerttxt) {
            with(field) {
                if (value == null || value == "") {
                    alert(alerttxt);
                    return false
                } else {
                    return true
                }
            }
        }
        // 被注册在 onsubmit 中
        function validate_form(thisform) {
            with(thisform) {
                if (validate_required(email, "Email must be filled out!") == false) {
                    email.focus();
                    return false
                }
            }
        }
    </script>
</head>

<body>
    <form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
        Email: <input type="text" name="email" size="30">
        <input type="submit" value="Submit">
    </form>
</body>

</html>

clickevent.js

<!-- 当用户在 <h1> 元素上点击时，会改变其内容 -->
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>


<!-- 从事件处理器调用一个函数 -->
<!DOCTYPE html>
<html>

<head>
    <script>
        function changetext(id) {
            id.innerHTML = "谢谢!";
        }
    </script>
</head>

<body>
    <h1 onclick="changetext(this)">请点击该文本</h1>
</body>

</html>


<!-- 使用 HTML DOM 来分配事件 -->
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>


<!-- onload 和 onunload 事件 -->
<body onload="checkCookies()">

changestyle.js

<h1 id="id1">My Heading 1</h1>

<button type="button" onclick="document.getElementById('id1').style.color='red'">
点击这里
</button>

date.js

// 为日期对象设置了一个特定的日期(2008 年 8 月 9 日) ：
var myDate = new Date()
myDate.setFullYear(2008, 7, 9)
// 注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。

// 将日期对象设置为 5 天后的日期：
var myDate=new Date()
myDate.setDate(myDate.getDate()+5)

// 日期比较
var myDate = new Date();
myDate.setFullYear(2008, 8, 9);

var today = new Date();

if (myDate > today) {
    alert("Today is before 9th August 2008");
} else {
    alert("Today is after 9th August 2008");
}

arrays.js

var mycars=new Array()
//使用一个整数自变量来控制数组的容量
var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"


// 直接初始化
var mycars=new Array("Saab","Volvo","BMW")

Regexp.js

// 新建
// 定义了名为 patt1 的 RegExp 对象，其pattern是 "e"：
var patt1 = new RegExp("e");

// test() 方法检索字符串中的指定值。返回值是 true 或 false。
patt1.test("The best things in life are free")

// exec() 方法检索字符串中的指定值。 返回值是被找到的值。 如果没有发现匹配， 则返回 null。
patt1.exec("The best things in life are free")

// 如果需要找到所有某个字符的所有存在，则可以使用 "g" 参数 ("global")。
// 如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外，返回的数组还含有两个对象属性。index 属性声明的是匹配文本的起始字符在 stringObject 中的位置，input 属性声明的是对 stringObject 的引用。
// 找到第一个 "e"，并存储其位置
// 如果再次运行 exec() ，则从存储的位置开始检索，并找到下一个 "e"，并存储其位置
var patt1 = new RegExp("e", "g");
do {
    result = patt1.exec("The best things in life are free");
    document.write(result);
}
while (result != null)
// 由于这个字符串中 6 个 "e" 字母，代码的输出将是：
eeeeeenull

// compile()
var patt1 = new RegExp("e");
document.write(patt1.test("The best things in life are free"));
// 改变pattern为 “d”
patt1.compile("d");

node execute.js

// server
node main.js Server running at http://127.0.0.1:8888

// npm
npm list -g // 查看所有全局安装的模块
npm update express // 更新模块
npm search express // 搜索模块∑

event.js

// 引入 events 模块
var events = require('events');
// 创建 eventEmitter 对象
var eventEmitter = new events.EventEmitter();

// 创建事件处理程序
var connectHandler = function connected() {
  console.log('连接成功。');

  // 触发 data_received 事件
  eventEmitter.emit('data_received');
}

// 绑定 connection 事件处理程序
eventEmitter.on('connection', connectHandler);

// 使用匿名函数绑定 data_received 事件
eventEmitter.on('data_received', function () {
  console.log('数据接收成功。');
});

// 触发 connection 事件
eventEmitter.emit('connection');

console.log("程序执行完毕。");

mysql.js

var mysql = require('mysql');
var config = require('../config/default');
var md5 = require('md5');


var pool = mysql.createPool({
    host: config.database.HOST,
    user: config.database.USERNAME,
    password: config.database.PASSWORD,
    database: config.database.DATABASE
});


let query = (sql, values) => new Promise((resolve, reject) => {

    pool.getConnection((err, connection) => {
        if (err) {
            reject(err);
        } else {
            connection.query(sql, values, (err, rows) => {
                if (err) {
                    reject(err);
                } else {
                    resolve(rows);
                }
                connection.release();
            });
        }
    });
});


let toLogin = (name) => {
    var sql = `select password from user where uname = ${name} or email = ${name}`;
    return query(sql);
};

let toRegister = (name, password, email) => {
    password = md5(password + 'asd&$BH&*');

    var sql = `insert into user(uname,password,email) value(${name},${password},${email})`;
    return query(sql);

};
module.exports = {
    toLogin,
    toRegister
};

create new html element.js

<div id="div1">
  <p id="p1">这是一个段落</p>
  <p id="p2">这是另一个段落</p>
</div>

<script>
  // 这段代码创建新的 <p> 元素：
  var para = document.createElement("p");
  // 如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
  var node = document.createTextNode("这是新段落。");
  // 然后您必须向 <p> 元素追加这个文本节点：
  para.appendChild(node);

  // 这段代码找到一个已有的元素：
  var element = document.getElementById("div1");
  // 这段代码向这个已有的元素追加新元素：
  element.appendChild(para);
</script>

buffer.md

Rendered
Source

创建缓冲区

// 创建一个长度为 10、且用 0 填充的 Buffer。
const buf1 = Buffer.alloc(10);

// 创建一个长度为 10、且用 0x1 填充的 Buffer。
const buf2 = Buffer.alloc(10, 1);

// 创建一个长度为 10、且未初始化的 Buffer。
// 这个方法比调用 Buffer.alloc() 更快，
// 但返回的 Buffer 实例可能包含旧数据，
// 因此需要使用 fill() 或 write() 重写。
const buf3 = Buffer.allocUnsafe(10);

// 创建一个包含 [0x1, 0x2, 0x3] 的 Buffer。
const buf4 = Buffer.from([1, 2, 3]);

// 创建一个包含 UTF-8 字节 [0x74, 0xc3, 0xa9, 0x73, 0x74] 的 Buffer。
const buf5 = Buffer.from('tést');

// 创建一个包含 Latin-1 字节 [0x74, 0xe9, 0x73, 0x74] 的 Buffer。
const buf6 = Buffer.from('tést', 'latin1');

写入缓冲区

buf = Buffer.alloc(256);
len = buf.write('www.runoob.com');

从缓冲区读取数据

buf = Buffer.alloc(26);
for (var i = 0; i < 26; i++) {
  buf[i] = i + 97;
}
console.log(buf.toString('ascii')); // 输出: abcdefghijklmnopqrstuvwxyz
console.log(buf.toString('ascii', 0, 5)); // 输出: abcde
console.log(buf.toString('utf8', 0, 5)); // 输出: abcde
console.log(buf.toString(undefined, 0, 5)); // 使用 'utf8' 编码, 并输出: abcde

缓冲区合并

var buffer1 = Buffer.from(('菜鸟教程'));
var buffer2 = Buffer.from(('www.runoob.com'));
var buffer3 = Buffer.concat([buffer1, buffer2]); // buffer3 内容: 菜鸟教程www.runoob.com

拷贝缓冲区

var buf1 = Buffer.from('abcdefghijkl');
var buf2 = Buffer.from('RUNOOB');

//将 buf2 插入到 buf1 指定位置上
buf2.copy(buf1, 2); //abRUNOOBijkl

event.md

Rendered
Source

多事件监听

var events = require('events');
// 新建事件
var emitter = new events.EventEmitter();

// 事件绑定
emitter.on('someEvent', function (arg1, arg2) {
  console.log('listener1', arg1, arg2);
});
emitter.on('someEvent', function (arg1, arg2) {
  console.log('listener2', arg1, arg2);
});

// 事件触发
emitter.emit('someEvent', 'arg1 参数', 'arg2 参数');

执行以上代码，运行的结果如下：

$ node event.js
listener1 arg1 参数 arg2 参数
listener2 arg1 参数 arg2 参数

事件绑定

var events = require('events');
var eventEmitter = new events.EventEmitter();

// 监听器 #1
var listener1 = function listener1() {
   console.log('监听器 listener1 执行。');
}

// 监听器 #2
var listener2 = function listener2() {
  console.log('监听器 listener2 执行。');
}

// 绑定 connection 事件，处理函数为 listener1
eventEmitter.addListener('connection', listener1);

// 绑定 connection 事件，处理函数为 listener2
eventEmitter.on('connection', listener2);

var eventListeners = eventEmitter.listenerCount('connection');
console.log(eventListeners + " 个监听器监听连接事件。");

// 处理 connection 事件
eventEmitter.emit('connection');

// 移除监绑定的 listener1 函数
eventEmitter.removeListener('connection', listener1);
console.log("listener1 不再受监听。");

// 触发连接事件
eventEmitter.emit('connection');

eventListeners = eventEmitter.listenerCount('connection');
console.log(eventListeners + " 个监听器监听连接事件。");

console.log("程序执行完毕。");

以上代码，执行结果如下所示：

$ node main.js
2 个监听器监听连接事件。
监听器 listener1 执行。
监听器 listener2 执行。
listener1 不再受监听。
监听器 listener2 执行。
1 个监听器监听连接事件。
程序执行完毕。
```**-

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Basic FrontEnd

创建缓冲区

写入缓冲区

从缓冲区读取数据

缓冲区合并

拷贝缓冲区

多事件监听

事件绑定