【web安全】javascript 基础（详细教程）

1 概述：
JavaScript 是目前 web 开发中不可缺少的脚本语言，js 不需要编译即可运行，
运行在客户端，需要通过浏览器来解析执行 JavaScript 代码。
诞生于 1995 年，当时的主要目的是验证表单的数据是否合法。
JavaScript 本来应该叫 Livescript，但是在发布前夕，想搭上当时超热的 java 顺
风车，临时把名字改为了 JavaScript。（也就是说 js 跟 java 没有关系，当时只是
想借助 java 的名气）。
javaScript 被用来改进设计、验证表单、检测浏览器、创建 cookies，等等 。
JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，
比如： Internet Explorer、Maxthon、Mozilla、Firefox、Netscape、Chrome 和 Opera
等。
常用 1 修改 html 及 css 代码 （2）验证表单
1. 嵌入方法
1.1. 内嵌式
理论上 js 可以写在任何第一个地方 但是一般写在 head 标签里或者 body 下
<script type="application/javascript">
alert("内嵌式");
</script>
<script>alert("内嵌式");</script>
1.2. 外链式
首先新建一个文件类型为.js 的文件，然后在该文件中写 js 语句，通过 script 标
签对引入到 html 页面中。
<script src="js 文件路径地址">这里不能写 js 语句</script>
1.3. 行内式
直接书写在标签身上，是一个简写的事件，所以又称之为事件属性。 onclick
单击事件
<input type="button" value="点我呀!" οnclick="alert('win渗透测试培训');">
<button οnclick="alert('恭喜你,加入win渗透测试培训');">点我呀!</button>
2. 语句
1.在编程语言中，这些编程指令被称为语句。

JavaScript 程序就是一系列的编程语句。
注释：在 HTML 中，JavaScript 程序由 web 浏览器执行。
2.JavaScript 语句由以下构成：
值、运算符、表达式、关键词和注释。
3.用分号（;）分隔 JavaScript 语句。
3. 注释
单行注释： // 注释语句 快捷键 ctrl+/
多行注释： /* 注释语句 */ 快捷键 ctrl+shift+/
注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！
4. 变量
变量是用于存储信息的"容器"
javascript 单双引号没区别
var a=’moonsec’;
5. JavaScript 保留关键字
Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作
为 Javascript 以后扩展使用。

6. JavaScript 作用域
6.1. Javascrpt 局部变量
局部作用域 变量在函数内声明，变量为局部作用域。
function myFunction() {
var carName = "Volvo";
// 函数内可调用 carName 变量
}
6.2. JavaScript 全局变量
变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}

7. 数据类型
数值型：number（凡是数字都是数值型，不区分整数和小数）
字符串：string（凡是引号包裹起来的内容全部都是字符串）
布尔：boolean（true、false）
对象类型：object（特殊取值 null）
未定义型：undefined
对象类型 数组 字典
7.1. 判断类型
var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};
alert(typeof a) ------------> string
alert(typeof b) ------------> number
alert(typeof c) ------------> object
alert(typeof d) ------------> object
alert(typeof e) ------------> function
alert(typeof f) ------------> function
7.2. 数字类型（Number）
只有一种数字类型，数字 可以是小数 ，也可以的整数
以 0 开头 默认使用 8 进制来表示我的这个数字
以 0x 开头 默认使用 16 进制来表述我的这个数字
如果以-开头 默认以负数
如果我带有 e：以科学计数法来解析我的这个数字
parseInt(..) 将某值转换成数字，不成功则 NaN
parseFloat(..) 将某值转换成浮点数，不成功则 NaN
特殊值：
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。
7.3. 字符串型（string）
字符串是存储字符的变量，用来表示文本的数据类型，程序中的字符串是包含
单引号/双引号的，由单引号来界定我双引号中包含的字符串

obj.length 长度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第 n 个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(
, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g 无效)
obj.match(regexp) 全局搜索，如果正则中有 g 表示找到全部，否则只
找到第一个。
obj.replace(regexp, replacement) 替换，正则中有 g 则替换所有，否则只替换第
一个匹配项，
$数字：匹配的第 n 个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号
7.4. 布尔类型（boolean）
一般是用在流程控制语句中，字符串和数字类型都是无穷多个，然而我们的布
尔数据类型只有两个：true 和 false
这两个个值一般用于说明某个事物是真或者假
js 一般用布尔类型来比较所得到的结果
布尔类型仅包含真假，
== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且

7.5. null（空）
null
关键字 null 是一个特殊的值，它表示变量为空值，用来定义空的或者是不存在
的引用。
如果试图去引用一个没有定义的值，就会返回一个 null。
这里注意一点：null 并不等于"" 或者 0
7.6. undefined（未定义）
这个值表示变量不含有值，没有定义的值，或者被定义了一个不存在的属性值
！null 和 undefined 区别：
null 它表示一个变量被赋予一个空值，而 undefined 是表示变量还没有被赋值
7.7. 数组
1、数组内可以存放任意数据类型的数据（本质上它也是对象）
2、数组元素不赋值的情况下 值为 undefined
3、如果数组打印的时候，元素不赋值""
4、访问数组范围之外的元素，不会出现越界的问题，undefined
5、定义数组大小，照样可以添加更多元素
7.7.1. 定义数组的方法：
1、var arr=[]//定义一个空数组
2、var arr=[10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"]]//定义的
同时赋值
3、var arr=new Array();//定义一个空数组
4、var arr = new Array(10,20,{"name":"tomy","age":19},0.1,"string",true,
["aaa","bbb"])//定义的同时赋值
5、var arr=new Array(10)//定义一个长度为 10 的数组
7.7.2. 数组的操作
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转

obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
8. 函数
JavaScript 函数语法
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数：
var x = myFunction(7, 8); // 调用函数，返回值被赋值给 x
function myFunction(a, b) {
return a * b; // 函数返回 a 和 b 的乘积
}
普通函数：
function func(arg){
return arg+1;
}
var result = func(1);
console.log(result); var result = func(1);
console.log(result);
匿名函数（没有名字的函数称为匿名函数）
setInterval(function(){
console.log(123);
},500)
自执行函数 （创建函数并且自动执行）
(function(arg){
console.log(arg);
})(1);
9. 字典
字典 是一种以键-值对形式存储数据的数据结构
var dict = {'k1':"moonsec",'k2':'moon','age':18};
输出字典元素
for(var item in dict){
console.log(dict[item]);
}
获取指定元素
dict['age'] 获取 key 为 age 的元素
赋值
dict['age']=10
删除元素

delete dict['one'];
delete dict.age;
10. js 的序列化和反序列化
Json 与字符串的转换
把对象转为字符串
JSON.stringify()
把字符串转为数组
newli = JSON.parse()
序列化 即 js 中的 Object 转化为字符串
使用 toJSONString
var last=obj.toJSONString(); //将 JSON 对象转化为 JSON 字符
使用 stringify
var last=JSON.stringify(obj); //将 JSON 对象转化为 JSON 字符
反序列化 即 js 中 JSON 字符串转化为 Object
11. 转义
l decodeURI( ) URl 中未转义的字符
l decodeURIComponent( ) URI 组件中的未转义字符
l encodeURI( ) URI 中的转义字符
l encodeURIComponent( ) 转义 URI 组件中的字符
l escape( ) 对字符串转义
l unescape( ) 给转义字符串解码
l URIError 由 URl 的编码和解码方法抛出
12. eval
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
13. 时间
Date 对象
var myDate = new Date();
myDate.getYear(); //获取当前年份(2 位)
myDate.getFullYear(); //获取完整的年份(4 位,1970-????)
myDate.getMonth(); // 获 取 当 前 月 份 (0-11,0 代 表 1 月 ) 所 以 获 取 当 前 月 份 是

myDate.getMonth()+1;
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期 X(0-6,0 代表星期天)
myDate.getTime(); //获取当前时间(从 1970.1.1 开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime = myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
加一天
var dateTime = new Date();
dateTime=dateTime.setDate(dateTime.getDate()+1);
dateTime=new Date(dateTime);
dateTime=dateTime.setDate(dateTime.getDate()+1);
14. 面向对象
JavaScript 是一种基于原型的语言，它没类的声明语句，比如 C+ +或 Java 中用
的。这有时会对习惯使用有类申明语句语言的程序员产生困扰。相反，JavaScript
可用方法作类。定义一个类跟定义一个函数一样简单。在下面的例子中，我们定
义了一个新类 Person。
第一种方法
function Person(name) {
//构造函数里面的方法和属性
this._name = name;
this.getName = function () {
console.log(this._name);
};
this.setName = function (name) {
this._name = name;
};
}
var p = new Person("张三");
p.getName(); // 张三
p.setName("李四");
p.getName(); // 李四
对于上述代码需要注意：
Person 充当的构造函数
this 代指对象
创建对象时需要使用 new

第二方法
// 定义类 class Person {
//类的构造函数，实例化的时候执行，new 的时候执行
constructor(name) {
this._name = name;
}
getName() {
console.log(this._name);
}
setName(name) {
this._name = name
}
}
let p = new Preson('张三')
p.getName(); // 张三
p.setName('李四');
p.getName(); // 李四
15. 原型
我们所创建的每一个函数，解析器都会向函数中添加一个属性 prototype
这个属性对应着一个对象，这个对象就是我们所谓的原型对象
如果函数作为普通函数调用时 prototype 没有任何作用
当函数以构造函数调用时，它所创建的对象中都会有一个隐含的的属性
指向该构造函数的原型 我们可以通过__proto__来访问该属性
我们可以将对象中公有的内容，统一设置到原型对象中
function Persion(username,age){
}
//console.log(Persion.prototype);
var p = new Persion();
console.log(p.__proto__ == Persion.prototype);
定义原型变量和原型变量
function Persion(username,age){
}
//console.log(Persion.prototype);
Persion.prototype.a = '女';