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>
alert("xss")
</script> -->
</head>
<body>
<script>
alert("xss")
</script>
</body>
1.2 外链式
首先新建一个文件类型为.js的文件,然后在该文件中写js语句,通过script标签对引入到html页面中。
创建一个.js文件于js文件夹目录下
写入代码:alert("xsss")
使用<script type="text/javascript" src="js/js.js"></script>引入
1.3 行内式
直接书写在标签身上,是一个简写的事件,所以又称之为事件属性。 onclick单击事件
<input type="button" value="点击!" onclick="alert('xss');">
<button onclick="alert('恭喜你,成功点了我一下');">点我呀!</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 局部变量
局部作用域 变量在函数内声明,变量为局部作用域。
function myFunction() {
var carName = “Volvo”;
// 函数内可调用 carName 变量
}
<script>
function getname (){
var name='123';
console.log(name)
}
getname()
</script>
6.2 全局变量
变量在函数外定义,即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}
//name = 'alex'
var name ='JiangJIian'
function getname (){
// var name='123';
console.log(name)
}
getname()
7.数据类型
数值型:number(凡是数字都是数值型,不区分整数和小数)
字符串:string(凡是引号包裹起来的内容全部都是字符串)
布尔:boolean(true、false)
对象类型:object(特殊取值null)
未定义型:undefined
对象类型 数组 字典
var arraylist=['111','222','333'];
console.log(arraylist)
<script>
var arraylist=['111','222','333'];
for(var item in arraylist){
console.log(arraylist[item])
}
</script>
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) 来判断。
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);
<script>
function get_name(name){
var name='JiangJian';
return name;
}
console.log(get_name());
</script>
<script>
function get_name(arg){
var name='JiangJian'+arg;
return name;
}
console.log(get_name('nice'));
</script>
<script>
function get_name(arg){
var name=1+arg;
return name;
}
console.log(get_name(2));
</script>
匿名函数(没有名字的函数称为匿名函数)
setInterval(function(){
console.log(123);
},5000)
每隔五秒自动输出
自执行函数 (创建函数并且自动执行)
(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.转义
decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出
12.eval
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。