HTML 教程

HTML 属性

HTML 标签列表

HTML API

HTML 案例

HTML 颜色

HTML5 进阶

HTML 其它

HTML 面试问题

HTML 脚本

脚本是一个小程序，它与 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>

使用 JavaScript 的 HTML 事件

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

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

句法：

<element event = "JS code">

例子：

<!DOCTYPE html>
<html>
    <body>
  	      <h2>Click Event Example</h2>
		  <p>Click on the button and you csn see a pop-up window with a message</p>
		  <input type="button" value="Click" onclick="alert('Hi,how are you')">
  </body>
</html>

输出：

Click Event Example

Click on the button and you csn see a pop-up window with a message

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

  • 表单事件：重置、提交等。

  • 选择事件：文本字段、文本区域等。

  • 焦点事件：焦点、模糊等。

  • 鼠标事件： select、mouseup、mousemove、mousedown、click、dblclick 等。

以下是 Window 事件属性的列表：

事件 事件名称处理程序名称发生时
模糊模糊当表单输入失去焦点时
点击点击当用户点击表单元素或链接时
提交时提交当用户向服务器提交表单时。
负载加载当页面在浏览器中加载时。
对焦重点当用户关注输入字段时。
选择选择当用户选择表单输入字段时。

注意：您将在我们的 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 JavaScript

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>


上一主题 HTML 框架 下一主题 HTML 注释
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具