渗透测试-03：JavaScript
JavaScript 学习
语言规则
- 语句末尾要加
; - 流程控制的条件要加
()
JS引入HTML
行内引入
<body>
<input type="button" onclick="alert('行内引入js');"></input>
</body>
内部引入
<head>
<script type='text/javascript'>
alert("内部引入js");
</script>
</head>
外部引入
外部引入时不需要加 <script> </script>
index.html
<head>
<script type="text/javascript" src="test.js"></script>
</head>
test.js
// 外部引入时，通常要等页面加载完成后进行操作
window.onload = function() {
alert("外部引入js");
}
数据类型
基本数据类型：String、Number、Boolean、Nndefined、Null、Symbol
引用数据类型：Object、Array、Function
三种等号
-
=赋值符 -
==判断值是否相等 -
===判断值和类型是否都相等
let和const
-
let声明的变量只在let命令所在的代码块内有效 -
const声明一个只读的常量，一旦声明，常量的值就不能改变
变量声明
var name = "Toki";
undefined和null
<script>
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
</script>
闭包
<script>
var add = (function (a, b) {
return function () {return a + b;}
})(1, 2);
add(); // 返回 3
</script>
prototype 原型对象
用于操作构造函数
<script>
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
return this.firstName + " " + this.lastName;
};
</script>
常用函数
<script>
alert(); // 弹窗
document.write(); // 在页面渲染之前将 HTML 代码写到文档
console.log(); // 控制台输出
typeof "Toki" // 查看类型
</script>
DOM 操作
获取对应 id 的元素标签，并覆盖原来的文本内容
<script>
document.getElementById("id").innerHTML = "新内容";
document.getElementById('id').style.backgroundColor = 'red';
</script>
获取 表单 的方法
<script>
// 获取 ID 为 form1 的表单
var form1 = document.getElementById("form1");
// 获取 name 为 form2 的表单
var form2 = document.forms["form2"];
// 获取第3个表单
var form3 = document.forms[2];
</script>
获取 表单元素 的方法
<script>
// 获取 name 为 username 的表单元素
var form1 = document.forms["form1"];
var objUsername = form1.elements["username"];
// 获取第1个表单的元素
var objUsername = form1.elements[0];
// 获取第3个表单的元素
var objUsername = form1.elements[2];
// 获取 name 为 Toki 的所有元素
var objToki = form1.elements["Toki"];
alert(objToki.length);
alert(objToki[1].value);
</script>
JS 事件
静态添加事件
<body>
<input type="button" onclick="alert('当鼠标点击时弹窗');">
<form method="post" onsubmit="alert('当表单提交时弹窗');"></form>
</body>
动态添加事件
<body>
<input type="button" id="btn1">
<input type="button" id="btn2">
</body>
<script>
document.getElementById("btn1").onclick = function(){
alert("点击了按钮1");
}
function test(){
alert("点击了按钮");
}
document.getElementById("btn2").onclick = test;
</script>
| 事件 | 描述 |
|---|---|
| onclick | 当鼠标点击时 |
| ondbclick | 当鼠标双击时 |
| onmouseover | 当鼠标在元素上经过时 |
| onmouseout | 当鼠标在元素上离开时 |
| onmousedown | 当鼠标按下时 |
| onmouseup | 当鼠标松开时 |
| onmousemove | 当鼠标移动时 |
| onkeydown | 当键盘按键按下时 |
| onkeyup | 当键盘按键松开时 |
| onkeypress | 当键盘按键一直按着时 |
| onsubmit | 当表单提交时 |
| onreset | 当表单重置时 |
| onfocus | 当元素获得焦点时 |
| onblur | 当元素失去焦点时 |
| onselect | 当元素文本被选中时 |
| onchange | 当元素改变时 |
| onload | 浏览器已完成页面的加载 |
| onunload | 当页面退出时 |
| onresize | 当窗口或框架调整大小时 |
| onerror | 当加载文档或图片发生错误时 |
| onabort | 当图片加载中断时 |
