JavaScript基础

作用

• 表单验证，减轻服务端的压力
• 动态改变页面内容
• 添加页面动画效果
• ajax网络请求

组成

• ECMAScript 语法规则部分
• DOM 文档对象模型
• BOM 浏览器对象模型

语法标准

• 语法
• 变量和数据类型
• 运算符
• 逻辑控制语句
• 关键字、保留字
• 对象

基本结构

  <button onclick="alert('HelloWorld')"></button>
  <script type="text/javascript">
    // javascript
  </script>
  <script src="index.js"></script>

变量

变量是程序中数据的临时存放场所

let width;
const height = 10;
width = 5;

变量名可以由字母、数字、_、$组成，不能以数字开头

注释

// 单行注释
// 单行注释

/*
多行注释
多行注释
*/

数据类型

• Undefined 未定义类型 拥有唯一值“undefined”的类型
• Null 空类型 拥有唯一值“null”的类型。
• Boolean 布尔类型 由原始值 true 和 false 组成的类型。
• Number 数字类型 所有可能的数字值的集合，包括特殊的“Not-a-Number”(NaN) 值，正无穷，负无穷。
• String 字符串类型 所有可能的字符串值的集合。
• Object 对象类型 属性的集合

// 使用typeof判断数据类型
const a = 'a';
typeof a; // "string"
const b = true;
typeof b; // "boolean"

• Symbol 符号类型 独一无二的值

数据类型转换

'123' + 123 // "123123"(123->'123')
true + 123 // 124(true->1)

运算符

算数运算

• + - * / 四则运算
• % 取余
• ++ -- 自增、自减运算
• | & ~ && || ! 逻辑运算
• << >> <<< >>>位移运算
• ** 指数运算

赋值运算

= += -= *= /= %=

逻辑运算

• && 逻辑与
• || 逻辑或
• ! 逻辑非

关系运算

• == 等于
• === 严格等于
• !=不等于
• !==严格不等于
• >= <= > <比较大小

三目运算符

a?b:c若a则b，否则c

编写习惯

变量命名

//小驼峰法命名普通变量
let myName;
let name;
//大驼峰法命名类
let MyClass;
//大写命名常量
const STATIC_VALUE = 1;