JavaScript学习手册（二）

最新推荐文章于 2024-07-26 20:46:33 发布

XDINJN

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量120

点赞数

分类专栏： JavaScript 前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_44934847/article/details/129398382

版权

JavaScript 同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

JavaScript基础

使用

script标签

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。

**注释：**旧的 JavaScript 例子也许会使用 type 属性：

**注释：**type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

或中的 JavaScript

您能够在 HTML 文档中放置任意数量的脚本。

脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。

中的 JavaScript

在本例中，JavaScript 函数被放置于 HTML 页面的 <head> 部分。

该函数会在按钮被点击时调用：

function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}

外部脚本

脚本可放置与外部文件中：外部脚本很实用，如果相同的脚本被用于许多不同的网页。

JavaScript 文件的文件扩展名是 .js。

如需使用外部脚本，请在 <script> 标签的 src (source) 属性中设置脚本的名称：

<script src="myScript.js"></script>

外部 JavaScript 的优势

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

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

如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

外部引用

可通过完整的 URL 或相对于当前网页的路径引用外部脚本：

本例使用完整的 URL 来链接至脚本：

<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

输出

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

使用 innerHTML

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。

id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容

使用 document.write()

出于测试目的，使用 document.write() 比较方便：

document.write(5 + 6);

提示：document.write() 方法仅用于测试。

使用 window.alert()

您能够使用警告框来显示数据：

window.alert(5 + 6);

使用 console.log()

在浏览器中，您可使用 console.log() 方法来显示数据。

请通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。

console.log(5 + 6);

语句

在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”。（从上往下执行）

JavaScript 程序

计算机程序是由计算机“执行”的一系列“指令”。

在编程语言中，这些编程指令被称为语句。

JavaScript 程序就是一系列的编程语句。

**注释：**在 HTML 中，JavaScript 程序由 web 浏览器执行。

JavaScript 语句

JavaScript 语句由以下构成：

值、运算符、表达式、关键词和注释。

这条语句告诉浏览器在 id=“demo” 的 HTML 元素中输出 “Hello Kitty.”：

document.getElementById("demo").innerHTML = "Hello Kitty.";

JavaScript 空白字符

JavaScript 会忽略多个空格。您可以向脚本添加空格，以增强可读性。

JavaScript 行长度和折行

为了达到最佳的可读性，程序员们常常喜欢把代码行控制在 80 个字符以内。

如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符：

JavaScript 代码块

JavaScript 语句可以用花括号（{…}）组合在代码块中。

代码块的作用是定义一同执行的语句。

您会在 JavaScript 中看到成块组合在一起的语句：

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello Kitty.";
    document.getElementById("myDIV").innerHTML = "How are you?";
}

JavaScript 关键词

JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do … while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if … else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try … catch	对语句块实现错误处理。
var、let、const	声明变量。