JavaScript 基础语法与核心概念详解

注意事项：

• ECMAScript 6 新增 let 关键字，用法类似 var，但只在所在代码块内有效，且不允许重复声明。
• ECMAScript 6 新增 const 关键字，声明只读常量，一旦声明值不可改变。

数据类型

JavaScript 分为原始类型和引用类型。

原始类型：

• number：数字（整数、小数、NaN）。
• string：字符串（单双引皆可）。
• boolean：布尔值（true, false）。
• null：对象为空。
• undefined：声明未初始化时的默认值。

获取类型：使用 typeof 运算符。

alert(typeof 变量);

运算符

• 算术运算符：+, -, *, /, %, ++, --
• 赋值运算符：=, +=, -=, *=, /=, %=
• 比较运算符：>, <, >=, <=, !=, ==, ===
• 逻辑运算符：&&, ||, !
• 三元运算符：条件表达式 ? true_value : false_value

注意：== 会进行类型转换，=== 不会进行类型转换。

类型转换

• 字符串转数字：Number(), parseInt(), parseFloat()。
• 转为 Boolean：
  • Number：0 和 NaN 为 false，其他为 true。
  • String：空字符串为 false，其他为 true。
  • Null 和 undefined：均为 false。

parseInt("12");      // 12
parseInt("12A45");   // 12

流程控制语句

• if...else if...else
• switch
• for
• while
• do...while

函数

函数是被设计为执行特定任务的代码块。

定义：使用 function 关键字。

function functionName(参数 1, 参数 2) {
  // 要执行的代码
}

注意：

• 形式参数不需要类型（弱类型语言）。
• 返回值不需要定义类型，使用 return 返回即可。

调用：函数名称 (实际参数列表)

JS 对象

Array

Array 对象用于定义数组。

定义：

var arr = new Array(1, 2, 3, 4); // 方式一
var arr = [1, 2, 3, 4];          // 方式二

访问：arr[索引] = 值;

属性与方法：

• length：设置或返回数组中元素的数量。
• forEach()：遍历数组中有值的元素。
• push()：将新元素添加到数组末尾，返回新长度。
• splice()：从数组中删除元素。

JSON

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。

基本语法：

• 键必须在双引号中。
• Value 的数据类型：数字、字符串（双引号）、逻辑值、数组、对象、null。

重要方法：

• JSON.parse()：将 JSON 字符串解析为 JavaScript 对象。
• JSON.stringify()：将 JavaScript 对象转换为 JSON 字符串。

BOM (Browser Object Model)

BOM 允许 JavaScript 与浏览器对话，将浏览器各组成部分封装为对象。

组成：

• Window：浏览器窗口对象。
• Navigator：浏览器对象。
• Screen：屏幕对象。
• History：历史记录对象。
• Location：地址栏对象。

重点学习 Window 和 Location。

Window：

• 获取：直接使用 window，其中 window. 可省略。
• 方法：
  • alert()：显示警告框。
  • confirm()：显示确认对话框。
  • setInterval()：按指定周期调用函数。
  • setTimeout()：指定毫秒数后调用函数。

Location：

• 获取：window.location。
• 属性：
  • href：设置或返回完整的 URL。

  location.href = "https://www.itcast.cn";
  

DOM (Document Object Model)

DOM 将标记语言的各个组成部分封装为对应的对象。

组成部分：

• Document：整个文档对象。
• Element：元素对象。
• Attribute：属性对象。
• Text：文本对象。
• Comment：注释对象。

功能：

• 改变 HTML 元素的内容。
• 改变 HTML 元素的样式 (CSS)。
• 对 HTML DOM 事件作出反应。
• 添加和删除 HTML 元素。

获取 Element 对象：

1. 根据 id 属性值获取：document.getElementById('h1')
2. 根据标签名称获取：document.getElementsByTagName('div')
3. 根据 name 属性值获取：document.getElementsByName('hobby')
4. 根据 class 属性值获取：document.getElementsByClassName('cls')

事件

事件：HTML 事件是发生在 HTML 元素上的'事情'。例如按钮被点击、鼠标移动、按键按下等。

事件监听：JavaScript 可以在事件被侦测到时执行代码。

常见事件：

• onclick：鼠标单击事件
• onblur：元素失去焦点
• onfocus：元素获得焦点
• onload：页面或图像加载完成
• onsubmit：表单提交时触发
• onkeydown：键盘按键被按下
• onmouseover：鼠标移到元素之上
• onmouseout：鼠标从某元素移开