### JavaScript 常用函数、属性与事件集详解
#### 一、JavaScript 概述
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它通常被用作客户端脚本语言，嵌入到HTML页面中，在浏览器端执行，用来实现网页动态效果。
#### 二、基本语法与概念
**1. 输出语句**
- `document.write("")`: 用于向文档中写入文本或HTML内容。
- **示例**：
```javascript
document.write("Hello, World!");
```
**2. 注释**
- 单行注释：`//`
- **示例**：
```javascript
// 这是一条单行注释
```
**3. HTML 文档结构**
- 标准的HTML文档结构由`<html>`标签包裹，内部包含`<head>`和`<body>`两部分。
- **示例**：
```html
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
```
**4. 浏览器窗口中的DOM结构**
- 浏览器窗口中的主要对象包括：`window`、`navigator`、`screen`、`history`、`location`和`document`。
- **示例**：
```javascript
console.log(window.navigator.userAgent); // 获取用户代理
```
**5. 获取表单元素的名称和值**
- 使用`getElementById`方法获取表单元素，并通过`.name`或`.value`属性访问其名称或值。
- **示例**：
```javascript
var element = document.getElementById("elementId");
console.log(element.name); // 输出元素的名称
console.log(element.value); // 输出元素的值
```
**6. 字符串大小写转换**
- 使用`.toUpperCase()`将字符串转换为大写；使用`.toLowerCase()`将字符串转换为小写。
- **示例**：
```javascript
var input = "hello world";
var output = input.toUpperCase();
document.getElementById("output").value = output;
```
**7. 数据类型**
- JavaScript 的基本数据类型包括：`String`、`Number`、`Boolean`、`Null`、`Object`和`Function`。
**8. 字符串与数字之间的转换**
- 将字符串转换为整数或浮点数：`parseInt()`、`parseFloat()`
- 将数字转换为字符串：`"" + 变量`
- **示例**：
```javascript
var num = 123;
var strNum = "" + num; // 转换为字符串
```
**9. 字符串长度**
- 使用`.length`属性获取字符串长度。
- **示例**：
```javascript
var str = "Hello, World!";
console.log(str.length); // 输出 13
```
**10. 字符串连接**
- 使用`+`操作符连接字符串。
- **示例**：
```javascript
var str1 = "Hello";
var str2 = "World";
var result = str1 + " " + str2; // 结果为 "Hello World"
```
**11. 比较操作符**
- JavaScript 支持多种比较操作符，如`==`（等于）、`!=`（不等于）、`>`（大于）、`>=`（大于等于）、`<`（小于）、`<=`（小于等于）。
**12. 变量声明**
- 使用`var`关键字声明变量。
- **示例**：
```javascript
var x = 10;
```
**13. 条件语句**
- `if (条件) { ... } else { ... }`: 根据条件执行不同的代码块。
- **示例**：
```javascript
var age = 18;
if (age >= 18) {
console.log("成年人");
} else {
console.log("未成年人");
}
```
**14. 循环结构**
- `for (初始化表达式; 条件; 更新表达式) { 循环体 }`: 用于重复执行一段代码。
- **示例**：
```javascript
for (var i = 0; i < 5; i++) {
console.log(i);
}
```
**15. 循环中断**
- 使用`break`关键字退出循环。
- **示例**：
```javascript
for (var i = 0; i < 10; i++) {
if (i === 5) {
break;
}
console.log(i);
}
```
**16. 函数定义**
- 函数定义的基本格式为：`function functionName([参数列表]) { 函数体 }`
- **示例**：
```javascript
function greet(name) {
console.log("Hello, " + name);
}
greet("John"); // 输出 "Hello, John"
```
**17. 表单处理**
- 处理多个表单时，可以使用`document.forms[index]`来访问特定的表单。
- **示例**：
```javascript
var form = document.forms[0];
console.log(form.name); // 输出第一个表单的名称
```
**18. 窗口操作**
- 打开新窗口：`window.open(url, target, features)`
- 关闭当前窗口：`window.close()`
- 访问当前窗口：`self`
- **示例**：
```javascript
window.open("http://example.com", "_blank", "width=500,height=500");
```
**19. 设置状态栏**
- 使用`window.status`属性设置浏览器状态栏中的文本。
- **示例**：
```javascript
window.status = "加载完成";
```
**20. 弹出对话框**
- `alert()`：显示一个警告对话框。
- `confirm()`：显示一个确认对话框，返回一个布尔值。
- `prompt()`：显示一个输入对话框，返回用户的输入。
- **示例**：
```javascript
var answer = confirm("Are you sure?");
if (answer) {
console.log("Confirmed");
}
```
**21. 修改当前URL**
- 使用`window.location.href`属性修改当前页面的URL。
- **示例**：
```javascript
window.location.href = "http://example.com";
```
**22. 获取表单数量**
- 使用`document.forms.length`获取文档中的表单数量。
- **示例**：
```javascript
console.log(document.forms.length); // 输出表单数量
```
**23. 关闭文档输出流**
- 使用`document.close()`关闭文档输出流。
- **示例**：
```javascript
document.write("<h1>Hello, World!</h1>");
document.close();
```
**24. 字符串连接**
- 使用`+=`运算符进行字符串追加。
- **示例**：
```javascript
var str = "Hello";
str += ", World!";
console.log(str); // 输出 "Hello, World!"
```
**25. 创建文档元素**
- 使用`document.createElement()`和`document.createTextNode()`创建新的DOM元素。
- **示例**：
```javascript
var div = document.createElement("div");
var text = document.createTextNode("New Div Content");
div.appendChild(text);
document.body.appendChild(div);
```
**26. 设置表单文本为空**
- 遍历表单中的所有元素，如果类型为"text"，则将其值设为空。
- **示例**：
```javascript
var form = document.forms[0];
for (var i = 0; i < form.elements.length; i++) {
if (form.elements[i].type === "text") {
form.elements[i].value = "";
}
}
```
**27. 检查复选框状态**
- 使用`.checked`属性检查复选框的状态。
- **示例**：
```javascript
var isChecked = document.forms[0].checkThis.checked;
console.log(isChecked); // 输出 true 或 false
```
**28. 处理单选按钮组**
- 获取单选按钮组的长度：`document.forms[0].groupName.length`
- 检查单选按钮是否被选中：`document.forms[0].groupName[i].checked`
- **示例**：
```javascript
var group = document.forms[0].radioGroup;
for (var i = 0; i < group.length; i++) {
if (group[i].checked) {
console.log(group[i].value);
}
}
```
**29. 获取下拉列表框值**
- 使用`.options[n].value`获取下拉列表框的值，其中`n`是选项的索引。
- **示例**：
```javascript
var select = document.forms[0].selectName;
var selectedValue = select.options[select.selectedIndex].value;
console.log(selectedValue);
```
**30. 字符串操作**
- 定义字符串：`var myString = new String("This is lightsword");`
- 转换大小写：`.toUpperCase()`、`.toLowerCase()`
- 查找字符串位置：`String1.indexOf("String2")`
- 获取指定位置的字符：`.charAt(index)`
- 获取子字符串：`.substring(startIndex, endIndex)`
- **示例**：
```javascript
var str = "Hello, World!";
console.log(str.substring(7, 12)); // 输出 "World"
```
**31. 数学函数**
- `Math.PI`：返回π的值
- `Math.SQRT2`：返回√2的值
- `Math.max(value1, value2)`：返回两个数中的最大值
- `Math.pow(base, exponent)`：计算幂次方
- **示例**：
```javascript
console.log(Math.max(10, 20)); // 输出 20
console.log(Math.pow(2, 3)); // 输出 8
```
以上是对标题和描述中的知识点进行了详细展开说明。这些基础知识对于任何JavaScript开发者来说都是必不可少的。掌握这些知识点能够帮助开发者更好地理解和应用JavaScript，从而实现更加复杂的功能。
