JavaScript简介简言

最新推荐文章于 2025-04-28 15:15:19 发布

Yamai Yuzuru

最新推荐文章于 2025-04-28 15:15:19 发布

阅读量304

点赞数 1

分类专栏： Web前端开发笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_54813250/article/details/129460261

版权

Web前端开发笔记专栏收录该内容

5 篇文章

订阅专栏

JavaScript是Web开发的基础，用于定义网页内容、布局和行为。它与HTML和CSS并列为开发者必备的三种语言。JavaScript可以改变HTML元素内容和属性，常通过<script>标签内嵌在HTML中，也可放在<head>或<body>部分，甚至外部文件中。外部脚本有利于代码组织和页面加载速度，可通过完整URL、文件路径或无路径方式引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

JavaScript是世界上最受欢迎的编程语言。

JavaScript是Web的编程语言。

JavaScript 很容易学习。

一、为什么要学习JavaScript？

JavaScript 是所有 Web 开发人员必须学习的 3 种语言之一：

1. HTML定义网页内容

2. CSS指定网页布局

3. JavaScript 对网页的行为进行编程

二、JavaScript 简介

1.JavaScript 可以更改 HTML 内容

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

JavaScript 接受双引号和单引号：

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

效果如下：

点击Click Me!后的效果：

2.JavaScript 可以更改 HTML 属性值

举例，JavaScript 可以更改了标记的（source）属性的值：src<img>

三、JavaScript 在代码的哪个位置

1. <`script`>标签

在 HTML 中，JavaScript 代码入到和标记之间。<script></script>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

2.JavaScript 函数和事件

JavaScript 是 JavaScript 代码块，可以在“调用”时执行。function

例如，可以在事件发生时调用函数，例如当用户单击按钮时。

3.JavaScript 放在 <head> 或者 <body>

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

脚本可以放在中或 HTML 页的部分中，或放在两者中。<body><head>

1）JavaScript in <head>

在此示例中，JavaScript 放置在的 HTML 页面。function<head>

单击按钮时调用（调用）该函数：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

2）JavaScript in <body>

在此示例中，JavaScript 放置在 HTML 页面的部分中。function<body>

单击按钮时调用（调用）该函数：

<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

将脚本放置在 <body> 元素的底部可改善显示效果速度，因为脚本解释会减慢显示速度。

4.外部 JavaScript

外部文件：脚本.js

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

当在许多不同的网页中使用相同的代码时，外部脚本是实用的。

JavaScript文件具有文件扩展名.js。

要使用外部脚本，请将脚本文件的名称放在（源）属性中标签：src<script>

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

您可以在其中放置外部脚本引用，也可以根据需要放置外部脚本引用。<head><body>

脚本的行为就像它位于标记所在的位置一样。<script>

外部脚本文件不能包含标签<script>

1）外部JavaScript 的优势

本放在外部文件中有一些优点：

它将 HTML 和代码分开
它使HTML和JavaScript更容易阅读和维护
缓存的 JavaScript 文件可以加快页面加载速度

要将多个脚本文件添加到一个页面 - 使用多个脚本标记：

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

2）外部引用

可以通过 3 种不同的方式引用外部脚本：

使用完整的网址（完整的网址）
使用文件路径（如 /js/）
没有任何路径

此示例使用完整的 URL 链接到 myScript.js：

<script src="https://www.w3schools.com/js/myScript.js"></script>

此示例使用文件路径链接到 myScript.js：

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

此示例不使用路径链接到 myScript.js

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