XSS漏洞学习

JavaScript基础学习

文章目录
  1. 1. JavaScript的放置位置
    1. 1.1. 写在head标签下的JavaScript
    2. 1.2. 写在body标签下的JavaScript
    3. 1.3. 直接外部引用
  2. 2. JavaScript中的变量
    1. 2.1. 声明数字
    2. 2.2. 声明数组
    3. 2.3. 声明字符串
    4. 2.4. 关于布尔值
  3. 3. JavaScript中的运算符
  4. 4. JavaScript基本语法
  5. 5. JavaScript事件
    1. 5.1. 事件处理程序
    2. 5.2. 常用事件
    3. 5.3. onmouseover 和 onmouseout
    4. 5.4. onmousedown和onmouseup
  6. 6. JavaScript对象
    1. 6.1. 创建对象
    2. 6.2. 访问创建的对象

well，鉴于需要对PHP的Laravel框架进行相关的学习，在继昨天对HTML的学习后，今天开始学习基础的JavaScript，以便明天能正式开始学习Larvel。

JavaScript的放置位置

基于昨天写过的文章，HTML的页面有body和head这两种标签，同样，JavaScript的代码是在script标签下执行的，由于在页面中插入位置的不同，执行的先后顺序是不一样的，下面举栗子。

写在head标签下的JavaScript

1
2
3
4
5
6
7
8
<html>
<head>
	<title>A Test</title>
	<script>
		alert("Hello World!");
	</script>
</head>
</html>

写在body标签下的JavaScript

1
2
3
4
5
6
7
8
9
10
<html>
<head>
	<title>A Test</title>
</head>
<body>
	<script>
		alert("Hello World!");
	</script>
</body>
</html>

直接外部引用

oh dear，这个和html直接引用外部html是一模一样的操作，代码如下。

1
2
3
4
5
6
7
8
<html>
<head>
	<title>A Test</title>
</head>
<body>
	<script src="1.js"></script>
</body>
</html>

1.js里面直接写

1
alert("Hello World");

JavaScript中的变量

JavaScript中声明变量和C++中声明变量差不多，不过JavaScript声明变量只需要一个var即可。

声明数字

1
2
var num=1;
var num=2.56;

JavaScript只有一种数字类型，带小数点或者不带小数点。

声明数组

1
2
3
var boys=new Array();
boys[0]="Tom";
boys[1]="Frank";

或者直接使用这样的方式进行声明。

1
var boys=new Array("Tom","Frank");

或者直接用C++的声明方式。

1
boys=["Tom","Frank"];

声明字符串

1
2
var str="test a test";
var str="www.baidu.com";

关于布尔值

JavaScript的布尔值和C++一样，是false和true。

JavaScript中的运算符

well，这个只有一句话，同C++。

JavaScript基本语法

emmmm，怎么说呢，这个语法和C/C++差不多，只是输出那里有那么一丢丢的变化，输出的时候用的是document.write()！

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
	<title>A Test</title>
</head>
<body>
	<script>
		for(var i=0;i<5;i++)
		{
			document.write("This is num i :"+i+'</br>');
		}
	</script>
</body>
</html>

JavaScript事件

HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

事件处理程序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
	<title>A Test</title>
</head>
<body>
	<script>
		function click_button()
		{
			alert("Hello World!");
		}
	</script>
</body>

<body align="center">
	<button onclick="click_button()">click here</button>
</body>
</html>

哇这里我超气der，这个点击事件不需要写script标签…之前写了导致一直有问题。

常用事件

除了onclick意外还有很多JavaScript的常用事件，这里主要学习了以下两个事件。

onmouseover 和 onmouseout

作用：鼠标移到该元素上即触发该事件。

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
	<title>A Test</title>
</head>
<body>
	<div style="background-color:gray;width:200px;height:50px;margin:20px;padding-top:10px;color:0#ffffff;font-weight:bold;font-size:20px;text-align:center;"
	onmouseover="this.innerHTML='Hello'" 
	onmouseout="this.innerHTML='World'">
	move your mouse here.
	<div>
</body>
</html>

style下的设置是对显示框进行相关修饰，去掉style标签同样可以直接操作。

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
	<title>A Test</title>
</head>
<body>
	<div
	onmouseover="this.innerHTML='Hello'" 
	onmouseout="this.innerHTML='World'">
	move your mouse here.
	<div>
</body>
</html>

onmousedown和onmouseup

调用方式和之前一样，首先在script下声明函数，然后在div标签下进行调用。

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
<html>
<head>
	<title>A Test</title>
</head>

<script>
	function mUp(obj)
	{
		obj.style.background="gray";
		obj.innerHTML="Press Here";
	}
	function mDown(obj)
	{
		obj.style.background="yellow";
		obj.innerHTML="Release Your Mouse";
	}
</script>

<body>
	<div
	onmouseup="mUp(this)"
	onmousedown="mDown(this)">
	put your mouse on it.
	<div>
</body>
</html>

JavaScript对象

well，JavaScript所有的数据都可以被视为对象，每个对象都有其对应的属性和方法。

创建对象

创建JavaScript对象有很多种形式，这里只记录最常用也是最方便的一种。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
	function student(name,age)
	{
		this.name=name;
		this.age=age;
		
		this.study=function()
		{
			document.write("Computer");
		}
		this.show_info=function()
		{
			document.write(this.name+":"+this.age);
		}
	}
</script>

创建方法和C++很相似，比较容易理解。

访问创建的对象

和C++不同的是访问的量只需要加上var就OK。

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
<html>
<head>
	<title>A Test</title>
</head>

<script>
	function student(name,age)
	{
		this.name=name;
		this.age=age;
		
		this.study=function()
		{
			document.write("Computer"+"</br>");
		}
		this.show_info=function()
		{
			document.write(this.name+":"+this.age+"</br>");
		}
	}
	var student1=new student("Frank","19");
	document.write("name:"+student1.name+'</br>');
	document.write("age:"+student1.age+'</br>');
	student1.study();
	student1.show_info();
</script>
</html>