HTML JavaScript
HTML JavaScript应用
JavaScript是一个小型程序，可与HTML配合使用，以使网页更具吸引力，动态和交互性，例如单击鼠标时弹出警报窗口。当前，最流行的JavaScript语言是用于网站的脚本开发。
示例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript日期和时间示例</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
单击我以显示日期和时间。</button>
<p id="demo"></p>
</body>
</html>
输出:
JavaScript日期和时间示例
HTML <script>标记
HTML <script>标记用于指定客户端JavaScript。它可能是包含JavaScript语句的内部或外部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 lidihuo";
</script>
</body>
</html>
输出:
用JavaScript改变文本内容
带有JavaScript的HTML事件
事件是用户执行的操作，或者浏览器执行的操作(例如单击鼠标或加载页面)是事件的示例，并且JavaScript包含在如果我们希望在这些事件中发生一些事情。
HTML提供了事件处理程序属性，这些属性可以与JavaScript代码一起使用，并且可以对事件执行某些操作。
语法：
<element event = "JS code">
示例：
<input type="button" value="Click" onclick="alert('嗨，你好吗')">
输出：
HTML可以包含以下事件，例如：
表单事件：重置，提交等
选择事件：文本字段，文本区域等
焦点事件：获取焦点，失去焦点等
鼠标事件：选择， 鼠标点击松开， 鼠标移动， 鼠标按下，鼠标单击， 鼠标双击等。
以下是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可以更改HTML元素的内容</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello Lidihuo!";
}
</script>
</body>
</html>
2)JavaScript可以更改HTML样式
示例：
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript可以更改HTML元素的样式。</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>
使用外部JavaScript
假设您有多个应该具有相同JavaScript的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>外部JavaScript示例</h2>
<form onsubmit="fun()">
<label>输入您的姓名：</label><br>
<input type="text" name="uname" id="frm1"><br>
<label>输入您的电子邮件地址：</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+ "您已经成功提交了详细信息");
}
输出：
外部JavaScript示例
HTML <noscript>标记
HTML
示例：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>此文本在浏览器中不可见。</noscript>
</body>
</html>
