Jvavscript- 跟着李南江学编程

JavaScript 能够改变 HTML 样式 (CSS)
改变 HTML 元素的样式，是改变 HTML 属性的一种变种：

实例
document.getElementById(“demo”).style.fontSize = “25px”;

JavaScript 能够隐藏 HTML 元素
可通过改变 display 样式来隐藏 HTML 元素：

实例
document.getElementById(“demo”).style.display=“none”;

JavaScript 能够显示 HTML 元素
可通过改变 display 样式来显示隐藏的 HTML 元素：
实例
document.getElementById(“demo”).style.display=“block”;

标签之间。

实例

亲自试一试
注释：旧的 JavaScript 例子也许会使用 type 属性：

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

JavaScript 函数和事件
JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。

例如，当发生事件时调用函数，比如当用户点击按钮时。

提示：您将在稍后的章节学到更多有关函数和事件的知识。

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

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

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

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

实例

一张网页

一个段落

试一试 亲自试一试 中的 JavaScript 在本例中，JavaScript 函数被放置于 HTML 页面的 部分。

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

实例

A Web Page

一个段落

试一试

提示：把脚本置于 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

外部脚本
脚本可放置与外部文件中：

外部文件：myScript.js
function myFunction() {
document.getElementById(“demo”).innerHTML = “段落被更改。”;
}
外部脚本很实用，如果相同的脚本被用于许多不同的网页。

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

如需使用外部脚本，请在

实例

您可以在 或 中放置外部脚本引用。

该脚本的表现与它被置于

注释：外部脚本不能包含

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

分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载
如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：

实例

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

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

实例

本例使用了位于当前网站上指定文件夹中的脚本：

实例

本例链接了与当前页面相同文件夹的脚本：

实例

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

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

实例

我的第一张网页

我的第一个段落

亲自试一试 提示：更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。

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

实例

我的第一张网页

我的第一个段落

亲自试一试 注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：

实例

我的第一张网页

我的第一个段落

试一试

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

使用 window.alert()
您能够使用警告框来显示数据：

实例

我的第一张网页

我的第一个段落

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

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

实例

我的第一张网页

我的第一个段落

我正在跟着江哥学编程, 更多前端+区块链课程: www.it666.com