038 网络安全JS篇

最新推荐文章于 2024-09-22 10:03:19 发布

入狱计划进度50%

最新推荐文章于 2024-09-22 10:03:19 发布

阅读量1.3k

点赞数 4

分类专栏：网络安全文章标签： javascript web安全前端

本文链接：https://blog.csdn.net/qq_34555653/article/details/122929417

版权

网络安全专栏收录该内容

68 篇文章 27 订阅

订阅专栏

本文介绍了JavaScript的基础知识，包括它在HTML中的使用方式、变量、数组、对象、条件判断、循环以及函数的定义与调用。此外，还讲解了如何操作DOM元素，读写cookie，以及响应用户触发的事件。提供了实际的HTML和JS代码示例，帮助读者快速上手JavaScript编程。

摘要由CSDN通过智能技术生成

一：笔记

JS
	JavaScript：
		能够在静态的html页面实现动态效果，
		解释型语言，
		每次刷新网页都会执行JS代码
		从上到下依次执行
		当我们直接访问JS脚本的时候，返回纯文本内容
	运行环境是浏览器，出现的一切安全问题，都归于“前端安全”
	快速入门
		JS与HTML 混编
		可以出现在任何位置
	简单的语句：
		输出语句
		alert();			# 弹窗
		console.log();		# 在控制台输出
	如何在html中引入JS代码
		内部JS
			<script>
				this is JS code
			</script>
		外部JS
			<script src="./js/test.js"></script>
	变量
		声明变量
			var name
		变量类型
			Number
			字符串
			布尔类型
			null和undefined
				js的设计者希望用null表示一个空的值，而undefined表示值未定义。
	数组：
		数组中可以包含任意类型
		var arry = [1,2,3.14,'hello',null,true]
		数组的访问：arry[2]   得到  3.14
	对象
		是一组由键、值组成的无序集合
		var person = {
			name:'bob',
			age:20,
			tags:['js','web','mobile'],
			city:'Beijing',
			hasCar:true,
			zipcode:null
		};
		对象属性的访问：person.name
	条件判断
		var age = 15;
		if (age >=18){
			alert('adult');
		}else{
			alert('teenager');
		}
	for循环
		var x=0;
		var i;
		for(i=1; i<=100; i++){
			x= x+ i;
		}
		x; 	// 5050
	for ... in
		for循环的变体，可以把一个对象的所有属性依次循环出来
		var x = {
			name:'jack',
			age:20,
			city:'beijing'
		};
		for(var key in x){
			console.log(key);		// 'jack','20','city'
		}
	while循环
		var x = 0;
		var y = 99;
		while(y>0){
			x = x+y;
			y = y-2;
		};
		x;		// 2500
	do while循环
		var n = 0;
		do{
			n=n+1;
		}while (n<100);
		n;		// 100
	函数：
		定义一个函数的好处就是方便调用
		函数定义如下：
		function abs(x){
			if (x >= 0){
				return x;
			}else{
				return -x;
			}
		}
		abs(x);
		上述abs()函数中：
			function指出这是一个函数定义
			abs是函数的名称
			(x)括号内列出函数的参数，多个参数以,分隔
			( ... )之间的代码是函数体，可以包含若干语句
	对象
		通过对象来操作浏览器
		window
			即充当全局作用域，也代表浏览器窗口
		navigator
			表示浏览器的信息，最常用的属性包括：
				navigator.appName			浏览器名称
				navigator.appVersion		浏览器版本
				navigator.language			浏览器设置的语言
				navigator.platform			操作系统类型
				navigator.userAgent			浏览器设定的User-Agent字符串
		screen
			表示屏幕的信息，常用的属性：
				screen.width		屏幕宽带，以像素为单位
				screen.height		屏幕高度
				screen.colorDepth	返回颜色位数，如：8  16  24
		location
			表示当前页面的URL信息
			location.port;			// 8080
			location.pathname;		// '/path/index.html'
			location.search;		// '?a=1&b=2'
			location.hash;			// 'TOP'
	DOM：文档对象模型
		第一种方法：
		document		**非常重要**
			表示当前页面，由于html在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点
			var test = document.getElementById('test');											// 返回ID为'test'的节点
			var trs = document.getElementById('test-table').getElementsByTagName('tr');			// 先定位ID为'test-table'的节点，再返回其内部所有tr节点
			var reds = document.getElementById('test-div').getElementsByClassName('red');		// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点
			var cs = test.children;					// 获取节点test下的所有直属子节点
			var first = test.firstElementChild		// 获取节点test下的第一个子节点
			var last = test.lastElementChild		// 获取节点test下的最后一个子节点
		第二种方法：
		querySelector()和querySelectorAll()		低版本不支持
			var q1 = document.querySelector('#q1');		// 通过querySelector获取ID为q1的节点、
			var ps = q1.querySelectorAll('div.highlighted > p');		// 通过querySelectorAll获取q1节点内的符合条件的所有节点	
	document.cookie
		可以完成cookie信息的读写
		alert(document.cookie);
		document.cookie = "name=xxx"
	事件：
		用户触发事件
			鼠标事件
				onclick
			键盘事件
			form事件
		事件响应

二：源码与实验

2.1：目录结构

在这里插入图片描述

2.2：源码与内容展示

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");

在这里插入图片描述
点击一次确定之后：

再次点击确定：

再次点击：

func.html

<meta charset="utf-8">
<h1> JS 函数</h1>
<script>
function abs(x){		// 计算一个数的绝对值
	if (x >= 0){
		alert(x);
	}else{
		alert(-x);
	}
}
abs(-1);		// 调用函数
</script>

在这里插入图片描述

mode.html
获取节点

<!-- HTML结构 -->
<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="点我一下">
<input type="button" onmouseover="func()" value="鼠标移过来">
<script>
	function func(){
		alert("xss");
	}
</script>