3_JavaScript基础学习笔记（Web安全方向）

JavaScript基础学习笔记（Web安全方向）

目录

  1. JavaScript概述
  2. 代码嵌入方式
  3. 基本语法与注释
  4. 变量与作用域
  5. 数据类型详解
  6. 运算符与表达式
  7. 流程控制语句
  8. 函数
  9. 数组与字典
  10. JSON序列化与反序列化
  11. 时间处理
  12. 面向对象与原型
  13. DOM操作
  14. 事件与定时器
  15. 常用内置函数与对象
  16. 总结与建议

1. JavaScript概述

1.1 什么是JavaScript

  • JavaScript是一种轻量级、解释型、面向对象的脚本语言。
  • 诞生于1995年，最初用于表单验证。
  • 注意：JavaScript与Java没有直接关系，原名Livescript，因市场推广改名。
  • 运行在客户端（浏览器），无需编译，由浏览器解析执行。

1.2 主要用途

  • 修改HTML和CSS（动态更新页面内容）
  • 验证表单数据
  • 检测浏览器特性
  • 创建和操作Cookies
  • 实现动画、交互效果
  • AJAX异步请求（与服务器通信）

1.3 浏览器支持

所有主流浏览器（IE、Edge、Chrome、Firefox、Safari、Opera等）均支持JavaScript。

2. 代码嵌入方式

2.1 内嵌式（内部脚本）

在HTML页面中使用 <script> 标签直接书写JavaScript代码。

<script>
    alert("内嵌式");
</script>

理论上可以放在<head>或<body>中，但建议放在<body>末尾，避免阻塞页面渲染。

2.2 外链式（外部脚本）

将JS代码写在独立的 .js 文件中，通过src属性引入。

<script src="js/script.js"></script>

注意：引入外部文件时，<script>标签内不能书写代码。

2.3 行内式（事件属性）

直接写在HTML标签的事件属性中。

<input type="button" value="点我" onclick="alert('Hello!');">
<button onclick="alert('欢迎学习JS');">点我</button>

3. 基本语法与注释

3.1 语句

  • JavaScript程序由一系列语句组成。
  • 每条语句以分号（;）结尾（推荐，但不是强制）。
  • 语句中包含值、运算符、表达式、关键词和注释。

3.2 注释

// 单行注释（Ctrl+/）

/*
   多行注释
   （Ctrl+Shift+/）
*/

注意：多行注释不能嵌套，但可以在多行注释内使用单行注释。

4. 变量与作用域

4.1 变量声明

使用 var、let 或 const 关键字声明变量（ES6后推荐 let 和 const）。

var a = 'moonsec';   // 传统方式
let b = 10;          // 块级作用域
const c = 3.14;      // 常量，不可重新赋值
  • 变量名规则同PHP：字母、数字、下划线、$，不能以数字开头。
  • 区分大小写。
  • 未赋值的变量值为 undefined。

4.2 保留关键字

不能用作变量名、函数名或标签。包括：break、case、catch、class、const、continue、debugger、default、delete、do、else、export、extends、finally、for、function、if、import、in、instanceof、new、return、super、switch、this、throw、try、typeof、var、void、while、with、yield 等。

4.3 作用域

局部变量：在函数内部用 var/let 声明，只在函数内可见。

function myFunction() {
    var carName = "Volvo";
    // 此处可访问 carName
}
// 此处无法访问 carName

全局变量：在函数外部声明，或在函数内部未使用 var/let 直接赋值（严格模式下报错）。

var carName = "Volvo";
function myFunction() {
    // 可访问 carName
}

ES6块级作用域：let 和 const 只在 {} 块内有效，var 无块级作用域。

5. 数据类型详解

JavaScript 是动态类型语言，变量的类型由值决定。

5.1 基本数据类型（原始类型）

类型 说明 示例
number 数字（整数和浮点数） 123, 3.14, -5, 0xff
string 字符串（单引号/双引号均可） "hello", 'world'
boolean 布尔值 true, false
undefined 未定义（变量已声明但未赋值） var a; → undefined
null 空对象引用（表示空值） var b = null;
symbol (ES6) 唯一标识符 Symbol()

5.2 对象类型（引用类型）

  • object：包括数组、函数、日期、正则等。
  • function：函数也是一种对象。

5.3 类型检测（typeof）

typeof "abc"      // "string"
typeof 123        // "number"
typeof true       // "boolean"
typeof undefined  // "undefined"
typeof null       // "object" （历史遗留问题）
typeof [1,2,3]    // "object"
typeof function(){} // "function"
typeof {}         // "object"

5.4 数值类型特殊值

  • NaN（Not a Number）：表示非数字，可使用 isNaN() 检测。
  • Infinity / -Infinity：无穷大，可使用 isFinite() 检测。

进制表示：

  • 八进制：0123（以0开头，但严格模式下禁用）
  • 十六进制：0x1A
  • 科学计数法：1.23e5

5.5 类型转换

parseInt("10.5")   // 10
parseFloat("10.5") // 10.5
Number("123")      // 123
String(123)        // "123"
Boolean(0)         // false

5.6 字符串操作

var str = "Hello World";
str.length;           // 11
str.charAt(0);        // "H"
str.indexOf("o");     // 4
str.substring(0, 5);  // "Hello"
str.slice(0, 5);      // "Hello"
str.toLowerCase();    // "hello world"
str.toUpperCase();    // "HELLO WORLD"
str.split(" ");       // ["Hello", "World"]
str.replace("World", "JS"); // "Hello JS"
str.trim();           // 去除首尾空格

5.7 布尔类型

布尔值常用于条件判断。比较运算返回布尔值。

==   // 值相等（自动类型转换）
===  // 值和类型都相等
!=   // 值不相等
!==  // 值或类型不相等

6. 运算符与表达式

6.1 算术运算符

+、-、*、/、%（取余）、++、--
注意：+ 也可用于字符串拼接。

6.2 赋值运算符

=、+=、-=、*=、/=、%=

6.3 比较运算符

>、<、>=、<=、==、===、!=、!==

6.4 逻辑运算符

  • &&（逻辑与，全真才真）
  • ||（逻辑或，一真即真）
  • !（逻辑非，取反）

6.5 三元运算符

var result = (条件) ? 真值 : 假值;
var max = (2 > 1) ? '>' : '<';
console.log(max); // '>'

7. 流程控制语句

7.1 条件语句

if...else if...else

if (score >= 90) {
    console.log("优秀");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

switch

switch (new Date().getDay()) {
    case 6:
        text = "周六";
        break;
    case 0:
        text = "周日";
        break;
    default:
        text = "工作日";
}

7.2 循环语句

while

while (条件) {
    // 循环体
}

do...while（至少执行一次）

do {
    // 循环体
} while (条件);

for

for (var i = 0; i < 10; i++) {
    console.log(i);
}

for...in（遍历对象属性或数组索引）

var arr = ["a", "b", "c"];
for (var index in arr) {
    console.log(arr[index]);
}

break：终止循环
continue：跳过本次循环，继续下一次

8. 函数

8.1 函数声明与调用

function add(a, b) {
    return a + b;
}
var result = add(3, 4); // 7

8.2 匿名函数

没有名字的函数，常作为参数传递或赋值给变量。

var sayHello = function(name) {
    console.log("Hello, " + name);
};
sayHello("moonsec");

8.3 自执行函数（IIFE）

创建后立即执行。

(function(arg) {
    console.log(arg);
})(1); // 输出1

8.4 函数参数与返回值

  • 参数个数可少于声明，未传参的值为 undefined。
  • 可用 arguments 对象访问所有实参。
  • 使用 return 返回结果，无 return 则返回 undefined。

9. 数组与字典

9.1 数组（Array）

创建方式：

var arr1 = [];                  // 空数组
var arr2 = [10, 20, "text", true];
var arr3 = new Array();         // 空数组
var arr4 = new Array(10, 20);   // [10,20]
var arr5 = new Array(10);       // 长度为10的稀疏数组

常用操作：

arr.push(ele);         // 尾部添加
arr.pop();             // 尾部移除并返回
arr.unshift(ele);      // 头部添加
arr.shift();           // 头部移除并返回
arr.splice(start, deleteCount, ...items); // 删除/替换/插入
arr.slice(start, end); // 切片
arr.reverse();         // 反转
arr.join(sep);         // 用分隔符合并成字符串
arr.concat(arr2);      // 合并
arr.sort();            // 排序（默认按字符串排序，可传比较函数）

9.2 字典（对象）

JavaScript中对象就是键值对集合（类似字典）。

var dict = {
    'k1': 'moonsec',
    'k2': 'moon',
    'age': 18
};

// 访问
console.log(dict['k1']);   // 或 dict.k1
// 遍历
for (var key in dict) {
    console.log(key + '=' + dict[key]);
}
// 添加/修改
dict['newKey'] = 'value';
// 删除
delete dict['age'];
delete dict.age;

10. JSON序列化与反序列化

序列化：将JavaScript对象转为JSON字符串。

var obj = {name: "moonsec", age: 18};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr); // {"name":"moonsec","age":18}

反序列化：将JSON字符串转为JavaScript对象。

var jsonStr = '{"name":"moonsec","age":18}';
var obj = JSON.parse(jsonStr);
console.log(obj.name); // moonsec

11. 时间处理

使用 Date 对象。

var now = new Date();
now.getFullYear();      // 年份（4位）
now.getMonth();         // 月份（0-11，0表示1月）
now.getDate();          // 日期（1-31）
now.getDay();           // 星期几（0-6，0表示周日）
now.getHours();         // 小时（0-23）
now.getMinutes();       // 分钟
now.getSeconds();       // 秒
now.getTime();          // 毫秒时间戳（1970.1.1至今）
now.toLocaleDateString(); // 本地日期字符串
now.toLocaleTimeString(); // 本地时间字符串

日期运算（加一天）：

var date = new Date();
date.setDate(date.getDate() + 1);
console.log(date);

12. 面向对象与原型

12.1 构造函数方式（ES5）

function Person(name) {
    this._name = name;
    this.getName = function() {
        return this._name;
    };
    this.setName = function(name) {
        this._name = name;
    };
}
var p = new Person("张三");
console.log(p.getName()); // 张三
p.setName("李四");
console.log(p.getName()); // 李四

12.2 ES6 Class方式

class Person {
    constructor(name) {
        this._name = name;
    }
    getName() {
        return this._name;
    }
    setName(name) {
        this._name = name;
    }
}
let p = new Person("张三");
console.log(p.getName());

12.3 原型（Prototype）

  • 每个函数都有 prototype 属性，指向原型对象。
  • 通过构造函数创建的对象，其 __proto__ 指向构造函数的 prototype。
  • 可以将公共属性和方法定义在原型上，实现共享。
function Person() {}
Person.prototype.sex = '男';
Person.prototype.sayHello = function() {
    console.log('Hello');
};
var p1 = new Person();
var p2 = new Person();
console.log(p1.sex); // '男'
console.log(p1.__proto__ === Person.prototype); // true

13. DOM操作

13.1 什么是DOM

文档对象模型（Document Object Model），将HTML文档表示为树形结构，允许JS动态操作页面内容、属性和样式。

13.2 获取元素

方法 说明
document.getElementById('id') 通过id获取一个元素
document.getElementsByName('name') 通过name属性获取集合
document.getElementsByClassName('cls') 通过class获取集合（IE8-不支持）
document.getElementsByTagName('div') 通过标签名获取集合
document.querySelector('selector') 通过CSS选择器获取第一个匹配
document.querySelectorAll('selector') 通过CSS选择器获取所有匹配

13.3 读取/修改内容

属性 说明
element.innerText 纯文本内容（不解析HTML）
element.innerHTML HTML内容（解析标签）
input.value 输入框的值
select.selectedIndex 下拉框选中的索引
textarea.value 文本域的值

13.4 操作样式

  • 通过 className 操作整个class字符串。
  • 通过 classList 操作单个class（add、remove、toggle）。
  • 直接修改行内样式：element.style.属性名（属性名用驼峰命名，如 fontSize）。
var div = document.getElementById('myDiv');
div.style.color = 'red';
div.style.fontSize = '20px';
div.classList.add('active');
div.classList.remove('hidden');

13.5 属性操作

方法 说明
element.getAttribute('attr') 获取属性值
element.setAttribute('attr', 'value') 设置属性
element.removeAttribute('attr') 删除属性

13.6 创建和添加元素

方式一：字符串拼接（insertAdjacentHTML）

var container = document.getElementById('container');
container.insertAdjacentHTML('beforeEnd', '<p><input type="text"></p>');
  • beforeBegin：元素之前
  • afterBegin：元素内部开头
  • beforeEnd：元素内部末尾
  • afterEnd：元素之后

方式二：DOM对象方式

var input = document.createElement('input');
input.setAttribute('type', 'text');
input.style.color = 'red';
var p = document.createElement('p');
p.appendChild(input);
document.getElementById('container').appendChild(p);

13.7 表单提交

document.getElementById('formId').submit();

14. 事件与定时器

14.1 事件绑定

方式一：HTML属性（行内）

<button onclick="alert('Clicked')">按钮</button>

方式二：DOM属性

document.getElementById('btn').onclick = function() {
    alert('Clicked');
};

方式三：addEventListener（推荐，可绑定多个）

element.addEventListener('click', function() {
    console.log('clicked');
});

14.2 常用事件

事件 触发时机
onclick 点击
onmouseover / onmouseout 鼠标移入/移出
onfocus / onblur 获得/失去焦点
onchange 内容改变
onsubmit 表单提交
onload 页面加载完成
onkeydown / onkeyup 按键

14.3 定时器

周期性执行（setInterval）

var timerId = setInterval(function() {
    console.log('每500ms执行一次');
}, 500);
clearInterval(timerId); // 停止

延迟执行（setTimeout）

var timerId = setTimeout(function() {
    console.log('5秒后执行一次');
}, 5000);
clearTimeout(timerId); // 取消

示例：定时更新时钟

function updateTime() {
    var now = new Date();
    document.getElementById('clock').value = now.toLocaleTimeString();
}
setInterval(updateTime, 1000);

15. 常用内置函数与对象

15.1 编码/解码

encodeURIComponent(str)   // 编码URI组件
decodeURIComponent(str)   // 解码URI组件
encodeURI(str)            // 编码完整URI
decodeURI(str)            // 解码完整URI
escape(str)               // 转义（不推荐）
unescape(str)             // 解码转义（不推荐）

15.2 eval()

将字符串作为代码执行（有安全风险，谨慎使用）。

eval("alert('hello')"); // 弹出hello

15.3 控制台调试

console.log("普通日志");
console.warn("警告");
console.error("错误");
console.table(array);   // 表格形式显示数组/对象

15.4 窗口与位置

location.href          // 当前URL
location.href = 'https://moonsec.com'; // 跳转
location.reload();     // 刷新页面

16. 总结与建议

  • JavaScript是Web前端核心语言，也是Web安全测试中必学的知识（XSS、DOM操作、AJAX等）。
  • 掌握基础语法、DOM操作、事件处理、Ajax（后续可补充）是进行前端安全分析的前提。
  • 建议多练习操作DOM、动态创建元素、事件绑定等，理解页面交互原理。
  • 注意 == 与 === 的区别，推荐使用 === 避免类型转换带来的意外。
  • 学习使用浏览器开发者工具（F12）进行调试，观察控制台输出和元素变化。

注意本笔记是源于暗月安全培训 https://edu.moonsec.com 的ai整合版

posted @ 2026-07-07 12:03  新手打怪兽  阅读(5)  评论(0)    收藏  举报