文章摘要： JavaScript是编程语言，网页标准三大组成部分之一的JavaScript，用来实现网页的动态效果和用户交互功能。

  • JavaScript 是一种轻量级、解释型编程语言，通常在用户的浏览器中运行，而不需要在服务器上预先编译。

相关信息

外部相关文章

内部相关文章

简介

  • JavaScript（简称“JS”）
  • JavaScript 是一种轻量级、解释型编程语言，通常在用户的浏览器中运行，而不需要在服务器上预先编译。
  • 可以在网页中嵌入，用来实现网页的动态效果和用户交互功能。

特点

  1. 脚本语言：JavaScript 主要在客户端（用户的浏览器）中执行，减轻了服务器的负担。
  2. 事件驱动：JavaScript 可以在响应特定事件时执行，例如用户点击按钮、页面加载完成等。
  3. 跨平台：JavaScript 依赖于浏览器的支持，因此可以在任何支持 JavaScript 的浏览器上运行，无论用户的操作系统是什么。
  4. 面向对象：JavaScript 支持面向对象编程，允许开发者定义对象和类，实现数据封装、继承和多态等特性。
  5. 功能丰富：JavaScript 提供了大量的内置对象和方法，可以操作DOM（文档对象模型），处理日期和时间，实现动画效果等。

引入方式

HTML中内部编写JS

  • JavaScript代码必须位于HTML文件中的<script></script>标签之间。
  • 在HTML文档中，可以在任意位置，放置任意数量的<script></script>标签。
  • 一般会把脚本置于<body></body>标签的底部，可以改善显示速度。
<script>
 /*JavaScript代码*/
</script>

HTML的外部引入JS

  • JS脚本可放置在外部文件中。
  • JavaScript文件的扩展名是.js
  • 通过在HTML文档中写入以下内容来引入JS脚本。
<script src="./JavaScript.js"></script>

在外部文件中放置脚本有如下优势：

  • 分离了 HTML 和代码。
  • 使 HTML 和 JavaScript 更易于阅读和维护。
  • 已缓存的 JavaScript 文件可加速页面加载。

基础语法

  • 区分大小写。
  • 每行结尾的分号可有可无。

命名规范

  • 支持大小写字母、数字、_下划线、$美元符号。
  • 数字不能开头。
  • 建议使用驼峰命名法，即多个单词之间每个单词首字母大写。
  • 不能与关键字重名。

注释

  • JavaScript 不会执行注释。
  • 我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。
// 单行注释

/*
 多行注释

*/

/**
 * 多行文本注释
 * 
 */

变量

  • JavaScript是一门弱类型语言，变量可以存放不同类型的值。
  • JavaScript中使用var关键字来声明变量。
  • JavaScript的变量类型能在创建时自动识别数据类型。

关键字：let

let x = 5;

常量

  • 只能初始化一个值，后续不能再次修改。

关键字：const

const x = 1;

作用域

  • 通过{}来确定一个变量或对象的作用范围。

导入模块

// 导入一个变量或对象
import {login} from "./admin"

// 导入模块的所有导出成员到一个对象上。
import * as admin from "./admin"

// 只导入模块的默认导出成员。
import admin from "./admin"

关键字

详细总结：JavaScript关键字

数据类型

  • 值类型(基本类型)：数字(Number)、字符串（String）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol。
  • 引用数据类型（对象类型）：数组(Array)、对象(Object)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

运算符

类型符号
算术和位运算符=、+、-、*、/
赋值运算符=、+=、-=、*=、/=、%=、++、--
比较运算符==、!=、<、>、<=、>=、===
逻辑运算符&&、||、!
三元运算符条件表达式 ? true_value:false_value
  • 提示：在比较两个值时==两个等号会进行类型转换，===三个等号不会进行类型转换。

流程控制语句

选择语句

  • 关键字：if、else if、else
  • 关键字：switch、case、default

循环语句

  • 关键字：for
  • 关键字：while

函数

  • 函数（方法）是被设计为执行特定任务的代码块。

函数的定义

  • JavaScript的函数通过function关键字进行定义。
  • 函数定义的参数，不需要指定具体的数据类型，因为JavaScript是若类型语言。
  • 返回值不需要指定具体的数据类型，只需要直接使用return关键字进行返回即可。
// 第一种定义函数的方法
function name(<参数>, <参数>...) {
    // 代码块
    reutrn `返回值`;
}

// 第二种定义函数的方法
var <变量> = function name(<参数>, <参数>...) {
    // 代码块
    reutrn `返回值`;
}

函数的调用

  • 格式：函数名称(参数列表)
var data = name(10, 20);

对象

正则（RegExp）

==待完善==

日期（Date）

==待完善==

字符串（String）

定义

// 方案一
var <变量名> = new String("<字符串数据>");

// 方案二
var <变量名> = "字符串数据";

数组(Array)

  • []代表数组。

定义

// 方案一
var <变量名> = new Array(<元素>, <元素>...);

// 方案二
var <变量名> = [<元素>, <元素>...];

访问

<数组>[索引];

修改

<数组>[索引] = <值>;

对象（Object）

  • 可以说 "JavaScript 对象是变量的容器"。
  • 但是，我们通常认为 "JavaScript 对象是键值对的容器"。
  • 键值对通常写法为 name : value (键与值以冒号分割)。
  • 键值对在 JavaScript 对象通常称为 对象属性。
  • JavaScript 对象是属性变量的容器。

定义

var <对象名> = {
    <属性名>: <属性值>,
    ...
    <属性名>: <属性值>,
    <函数名>: function(形参列表){}
};

调用

<对象名>.<属性值>;
<对象名>.<函数名>();

JSON对象

  • JavaScript Object Notation，JavaScript对象标记法。
  • JSON就是通过JavaScript对象标记法编写的文本。

提示：“键”必须是字符串类型。

定义

var <变量名> = '{"name": "小明", "age": 18, "爱好": ["吃饭", "睡觉", "打游戏"]}';

BOM浏览器模型

  • Browser Object Model，浏览器对象模型。
  • 允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

组成部分

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

Windows浏览器窗口对象

  • 浏览器窗口对象

案例

// 弹出警示框
window.alert("hallo wored");

// 显示带有一段消息以及确认按钮和取消按钮的对话框
var flag = window.confirm();

// 按照指定的周期（毫秒）来调用函数或计算表达式
window.setInterval(function() {
    console.log("每隔2秒钟，执行函数操作。")
}, 2000);

==待完善==

Screen屏幕对象

==待完善==

History历史记录对象

==待完善==

Location地址栏对象

==待完善==

DOM文档对象模型

  • Document Object Model，文档对象模型。
  • 将标记语言的各个组成模块封装为对应的对象。
  • JavaScript通过DOM文档对象模型对HTML进行操作：改变HTML元素的内容，改变HTML元素的样式（CSS），对HTML DOM事件做出反应，添加和删除HTML元素。

DOM是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准。

  1. Core DOM - 所有文档类型的标准模型
  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象

  1. XML DOM - XML文档的标准模型

  2. HTML DOM - HTML文档的标准模型

  • image：<img />
  • Button：<import type="button" />

获取元素对象的方法

格式

  • <标签元素>.<属性>
  • <标签元素>.getAttribute("属性名");

案例

// 根据id属性值获取，返回单个元素对象
var h1 = document.getElementById('h1');

// 根据标签名称获取，返回元素对象数组
var divs = document.getElementsByTagName('div');

// 根据name属性值获取，返回元素对象数组
var hobbys = document.getElementsByName('hobby');

// 根据class属性值获取，返回元素对象数组
var class = document.getElementsByClassName('head-box');

修改元素对象的方法

格式

  • <标签元素>.<属性> = <新值>
  • <标签元素>.setAttribute("属性名", "属性值");

案例

// 将获取到的当前元素的value属性改为新值。
id.value = "新值";

事件监听

  • JavaScript可以在事件被侦测到时执行对应的代码。
  • 常见事件：鼠标点击、元素失去焦点、元素获得焦点、某个页面或图像被完成加载、当表单提交时出发该事件、某个键盘的键被按下、鼠标被移到某个元素上、鼠标从某个元素上移开。

事件绑定

  • 事件监听可以理解为比较特殊的修改元素属性值的操作。

通过HTML标签中的事件属性进行绑定

<!--当鼠标点击该按钮时，执行一个名字叫test的函数-->
<input type="button" onclick="test()" value="按钮">

// 执行名字叫test的函数
function test() {
    alert("执行");
}

通过DOM元素属性绑定

<!--点击鼠标点击该按钮-->
<input type="button" id="button" value="按钮">

// 为一个id标签属性为button的元素修改onclick属性
// 监听鼠标点击
document.getElementById("button").onclick = function() {
    alert("执行");
}
更新时间: