1.JavaScript快速入门

1.1 JavaScript概述

1.1.1 身边的JavaScript

  在平时我们浏览网页的时候，经常会见到其他的网站有一些动态的效果，例如轮播图、选项卡和一些好看的特效，还有在登录或者注册的时候，会检查我们的用户名或密码是否符合规范，在JavaScript中叫做表单验证，这些功能实现都要归功于JavaScript，学完本门课程，我们可以制作表单验证、实现轮播图、实现选项卡、制作动态效果页面。

1.1.2 什么是JavaScript？

  JavaScript是前端开发领域中一种强大的编程语言，它的作用主要终于开发交互式的Web页面，让网页的互动性更强，提升用户的体验，在某种意义上讲还可以减少服务器的一些压力。
  一个完整的网站是由多个网页组成，而制作一个网页所涉及到的技术有HTML、CSS、JavaScript。前两项我们不做过多的介绍，JavaScript代表的行为，是网页的交互逻辑，很大程度的提升了用户的体验程度。
  JavaScript是内嵌于HTML中，然后由浏览器的内置JavaScript引擎直接编译，把一个原本只用来显示的页面，转变成可以与用户交互的页面，这也是JavaScript的一大特点。

1.1.3 JavaScript的由来

  在1994年，当时的网景公司借助Navigator这个浏览器成为了第一代互联网公司，但是整个浏览器都是静态的，与当今的浏览器有很大的区别，网景公司想要在静态的页面上添加动态效果， 例如轮播图，鼠标悬浮事件等。这是网景公司中的布兰登·艾奇，他用了不到10天的时间就设计出了能在网页上实现动态效果，而命名为JavaScript的原因也很简单，当时Java非常火，网景公司想要借助Java的名气来推广，事实上，JavaScript与Java除了语法上相似以外没有任何关系。

1.1.4JavaScript的特点

  1.脚本语言缩短了传统语言的编译流程，而且脚本语言易学、易用，语法规则比较疏散，编程起来比较容易
  2.可跨平台性，大部分的浏览器都支持JavaScript，它不需要去依赖操作系统，有浏览器即可。
  3.支持面向对象编程，可以使开发变得快捷和高效，降低了开发成本。

1.1.5浏览器内核

  浏览器内核共分为2种，排版引擎和JavaScript引擎。

• 排版引擎：负责将HTML+CSS进行编译处理，然后将结果显示到屏幕中。
• JavaScript引擎：用于解析JavaScript语言，然后实现与用户交互的效果。

1.1.6 代码编辑器

  由于本教程是使用HBuilderX进行学习，所以这里推荐使用HBuilderX。官网：下载地址
  当然除了HBuilderX以外还有VScode，WebStorm等编辑器供我们使用，可以根据自己的喜好来选择合适的编辑器。

1.2 编写JavaScript代码

1.2.1 JavaScript引入方式

  JavaScript的引入方式与CSS的引入方式相似，一共有三种引入方式：嵌入式、外链式、行内式，下面我们分别来介绍一下这三种方式的写法。
  1.嵌入式
  利用<script>标签包裹JavaScript代码，直接编写到HTML文件中，语法如下：

<script>
    JavaScript语句;
</script>

  2.外链式
  将JavaScript代码单独放到一个文件下，通常使用.js作为文件的拓展名，然后使用<script>标签中的src属性引入文件，语法如下：

HTML文件
……
<script src="js/test.js"></script>
……

JS代码：

js/test.js文件
……
alert('Hello');
……

  3.行内式
  是将JavaScript代码作为HTML标签的属性值使用，写法如下：
<input type="button" onclick="alert('Hello');" value="test">
  相比较之下，推荐大家使用外链式，原因如下：
  1.嵌入式会导致HTML与JavaScript代码混合在一起，不利于代码的维护与修改
  2.嵌入式会增加HTML的体积，让HTML臃肿，影响网页的加载速度  3.外链式利于分布式部署

1.2.2 常用输出语句

  在JavaScript中共有三种输出语句，分别代表着不同的输出方式：
  1.alert()警告框
  比较常见的方式，会在浏览器上弹出一个警告框，用来提示用户的操作。如下图：

  2.console.log() 控制台输出
  比较常用的一种输出方式，常用于JavaScript代码的调试或测试，可以很直观的将想要输出的东西在控制台输出出来。如下图：

  3.document.write()文档页面输出
  可以直接将想要输出的内容显示在页面中，如下图：