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">

例子：

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

输出：

Click Event Example

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

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

表单事件：reset, submit等。
选择事件：text field, text area等。
焦点事件：focus, blur等。
鼠标事件：select、mouseup、mousemove、mousedown、click、dblclick等。

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

事件事件名称	处理程序名称	发生在
模糊	blur	当表单输入失去焦点时
点击	click	当用户点击表单元素或链接时
提交	submit	当用户向服务器提交表单时。
负载	load	当页面在浏览器中加载时。
聚焦	focus	当用户关注输入字段时。
选择	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");  
    }