JavaScript基础与XSS相关概念教学文档<\/h1>

一、JavaScript核心语法<\/h2>

1. JS脚本引入方式<\/h3>
外部脚本不需要写<script><\/code>标签<\/li>
内联脚本需使用<script><\/code>标签包裹<\/li>
<\/ul>
2. 基础语法与变量声明<\/h3>
变量声明关键字<\/h4>

let<\/strong> - 声明变量（推荐使用）<\/li>
const<\/strong> - 声明常量<\/li>
var关键字已过时（不推荐使用）<\/em><\/li>
<\/ul>
变量声明示例<\/h4>
let<\/span> a<\/span>;        \/\/ 声明变量
<\/span><\/span><\/span><\/span>a<\/span> =<\/span> 10<\/span>;       \/\/ 赋值
<\/span><\/span><\/span><\/span>console<\/span>.log<\/span>(a<\/span>); \/\/ 输出: 10
<\/span><\/span><\/span><\/span>
<\/span><\/span>a<\/span> =<\/span> true<\/span>;     \/\/ 重新赋值为布尔值
<\/span><\/span><\/span><\/span>console<\/span>.log<\/span>(a<\/span>); \/\/ 输出: true
<\/span><\/span><\/span><\/span>
<\/span><\/span>const<\/span> b<\/span> =<\/span> 10<\/span>; \/\/ 声明常量（不可重新赋值）
<\/span><\/span><\/span><\/span>console<\/span>.log<\/span>(b<\/span>); \/\/ 输出: 10
<\/span><\/span><\/span><\/code><\/pre>JavaScript语言特点<\/h4>

弱类型语言<\/strong>：变量可以存放不同类型的值<\/li>
动态类型：运行时确定变量类型<\/li>
<\/ul>
3. 变量输出方式<\/h3>

alert()<\/strong> - 弹窗输出<\/li>
console.log()<\/strong> - 控制台输出（调试常用）<\/li>
document.write()<\/strong> - 文本输出到HTML文档中<\/li>
<\/ol>
4. JavaScript数据类型<\/h3>
主要数据类型<\/h4>

number<\/strong> - 数字类型（所有数字都属于此类型）<\/li>
boolean<\/strong> - 布尔类型（true\/false）<\/li>
null<\/strong> - 空值

typeof null<\/code> 输出 "object"<\/li>
表示对象为空<\/li>
<\/ul>
<\/li>
undefined<\/strong> - 未定义

变量声明但未赋值时的值<\/li>
<\/ul>
<\/li>
string<\/strong> - 字符串类型<\/li>
<\/ol>
类型检测<\/h4>

使用typeof<\/code>操作符获取数据类型<\/li>
<\/ul>
console<\/span>.log<\/span>(typeof<\/span> a<\/span>); \/\/ 输出变量a的数据类型
<\/span><\/span><\/span><\/code><\/pre>模板字符串（反引号字符串）<\/h4>

便于字符串拼接和插值<\/li>
<\/ul>
let<\/span> name<\/span> =<\/span> 'TOM'<\/span>;
<\/span><\/span>let<\/span> age<\/span> =<\/span> 18<\/span>;
<\/span><\/span>console<\/span>.log<\/span>(`我是<\/span>${<\/span>name<\/span>}<\/span>,我今年<\/span>${<\/span>age<\/span>}<\/span>岁`<\/span>);
<\/span><\/span>\/\/ 输出: 我是TOM,我今年18岁
<\/span><\/span><\/span><\/code><\/pre>5. 函数定义方式<\/h3>

具名函数<\/strong> - 使用函数名称定义<\/li>
匿名函数<\/strong> - 无名称的函数表达式<\/li>
箭头函数<\/strong> - ES6新语法（简洁的函数表达式）<\/li>
<\/ul>
二、高级概念<\/h2>
1. 自定义对象<\/h3>

使用对象字面量或构造函数创建自定义对象<\/li>
支持属性和方法的封装<\/li>
<\/ul>
2. JSON（JavaScript Object Notation）<\/h3>

轻量级数据交换格式<\/li>
基于JavaScript对象语法<\/li>
易于人阅读和编写，也易于机器解析和生成<\/li>
<\/ul>
3. DOM操作<\/h3>

文档对象模型（Document Object Model）<\/li>
通过JavaScript操作HTML元素<\/li>
包括元素选择、内容修改、属性操作等<\/li>
<\/ul>
三、事件监听<\/h2>
1. 创建格式<\/h3>

使用事件监听器绑定事件处理函数<\/li>
支持多种事件绑定方式<\/li>
<\/ul>
2. 常见事件<\/h3>

鼠标事件：click、mouseover、mouseout等<\/li>
键盘事件：keydown、keyup、keypress等<\/li>
表单事件：submit、change、focus等<\/li>
窗口事件：load、resize、scroll等<\/li>
<\/ul>
3. 模块化优化<\/h3>

使用模块化组织代码结构<\/li>
提高代码可维护性和复用性<\/li>
<\/ul>
四、XSS相关安全注意事项<\/h2>
安全实践要点<\/h3>

输入验证<\/strong> - 对所有用户输入进行严格验证<\/li>
输出编码<\/strong> - 在输出数据到HTML前进行适当编码<\/li>
使用安全API<\/strong> - 避免使用不安全的DOM操作方法<\/li>
内容安全策略<\/strong> - 实施CSP限制脚本执行<\/li>
<\/ol>
开发规范<\/h3>

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

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