### 前言
在前端开发领域，JavaScript（简称JS）是不可或缺的一部分，它为网页提供了动态交互功能。本文将详细介绍“js 例子 最常用的100个例子”中的部分核心知识点，帮助开发者更好地理解和应用这些基本概念。
### 1. 输出到页面：`document.write("")`
`document.write()` 方法用于在文档流中写入文本、HTML 或 XML。例如，`document.write("Hello World!")` 可以将 "Hello World!" 写入当前文档。但请注意，此方法会覆盖页面已有的内容，除非与 `document.open()` 和 `document.close()` 结合使用。
### 2. 注释：`//` 和 `/* */`
JavaScript 支持两种注释方式：单行注释（`//`）和多行注释（`/* ... */`）。例如：
```javascript
// 这是一个单行注释
/* 这是一个
多行注释 */
```
### 3. HTML 文档结构：`document->html->(head,body)`
HTML 文档的基本结构包括 `<html>` 标签，其中包含 `<head>` 和 `<body>` 两个主要部分。`<head>` 部分通常用于存放文档元数据，如标题、样式表链接等；`<body>` 部分则包含实际可见的内容。
### 4. DOM 结构：`window->(navigator,screen,history,location,document)`
浏览器窗口对象 `window` 是 JavaScript 的全局对象，包含多个子属性，如 `navigator`（浏览器信息）、`screen`（屏幕信息）、`history`（浏览历史）、`location`（当前页面地址）和 `document`（当前文档）。
### 5. 获取元素属性值：`document.getElementById("元素ID").name(value)`
使用 `getElementById` 方法可以通过指定的 ID 获取页面中的某个元素，然后可以访问该元素的属性。例如，获取 ID 为 "myElement" 的元素的 `name` 属性值，可使用 `document.getElementById("myElement").name`。
### 6. 小写字母转换为大写：`document.getElementById("output").value=document.getElementById("input").value.toUpperCase();`
`toUpperCase` 方法用于将字符串中的所有字母转换为大写形式。示例代码表示将 ID 为 "input" 的元素中的值转换为大写后赋值给 ID 为 "output" 的元素。
### 7. JavaScript 数据类型：`String, Number, Boolean, Null, Object, Function`
JavaScript 支持多种基本数据类型，包括字符串 (`String`)、数字 (`Number`)、布尔值 (`Boolean`)、空值 (`Null`)、对象 (`Object`) 和函数 (`Function`)。
### 8. 类型转换方法：`parseInt()`, `parseFloat()`
- `parseInt(string, radix)` 方法用于解析一个字符串并返回一个整数。
- `parseFloat(string)` 方法用于解析一个字符串并返回一个浮点数。
例如，`parseInt("123", 10)` 返回 123。
### 9. 字符串连接：`+`
字符串可以通过加号 (`+`) 进行连接。例如，`"Hello" + "World"` 结果为 `"HelloWorld"`。
### 10. 获取字符串长度：`.length`
字符串的 `.length` 属性用于获取其长度。例如，`"hello".length` 的结果为 5。
### 11. 字符串点操作符：`.`
使用点操作符可以访问字符串的方法或属性。例如，`"hello".charAt(1)` 返回 "e"。
### 12. 比较运算符：`==`, `!=`, `>`, `>=`, `<`, `<=`
比较运算符用于比较两个值。例如：
- `a == b`：检查 a 是否等于 b。
- `a != b`：检查 a 是否不等于 b。
- `a > b`：检查 a 是否大于 b。
- `a >= b`：检查 a 是否大于等于 b。
- `a < b`：检查 a 是否小于 b。
- `a <= b`：检查 a 是否小于等于 b。
### 13. 变量声明：`var`
`var` 关键字用于声明变量。例如，`var x = 10;` 定义了一个名为 `x` 的变量，并将其初始化为 10。
### 14. 条件语句：`if(condition){} else{} `
条件语句用于基于不同条件执行不同的代码块。例如：
```javascript
if (age > 18) {
console.log("成年人");
} else {
console.log("未成年人");
}
```
### 15. 循环结构：`for([initialExpression]; [condition]; [updateExpression])`
`for` 循环用于重复执行一段代码，直到满足特定条件为止。例如：
```javascript
for (let i = 0; i < 10; i++) {
console.log(i);
}
```
### 16. 循环控制：`break`
`break` 语句用于立即退出循环。例如，在遍历数组时，如果找到了所需元素，则可以使用 `break` 退出循环。
### 17. 函数定义：`function functionName([parameters]) { statements }`
函数是一段可重复使用的代码块。例如：
```javascript
function greet(name) {
console.log("Hello, " + name);
}
greet("Alice"); // 输出 "Hello, Alice"
```
### 18. 访问表单：`document.forms[0]`, `document.forms[1]`
通过 `document.forms` 可以访问页面中的表单元素。例如，`document.forms[0]` 表示第一个表单。
### 19. 打开新窗口：`window.open()`
`window.open(url, target, features)` 方法用于打开一个新的浏览器窗口。例如，`window.open("https://www.example.com", "_blank")` 可以在一个新标签页中打开网址。
### 20. 设置状态栏文本：`window.status`
`window.status` 属性用于设置或返回浏览器状态栏中的文本。例如，`window.status = "Loading...";` 可以设置状态栏文本。
### 21. 显示警告框：`window.alert()`
`alert(message)` 方法用于显示一个警告框，其中包含指定的消息。例如，`alert("Warning!");` 显示警告框。
### 22. 确认对话框：`window.confirm()`
`confirm(message)` 方法用于显示一个确认对话框，用户可以选择确认或取消。例如，`confirm("Do you want to continue?")` 显示确认对话框。
### 23. 输入对话框：`window.prompt()`
`prompt(message, default)` 方法用于显示一个输入对话框，用户可以在其中输入文本。例如，`prompt("Enter your name:", "John Doe")` 显示输入对话框。
### 24. 当前页面地址：`window.location.href`
`window.location.href` 属性用于设置或返回当前页面的 URL。例如，`window.location.href = "https://www.example.com";` 可以导航到新的页面。
### 25. 获取表单数量：`document.forms.length`
`document.forms.length` 返回页面中表单的数量。例如，如果页面中有两个表单，`document.forms.length` 的值为 2。
### 26. 结束文档写入：`document.close()`
`document.close()` 方法用于结束文档写入。当使用 `document.write()` 后，应调用 `document.close()` 来关闭文档写入。
### 27. 赋值操作符：`=`
赋值操作符用于将值分配给变量。例如，`x = 10` 将 10 分配给变量 `x`。
### 28. 创建元素和文本节点：`document.createElement()`, `document.createTextNode()`
- `document.createElement(tagName)` 用于创建一个新的 HTML 元素。
- `document.createTextNode(text)` 用于创建一个文本节点。
例如，`var div = document.createElement("div");` 创建一个新的 `<div>` 元素。
### 29. 获取元素：`document.getElementById()`
`document.getElementById(id)` 用于通过元素的 ID 获取该元素。例如，`document.getElementById("myDiv")` 可以获取 ID 为 "myDiv" 的元素。
### 30. 清空表单文本字段
这段代码展示了如何清空表单中的所有文本字段。例如：
```javascript
var form = window.document.forms[0];
for (var i = 0; i < form.elements.length; i++) {
if (form.elements[i].type == "text") {
form.elements[i].value = "";
}
}
```
### 31. 检查复选框是否被选中：`document.forms[0].checkThis.checked`
`checked` 属性用于检查复选框是否被选中。例如，`document.forms[0].checkThis.checked` 返回 `true` 如果复选框被选中，否则返回 `false`。
### 32. 获取复选框组的选项数量：`document.forms[0].groupName.length`
`length` 属性用于获取复选框组中选项的数量。例如，`document.forms[0].groupName.length` 返回复选框组的选项数量。
### 33. 检查单选按钮是否被选中：`checked`
与复选框类似，单选按钮也可以使用 `checked` 属性来判断是否被选中。例如，`document.forms[0].radioButton.checked` 返回 `true` 如果单选按钮被选中，否则返回 `false`。
### 34. 获取下拉列表的值：`document.forms[0].selectName.options[n].value`
`options` 属性用于获取下拉列表中的选项。例如，`document.forms[0].selectName.options[1].value` 返回下拉列表中第二个选项的值。
### 35. 创建字符串对象：`new String()`
可以使用 `new String()` 构造函数创建字符串对象。例如，`var myString = new String("This is lightsword");` 创建了一个字符串对象。
### 36. 字符串大小写转换：`toUpperCase()`, `toLowerCase()`
- `toUpperCase()` 方法将字符串中的所有字符转换为大写。
- `toLowerCase()` 方法将字符串中的所有字符转换为小写。
例如，`"hello".toUpperCase()` 返回 `"HELLO"`。
### 37. 字符串查找：`indexOf()`
`indexOf(substring)` 方法用于查找指定子字符串在字符串中的位置。例如，`"hello world".indexOf("world")` 返回 6，表示 "world" 在字符串 "hello world" 中的位置是从第 6 位开始的。
### 38. 获取字符串中指定位置的字符：`charAt()`
`charAt(index)` 方法返回字符串中指定位置的字符。例如，`"hello world".charAt(6)` 返回 "w"。
### 39. 获取字符串子串：`substring()`
`substring(startIndex, endIndex)` 方法用于获取字符串中的一部分。例如，`"hello world".substring(0, 5)` 返回 "hello"。
### 40. 数学函数：`Math.PI`, `Math.SQRT2`, `Math.max()`, `Math.pow()`, `Math.round()`, `Math.floor()`
- `Math.PI`：圆周率 π 的值。
- `Math.SQRT2`：2 的平方根的值。
- `Math.max(value1, value2)`：返回两个数值中的较大者。
- `Math.pow(base, exponent)`：返回底数的指数次幂的结果。
- `Math.round(number)`：对数值进行四舍五入。
- `Math.floor(Math.random() * (n1 - n2 + 1)) + n2`：生成介于 n2 和 n1 之间的随机整数。
### 41. 创建日期对象：`new Date()`
`new Date()` 构造函数用于创建日期对象。例如，`var today = new Date();` 创建一个表示当前日期和时间的对象。
### 42. 日期操作：`getTime()`, `getYear()`, `getFullYear()`, `getMonth()`, `getDate()`, `getDay()`, `getHours()`, `getMinutes()`, `getSeconds()`, `setTime()`, `setYear()`, `setMonth()`
- `getTime()`：返回自 1970 年 1 月 1 日以来的毫秒数。
- `getYear()`：获取年份（不建议使用）。
- `getFullYear()`：获取完整的四位数年份。
- `getMonth()`：获取月份（0-11）。
- `getDate()`：获取一个月中的日期。
- `getDay()`：获取一周中的某一天（0-6）。
- `getHours()`：获取小时数。
- `getMinutes()`：获取分钟数。
- `getSeconds()`：获取秒数。
- `setTime(value)`：设置日期和时间。
- `setYear(value)`：设置年份。
- `setMonth(value)`：设置月份。
以上是 JavaScript 中一些常用的基础知识点，通过这些知识点的学习和实践，开发者可以更好地掌握 JavaScript 的核心功能，为构建复杂的前端应用奠定坚实的基础。
