首页教程软件教程正文

HTML JavaScript

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 321 浏览 3437 个字

摘要 :

文章目录 HTML <script> 标签 HTML 中的 JavaScript 事件使用外部脚本 HTML <noscript> 标签脚本是一种小型程序，与 HTML 结合使用，可以使网页更具吸引……

文
章
目
录

HTML <script> 标签
HTML 中的 JavaScript 事件
使用外部脚本
HTML <noscript> 标签

脚本是一种小型程序，与 HTML 结合使用，可以使网页更具吸引力、动态和互动，例如在鼠标单击时显示警报弹窗。目前，最流行的脚本语言是用于网站的 JavaScript。

示例：

<!DOCTYPE html>  
<html>  
<body>  
<h1>JavaScript Date and Time example</h1>  
<button type=\"button\"  
onclick=\"document.getElementById(\'demo\').innerHTML = Date()\">  
Click me to display Date and Time.</button>  
<p id=\"demo\"></p>  
</body>  
</html>

HTML <script> 标签

HTML <script> 标签用于指定客户端脚本。它可以是包含脚本语句的内部或外部 JavaScript，因此我们可以将 <script> 标签放在 <body> 或 <head> 部分。

它主要用于操作图像、表单验证和动态更改内容。JavaScript 使用 document.getElementById() 方法来选择 HTML 元素。

示例：

<!DOCTYPE html>  
<html>  
<body>  
<h2>Use JavaScript to Change Text</h2>  
<p id=\"demo\"></p>  
<script>  
document.getElementById(\"demo\").innerHTML = \"Hello JavaTpoint\";  
</script>  
</body>  
</html>

HTML 中的 JavaScript 事件

事件是用户或浏览器执行的操作，例如鼠标单击或页面加载是事件的示例，如果我们希望在这些事件发生时执行某些操作，JavaScript 就起到作用。

HTML 提供了与 JavaScript 代码一起工作的事件处理程序属性，并可以在事件上执行某些操作。

语法：

<element event = \"JS code\">

示例：

<input type=\"button\" value=\"Click\" onclick=\"alert(\'Hi, how are you\')\">

单击按钮时弹出带有 Hi, how are you 消息的窗口。

HTML 可以具有以下事件，例如：

表单事件：reset、submit 等。
选择事件：文本字段、文本区域等。
焦点事件：focus、blur 等。
鼠标事件：select、mouseup、mousemove、mousedown、click、dblclick 等。

以下是窗口事件属性的列表：

事件名称	处理程序名称	发生时间
onBlur	blur	当表单输入失去焦点时
onClick	click	当用户单击表单元素或链接时
onSubmit	submit	当用户向服务器提交表单时
onLoad	load	当页面在浏览器中加载时
onFocus	focus	当用户聚焦于输入字段时
onSelect	select	当用户选择表单输入字段时

注意：您将在我们的 JavaScript 教程中了解更多关于 JavaScript 事件的内容。让我们看看 JavaScript 可以做什么：

1）JavaScript 可以更改 HTML 内容。

示例：

<!DOCTYPE html>  
<html>  
<body>  
<p>JavaScript can change the content of an HTML element:</p>  
<button type=\"button\" onclick=\"myFunction()\">Click Me!</button>  
<p id=\"demo\"></p>  
<script>  
function myFunction() {   
    document.getElementById(\"demo\").innerHTML = \"Hello JavaTpoint!\";  
}  
</script>  
</body>  
</html>

2) JavaScript 可以更改 HTML 样式

示例：

<!DOCTYPE html>  
<html>  
<body>  
<p id=\"demo\">JavaScript can change the style of an HTML element.</p>  
<script>  
function myFunction() {  
    document.getElementById(\"demo\").style.fontSize = \"25px\";   
    document.getElementById(\"demo\").style.color = \"brown\";  
    document.getElementById(\"demo\").style.backgroundColor = \"lightgreen\";         
}  
</script>  
<button type=\"button\" onclick=\"myFunction()\">Click Me!</button>  
</body>  
</html>

3) JavaScript 可以更改 HTML 属性。

示例：

<!DOCTYPE html>  
<html>  
<body>  
<script>  
function light(sw) {  
    var pic;  
    if (sw == 0) {  
        pic = \"pic_lightoff.png\"  
    } else {  
        pic = \"pic_lighton.png\"  
    }  
    document.getElementById(\'myImage\').src = pic;  
}  
</script>  
<img id=\"myImage\" src=\"pic_lightoff.png\" width=\"100\" height=\"180\">  
<p>  
<button type=\"button\" onclick=\"light(1)\">Light On</button>  
<button type=\"button\" onclick=\"light(0)\">Light Off</button>  
</p>  
</body>  
</html>

使用外部脚本

假设您有多个 HTML 文件，应该包含相同的脚本，那么我们可以将 JavaScript 代码放在单独的文件中，并在 HTML 文件中调用它。使用 .js 扩展名保存 JavaScript 外部文件。

注意：不要在外部文件中添加 <script> 标签，并提供您放置 JS 文件的完整路径。

语法：

<script type=\"text/javascript\" src=\"URL \"></script>

示例：

<!DOCTYPE html>  
<html>  
   <head>  
    <script type=\"text/javascript\" src=\"external.js\"></script>  
    </head>  
     <body>  
      <h2>External JavaScript Example</h2>  
       <form onsubmit=\"fun()\">  
         <label>Enter your name:</label><br>  
      <input type=\"text\" name=\"uname\" id=\"frm1\"><br>  
       <label>Enter your Email-address:</label><br>    
      <input type=\"email\" name=\"email\"><br>  
      <input type=\"submit\">  
  </form>  
 </body>  
 </html>

JavaScript 代码：

function fun() {  
       var x = document.getElementById(\"frm1\").value;  
        alert(\"Hi\"+\" \"+x+ \"you have successfully submitted the details\");  
}

HTML <noscript> 标签

HTML <noscript> 标签用于在浏览器中写入禁用的脚本。在 <noscript></noscript> 标签中编写的文本不会显示在浏览器中。

示例：

<!DOCTYPE html>  
<html>  
<body>  
<p id=\"demo\"></p>  
<script>  
document.getElementById(\"demo\").innerHTML = \"Hello JavaScript!\";  
</script>  
<noscript>This text is not visible in the browser.</noscript>  
</body>  
</html>

赏

微信扫一扫

支付宝扫一扫

版权：转载请注明出处：https://www.zuozi.net/6315.html