JavaScript背景

Web前端有三层：

HTML：从语义的角度，描述页面结构

CSS：从审美的角度，描述样式（美化页面）

JavaScript：从交互的角度，描述行为（实现业务逻辑和页面控制）

### JavaScript的作用

  • 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）
  • 网页特效
  • 服务端开发(Node.js)
  • 桌面程序(Electron)
  • App(Cordova)
  • 控制硬件-物联网(Ruff)
  • 游戏开发(cocos2d-js)

JavaScript的组成

JavaScript基础分为三个部分：

ECMAScript：JavaScript 的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

DOM：Document Object Model（文档对象模型），操作页面上的元素的API。比如让盒子移动、变色、改变大小、轮播图等等。

BOM：Browser Object Model（浏览器对象模型），操作浏览器部分功能的API。通过BOM可以操作浏览器窗口，比如弹框、控制浏览器跳转、获取浏览器分辨率等等。

通俗理解就是：ECMAScript 是 JS 的语法；DOM 和 BOM 浏览器运行环境为 JS提供的API。

我们先给大家介绍ECMAScript即js的基础语法。

JavaScript 的特点
特点1：解释型语言

JavaScript 是解释型语言，不需要事先被翻译为机器码；而是边翻译边执行（翻译一行，执行一行）。

什么是「解释型语言」？详见下一段。

由于少了实现编译这一步骤，所以解释型语言开发起来尤为方便，但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术，使得运行速度得以改善。

特点2：单线程

JS 初体验

JS 有3种书写位置，分别为行内、内嵌和外部。
  1. 行内式
<input type="button" value="点我试试" onclick="alert('Hello World')" />
  • 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
  • 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
  • 可读性差， 在html中编写JS大量代码时，不方便阅读；
  • 引号易错，引号多层嵌套匹配时，非常容易弄混；
  • 特殊情况下使用
  1. 内嵌式
<script>
    alert('Hello  World~!');
</script>
  • 可以将多行JS代码写到script标签中
  • 内嵌 JS 是学习时常用的方式
  1. 外部JS文件
<script src="my.js"></script>
  • 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
  • 引用外部 JS文件的 script 标签中间不可以写代码
  • 适合于JS 代码量比较大的情况
    JavaScript对换行、缩进、空格不敏感。每一条语句以分号结尾。

也就是说：

代码一：

等价于代码二：

备注：每一条语句末尾要加上分号，虽然分号不是必须加的，如果不写分号，浏览器会自动添加，但是会消耗一些系统资源。

（2）所有的符号，都是英语的。比如括号、引号、分号。

**

单行注释

**

为了提高代码的可读性，JS与CSS一样，也提供了注释功能。

JS中的注释主要有两种，分别是**单行注释**和**多行注释**。

单行注释的注释方式如下：

// 我是一行文字，不想被 JS引擎 执行，所以 注释起来
**//**  用来注释单行文字（  快捷键   ctrl  +  /   ）

### 多行注释

多行注释的注释方式如下：

/*
  获取用户年龄和姓名
  并通过提示框显示出来
*/

/* */ 用来注释多行文字（ 默认快捷键 alt + shift + a ）

  • 变量的声明
  • 变量的赋值

JavaScript输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

方法

说明

归属

alert(msg)

浏览器弹出警示框

浏览器

console.log(msg)

浏览器控制台打印输出信息

浏览器

prompt(info)

浏览器弹出输入框，用户可以输入

浏览器

  • 注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。
    声明变量
//  声明变量  
var age; //  声明一个 名称为age 的变量
  • var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
  • age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

赋值

age = 10; // 给 age  这个变量赋值为 10
  • = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
  • 变量值是程序员保存到变量空间里的值

**

变量的初始化

**

var age  = 18;  // 声明变量同时赋值为 18
声明一个变量并赋值， 我们称之为变量的初始化。

###变量语法扩展

  • 更新变量
    一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
var age = 18;

age = 81;   // 最后的结果就是81因为18 被覆盖掉了
  • 同时声明多个变量
    同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。
var age = 10,  name = 'zs', sex = 2;
  • 声明变量特殊情况

情况

说明

结果

var age ; console.log (age);

只声明 不赋值

undefined

console.log(age)

不声明 不赋值 直接使用

报错

age = 10; console.log (age);

不声明 只赋值

10

变量命名规范

规则

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name

严格区分大小写。var app; 和 var App; 是两个变量

不能 以数字开头。 18age 是错误的

不能 是关键字、保留字。例如：var、for、while

变量名必须有意义。 MMD BBD nl → age

遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName