### JavaScript基础知识概览
#### 一、JavaScript简介
JavaScript是一种被广泛使用的脚本语言，它主要在网页浏览器中运行，用于向HTML页面添加交互功能。通过JavaScript，开发者可以轻松地检测用户活动并对这些活动做出反应，例如改变链接的颜色或显示弹出框等。
#### 二、JavaScript的作用
1. **响应事件**：实现复杂的用户交互，如点击按钮后的响应动作。
2. **验证数据**：确保用户输入的数据符合预期格式，提高系统的健壮性和安全性。
3. **获取和改变CSS样式**：动态调整网页的外观和布局。
4. **增强动态效果**：通过实现与用户的实时互动，提升用户体验。
5. **服务器异步通信**：使用如Ajax这样的技术实现与服务器的无刷新数据交换，提高了应用程序的响应速度。
#### 三、JavaScript的位置
JavaScript代码可以在网页中的多个位置放置：
1. **写在`<body>`标记中**：可以直接将JavaScript代码嵌入到HTML元素内，通过`onclick`等事件属性来调用函数。
```html
<a href="#" onclick="alert('刘俊德是一只大胖熊!!');">Action</a>
```
2. **写在`<head>`标记中**：通过`<script>`标签将JavaScript代码放在HTML文档的头部。
```html
<script type="text/javascript">
var flag = true;
function validate() { ... }
</script>
```
3. **写在外部文件中**：将JavaScript代码存储在一个单独的`.js`文件中，并通过`<script>`标签引用。
```html
<script type="text/javascript" src="some.js"></script>
```
#### 四、JavaScript基础
1. **与用户交互的基本方式**：
- `alert()`：在对话框中显示指定的字符串。
- `prompt()`：在对话框中接收用户的输入。
- `confirm()`：通过对话框向用户确认信息。
2. **JavaScript的基本数据类型**：
- `number`：用于表示数字。
- `string`：用于表示文本字符串。
- `boolean`：用于表示真/假值。
示例：
```javascript
var n = 2;
var str = "ECMAScript";
var flag = true;
```
3. **类型检测**：`typeof`操作符用于返回变量的类型。
- `undefined`：未定义的变量。
- `null`：特殊值，表示空或没有值。
- `number`：数值。
- `string`：字符串。
- `boolean`：布尔值。
- `object`：对象。
4. **特殊值**：
- `Infinity`：表示无穷大。
- `NaN`：表示非数字。
```javascript
isNaN("ABC") // 返回false，因为"ABC"不是数字
```
5. **类型转换**：
- `parseInt(...)` 和 `parseFloat(...)`：将字符串转换为整数或浮点数。
- `toString(...)`：将数值转换为字符串。
6. **事件处理**：
- `onclick`：鼠标单击事件。
- `onchange`：内容改变事件。
- `onfocus`：获得焦点事件。
- `onblur`：失去焦点事件。
- `onload`：元素加载显示事件。
- `onunload`：页面关闭事件。
- `onmouseout`：鼠标移出事件。
- `onDblClick`：鼠标双击事件。
#### 五、事件对象与事件冒泡
1. **事件对象**：提供了关于发生的事件的详细信息，包括键盘、鼠标和屏幕的状态等。
- 在Internet Explorer中，可以通过`window.event`访问全局事件对象。
- 在Firefox中，事件对象仅在事件发生时创建。
2. **事件对象的属性**：
- `clientX`, `clientY`：相对于浏览器窗口的坐标。
- `screenX`, `screenY`：相对于屏幕的坐标。
- `offsetX`, `offsetY`：相对于触发事件的元素的坐标。
- `x`, `y`：相对于父元素的坐标。
- `button`：鼠标按下的键（1为左键，2为右键，4为中间键）。
- `altKey`, `shiftKey`, `ctrlKey`：是否按下了Alt、Shift或Ctrl键。
- `target` (Firefox) / `srcElement` (IE)：触发事件的DOM元素。
3. **事件冒泡**：当一个事件被触发后，它会由最内部的元素向外逐级传播到其父元素，直到到达文档的根节点。
- **阻止事件冒泡**：在IE中，可以通过设置`event.cancelBubble = true`来阻止事件冒泡。
- 在Firefox中，使用`event.stopPropagation()`来阻止事件冒泡。
#### 总结
JavaScript是一种功能强大的客户端脚本语言，它不仅可以增加网页的交互性，还可以实现复杂的逻辑处理。掌握JavaScript的基础知识和常见事件处理技巧对于开发高质量的Web应用程序至关重要。随着技术的发展，JavaScript的应用范围也在不断扩大，从简单的网页交互到复杂的Web应用和服务端开发，JavaScript都发挥着重要的作用。
