运行JavaScipt代码

JavaScript是目前世界上最流行的编程语言之一,它也是前端开发最重要的基础语言。大前端时代,JavaScript可以做前端的网页、小程序,还可以做后端(Nodejs)、可以做安卓、iOS开发,也可以做桌面应用的开发等等。

注意:JavaScript所包含的内容非常之多,即使是JavaScript最有名的红皮书《JavaScript高级程序设计》和犀牛书《JavaScript权威指南》,它们有700页和1000页之厚,也并不能把JavaScript里面的内容都包含进去。学习JavaScript千万不能死记,一定要动手实战,而且要善于查技术文档。这两本书内容过时比较严重,而技术文档却永远走在前沿。

编辑器与工具

编辑器Visual Studio Code,微软开源的编辑器,自带汉化,和我们以往的学习保持一致
辞典工具MDN web技术文档,JavaScript要学会如何查辞典,一定要常备在手,遇到问题要常常查;通过辞典,我们可以学习得更加深入和系统。
Chrome浏览器的开发者工具:下载安装完Chrome浏览器之后,打开一个网页,鼠标右键可以看到”审查元素”(MacBook 为”检查”),我们就可以打开Chrome的DevTools也就是开发者工具。

三剑客的重要性:编辑器让你勤于动手,实战才是学习技术的王道;技术文档让你学习更系统更深入,掌握得更专业更规范;Chrome开发者工具是前端必备神器,既然是神器,怎么强调它的重要性都不过分。

新建一个项目文件结构

新建hackwork-js的文件夹,然后使用VS Code打开,并在hackwork-js文件夹下建一个完整的项目文件结构:

  • 新建文件,文件名为“index.html”;
  • 新建名为”css”的文件夹,并在css文件夹下面新建文件,文件名为“style.css”;
  • 新建名为”js”的文件夹,并在js文件夹下面新建文件,文件名为“main.js”;
  • 新建名为”img”的文件夹,用于存放图片资源
  • 新建名为”components”的文件夹,用于存放组件资源;

引入JavaScript

JavaScript在一般情况下需要寄生于html文件里,使用VS Code在index.html输入以下代码:

然后使用浏览器打开index.html即可执行html文件和JavaScript。

  • 放在body标签内的JavaScipt代码需要放在<script></script>标签里;
  • document.write()可以直接把文本字符串写入到HTML文档流里;

我们推荐大家把<script></script>里面的代码独立成一个js文件引入到html文件中,也就是在main.js文件里面输入:

把index.html的代码修改成(注意js文件是在body标签的最底部,以后添加代码要在js文件的上面添加)

后面章节的JavaScript代码也都会写在main.js文件里面。JavaScript是非常容易看得到结果的,所以大家一定要实战,切忌只看。

Web控制台Console

大家使用Chrome浏览器打开百度首页,然后在网页空白处右键”审查元素”(MacBook 为”检查”),就可以打开开发者工具,点击菜单栏的Console标签页,大家看到了什么?这个是怎么实现的呢?我们在main.js文件夹里输入以下代码(清空之前写的即可):

我们刷新index.html的页面,在网页空白处右键打开Chrome开发者工具,也可以看到控制台显示了内容。

console.log()不仅可以输出这些有意思的内容,它还是JavaScript调试代码和查看bug极为重要的工具。在后面我们会经常使用到它。

大家可以点击开发者右上角的三个圆点,在Dock Side处,把界面调整成上下分栏结构,方便一边查看网页,一看查看开发者工具的控制台等信息。

控制台除了可以查看代码调试信息以外,还可以直接执行JavaScipt代码。比如我们直接在控制台的>处输入:

大家可以看看网页有什么变化~当然我们还是推荐大家先在main.js里输入代码。

JavaScript弹窗

alert弹出警告对话框

window.alert(),显示一个警告对话框,上面显示有指定的文本内容以及一个”确定”按钮。

注意alert里面的引号的不同,以及后面的分号。字符串可以是引号中的任意文本。您可以使用单引号或双引号

还有window.prompt()以及window.confirm()两种弹窗方式,前者需要用户输入信息,后者有需要用户点击确定和取消按钮,不过这两种方式由于用户体验太差不建议大家过多使用,而window.confirm()也被大多数浏览器给屏蔽了。

变量与赋值

JavaScript可以使用let语句声明变量,使用等号=可以给变量赋值,等号=左侧为变量名,右侧为给该变量赋的值,变量的值可以是任何数据类型

大家可以把代码输入到main.js里,然后打开index.html,在index.html页面的开发者工具的控制台查看代码执行效果。

上面有非常多的计算机名词,大家学习时要结合实战来理解这些名词,而不是陷入到理论记忆当中。

现在市面上流行的大部分教程都是JavaScript比较老的版本,而新版本现在已经在大公司普及开来。在旧版本里,会经常看到声明变量用的是var语句,现在var语句已经被let语句取代,大家请知悉。

数据类型

在前面我们已经了解到我们可以把任何数据类型赋值给一个变量,那JavaScript有哪些常见的数据类型呢?我们该如何判断这些数据是什么类型呢?

typeof 可以返回数据类型,我们来看一下我们之前定义的变量都是什么数据类型:

JavaScript的数据类型undefined(未定义的变量)、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)还有Symbol,大家以后都会接触到。

字符串的拼接与模板字符串

要将多个字符串连接起来,可以使用加号+来用作字符串的拼接(不能像PHP语言一样直接把变量和字符串写在一起),比如:

如果变量比较多,是不是很麻烦?我们还可以使用模板字符串,模板字符串使用反引号来表示。要在模板字符串中嵌入变量,需要将变量名写在${}之中,比如上面的代码可以写成:

常量

如果是声明一个常量,则是使用const语句。比如开发网页的时候,我们会确定网站的色系、颜色等,使用const声明,以后直接调用这个常量,这样就不用记那么多复杂的参数,以后想全网改样式,直接改const的内容即可。

常量名可以全部大写来突出,也可以某个单词的首字母大写,当然这不是硬件规则,主要是为了编程的时候方便

字符串的操作

前面我们已经知道字符串是JavaScript的数据类型之一,那我们可以怎么来操作字符串呢?下面我们就来结合MDN技术文档来学习。MDN文档是前端最为依赖的技术文档,我们要像查词典一样来学习如何使用它。

技术文档:MDN技术文档之JavaScript标准库之String

首先我们在main.js里输入以下代码,然后执行,在Console控制台查看效果:

然后打开技术文档,在技术文档左侧菜单的属性方法里,找到操作字符串用了哪些属性和方法,通过翻阅技术文档既加深对字符串的每个操作的理解,也知道该如何查阅技术文档。

字符串怎么有这么多属性和方法?多就对了,正是因为多,所以我们不能用传统的死记硬背来学习技术。

技术文档怎么有这么多新词汇我见都没有见过,完全看不懂?你不需要全部都懂,就像我们不需要懂词典里的所有单词和语法一样。即使是GRE满分高手也不能认全所有单词,而通常6级单词就已经够用了,技术也是一样的道理。

Math对象

Math是一个内置对象, 它具有数学常数和函数的属性和方法,但它不是一个函数对象。

技术文档: Math对象MDN文档

首先我们把下面代码输入到main.js然后打开index.html执行,在Chrome的console控制台根据得到的结果来弄清楚每个函数的意思。

我们打开技术文档,在左侧菜单找一下Math对象的属性有哪些,Math对象的方法又有哪些?大致感受一下属性和方法到底是什么意思。

注意,在别的开发语言里面,我们想获取一个数的绝对值可以直接调用abs(x)函数即可,而JavaScript却是Math.abs(x),这是因为前面说的Math不是函数(函数对象),而是一个对象。

Data对象

Date 对象用于处理日期和时间。时间有年、月、日、星期、小时、分钟、秒、毫秒以及时区的概念,因此Date对象属性和方法也显得比较多。

技术文档:Date对象MDN文档

控制台进阶

控制台处理数学运算

JavaScript的算数运算符和我们常见的数学运算符没有太大区别,+加、-减、乘*、除/、指数**,我们可以打开任意网页,右键开发者工具,在控制台里面逐行输入以下代码:

使用控制台作为计算器是不是很方便?

处理变量以及调用函数

我们可以把之前写的代码在控制台里进行输出,控制台可以不需要console.log()也可以输出结果。

这个undefined是console.log()这个函数的返回值,每个函数都有返回值,如果函数没有提供返回值,会返回 undefined。

注意在控制台里声明过的变量声明之后,不能再声明,否则会出现Identifier ‘x’ has already been declared,不过每个页面的控制台相互是没有影响的。

控制台和编辑器内置了JavaScript所有的对象、属性与方法,大大方便了我们书写JavaScript的代码。之后我们也会经常使用到控制台。

本节任务

  1. 搭建项目文件结构,知道如何引入js文件;
  2. 了解开发者工具的控制台,并学会在控制台里执行js代码,调试js文件;
  3. 学会使用let 声明变量,使用const声明常量,了解如何赋值,以及查看数据类型;
  4. 掌握字符串的操作以及模板字符串;
  5. 结合文档了解Math对象和Date对象;