JavaScript基础与XSS相关概念教学文档

一、JavaScript核心语法

1. JS脚本引入方式

• 外部脚本不需要写<script>标签
• 内联脚本需使用<script>标签包裹

2. 基础语法与变量声明

变量声明关键字

• let - 声明变量（推荐使用）
• const - 声明常量
• var关键字已过时（不推荐使用）

变量声明示例

let a;        // 声明变量
a = 10;       // 赋值
console.log(a); // 输出: 10

a = true;     // 重新赋值为布尔值
console.log(a); // 输出: true

const b = 10; // 声明常量（不可重新赋值）
console.log(b); // 输出: 10

JavaScript语言特点

• 弱类型语言：变量可以存放不同类型的值
• 动态类型：运行时确定变量类型

3. 变量输出方式

1. alert() - 弹窗输出
2. console.log() - 控制台输出（调试常用）
3. document.write() - 文本输出到HTML文档中

4. JavaScript数据类型

主要数据类型

1. number - 数字类型（所有数字都属于此类型）
2. boolean - 布尔类型（true/false）
3. null - 空值
   • typeof null 输出 "object"
   • 表示对象为空
4. undefined - 未定义
   • 变量声明但未赋值时的值
5. string - 字符串类型

类型检测

• 使用typeof操作符获取数据类型

console.log(typeof a); // 输出变量a的数据类型

模板字符串（反引号字符串）

• 便于字符串拼接和插值

let name = 'TOM';
let age = 18;
console.log(`我是${name},我今年${age}岁`);
// 输出: 我是TOM,我今年18岁

5. 函数定义方式

• 具名函数 - 使用函数名称定义
• 匿名函数 - 无名称的函数表达式
• 箭头函数 - ES6新语法（简洁的函数表达式）

二、高级概念

1. 自定义对象

• 使用对象字面量或构造函数创建自定义对象
• 支持属性和方法的封装

2. JSON（JavaScript Object Notation）

• 轻量级数据交换格式
• 基于JavaScript对象语法
• 易于人阅读和编写，也易于机器解析和生成

3. DOM操作

• 文档对象模型（Document Object Model）
• 通过JavaScript操作HTML元素
• 包括元素选择、内容修改、属性操作等

三、事件监听

1. 创建格式

• 使用事件监听器绑定事件处理函数
• 支持多种事件绑定方式

2. 常见事件

• 鼠标事件：click、mouseover、mouseout等
• 键盘事件：keydown、keyup、keypress等
• 表单事件：submit、change、focus等
• 窗口事件：load、resize、scroll等

3. 模块化优化

• 使用模块化组织代码结构
• 提高代码可维护性和复用性

四、XSS相关安全注意事项

安全实践要点

1. 输入验证 - 对所有用户输入进行严格验证
2. 输出编码 - 在输出数据到HTML前进行适当编码
3. 使用安全API - 避免使用不安全的DOM操作方法
4. 内容安全策略 - 实施CSP限制脚本执行

开发规范

• 避免使用已过时的var关键字
• 合理使用const和let进行变量声明
• 对用户输入保持警惕，防止XSS攻击
• 遵循最小权限原则，限制脚本的执行权限

注：本文档仅包含技术学习内容，实际开发中应严格遵守网络安全法规，负责任地使用相关技术。