文章目录
- 在网页使用JavaScript 代码的方式
- 常用的JavaScript 事件
- 常用的JavaScript 对象
在网页使用JavaScript 代码的方式
在网页中使用 JavaScript 代码的方式主要有三种：
-
内联方式（Inline）：
在 HTML 文件中直接嵌入 JavaScript 代码，通过使用
<script>标签。这段代码可以放在文档的<head>或<body>部分。例如：<!DOCTYPE html> <html> <head> <title>Inline JavaScript Example</title> <script> // JavaScript代码 function myFunction() { alert("Hello, World!"); } </script> </head> <body> <button onclick="myFunction()">Click me</button> </body> </html> -
内部脚本（Internal Script）：
将 JavaScript 代码放置在 HTML 文件的
<script>标签内，但是通过使用外部文件的方式引入。这有助于将 JavaScript 代码与 HTML 分离，提高代码的可维护性。例如：<!DOCTYPE html> <html> <head> <title>Internal Script Example</title> <script src="myscript.js"></script> </head> <body> <button onclick="myFunction()">Click me</button> </body> </html>其中，
myscript.js是包含 JavaScript 代码的外部文件。 -
外部脚本（External Script）：
将 JavaScript 代码放在一个独立的外部文件中，通过
<script>标签引用该文件。这是最常见的方式，可以在多个页面之间共享相同的 JavaScript 代码。例如：HTML 文件：
<!DOCTYPE html> <html> <head> <title>External Script Example</title> <script src="myscript.js"></script> </head> <body> <button onclick="myFunction()">Click me</button> </body> </html>JavaScript 文件（
myscript.js）：// JavaScript代码 function myFunction() { alert("Hello, World!"); }
这些方式可以根据项目的需要选择使用。内联方式适用于简单的小段代码，而外部脚本更适用于大型项目，使得代码更易维护和管理。
常用的JavaScript 事件
JavaScript 事件是指用户与网页互动时触发的行为，例如点击按钮、提交表单、鼠标悬停等。以下是一些常用的 JavaScript 事件：
-
点击事件（click）：
-
触发条件：用户点击页面上的元素，如按钮、链接等。
-
示例：
document.getElementById("myButton").addEventListener("click", function() { alert("Button clicked!"); });
-
-
提交事件（submit）：
-
触发条件：用户提交表单时触发。
-
示例：
document.getElementById("myForm").addEventListener("submit", function(event) { event.preventDefault(); // 阻止表单的默认提交行为 alert("Form submitted!"); });
-
-
鼠标悬停事件（mouseover/mouseenter）：
-
触发条件：鼠标移动到元素上方时触发。
-
示例：
document.getElementById("myElement").addEventListener("mouseover", function() { alert("Mouse over the element!"); });
-
-
鼠标离开事件（mouseout/mouseleave）：
-
触发条件：鼠标离开元素时触发。
-
示例：
document.getElementById("myElement").addEventListener("mouseout", function() { alert("Mouse out of the element!"); });
-
-
键盘按下事件（keydown）：
-
触发条件：用户按下键盘上的任意键时触发。
-
示例：
document.addEventListener("keydown", function(event) { console.log("Key pressed: " + event.key); });
-
-
窗口加载事件（load）：
-
触发条件：整个页面及其所有资源加载完成时触发。
-
示例：
window.addEventListener("load", function() { alert("Page and all resources are loaded!"); });
-
这只是一小部分常见的 JavaScript 事件。JavaScript 提供了许多其他事件，如焦点事件、变化事件、滚动事件等，开发者可以根据需要选择适合的事件来响应用户行为。
常用的JavaScript 对象
JavaScript 中有许多内置对象，每个对象都具有特定的属性和方法，用于执行各种任务。以下是一些常用的 JavaScript 对象：
-
Object对象：-
Object是 JavaScript 中所有对象的基类。 -
示例：
var person = new Object(); person.name = "John"; person.age = 30;
-
-
Array对象：-
Array对象用于创建和操作数组。 -
示例：
var colors = ["red", "green", "blue"];
-
-
String对象：-
String对象用于创建和操作字符串。 -
示例：
var message = "Hello, World!";
-
-
Number对象：-
Number对象用于处理数字值。 -
示例：
var num = new Number(42);
-
-
Boolean对象：-
Boolean对象用于处理布尔值。 -
示例：
var isTrue = new Boolean(true);
-
-
Function对象：-
Function对象用于创建函数。 -
示例：
var add = new Function("a", "b", "return a + b");
-
-
Date对象：-
Date对象用于处理日期和时间。 -
示例：
var currentDate = new Date();
-
-
RegExp对象：-
RegExp对象用于处理正则表达式。 -
示例：
var pattern = new RegExp("\\w+");
-
-
Math对象：-
Math对象提供了执行数学计算的方法和属性。 -
示例：
var result = Math.sqrt(16);
-
-
JSON对象：-
JSON对象用于处理 JSON 格式的数据。 -
示例：
var jsonData = '{"name": "John", "age": 30}'; var person = JSON.parse(jsonData);
-
这只是 JavaScript 中一些常用对象的简介，还有其他对象和自定义对象等。了解这些对象的特性和用法，可以更好地利用 JavaScript 进行开发。
