038 network security JS

One ： note

JS
	JavaScript：
		 Can be static html Pages achieve dynamic effects ,
		 Explanatory language ,
		 Every time the page is refreshed JS Code 
		 From top to bottom 
		 When we visit directly JS Script time , Return plain text content 
	 The running environment is a browser , All security issues that arise , All due to “ Front end security ”
	 Quick start 
		JS And HTML  zlc 
		 Can appear anywhere 
	 Simple sentences ：
		 Output statement 
		alert();			#  Popup 
		console.log();		#  Output at console 
	 How to be in html Introduction in JS Code 
		 Inside JS
			<script>
				this is JS code
			</script>
		 external JS
			<script src="./js/test.js"></script>
	 Variable 
		 Declare variables 
			var name
		 Variable type 
			Number
			 character string 
			 Boolean type 
			null and undefined
				js Our designers want to use null Represents a null value , and undefined Indicates that the value is undefined .
	 Array ：
		 The array can contain any type 
		var arry = [1,2,3.14,'hello',null,true]
		 Array access ：arry[2]    obtain   3.14
	 object 
		 Is a set of keys 、 An unordered set of values 
		var person = {
			name:'bob',
			age:20,
			tags:['js','web','mobile'],
			city:'Beijing',
			hasCar:true,
			zipcode:null
		};
		 Access to object properties ：person.name
	 conditional 
		var age = 15;
		if (age >=18){
			alert('adult');
		}else{
			alert('teenager');
		}
	for loop 
		var x=0;
		var i;
		for(i=1; i<=100; i++){
			x= x+ i;
		}
		x; 	// 5050
	for ... in
		for A variant of the cycle , You can loop all the attributes of an object in turn 
		var x = {
			name:'jack',
			age:20,
			city:'beijing'
		};
		for(var key in x){
			console.log(key);		// 'jack','20','city'
		}
	while loop 
		var x = 0;
		var y = 99;
		while(y>0){
			x = x+y;
			y = y-2;
		};
		x;		// 2500
	do while loop 
		var n = 0;
		do{
			n=n+1;
		}while (n<100);
		n;		// 100
	 function ：
		 The advantage of defining a function is that it is easy to call 
		 The function is defined as follows ：
		function abs(x){
			if (x >= 0){
				return x;
			}else{
				return -x;
			}
		}
		abs(x);
		 Above abs() Function ：
			function It is pointed out that this is a function definition 
			abs Is the name of the function 
			(x) The parameters of the function are listed in parentheses , Multiple parameters with , Separate 
			( ... ) The code between is the function body , Can contain several statements 
	 object 
		 Operate the browser through objects 
		window
			 That is, it acts as a global scope , Also represents the browser window 
		navigator
			 Represents the information of the browser , The most common attributes are ：
				navigator.appName			 Browser name 
				navigator.appVersion		 Browser version 
				navigator.language			 Language for browser settings 
				navigator.platform			 Type of operating system 
				navigator.userAgent			 Browser set User-Agent character string 
		screen
			 Information representing the screen , Common properties ：
				screen.width		 Screen broadband , In pixels 
				screen.height		 Screen height 
				screen.colorDepth	 Returns the number of color digits , Such as ：8  16  24
		location
			 Represents the... Of the current page URL Information 
			location.port;			// 8080
			location.pathname;		// '/path/index.html'
			location.search;		// '?a=1&b=2'
			location.hash;			// 'TOP'
	DOM： Document object model 
		 The first method ：
		document		** It's very important **
			 Represents the current page , because html In the browser DOM In the form of tree structure ,document The object is the whole DOM Root node of tree 
			var test = document.getElementById('test');											//  return ID by 'test' The node of 
			var trs = document.getElementById('test-table').getElementsByTagName('tr');			//  First position ID by 'test-table' The node of , And then return to its internal all tr node 
			var reds = document.getElementById('test-div').getElementsByClassName('red');		//  First position ID by 'test-div' The node of , And then return to its internal all class contain red The node of 
			var cs = test.children;					//  Access to the node test All direct child nodes under 
			var first = test.firstElementChild		//  Access to the node test The first child node under 
			var last = test.lastElementChild		//  Access to the node test The last child node under 
		 The second method ：
		querySelector() and querySelectorAll()		 Lower version not supported 
			var q1 = document.querySelector('#q1');		//  adopt querySelector obtain ID by q1 The node of 、
			var ps = q1.querySelectorAll('div.highlighted > p');		//  adopt querySelectorAll obtain q1 All eligible nodes within a node 	
	document.cookie
		 Can finish cookie Reading and writing of information 
		alert(document.cookie);
		document.cookie = "name=xxx"
	 event ：
		 User triggered event 
			 Mouse events 
				onclick
			 Keyboard events 
			form event 
		 Event response 

 
 

Two ： Source code and experiment

2.1： Directory structure

2.2： Source code and content display

test.html

<html>
<head>
	<title>JS test</title>
	<meta charset = "utf-8">
	<script>
	// this is JS code
	alert("hello world");
	</script>
	<script src="./js/test.js"></script>
</head>
<body>
<h1>
	JS TEST page
</h1>
</body>
</html>
<script src="./js/test1.js"></script>
<script src="http://localhost/JS/js/test1.js"></script>

test.js

alert("this is from test.js");

test1.js

alert("this is from test1.js");

Click OK once ：

Click OK again ：

Click again on the ：

 

func.html

<meta charset="utf-8">
<h1> JS  function </h1>
<script>
function abs(x){
    		//  Calculate the absolute value of a number 
	if (x >= 0){
    
		alert(x);
	}else{
    
		alert(-x);
	}
}
abs(-1);		//  Call function 
</script>

mode.html
Access to the node

<!-- HTML structure  -->
<div id="test-div">
	<div class="c-red">
		<p id="test-p">JavaScript</p>
		<p>Java</p>
	</div>
	<div class="c-red c-green">
		<p>Python</p>
		<p>Ruby</p>
		<p>Swift</p>
	</div>
	<div class="c-green">
		<p>Scheme</p>
		<p>Haskell</p>
	</div>
</div>

 

onclick.html

<meta charset="utf-8">
<input type="button" onclick="alert(/xss/)" value=" Click on me ">
<input type="button" onmouseover="func()" value=" Move the mouse over ">
<script>
	function func(){
    
		alert("xss");
	}
</script>

For more click events, please refer to ：html Event details