复习javascript第1章(一)

简介: 复习javascript第1章(一)

JavaScript 是全球最流行的编程语言。

JavaScript 是属于 Web 的编程语言。

JavaScript 很容易学习。

JavaScript 能够改变 HTML 内容

getElementById() 是多个 JavaScript HTML 方法之一。

本例使用该方法来“查找” id="demo" 的 HTML 元素,并把元素内容(innerHTML)更改为 "Hello JavaScript":

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

提示:JavaScript 同时接受双引号和单引号:

document.getElementById("demo").innerHTML = 'Hello JavaScript';

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 使用

<script> 标签

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

<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

注释:旧的 JavaScript 例子也许会使用 type 属性:<script type="text/javascript">。

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

JavaScript 函数和事件

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

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

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

<head> 或 <body> 中的 JavaScript

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

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

<head> 中的 JavaScript

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

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

实例

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>
<body>
<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>
</body>
</html>

<body> 中的 JavaScript

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

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

实例

<!DOCTYPE html>
<html>
<body> 
<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>
<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</body>
</html>

提示:把脚本置于 <body> 元素的底部,可改善显示速度,因为脚本编译会拖慢显示。

外部脚本

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

外部文件:myScript.js

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

外部脚本很实用,如果相同的脚本被用于许多不同的网页。

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

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

实例

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

您可以在 <head><body> 中放置外部脚本引用。

该脚本的表现与它被置于 <script> 标签中是一样的。

注释:外部脚本不能包含 <script> 标签。

外部 JavaScript 的优势

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

  • 分离了 HTML 和代码
  • 使 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 不提供任何内建的打印或显示函数。

JavaScript 显示方案

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

使用 window.alert() 写入警告框

使用 document.write() 写入 HTML 输出

使用 innerHTML 写入 HTML 元素

使用 console.log() 写入浏览器控制台

使用 innerHTML

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

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

实例

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<p id="demo"></p>
<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html> 

提示:更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。

使用 document.write()

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

实例

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
document.write(5 + 6);
</script>
</body>
</html> 

注意:在 HTML 文档完全加载后使用 document.write()删除所有已有的 HTML

实例

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<button onclick="document.write(5 + 6)">试一试</button>
</body>
</html>

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

使用 window.alert()

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

实例

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html> 

使用 console.log()

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

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

实例

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>


相关文章
|
7月前
|
存储
kettle开发篇-行扁平化
kettle开发篇-行扁平化
133 0
|
JSON JavaScript 前端开发
JavaScript读取本地json文件方式
JavaScript读取本地json文件方式
|
前端开发 JavaScript
学习JavaScript笔记
学习JavaScript笔记
74 0
|
7月前
|
JavaScript
Ant design vue 样式调整(包含导航栏、a-table表格、分页)
Ant design vue 样式调整(包含导航栏、a-table表格、分页)
623 1
|
7月前
|
负载均衡 Java Nacos
python flask服务如何注册到nacos
一文讲清楚python flask服务如何注册到nacos
306 2
python flask服务如何注册到nacos
|
7月前
|
弹性计算
阿里云ECS使用体验
在申请高校学生免费体验阿里云ECS云服务器后的一些使用体验和感受。
|
JavaScript 前端开发
javascript插件:countUp.min.js数字滚动效果
javascript插件:countUp.min.js数字滚动效果
196 0
Vue3-admin-element框架学习笔记----2(修改它)
Vue3-admin-element框架学习笔记----2(修改它)
169 0
|
设计模式 人工智能 前端开发
《现代Javascript高级教程》电子书抢先阅读,了解如何在JavaScript中构建高质量的应用程序!
本书旨在帮助学习者进阶JavaScript编程,涵盖现代JavaScript的高级概念和技术,包括异步编程、函数式编程、模块化开发、ES6+语法等。通过实际项目示例和练习,学习者将深入了解如何在JavaScript中构建高质量的应用程序。
《现代Javascript高级教程》电子书抢先阅读,了解如何在JavaScript中构建高质量的应用程序!
|
监控 网络协议 安全
DoS和DDoS攻击
DoS和DDoS攻击
3533 0