html中javascript的常用函数
- 格式：docx
- 大小：37.85 KB
- 文档页数：6
HTML中JavaScript的常用函数
一、 基本概念
1.1 JavaScript
JavaScript是一种轻量级、解释性的程序设计语言，主要用于网页开发，可以直接嵌入HTML中，由浏览器执行。JavaScript可以修改HTML元素、处理表单数据、创建动态效果，并与服务器进行交互，为网页增加交互性和动态性。
1.2 HTML
HTML是一种用于创建网页的标记语言，它使用标签来定义网页的结构和内容. 在HTML中嵌入JavaScript代码，可以使网页更加丰富和有趣。
二、 JavaScript常用函数
2.1 document.getElementById()
document.getElementById()函数用于通过元素的id属性获取元素的引用。通过该函数可以操作和修改网页中的HTML元素。例如：
```javascript
var element = document.getElementById("myElement");
element.innerHTML = "Hello, World!";
```
2.2 document.createElement()
document.createElement()函数用于创建新的HTML元素。该函数接受一个参数，指定要创建的元素的类型，然后返回对新创建元素的引用。例如： ```javascript
var newElement = document.createElement("div");
newElement.innerHTML = "This is a new element!";
document.body.appendChild(newElement);
```
2.3 addEventListener()
addEventListener()函数用于为HTML元素添加事件监听器。该函数接受三个参数，分别是要监听的事件类型、事件发生时要调用的函数以及一个布尔值，指定事件是在捕获阶段还是冒泡阶段触发。例如：
```javascript
document.getElementById("myButton").addEventListener("click",
function(){
alert("Button Clicked!");
});
```
2.4 setTimeout() 和 setInterval()
setTimeout()函数用于在指定的时间间隔后执行一次指定的函数。setInterval()函数用于以指定的时间间隔重复执行指定的函数。例如：
```javascript
setTimeout(function(){
alert("One second has passed!");
}, 1000);
setInterval(function(){ console.log("This function is executed every 2 seconds.");
}, 2000);
```
2.5 confirm() 和 prompt()
confirm()函数显示一个带有“确定”和“取消”按钮的对话框。prompt()函数显示一个带有输入框的对话框，可以用于接收用户输入。例如：
```javascript
var result = confirm("Are you sure you want to delete this
item?");
if(result){
var input = prompt("Please input your name:");
alert("Hello, " + input);
}
```
2.6 parseInt() 和 parseFloat()
parseInt()函数用于将字符串转换为整数，parseFloat()函数用于将字符串转换为浮点数。例如：
```javascript
var stringNumber = "10.5";
var integerNumber = parseInt(stringNumber);
var floatNumber = parseFloat(stringNumber);
console.log(integerNumber); // 10 console.log(floatNumber); // 10.5
```
2.7 JSON.parse() 和 JSON.stringify()
JSON.parse()函数用于将JSON格式的字符串转换为JavaScript对象，JSON.stringify()函数用于将JavaScript对象转换为JSON格式的字符串。例如：
```javascript
var jsonStr = '{"name": "John", "age": 25}';
var jsonObj = JSON.parse(jsonStr);
console.log(); // John
console.log(JSON.stringify(jsonObj)); // {"name": "John", "age":
25}
```
2.8 encodeURIComponent() 和 decodeURIComponent()
encodeURIComponent()函数用于将字符串进行编码，以便将其作为URL的一部分发送给服务器。decodeURIComponent()函数用于解码这样的字符串。例如：
```javascript
var originalString = "Hello, World!";
var encodedString = encodeURIComponent(originalString);
console.log(encodedString); // Hello2C20World21
console.log(decodeURIComponent(encodedString)); // Hello,
World! ```
2.9 Math对象的常用方法
Math对象是JavaScript中的内置对象，包含了一些常用的数学方法，例如：
```javascript
console.log(Math.sqrt(16)); // 4
console.log(Math.abs(-5)); // 5
console.log(Math.max(1, 2, 3)); // 3
console.log(Math.min(1, 2, 3)); // 1
```
2.10 Array对象的常用方法
Array对象是JavaScript中的内置对象，包含了一些常用的数组方法，例如：
```javascript
var array = [1, 2, 3, 4, 5];
console.log(array.length); // 5
console.log(array.join(",")); // 1,2,3,4,5
array.push(6);
console.log(array); // [1, 2, 3, 4, 5, 6]
array.pop();
console.log(array); // [1, 2, 3, 4, 5]
```
三、 总结 以上是HTML中JavaScript的常用函数，它们可以帮助我们实现更加丰富和复杂的网页交互和动态效果。掌握这些函数也可以使我们更加高效地开发网页应用。希望以上内容能够对您有所帮助，谢谢阅读！
