【JS基础】JavaScript语言简介及简单例子

Fighting_hawk

已于 2022-07-01 03:27:30 修改

阅读量4.9k

点赞数 3

分类专栏： # 筑基05：语言基础文章标签： JavaScript html

于 2022-03-21 15:52:41 首次发布

本文链接：https://blog.csdn.net/fighting_hawk/article/details/123637127

版权

筑基05：语言基础专栏收录该内容

25 篇文章 18 订阅

订阅专栏

1 JS简介

JavaScript 是 web 开发者必学的三种语言之一：
1. HTML 定义网页的内容；
2. CSS 规定网页的布局；
3. JavaScript 对网页行为进行编程。
标签
在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。
JavaScript 函数和事件
JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。例如，当发生事件时调用函数，比如当用户点击按钮时。
JS脚本位置
JS脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。甚至可以放置在文本外部。

2 功能演示：修改标签内容

可以在网站https://www.w3school.com.cn/tiy/t.asp?f=eg_js_use_body中验证以下代码。
第5行定义了一个标签，id属性为demo。
第6行定义了一个按钮，当点击是触发函数myFunction。
第8~11行定义了一段JS脚本，是一个函数，当函数触发时，修改id为demo的标签内容。

<!DOCTYPE html>
<html>
<body>
<h2>Body 中的 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</body>
</html>

3 引用外部JS脚本

可以在网站https://www.w3school.com.cn/tiy/t.asp?f=eg_js_use_external中验证以下代码。
在代码第8行，引入了外部文件，该文件中已经对myFunction进行定义，其余内容与上一例子类似。
在外部文件中放置脚本有如下优势：
1. 分离了 HTML 和代码；
2. 使 HTML 和 JavaScript 更易于阅读和维护；
3. 已缓存的 JavaScript 文件可加速页面加载。

<!DOCTYPE html>
<html>
<body>
<h2>外部 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
<p>（myFunction 存储在名为 "myScript.js" 的外部文件中。）</p>
<script src="/demo/myScript.js"></script>
</body>
</html>