首先恭喜大家来到Javascript的部分，这说明你已经完成前端工程师的近一半课程了，剩下的这部分，是一门真正的编程语言。

学习一门新的语言看起来可能很难，但并非如此，虽然它看起来比css更复杂，但只要领悟了它的语法，就会发现自己又掌握了一项超级强大的web开发工具。

说到底，代码其实都是思想和概念的表现而已。

而且大家在学习的过程中如果记不住这些语法关键字也没什么关系。

事实上没多少人能把一门语言的所有语法关节都记住，如果有拿不准的地方，直接谷歌。

因此不要背上任何心理负担，认认真真学习编程背后的思路和原则就好了。

主讲人介绍

沁修，葡萄藤技术总监

项目经验丰富，擅长H5移动项目开发。

专注技术选型、底层开发、最佳代码实践规范总结与推广。

准备工作

从html+css过渡到写JS不需要添加任何软件，依旧使用你的编辑器IDE以及一个浏览器就足够了。

用JS写的脚本代码通常需要通过html文档才能执行，有两种方式可以做到这一点。

第一种是JS代码放到

...

建议大家在写代码的时候养成良好的习惯，没有特殊需求的情况下都使用第二种方式。

这样的习惯会在以后代码量变大后逐渐感受到这样的好处。

不过我们在讲课的时候可能会用第一种方式，这是为了方便让大家可以更直观的看到所有代码。

一个简单的例子让页面互动起来

在没有加入JS代码之前的网页，无论做得再怎么酷炫，但始终是少了与用户的交互。

幸好我们有JS可以帮忙完成这一个有趣的事情：

这段代码大家可能看不懂，但没有关系我们可以大体的体会一下。

页面的功能非常简单：

当页面加载完毕后，调出一个对话框供用户输入一串字符串，并且根据用户输入的内容进行判断，展示相应内容到页面上。

这样就实现了一个最简单的互动的欢迎页面，JS就是这么简单又有趣儿。

接下来我们就要进入语法部分，详细学习这门语言的基础语法，尝试完成一些有趣的功能。

语法部分

在语法部分，我们可能不会罗列出JS基础语法的每一个部分，需要的同学请自行查看文档。

我们只会将最主要最需要的部分捋一遍，剩下的知识点还是需要大家下来自己去练习去看。

1、语句

2、变量

3、数据类型

4、条件语句

5、循环语句

6、函数

7、对象

1.语句

JS编写出来的脚本和其他程序一样，都是由一系列指令构成的，这些指令就叫做语句。

只有按照正确的语法编写出来的语句才能够正确的执行。

就如同英语的语法是：

第一个字母以大写开始，以一个句号结尾。

而JS的良好的语法习惯则是，把每条语句放在不同的行上，以分号结尾。

这样代码容易阅读，并且不会发生代码压缩后的未知错误：

statement one;

statement two;

…

2.变量

当页面还打开着的时候，也就是页面还活着的时候，它的很多内容存在一个生命周期。

比如最开始看到那个例子里，用户在对话框里输入的内容，如果只使用一次也就罢了，用过就可以释放掉忘掉。

但问题是很有可能要多次使用，那就需要一个容器来存储它的值。

还比如存在一个数字，我们会在这个数字上反复加减计算，这就意味着，它需要放在一个容器里，便于我们反复调用。

而变量就是存储器里有独一无二名字的存储位置，创建变量需要使用关键字var，并且为它命名：

var names；

这个时候变量是空的，它只是声明了它的存储位置和存储名称。

然后我们可以为这个变量赋值：

names = “Bob”;

但我们还有声明和赋值放在一起的最有效率的做法:

var names = “Bob”;

另外值得注意的是，变量名不允许包含空格或者是标点符号，美元符号$除外。

3.数据类型

有了变量之后，就可以存储各种各样的值，值又有不同的类型，比如字符串和数字类型。

其他有些强类型语言在声明变量的同时还要求声明变量的数据类型。

不过由于JS是弱类型语言，意味着我们在声明变量的时候并不需要明确指出来变量的数据类型，并且可以在任何阶段改变你变量的数据类型。

比如下面的写法就是完全合法的：

var years = “twenty”;

years = 20;

接下来我们认识一下数据类型

类型说明举例注意点字符串由零个到多个字符构成。必须放在一对引号之中，单双引号都可以。

var myName = ‘Bob’;

var myName = “Bob”;

1.引号不能一边用单引号一边用双引号

2.良好的编程习惯请固定用一种引号在代码中保持一致

数字可以是整数也可以是带小数点的数（浮点数）var age = 12;

var price = 12.34;

var temperature = -5.2;

布尔值布尔值还有两个可选值：true或falsevar eating = true;布尔值的false和字符串的值”false”是两码事数组用于存储一组值的接，集合中每一个值都是这个数组的元素

var friends = Array(3);

var friends = Array();

var friends = [“Max”, “Bob”, “Alex"];

var friends = [];

对象和数组类似的是也是存储一组值，但结构和方式有些不一样。是以键值对的方式来存储，每个键是对象的一个属性。

var user = Object();

user.name = “Bob”;

user.age = 12;

var user = {name: “Bob”, age: 12};

用对象来代替数组时意味着可以通过元素的名字而不是下标数字来引用它们，提高了可读性

4.条件语句

4.1 条件语句语法和用法

前面的语句都是比较简单的声明，但代码的真正威力还在于可以根据人们提供的各种条件作出决策：

A还是B，这是一个问题。

来看一下条件语句的基本语法：

if (condition) {

statements;

}

其中条件condition必须放在if后面的括号中，条件的值只能是一个布尔值。

而花括号中的语句，只有当条件的值是true的情况下才会执行。

因此下面这个例子中，花括号中的语句就永远不可能执行：

if (1 > 2) {

alert(“Oh, my god!");

}

条件语句还可以有一个子句else，用于在给定条件为假时执行：

if (1 > 2) {

alert(“Oh, my god!");

} else {

alert(“Good news”);

}

4.2 比较操作符

这里还能看到在条件语句的条件中，通常会用到一个或数个比较操作符，比如大于，小于，大于等于，小于等于以及等于之类。

程序在这里会默认进行比较计算，得到一个布尔值。

大于小于这类符号没什么好说的，有小学基础都可以理解，但值得注意的是等于和不等于操作符。

比较是否等于时用到的符号不是”=“而是”==“

如果在条件中使用单等号则会出现一些奇怪的错误，因为单等号是赋值，那么这个条件的结果将永远是true。

而不等于则是由一个感叹号和一个等号构成：!=

4.3 逻辑操作符

在条件语句的条件中，除了可以比较以外，还能将这些比较操作组合在一起。

比如一个数是否大于1并且小于10，这将需要两次比较操作，这两次比较操作就叫逻辑比较，具体做法是：

if (number > 1 && number < 10) {

alert(“right range!");

}

逻辑操作符操作的对象需要是布尔值，返回的值也是一个布尔值

名称符号说明逻辑与A&&B两个都为真，结果才为真逻辑或A||B只要有一个为真，结果就为真逻辑非!A布尔值取反

5.循环语句

条件语句已经很强大了，但是有一点不足是无碍完成重复性的操作。

比如我们有一个正整数，当它小于10时，打印出当前的值并自行加1，然后再判断是否小于10，如此反复判断，直到它大于等于10才停止执行。

5.1 while循环

while循环的语法和if非常相似，几乎完全一样，但区别是，只要给定条件的结果是true，那花括号中的代码就会反复执行下去：

while(condition) {

statements;

}

如果要完成刚刚描述的功能，可以看下面这个例子：

var num = 1;

while(num < 10) {

alert(num);

num++;

}

5.2 for循环

for循环和while循环是类似的，事实上它是while循环的一种变体，一种更紧凑的形式而已。

因此我们可以把上面那个例子改写为：

for (var i = 1; i < 10; i++) {

alert(i);

}

和循环有关的条件都包含在for语句的圆括号里：

第一个分号前的语句是初始化变量，第二个分号前的语句是限制条件，当它为真时才会进入for循环；

第二个分号后的语句是对循环后的表达式i求值，也就是递增i的值。

另外要指出来的是，for循环的变量初始化可以在外部执行，例如：

var i;

for (i = 1; i < 10; i++) {

alert(i);

}

总之for语句灵活性极大，是JS中最常用的一个语句之一。

6.函数

6.1 函数语法

函数是一个核心概念。

如果需要多次使用同一段代码，就可以把它们封装成一个函数，然后就可以在任何地方任何时候调用执行。

定义一个函数的语法是这样的：

function name(arguments) {

statements;

}

调用的时候直接使用函数名并在后面加上一对圆括号就可以执行了，并且可以反复多次调用执行。

function call() {

alert(“hello everyone!”);

}

call();

另外，函数还可以将不同的数据传递给它，它将使用这些数据去完成预定的操作。

这种传递给函数的数据叫做参数argument，调用的时候将参数放在圆括号中传入。

function call(user) {

alert(“hello " + user);

}

call(“Jim”);

函数还有一点非常有价值的点是，可以当做一个数据类型来使用，意味着它可以把函数的调用结果赋值给一个变量。

在下面这个例子中就是将计算结果通过return的方式返回回来，然后赋值给result

function call(user, num1, num2) {

alert("hello " + user);

return num1 + num2;

}

var result = call(“Jim”, 12, 23);

6.2 变量的作用域

变量可以是全局变量也可以是局部变量，这表明了它的作用域。

全局变量可以在代码的任意位置被引用，而局部变量只能存在于声明它的那个函数内部。

如果在函数内部用var关键字初始化变量，则被视为一个局部变量，只能存在于这个函数中。

相反这个变量就被视为一个全局变量。

如果代码里已经存在一个与之同名的全局变量，这个函数就会改变全局变量的值，比如：

var total = 10;

function sum(num) {

total = num + 123;

return total;

}

sum(50);

alert(total)

这样全局变量total的值就被影响而改变。

因此在定义函数的时候，记得要把它内部的变量全部明确地声明为局部变量。

7.对象

7.1 对象的定义和使用

对象在JS中是一种非常非常重要的数据类型。

前面我们有简单的讲到，对象其实存储的一组数据，包含在里面的数据可以通过点的语法来访问到。

它的创建通常有两种方式，第一种是用构造函数比如：

var car = new Object();

car.name = “dazhong”;

car.age = 2;

car.walk = function() {};

第二种是使用对象字面量来表示，这是一种很方便的形式，简化了创建过程：

var car = {

name: “dazhong”,

age: 12,

walk: function() {}

}

之后我们通过点的方式就可以轻松调用到car这个对象的属性和方法了

7.2 内建对象

除了自己定义的对象以外，其实JS还有一种预先就定义好的对象直接拿来就可以用的叫内建对象。

我们甚至都已经见过一些了，比如Array对象，然后可通过Array对象的length属性来获知数组长度信息。

还有比如Math对象的round方法可以把数字的小舍入味一个与之最接近的整数。

还有Date对象，有一些关于日期时间信息的方法，比如在创建实例的时候，可以自动的初始化当前时间。

等等诸如此类的功能，内建对象可以帮我们更快速简单地完成一些事情。

---------------------

作者：从零开始学前端

来源：CSDN