srcmini本文概述
脚本是一个小型程序, 可与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 messageHTML可以具有以下事件, 例如：
- 表单事件：重置, 提交等。
- 选择事件：文本字段, 文本区域等。
- 焦点事件：焦点, 模糊等。
- 鼠标事件：选择, 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>立即测试
评论前必须登录！
注册