HTML JavaScript - 珊瑚贝

本文概述

HTML <script>标记
使用JavaScript的HTML事件
使用外部脚本
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, 因此我们可以在<body>或<head>部分中放置<script>标记。

它主要用于处理图像, 进行表单验证和动态更改内容。 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 srcmini";
</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可以具有以下事件, 例如：

表单事件：重置, 提交等。
选择事件：文本字段, 文本区域等。
焦点事件：焦点, 模糊等。
鼠标事件：选择, mouseup, mousemove, mousedown, click, dblclick等。

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

事件事件名称	处理程序名称	发生在
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 srcmini!";
}
</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>

立即测试