3.1 学习前的准备

必备知识:

  • 对互联网和万维网 (WWW) 有基本的认识。
  • 熟悉HTML。

JavaScript 简介

JavaScript 是一门跨平台、面向对象的轻量级脚本语言。 在主机环境中, JavaScript 能够通过连接环境对象而实现可控制编译。

JavaScript 内置了一个包含一系列对象的标准库,比如数组、日期、数学和一个语言元素核心集合包括操作符,流程控制符以及语句等。JavaScript 的核心部分可以通过组合已有语言核心对象来扩展语言以适应不同用途,例如:

  • 客户端的 JavaScript 通过提供控制浏览器及其文档对象模型(DOM)的对象来扩展语言核心。例如:客户端版本直接支持应用将元素放在在HTML表单中并且支持响应用户事件比如鼠标点击、表单提交和页面导航。
  • 服务端的 JavaScript 则通过提供有关在服务器上运行 JavaScript 的对象来可扩展语言核心。例如:服务端版本直接支持应用和数据库通信,提供应用不同调用间的信息连续性,或者在服务器上执行文件操作。

服务端的 JavaScript 通常使用 Node.js 技术。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。

JavaScript 和 Java

JavaScript 和 Java 有一些共性但是在另一些方面有着根本性区别。JavaScript 名称上酷似 Java,但是并没有Java 的静态类型和强类型检查特性。

与 Java 通过声明式构建类的编译时系统不同,JavaScript 采用基于少量的数据类型如数字、布尔、字符串值的运行时系统。JavaScript 拥有基于原型的对象模型提供的动态继承,也就是说,独立对象的继承是可以改变的。 JavaScript 支持匿名函数,函数也可以作为对象的属性执行。

与 Java 相比,Javascript 是一门形式自由的语言。你不必声明所有的变量,类和方法。你不必关心方法是否是 共有、私有或者受保护的,也不需要实现接口。无需显式指定变量、参数、方法返回值的数据类型。

Java 是基于类的编程语言,设计的初衷就是为了快速执行和类型安全的。类型安全,举例来说,你不能将一个Java 整数变量转化为一个对象引用,或者由J ava 字节码访问专有存储器。Java 基于类的模型,意味着程序包含专有的类及其方法。Java 的类继承和强类型要求紧耦合的对象层级结构。这些要求使得 Java 编程比 JavaScript 要复杂的多。

相比之下,JavaScript 语句精简、拥有动态类型,为更多开发者提供了一种语法简单、内置功能强大以及用最小需求创建对象的编程工具。

具体对比如下表:

JavaScript Java
面向对象。不区分对象类型。通过原型机制继承,任何对象的属性和方法均可以被动态添加。 基于类系统。分为类和实例,通过类层级的定义实现继承。不能动态增加对象或类的属性或方法。
变量类型不需要提前声明(动态类型)。 变量类型必须提前声明(静态类型)。
所有对象均为实例。 类和实例是不同的事物。
通过构造器函数来定义和创建一组对象。 通过类定义来定义类;通过构造器方法来实例化类。
通过 new 操作符创建单个对象。 相同。
指定一个对象作为原型并且与构造函数一起构建对象的层级结构 通过类定义来定义现存类的子类,从而构建对象的层级结构。
遵循原型链继承属性。 遵循类链继承属性。
构造器函数或原型指定初始的属性集。允许动态地向单个的对象或者整个对象集中添加或移除属性。 类定义指定类的所有实例的所有属性。无法在运行时动态添加属性。

开发者工具

Browsers

因为不同浏览器解析出的 HTML 、CSS 与 js 有不同,各个浏览器的兼容性不一样,所以在浏览器的选择上,推荐使用 Google 的 Chrome 浏览器或者 Mozilla 的 FireFox 浏览器

Chrome vs FireFox

而 FireFox 内置了两款非常棒的工具用来实验 JavaScript:浏览器控制台代码草稿纸,但是 Chrome 等浏览器只有开发者控制台(按 F12 可以调出开发者控制台),并没有代码草稿纸,所以在编写成段 js 代码的时候就显得有些麻烦。但是 FireFox 提供了代码草稿纸,对于初学者而言很方便的去学习 js 。(当然啦,还有很多种方法可以运行 js 的,比如可以使用 NodeJS 的命令行工具去运行编写好的 js 文件。)

Scratchpad

笔者习惯于使用 Chrome,所以以后的开发环境均是基于 Chrome 环境的,FireFox 兼容性与 Chrome 相当,所以使用 FireFox 也可以。但是 Chrome 的官网被墙了,所以下载比较麻烦,可以参考我的另一篇离线下载 Chrome 的教程——下载chrome各版本离线安装包 | Airing的博客

开发者控制台

关于开发者工具的具体使用,请参考:Chrome 开发工具指南 | 极客学院

Hello World

学习 JavaScript 的第一步,打开浏览器的代码调试器尝试写你的第一个 JavaScript 版本的“Hello world”程序。

function greetMe(user) {
  return "Hi " + user;
}

greetMe("Airing"); // "Hi Airing"

Scratchpad(代码草稿纸)中选择要执行的代码,然后点击快捷键 Ctrl+R 就可以在浏览器中看到选中代码的执行结果。

在接下来的章节里,该指南将介绍 JavaScript 的语法以及语言特性,届时你将可以使用它编写更加复杂的程序。

本节任务

  1. 安装 Chrome 或 FireFox
  2. 编写并运行本节的 “Hello World” 案例。

results matching ""

    No results matching ""