JavaScript入门（1）

Hello小可爱们，今天我们又要回到学习主题咯，前面学习了HTML和CSS的用法，今天我们就要为Web页面注入生命啦，那就是JavaScript，通过JavaScript我们可以让我们的页面动起来，这也是Web开发中的一座大山。

首先我们要了解一下什么是JavaScript，它在Web开发中的作用是什么，然后再去了解它是怎样工作的。JavaScript是一种可插入HTML的轻量级编程语言，并能够由现代浏览器所执行。Web前端的三座大山中，HTML定义了网页的内容，CSS描述了网页的样式，JavaScript则是定义了网页的行为。

为了更好的了解JavaScript的知识，我把JavaScript的知识大体总结成为了一下几个模块，这样子也是方便大家对JavaScript有一个整体的认识。（这个总结的也不是很全，但是最开始我们所需要了解的都在这里了，一步一步迈向更高峰嘛～）后面呢，我们也是按照模块来一一为大家分享～～一定要持续关注哟

我们今天就从JavaScript的创建聊起。后面对JavaScript简称为js，在HTML中，js脚本必须放在<script></script>之间，至于<script>标签对的位置就相对比较随意了，可以放在head中，body中，位置较为随意，保证被<script>包裹就好，因为这样浏览器才知道js从哪里开始哪里结束，要解析哪一部分语言。举个?

这个例子中，js被插入在了body里面，运行的时候会弹出框，写着“萌兔IT”，是不是很有意思呢～

与CSS相同，js也有着不同的引入方式，如上图则是在HTML中直接插入js语言，我们也可以将js语言单独放置在一个文件中，并引入HTML。这时候我们用到的还是<script>标签，<script src="mengtu.js"></script>即可实现将同一级文件夹下的mengtu.js引入html中。有小伙伴一定会奇怪，在不同地方引入js有什么区别呢，这里就涉及到了js的加载顺序问题，因为js是单线程的，所以当没有特殊处理时，会按照页面的引入顺序进行加载，如果前面的js加载时间过长，就会引发阻塞了（这里我们后面会讲到），因此引入js的位置也是很重要的！

下面要开始介绍详细的JS代码咯，准备好了吗？无论什么语言最开始要了解就是变量、数据类型、运算符和表达式了，今天我们就主要介绍这一部分。

1. 变量：大家还记得代数嘛？小学的那个，x=1；没错，这就是这个。JS的变量也是用来存放值和表达式的，但是表达式的命名也有一些限制，为了代码更容易阅读，最好起变量名时与具体情境相关，当然这不是硬性要求，硬性要求是以下几个：（1）变量必须以字母或$符号或_符号开头，变量名称是大小写敏感的。（2）JS的所有变量都是对象，当声明一个变量时，就创建了一个新的对象。

2. 数据类型：JS的数据类型可以分为两大类，即值类型和引用数据类型。按照我的理解来说，值类型就是简单的一个数据，一对一的一个数据关系，包括字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）和Symbol（ES6引入的新原始数据类型）；引用类型则是通过值类型组成的复杂数据结构，包括对象（Object）、数组（Array）和函数（Function）

这里有个注意的地方，null类型代表空值，代表一个空对象指针，使用typeof运算得到“object”（说人话就是还没有定义）；undefined当一个声明了一个变量未初始化时，就会得到undefined（说人话就是声明了，但是没有赋值）。

3. 运算符：JS中运算符主要分为算术运算符、赋值运算符、比较运算符、逻辑运算符、条件运算符、其它运算符。

（1）算术运算符主要用来进行计算，包括加法（+）、减法（-）、乘法（*）、除法（/）、取余（%）、自增（++）、自减（--）等；

（2）赋值运算符则用于给JS变量赋值，如x=y, x+=y, x-=y, x*=y, x/=y, x%=y等；一个特殊的地方是，当“+”用于字符串中时，则是将两个字符串进行拼接；当“+”前后是不同类型的时候，输出结果有时也会出乎人的意料，当字符串与数字相加的时候浏览器会将数字自动转化为字符串类型，并输出字符串。

（3）比较运算符：通过比较运算符测试得出true或false

等于（==）、绝对等于（===）这大概是JS独有的吧，这个保证数据不会被自动转换格式而得出相等的结论、不等于（！=）、不绝对等于（!==）、大于（>)、小于（<）、大于等于（>=）、小于等于（<=）

（4）逻辑运算符：用于测定变量或值之间的逻辑：和（&&）、或（||）、非（！）

（5）条件运算符：类似于Java中的三目运算：

variablename=(condition)?value1:value2

（6）typeof运算符：用来判断变量类型，但是不能明确的判断出对象是什么对象，问题来了怎么判断对象是不是数组，用的是instanceof

（7）delete运算符：删除对象属性或数组元素

（8）void运算符：出现在操作数之前，忽略计算结果并返回undefined

4. 表达式：表达式也可以理解为包含运算符，表达式分为很多类型：

（1）原始表达式：包含直接量、常量、关键字和变量

（2）对象和数组的初始表达式：var arr = [];

（3）函数定义表达式：var func = function(){...}

（4）属性访问表达式：运算得到一个对象属性或一个数组元素的值：expression.identifier; expression[expression]

（5）调用表达式：f(0), a.sort()

（6）对象创建表达式：创建一个对象并调用一个函数初始化新对象的属性。new Object()

（7）运算符表达式：如算术表达式、关系表达式、逻辑表达式、赋值表达式等

今天就写到这里吧，JS是个大工程还要慢慢吸收。另外，CSS也是个水很深的东西，但是考虑到首先是能够快速上手开发项目，我们前面讲到的也只是怎样简单使用，它还有更加强大的作用，还有待我们后面慢慢解锁。另外不知道有没有细心的小伙伴们发现我们的公众号变样子了，是的，因为小编发福利了，为大家提供了免费的书籍资源。后台回复html和css有惊喜哟，后面我们也会逐渐发出更多书籍的～～喜欢兔妞的文章请点击好看让更多人看到哟～～么么哒！