0%

Web安全学习——JaveScript

发表于 更新于 分类于
本文字数： 5.2k 阅读时长 ≈ 5 分钟

引用js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- 包含于<script>和</script>标记内，嵌入到html文档中 -->
<html>
    <body>
        <script>
            document.write("hello world");
        </script>
    </body>
<html>
 
 
<!-- 通过<script>标记的src属性链接到外部的js脚本文件 -->
<html>
    <body>
        <script src="1.js"></script>
    </body>
<html>
 
 
<!-- 通过 JavaScript伪URL地址引入 -->
<html>
    <body>
        <input type="text" οnclick="javascript:alert('hello')">
    </body>
<html>
 
 
<!-- 通过HTML文档事件处理程序引入 -->
<html>
    <body>
        <script>
            function mess()
                {
                    alert("hello");
                }
        </script>
        <input type="button" οnclick="mess()">
    </body>
</html>

不支持JS脚本的情况

1
2
3
4
5
6
7
8
9
<html>
    <body>
        <script>
            <!--
                alert(/xss/);  //如果当前浏览器不支持JS代码，那么会自动忽略隐藏此段代码
            -->
        </script>
    </body>
</html>

数据类型

  • Number型：整数型和浮点型
  • String型：字符型
  • Boolean型：布尔型（true和false）
  • Undefined型：未定义类型，用于不存在或没有被赋初始值的变量或对象的属性
  • Null型：表示空值
  • Function型：表示函数
  • Array型：数组型
  • Object型：对象型

运算符

  • 赋值运算符： =、+=、-=、*=、/=、%=、&=、^=
  • 数学运算符： +、-、*、/、%、++、–
  • 位运算符： &、|、^、~，先将操作数转换为二进制进行运算，操作完将返回值转换成十进制
  • 位操作符： >>、<<、>>>
  • 比较运算符： ==、!=、>、<、<=、>=
  • 逻辑运算符： &&、||、!
  • 逗号运算符： 可使用逗号将多个语句连在一起，浏览器载入该代码时，将其作为一个完整的语句来调用，但语句的返回值是最右边的语句。
  • 空运算符： 空运算符对应关键字“void”，其作用是定义一个表达式，但该表达式并不返回任何值。
  • 三元运算符： 表达式?语句A:语句B 
1
2
3
var a = 10;
var b = 5;
a>b?alert(a):alert(b); //弹出10
  • 对象运算符： 主要支持四种对象运算符，包括点号运算符（用来访问对象的属性和方法）、new运算符（创建新对象）、delete运算符（删除数组特定元素、删除对象属性和方法）以及()运算符（用来调用对象的方法）
  • typeof运算符： 用于表明操作数的数据类型，返回数值永远是一个字符串。 
1
2
var a = 10;
alert(typeof(a)) //弹出number

数组

一组同种或不同类的数据的集合，称为数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
#定义数组
var arr = [1,2,3,4];
var arr1 = ['hello',123,True];
var arr2 = new Array('eee',123);
 
#数组元素的访问
var a = arr[0]; 
 
#修改数组元素
arr[0] = 11;
 
#获取数组长度
arr.length

逻辑处理

  • if条件语句
1
2
3
4
5
6
7
8
9
var a = 10;
var b = 5;
if(a>b)
{
	alert(a);
}
else{
	alert(b);
}
  • switch条件语句
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var year = 4;
var army;
switch(year)
{
	case 0:
		army="平民";
		break;
	case 1:
		army="列兵";
		break;
	case 2:
		army="上等兵";
		break;
	case 3:
		army="一级士官";
		break;
	case 4:
		army="二级士官";
		break;
	default:
		army="中高级士官";
		break;
}
	document.write("你的军衔是"+army);
  • for循环语句
1
2
3
4
for(var i=0;i<10;i++)
{
	document.write(i+"<br />");
}
  • while和do-while语句
1
2
3
4
5
6
7
8
9
10
11
12
13
var i = 1;
while(i<10)
{
	document.write(i+"<br />");
	i++;
}
     
var i = 1;
do
{
	document.write(i);
	i++;
}while(i<10);
  • break和continue语句
1
2
3
4
5
6
7
8
9
10
for(var i=0;i<10;i++)
{
	if(i%2==0)
    {
	    continue;
	}
	else{
		document.write(i+"<br />");
	}
}
  • with对象操作语句
1
2
3
4
5
6
7
8
9
10
document.write("aaa<br />");
document.write("bbb<br />");
document.write("ccc<br />");
 
with(document)
	{	
		write("eee<br />");
		write("fff<br />");
		write("ggg<br />");
	}
  • for…in进行对象循环
1
2
3
4
5
6
7
8
9
for (变量名 in 对象名)
{
    语句
}
    
for (num in window)
{
    document.write(i);  //打印出window对象所有方法和属性
}

函数

  • 定义
1
2
3
4
5
6
7
8
9
10
11
12
13
函数的定义：
 
function 函数名([参数])
{
    语句
    [return 表达式;]
}
 
function add(int1,int2)
{
    return int1+int2;
}
document.write(add(2,4));
  • 作为对象的函数

JavaScript中所有的数据类型、数组等均可作为对象，函数也是。可使用new操作符和function对象的构造函数来生成指定规则的函数。

1
var fun1 = new Function(int1,int2);
  • 递归调用
1
2
3
4
5
6
7
8
9
function fun1(int1)
{
    if(int1==1)
        {
            return 1;
        }
     return int1 * fun1(int1-1);
}
document.write(fun1(3));

JavaScript事件

  • 事件捆绑

HTML文档将元素的常用事件（onclick、onmouseover等）当作属性捆绑在HTML元素上，当元素的特定事件发生时，对应的特定事件的时间处理器就被执行，并将结果返回给浏览器。 

1
2
3
4
5
6
7
8
9
10
11
12
<html>
	<body>
		<script>
			function fun1()
			{
				alert('wolrd');
			}
		</script>
		<a href="http://www.baidu.com" οnclick="javascript:alert('hello')">打开百度</a>
		<a href="http://www.sina.com" οnclick="fun1()">打开新浪</a>
	</body>
</html>
  • 浏览器事件

浏览器事件指载入文档直到关闭期间的浏览器事件，如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、活得焦点事件onfocus等。 

1
2
3
4
5
6
7
8
9
10
<html>
	<body>
		<script>
			window.onblur = function()
			{
				alert('浏览器失去了焦点');
			}
		</script>
	</body>
</html>

  • HTML元素事件

    • <a>链接的事件
    onclick 鼠标单击链接
    ondbclick 鼠标双击链接
    onmouseDown 鼠标在链接的位置下
    onmMouseOut 鼠标移出链接所在位置
    onmouseOver 鼠标经过链接所在位置
    onmouseUP 鼠标在链接的位置放开
    onKeyDown 键被按下
    onkeyPress 按下并放开该键
    onKeyUp 键被松开
    • <img>图片的事件
    onerror 加载图片出现错误时触发
    onload 图片加载时触发
    • <body>文档主体的事件
    onblur 文档失去焦点
    onclick 在文档中单击鼠标
    ondbClick 在文档中双击鼠标
    • <form>表单的事件
    onsubmit 提交窗体里的表单
    onreset 窗体复位
    • <input>表单组件的事件
    onblur 组件失去焦点
    onclick 单击组件
    onfocus 事件在对象获得焦点时
    onchange 事件会在域的内容改变时发生
    • <textarea>多行文本框的事件
    onblur 文本区失去焦点
    onchange 文本区内容发生改变且失去焦点
    onfocus 获得焦点

JavaScript对象分类

1

自定义对象的两种方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#使用new关键字定义对象
var info = new Object();    #使用new关键字结合Object来创建一个空的对象
info.nme = "张三";    #增加属性
info.age = 20;
info.show = function()    #增加方法
{
    document.write("自定义对象方法");
}
infi.show();    #调用对象的方法
 
 
#使用大括号来定义对象
var info = 
{
    name : "张三",
    age : 20,
    show:function()
    {
        document.write("自定义对象方法");
    }
}
infi.show();    #调用对象的方法

JS内置对象

js内置对象包括字符串对象、数组对象、日期时间对象、布尔对象、数字对象、数学对象

1
2
3
4
5
6
7
8
9
10
11
12
13
#字符串String对象的属性和方法
var str1 = "hello world";
var a = str1.length;     #获取字符串长度
str1.toUpperCase();    #到大写
str1.indexOf('e')      #查找字符串
 
#数组对象的属性和方法
var arr = [1,2,3,4];
arr.reverse();    #反转数组
 
#日期时间对象
var today = new Date();
today.getDay();    #取星期数

DOM框架

DOM（文档结构模型），文档中各个元素在HTML元素层次结构中都被表级为关系成员，并可通过这种关系来访问指定的成员。

  • Window对象：表示与当前浏览器窗口相关的顶级对象，包含当前窗口的最大化、最小化、尺寸大小等。
  • Frames对象：表示文档页面中的框架数组对象，每个框架都包含一个Window对象。
  • Location对象：以URL的形式载入当前窗口，并保存正在浏览的文档位置及构成：协议、主机名、端口、下、路径等。
  • Document对象：包含HTML文档中的HTML标记和构成文档内容的文本对象。
  • History对象：包含当前窗口的历史列表对象。
  • Navigator对象：包含当前浏览器的相关信息对象。
  • Screen对象：包含当前浏览器运行的物理环境信息的对象。