WEB安全 JAVASCRIPT 基础

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 代码。

在这里插入图片描述

  • 9
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值