五坨代码

@jimbo 2016-07-04T23:31:41.000000Z 字数 6011 阅读 727

1. 实时校验两次密码是否输入一致


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- 这段代码可以解决中文乱码问题 -->
        <script type="text/javascript">
            function check(event) {
                var password = document.getElementById("password").value;
                var passwordRe = document.getElementById("passwordRe").value;
                if (password == passwordRe) {
                    document.getElementById("passwordRe").style.backgroundColor = 'green';
                    document.getElementById("result").innerHTML = '密码正确';
                    document.getElementById("register").disable = true;
                    return true;
                } else {
                    document.getElementById("passwordRe").style.backgroundColor = 'red';
                    document.getElementById("result").innerHTML = '密码不一致';
                    document.getElementById("register").disable = false;
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <form method="post" action="http://127.0.0.1:8008/login.php">
        昵　　称：
        <input type="text" name="username"/>
        </br></br> <!-- 换行 一个br标签代表一个换行 -->
        密　　码：
        <input type="password" name="password" id = "password">
        </br></br>
        重复密码：
        <input type="password" name="passwordRe" id = "passwordRe" oninput="check(event)">
        <p id = "result"></p>
        </br></br>
        <button type="submit" id = "register">注册</button>
        </form>
    </body>
</html>

效果预览：

假如要是只要求提交的时候校验可以这样写：

<!-- 在button的onclick中check 修改了上面第7，33，36行代码 -->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- 这段代码可以解决中文乱码问题 -->
        <script type="text/javascript">
            function check() {
                var password = document.getElementById("password").value;
                var passwordRe = document.getElementById("passwordRe").value;
                if (password == passwordRe) {
                    document.getElementById("passwordRe").style.backgroundColor = 'green';
                    document.getElementById("result").innerHTML = '密码正确';
                    document.getElementById("register").disable = true;
                    return true;
                } else {
                    document.getElementById("passwordRe").style.backgroundColor = 'red';
                    document.getElementById("result").innerHTML = '密码不一致';
                    document.getElementById("register").disable = false;
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <form method="post" action="http://127.0.0.1:8008/login.php">
        昵　　称：
        <input type="text" name="username"/>
        </br></br> <!-- 换行 一个br标签代表一个换行 -->
        密　　码：
        <input type="password" name="password" id = "password">
        </br></br>
        重复密码：
        <input type="password" name="passwordRe" id = "passwordRe">
        <p id = "result"></p>
        </br></br>
        <button type="submit" id = "register" onclick="return check()">注册</button>
        </form>
    </body>
</html>

2. hello world

在浏览器中输入127.0.0.1:8080，回车后浏览器就会显示"hello lyr"。

var http = new require("http");// 创建一个http对象
http.createServer(function(request, response) {
    // 在这个函数内部编写要在网页上显示的内容
    // 这个是添加网页<head>标签的内容
    response.writeHead(200, {"Content-Type" : "text/plain"});
    // 这里是添加网页<body>标签的内容
    response.end("hello lyr");
}).listen(8080, "127.0.0.1"); // 这句话的意思是监听8080端口，访问地址是127.0.0.1

继承

c++中的继承是以class为单位的，但是node.js中的继承是以模块为单位的，但是其本质还是一样的。只要A继承了B，就可以拥有B中的属性和方法了。例如B中有一个name属性和一个sayHello的方法，只要A继承B后，A中也就有了name属性和sayHello方法。在node.js中，也是一样的，只是实现的方法不太一样而已。

node.js中要使用util.inherits(con, superCon);来实现。
结合书上的例子：

// 当前目录下一个叫做Person的模块
// 这段代码就是创建了一个Person类
// 这个类有一个属性name和一个方法say
function Person(name) {
    this.name = name;
    this.say = function (word) {
        console.log(word);
    }
}
module.exports = Person; // 对方暴漏Person方法

现在我们继承person，实现一个student类，增加学号属性和做作业方法，并且重写他的say方法。

// 当前目前下一个叫做Student的模块
var Person = require('./Person'); // "./"就代表了当前目录
var util = require("util"); // 获取util模块
function Student(name, number) {
    Person.call(this, name); // 调用Person的构造方法
    this.number = number; // 为Student添加number属性
    this.say = function(word) { // 重写父类的say方法
        console.log("我学习呢~别说话");
    }
}
util.inherits(Student, Person); // 实现继承
Student.prototype.doHomeWork = function() { // 增加方法学习
    console.log("我学习呢~");
}
module.exports = Student; // 对外暴露Student方法

// 调用Student类
var Student = require('./Student');
var stu = new Student("lyr", 201311010345);
console.log(stu.name+stu.number);

运行效果：

*如果想让你的模块返回一个类，必须如上那么赋值module.exports，不能多次赋值或者不赋值
如果对moudle.exports有疑惑点击这里

4.回调

var a = 520;
var b = 1;
function calc (a, b, callback) {
    var c = a + b;
    // 计算结束后停止五秒钟然后在执行
    var count = 0; // 记录时间差值
    var currentDate = new Date(); // 返回当前时间的毫秒数(以1970.1.1零时为起始点)
    while (count < 5000) { // 当两个时间差值大于5000时说明已经过了5000毫秒
        var now = new Date(); // 获取程序运行到此时的时间
        count = now - currentDate; // 计算两个时间点的差值
    }
    callback(c);
}
calc(a, b , function(result) {
                console.log("result=" + result);
            });// 这里*****会*****停下运行 直到五秒钟后才会继续执行
console.log("over~");

5. 判断是否是小数

<script>
    function isSmallNumber(str) {
        if (!isNaN(str)) {
        // isNaN()函数判断是否是非数值，当为数值型字符串的时候返回false，为非数值字符串的时候返回true
            if (str.match('.') != null) {
                // match函数去匹配字符串中是否有"."，有则返回"."，没有则返回null
                return ture;
            }
        } 
        return false;
    }
    var a = 123.1;
    var b = 521;
    document.write(isSmallNumber(a));
    document.write(isSmallNumber(b));
</script>

6. exports module.exports

Export和module.export的区别是export的属性和方法可以被module.exports代替。

exports 是指向的 module.exports 的引用

module.exports 初始值为一个空对象 {}，所以 exports 初始值也是 {}

require() 返回的是 module.exports 而不是 exports

7. meta标签的作用

HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。
元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
用法：标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。

8. C/S B/S

C/S （Client/Server）结构，即大家熟知的客户机和服务器结构。它是软件系统体系结构，通过它可以充分利用两端硬件环境的优势，将任务合理分配到Client端和Server端来实现，降低了系统的通讯开销。目前大多数应用软件系统都是Client/Server形式的两层结构，由于现在的软件应用系统正在向分布式的Web应用发展，Web和Client/Server 应用都可以进行同样的业务处理，应用不同的模块共享逻辑组件；因此，内部的和外部的用户都可以访问新的和现有的应用系统，通过现有应用系统中的逻辑可以扩展出新的应用系统。这也就是目前应用系统的发展方向。

B/S（Browser/Server）结构即浏览器和服务器结构。它是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户工作界面是通过WWW浏览器来实现，极少部分事务逻辑在前端（Browser）实现，但是主要事务逻辑在服务器端（Server）实现，形成所谓三层3-tier结构。这样就大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本（TCO）。以目前的技术看，局域网建立B/S结构的网络应用，并通过Internet/Intranet模式下数据库应用，相对易于把握、成本也是较低的。它是一次性到位的开发，能实现不同的人员，从不同的地点，以不同的接入方式（比如LAN, WAN, Internet/Intranet等）访问和操作共同的数据库；它能有效地保护数据平台和管理访问权限，服务器数据库也很安全。特别是在JAVA这样的跨平台语言出现之后，B/S架构管理软件更是方便、快捷、高效。

9. css的优势

优点：
1. 表现和内容相分离

提高搜索引擎对网页的索引效率.用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。
代码简洁，提高页面浏览速度
易于维护和改版

缺点：

缺点：
1. 杂乱的结构，可读性低
2. 只能对文本进行排版，而且HTML样式使用标准文本标识，不能创建一些特殊效果

10. 什么是模块

模块分为两类：原生模块和文件模块。原生模块即Node.js API提供的原生模块，原生模块在启动已经被加载。文件模块为动态加载模块，加载文件的工作主要是由原生模块module来实现和完成。

11. 引入css的方法

引入层叠样式表的方法包括：　　
1，外联式样式表　　
例：

<head> 　　
<link rel="stylesheet" href="/css/default.css"> 　　
</head>

2，内嵌样式表　　
例：

<head> 　　
<style type="text/css"> 　　
td{font:9pt;color:red} 
font105{font:10.5pt;color:blue}　　
</style> 　　
</head>

3，元素内定　

<div class="a" style="padding:10;float:left;">
　 </div>

4，导入样式表　

<head> 　　
<style type="text/css"> 
　　<!-- 　　@import url(css/home.css); --> 　　
</style> 
</head>

12. Js基于事件驱动执行过程

事件驱动编程是一种编程风格，由事件来决定程序的执行流程，事件由事件处理器或事件回调来处理，事件回调是当某个特定事件发生时被调用的函数。

HTML：HyperText Markup Language
CSS：Cascading Style Sheets