javascript 基础

好久没更新啦~最近我打算更新一波关于 js 的博客，可能会与 sql 同时更新...

js 是一种动态型语言（和 Python 一样）一般的浏览器都带有 js 的解释器，
js 可以做什么？

修改 HTML 文档
与服务器通信（有没有让你想起 Ajax）
储存数据（创建本地数据源以改善性能）
之后我们再详细的说说这三个方面。

我们先来看一下如何在html里面引入 js 脚本。我们一共有三种方式，分别是内联式，嵌入式，外联式。

下面是一个小李子：

index.html
<!DOCTYPE html>
<html>
<head>
    <title>javascript ES5\ES6</title>
    <!-- 外联式 js脚本的引入 -->
    <script type="text/javascript" src="./script.js"></script>
        <!-- 嵌入式式 js脚本的引入 -->
    <script type="text/javascript"> 
        console.info('你好！')
    </script>   
</head>
<body>
        <!-- 内联式 js脚本的引入 -->
    <button onclick="javascript:alert('输出的内容')">点击</button>
    <!-- 也可以写成： -->
    <button onclick="test()">点击22</button>
</body>
</html>

function test(){
    alert('你点击了我')
}

如果 js 代码不多的话我们也可以直接加入到 <script> 标签下面。
还有就是我们可以为某个标签绑定 js 事件。比如在第二个按钮上，我们绑定了一个鼠标点击事件。
运行结果为：

我们可以在HTML文档的任何地方加入javaScript 文件，但是一般来说，我们都是在文档的末尾加入 js 文件，当整个 HTML 文档全部渲染完成后，再使用 JS 对其进行操作。这是一种渐进增强式的开发方法。

渐进增强式开发模型包括三个层，分别是：结构层，表现层，行为层。因为，人们在访问网站时，主要是为了在网站上获取内容，所以内容最重要，也就是我们的结构层。事实上，在渐进增强式开发模型中的这三个层并不是并列关系，而是后者依赖前者，换句话说我们移除后面的不会损失网站最为重要的部分。

所以，JavaScript 所做的大部分工作，就是在行为层上改善用户体验，拓展网站的现有功能，为它锦上添花。

下面我们先来看一些 js 的基础知识：

数据类型

js 中常见的数据类型为：

数字：整数、浮点数
字符串：支持单引号、双引号
布尔型：true、false
null型：null
undefined 型：undefined
常量：常量一旦赋值就不可以修改的量。使用 const 关键字。
数组：一组数据的列表

变量的声明：

var foo1 = undefind;
var foo2 = null;
foo3 = 'zhangsan'
const PI = 3.1415;
var arr = [];
var arr = array(14,5,2)

变量作用范围：

js 默认情况下，变量以函数为范围。
变量加 var 与不加 var 的区别：前者是局部变量，后者是全局变量；

如果我们想将变量输出到终端查看可以使用语句：console.info(foo2);

判断 a 的数据类型：

console.info(typeof a)

在 js 中一切皆对象，例如我们可以访问字符串的 length 属性获取字符串的长度：

var name = 'asddf'
console.info(name.length)

表达式

三目表达式：和 C++ 中的一样

max1 = （a > b ? a : b）> c ? (a > b ? a: b): c;
console.info(max1)

js 支持 a++ 与 ++a 表达式：a++ 先使用再加一
++a先加一再使用

函数

在 js 中，函数是经由某个事件所触发的一段代码。这个事件可以是页面加载，也可以是某个用户发起的操作，比如鼠标的点击。

函数的定义感觉所有语言都差不多，

function sum(a , b){
   return a + b;
}
document.write(sum(1,3))

document.write可以直接将结果写入到 html 中，所以可以直接在网页上显示，在后面我们会发现，不光可以写一个变量，甚至还可以写一些标签等等，

我们可以将函数本身赋值给别人，

b = sum;
document.write(b(1,3))

可以实现匿名函数：(可以直接调用，也可以赋值给别人，进行引用调用)

(function(a,b){
    return a + b
})()

var ss = function(a,b){
    return a + b
}
document.write(ss(3, 4))

可以实现函数的闭包：

function outter(){
    var a = 'outter'

    function inner(){
        // var a = 'inner'
        console.info(a)
    }
    console.info('--------' + a)
    return inner
}
console.info(outter()())

正则表达式

js 同样也支持正则表达式，我们先了解 正则表达式.test(字符串) 函数就可以：

var reg = /^1\d{10}$/
console.info(reg.test('18222222222'))   
//返回 True 或 False

var name = 'zhangsan'
var nameREG = /ZHANG/i  // i可以忽略大小写
console.info(nameREG.test(name))

对了我还要插播一嘴箭头函数（ES6 标准新增），例如：x => x * x 等价于：

function (x) {
    return x * x;
}

感觉有点像 python 中的 lambda 函数呀。

程序结构

程序结构包括：顺序、循环、分支。

判断：

var a = 10;
var b = 20;
var c = 30;
var max = -Infinity;
if (a > b){
    max = a;
} else {
    max = b;
}
if (max < c){
    max = c;
}
console.info(max)

switch-case 语句：
因为匹配上之后会把后面的情况都执行所以一般会加上 break（这个和 c 里面一样）。

switch(a){
    case 1:
        console.info('1111');
        break;
    case 2:
        console.info('2222');
        break;
    default:
        console.info('default');
        break;
}

循环
js 支持常见的 for 循环也支持 for in 结构：

var arr = [1,2,3,4,5,6,7]
for (i in arr){
    console.info(arr[i])
}

for (var i = 0;i < arr.length; i++){
    console.info(arr[i])
}

while 循环与 do-while 循环

//while 循环
while(i < arr.length){
    console.info(arr[i])
    i ++;
}

// do ... while 循环，循环体至少会执行一遍。
i = 0;
do{
    console.info(arr[i])
    i++;
}while(i < arr.length);

break 与 continue：

for (var i = 0; i < 10; i ++){
    if (i % 2 == 1){
        continue
    }
    console.info(i)
}

我们下面看一个例子：打印乘法表

document.write('<div></div>')
for(var i = 1; i <= 9; i++){
    for(var j = 1; j <= i; j++){
        document.write(j + ' * ' + i + " = " + (i * j) + '&nbsp;&nbsp;&nbsp;&nbsp;')
    }
    document.write('<br />')
}

输出结果为：

各位看官，上面这个例子厉害了，我们使用 js 插入了一个 <div> 标签，厉害的地方在于我们使用函数操作了页面显示效果，这也是当初 js 被设计出来的原因。我们的网页就从静态变成了动态网页。（当然实际会比这复杂一些，不过原理是这样）。具体我们后面再说。我们接下来看看 js 中类的定义：

面向对象

emmm好吧看起来这个地方有点多，我们下一篇文章再见！