javascript光速入门

文章目录

运行环境
基础功能
函数和事件
数组
模块

JavaScript(后称js)是一门弱类型动态脚本语言，是各种前端框架的的万恶之源，在开始学习之前，缕清js和其他概念的关系是有必要的

和Java的关系；大致是周杰伦和周杰的关系。
和ECMAScript(ES)的关系：ES是为js制定的国际标准，二者差不多是胤禛和雍正的关系
和html的关系：html是内容，js是功能
和css的关系：css用于html的美化，js用于html的交互

运行环境

嵌入html运行

js代码可以直接嵌入html中使用，如下面的html文件，在浏览器中打开就会看到Hello World。

<!--在test.html文件中-->
<!DOCTYPE html>
<html>
<body>
<script>
document.write("<h1>Hello World</h1>");
</script>
</body>
</html>

而且html中可以嵌入任意多的js代码，

<!--在<html></html>中-->
<head>
<script>
function test1(){document.getElementById("demo").innerHTML="啊我变了";
}
</script>
</head>
<body><p id="demo">看好了</p>
<button type="button" onclick="test1()">点我点我</button>
</body>

如果js代码太多，不适合嵌入到页面中，则可以另建一个js文件，然后在<script>中声明文件位置

//此为js文件 func.js；js语言用//注释
function test1(){document.getElementById("demo").innerHTML="啊我变了";
}

<!--在<body></body>中-->
<script src="func.js"></script>

效果为

在命令行中运行

以edge浏览器为例，按下F12进入开发人员工具，点击控制台选项卡，可在其命令行中输入js语句

> console.log('test')
test
< undefined

当然，也可以在nodejs的命令行中运行。nodejs可在官网选择Windows Installer (.msi)下载，安装过程除了安装地址之外，一路Next。

安装完成之后在命令行中输入node --version，如果有反馈说明已经被添入环境变量。输入node后面不加变量则进入了交互式的命令行。

基础功能

变量声明

js是一门弱类型语言，故变量无需声明类型，具体表现在

> var x     //声明一个变量
undefined
> x = 5
> typeof(x)
'number'      //表示数值
> x = "hello" //字符串用""表示
> typeof(x)
'string'      //表示字符串

其中var表示这是一个变量。

ES6新增了两个关键字const和let，通过const创建的变量将是常量，声明之后其值不可更改

> const y = 1
> y = 2
//报错：Uncaught TypeError: Assignment to constant variable.

通过let创建的则是一个临时变量

var x = 5
{ var x = 6 }     //{}表示一个作用区间
console.log(x)    //输出为6
{ let x = 7 }
console.log(x)    //输出仍然是6

运算符

js中的运算符如下

类别
数值运算	`+, -, *, /, %`	加、减、乘、除、求余
数值自运算	`+=, -=， *=, /=, %=`	自增、自减、自乘、自除、自取余
数值自运算	`++, --`	自增1、自减1
逻辑	`&&,
比较	`>, >=, <=, <`	大于，大于等于，小于等于，小于
判等	`==, !=, ===, !==`	等于、不等于、绝对等于、不绝对等于

===表示绝对相等，表示值和类型均相等；!==表示值和类型至少有一个不相等。

> x = 3
> x == 3    //true
> x == "3"  //true
> x === "3" //false

流程控制

js的条件语句是通过if(){}else if(){}else{}来实现的；并支持switch(){...case:...break;default:...break;}的条件语句。

循环语句包括for和while循环。

无论循环和判断，代码块都须用{}包裹起来，但单行代码则不必。

x = 2;
for(var i=0; i<4; i++){if(i<x) console.log(i,"<",x);   //console.log表示打印else if(i==x) console.log(i,"=",x);else console.log(i,">",x);
}
/*输出为
0 < 2
1 < 2
2 = 2
3 > 2
*/

continue可跳过当前循环，break可中断当前循环

x = 1;
while(x++<20){if(x%2==0) continue;  //当x可被2整除时跳过循环if(x>8) break;        //当x>8时跳出循环console.log("x =",x);
}
console.log("x =",x);
/*输出为
x = 3
x = 5
x = 7
x = 9   //由于此时x>8, 所以跳出了循环
*/

函数和事件

函数

函数用function声明，且通过return返回

//定义一个阶乘函数
function fac(n){if(n>1) retrun n*fac(n-1);else return 1;
}

运行结果为

> fac(15)
1307674368000

匿名函数

函数也可以通过等号赋值的方式来定义

f = function(n){if(n>1) retrun n*f(n-1);else return 1;
};

其调用结果同样是

> fac(15)
1307674368000

根据经验，=两端的事物应该是完全等价的，也就是说，如果这个阶乘函数只用一次，那么可以不把函数赋给f而直接调用

> (function(n){... if(n>1) return n*arguments.callee(n-1);
... else return 1;})(15)
1307674368000

其中，arguments表示函数的参数，arguments.callee表示函数本身。

甚至可以这样

> var g = function(n){... if(n>1) return n*arguments.callee(n-1);
... else return 1}(15);
undefined
> console.log(g)
1307674368000

事件

js往往是为了html服务的，故而js的函数也往往要在html中运行。而html的元素中若绑定了js函数，则这个函数就是事件。

html中封装了各种对象，这里只介绍比较常见的4个

onclick：鼠标点击时触发
onmouseover：鼠标指针到指定元素上时发生
onmouseout：鼠标指针移开时发生
onkeydown：用户按下键盘按键是发生

<!--放在test.html文件的<body></body>中-->
<div style="background-color:green"onmouseover="jOnMouseOver()" onmouseout="jOnMouseOut()"><input onkeydown="jKeyDown()"></p><p id="pTest"></p><button onclick="jOnClick()">点我点我</button><script src="test.js"></script>
</div>

js代码为

//test.js
function jOnClick(){alert("你竟然敢点我");
}
function jOnMouseOver(){document.getElementById("pTest").style.visibility="visible";
}
function jOnMouseOut(){document.getElementById("pTest").style.visibility="hidden";
}
function jKeyDown(){var p = document.getElementById("pTest");p.innerHTML = window.event.keyCode;
}

效果为

其中getElementById表示在html中搜索Id为pTest的元素。

数组

js中的数组实则属于列表，即对数组中的值没有类型上的要求。

var x = [1, 'a', 3]
console.log(x[0])             //输出为1
console.log(x.indexOf('a'))   //输出为1，表示'a'的索引是1
console.log(x.length)         //输出为3，表示x的长度

对于数组这种数据结构，js提供了一种遍历方法，即for in

for(var xi in x)console.log(xi)
/*输出为
1
'a'
3
*/

模块

js中模块有多个标准，鉴于是光速入门，故只介绍CommonJS标准中的模块，也是nodejs遵循的模块规范。

在nodejs中，通过require来加载模块，如下例

var Math = require('Math')
console.log(Math.sin(Math.PI/3))  //输出为0.8660254037844386

可通过exports来将文件中的函数暴露出来，供其他人调用

function add(a,b){return a+b;
}
//下面将add导出为addTwoNumber
exports.addTwoNumber = add;

自定义模块在调用时需要添加路径，其调用结果为

var math = require("./math")
math.addTwoNumber(3,5)      //结果为8