Web安全——JavaScript基础（加入案例）
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
JavaScript基础
一、概述
JavaScript是目前web开发中不可缺少的脚本语言js不需要编译即可运行运行在客户端需要通过浏览器来解析执行JavaScript代码。
诞生于1995年当时的主要目的是验证表单的数据是否合法。
JavaScript本来应该叫Livescript但是在发布前夕想搭上当时超热的java顺风车临时把名字改为了JavaScript。也就是说js跟java没有关系当时只是想借助java的名气。
JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies等等。JavaScript是因特网上最流行的脚本语言并且可在所有主要的浏览器中运行比如 Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。
二、嵌入方法
1、内嵌式
理论上js可以写在任何第一个地方 但是一般写在head标签里或者body下
<script type="application/javascript">
alert("内嵌式");
</script>
<script>alert("内嵌式");</script>
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ZY技术分享</title>
<script type="application/javascript">
alert("ZY技术分享");
</script>
</head>
<body>
</body>
</html>
输出结果
2、外链式
首先新建一个文件类型为.js的文件然后在该文件中写js语句通过script标签对引入到html页面中。
<script src="js文件路径地址">这里不能写js语句</script>
这里我们新建一个js文件这里我创建了一个js.js的文件
js.js实现代码
alert('ZY技术分享');
这里仅输出ZY技术分享
index.html实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ZY技术分享</title>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
</body>
</html>
输出结果
3、行内式
直接书写在标签身上是一个简写的事件所以又称之为事件属性。onclick单击事件
<input type="button" value="登陆" onclick="alert('登陆成功');">
<button onclick="alert('提交成功');">提交</button>
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ZY技术分享</title>
<!--<script type="text/javascript" src="js/js.js"></script>-->
</head>
<body>
<input type="button" value="登陆" onclick="alert('登陆成功');">
<button onclick="alert('提交成功');">提交</button>
</body>
</html>
输出结果
三、语句
- 1.在编程语言中这些编程指令被称为语句。
JavaScript程序就是一系列的编程语句。
注释 在HTML中JavaScript程序由web浏览器执行。 - 2.
JavaScript语句由以下构成
值、运算符、表达式、关键词和注释。 - 3.用分号
;分隔JavaScript语句。
四、注释
单行注释 // 注释语句 快捷键ctrl+/
多行注释 /* 注释语句 */ 快捷键ctrl+shift+/
注意 多行注释相互不能嵌套使用只能在多行注释里面使用单行注释
五、变量
变量是用于存储信息的"容器"
javascript单双引号没区别
var a=’ZY’;
控制台打印案例
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ZY技术分享</title>
<!--<script type="text/javascript" src="js/js.js"></script>-->
<script>
var name="ZY"
console.log(name);
</script>
</head>
<body>
<!--<input type="button" value="登陆" οnclick="alert('登陆成功');">
<button οnclick="alert('提交成功');">提交</button>-->
</body>
</html>
输出结果
六、JavaScript 保留关键字
JavaScript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 JavaScript 以后扩展使用。
七、JavaScript 作用域
1、JavaScript 局部变量
局部作用域变量在函数内声明变量为局部作用域。
function myFunction() {
var carName = "Volvo";
// 函数内可调用 carName 变量
}
案例使用
实现代码
<html>
<head>
<meta charset="UTF-8">
<title>ZY技术分享</title>
<!--<script type="text/javascript" src="js/js.js"></script>-->
<script>
function getname(){
var name="ZY"
console.log(name);
}
getname();
</script>
</head>
<body>
<!--<input type="button" value="登陆" οnclick="alert('登陆成功');">
<button οnclick="alert('提交成功');">提交</button>-->
</body>
</html>
输出结果
这里补充 function以及console.log
JavaScript中的function是一种用来封装可重用代码的构造。它允许您定义一块代码块其可以在需要的时候被调用。函数可以带有参数以接收输入值并可以返回一个值作为结果。
以下是一个简单的JavaScript函数的例子
function sayHello(name) {
console.log("Hello, " + name + "!");
}
sayHello("John"); // 输出Hello, John!
在上面的例子中sayHello是一个函数名它定义了一个函数其中有一个参数name。函数体内的代码使用console.log打印一条包含参数name的信息。
console.log是JavaScript的一个函数它用于在控制台输出消息。在浏览器中可以使用开发者工具的控制台来查看console.log输出的消息。在Node.js环境中console.log会将消息打印到终端。
以下是一个使用console.log的例子
console.log("Hello, World!"); // 输出Hello, World!
console.log可以接受多个参数并将它们打印为一个字符串。例如
var firstName = "John";
var lastName = "Doe";
console.log("Full name:", firstName, lastName); // 输出Full name: John Doe
上面的例子中console.log接受了三个参数并将它们连接成一个字符串进行输出。它在每个参数之间自动添加了一个空格。
2、JavaScript 全局变量
变量在函数外定义即为全局变量。
全局变量有全局作用域: 网页中所有脚本和函数均可使用。
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}
案例使用
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ZY技术分享</title>
<!--<script type="text/javascript" src="js/js.js"></script>-->
<script>
name="ZY"
function getname(){
// var name="ZY"
console.log(name);
}
getname();
</script>
</head>
<body>
<!--<input type="button" value="登陆" οnclick="alert('登陆成功');">
<button οnclick="alert('提交成功');">提交</button>-->
</body>
</html>
输出结果
八、数据类型
数值型 number凡是数字都是数值型不区分整数和小数
字符串 string凡是引号包裹起来的内容全部都是字符串
布尔 booleantrue、false
对象类型 object特殊取值null
未定义型 undefined
对象类型 数组 字典
案例使用
这里新建一个html文件然后运行在控制台上进行使用即可。
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
2、数字类型Number
只有一种数字类型数字可以是小数 也可以的整数
以0开头 默认使用8进制来表示我的这个数字
以0x开头 默认使用16进制来表述我的这个数字
如果以-开头 默认以负数
如果我带有e 以科学计数法来解析我的这个数字
parseInt(..) 将某值转换成数字不成功则NaN
parseFloat(..) 将某值转换成浮点数不成功则NaN
特殊值
NaN非数字。可使用 isNaN(num) 来判断。
Infinity无穷大。可使用 isFinite(num) 来判断。
案例使用判断
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个组内容
$&当前匹配的内容
$位于匹配子串左侧的文本
$'位于匹配子串右侧的文本
$$直接量$符号
案例判断使用
4、布尔类型boolean
一般是用在流程控制语句中字符串和数字类型都是无穷多个然而我们的布尔数据类型只有两个true 和 false
这两个值一般用于说明某个事物是真或者假
js一般用布尔类型来比较所得到的结果
布尔类型仅包含真假
== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且
案例使用
5、null空
关键字null是一个特殊的值它表示变量为空值用来定义空的或者是不存在的引用。
如果试图去引用一个没有定义的值就会返回一个null。
这里注意一点null并不等于"" 或者0
6、undefined未定义
这个值表示变量不含有值没有定义的值或者被定义了一个不存在的属性值
null和undefined区别
null它表示一个变量被赋予一个空值而undefined是表示变量还没有被赋值
案例使用及其判断
7、数组
- 数组内可以存放任意数据类型的数据本质上它也是对象
- 数组元素不赋值的情况下值为
undefined - 如果数组打印的时候元素不赋值
"" - 访问数组范围之外的元素不会出现越界的问题
undefined - 定义数组大小照样可以添加更多元素
7.1 定义数组的方法
var arr=[]//定义一个空数组var arr=[10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"]]//定义的同时赋值var arr=new Array();//定义一个空数组var arr = new Array(10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"])//定义的同时赋值var arr=new Array(10)//定义一个长度为10的数组
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);
使用案例
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function get_name(arg){
var name=1+arg;
return name;
}
console.log(get_name(2));
</script>
</head>
<body>
</body>
</html>
输出结果
匿名函数没有名字的函数称为匿名函数
setInterval(function(){
console.log(123);
},500)
使用案例
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
setInterval(function(){
console.log(1);
},500);
</script>
</head>
<body>
</body>
</html>
输出结果
这里0.5秒输出一个1前面为输出的次数。
自执行函数 创建函数并且自动执行
(function(arg){
console.log(arg);
})(1);
案例使用
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
(function(arg){
console.log(arg);
})(1);
</script>
</head>
<body>
</body>
</html>
输出结果
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代码。
13、时间
Date 对象
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-???)
myDate.getMonth(); //获取当前月份(0-11,0代表1月) 所以获取当前月份是 myDate.getMonth()+1;
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期 X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime = myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
加一天
var dateTime = new Date();
dateTime=dateTime.setDate(dateTime.getDate()+1);
dateTime=new Date(dateTime);
dateTime=dateTime.setDate(dateTime.getDate()+1);
14、面向对象
JavaScript是一种基于原型的语言它没类的声明语句比如C+ +或Java中用的。这有时会对习惯使用有类申明语句语言的程序员产生困扰。相反JavaScript可用方法作类。定义一个类跟定义一个函数一样简单。在下面的例子中我们定义了一个新类Person。
第一种方法
function Person(name) {
//构造函数里面的方法和属性
this._name = name;
this.getName = function () {
console.log(this._name);
};
this.setName = function (name) {
this._name = name;
};
}
var p = new Person("张三");
p.getName(); // 张三
p.setName("李四");
p.getName(); // 李四
对于上述代码需要注意
Person充当的构造函数
this代指对象
创建对象时需要使用 new
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function Person(name){
this.name=name;
this.get_name = function(){
console.log(this.name);
}
this.set_name=function(name){
this.name=name
console.log(this.name);
}
}
var p1 =new Person('ZY');
p1.get_name();
p1.set_name('Developer');
</script>
</head>
<body>
</body>
</html>
输出结果
然后我们这里让其仅仅输出修改之后的值于是
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function Person(name){
this.name=name;
this.get_name = function(){
console.log(this.name);
}
this.set_name=function(name){
this.name=name
return this.name;
}
}
var p1 =new Person('ZY');
//p1.get_name();
p1.set_name('Developer');
p1.get_name();
</script>
</head>
<body>
</body>
</html>
输出结果
第二方法
// 定义类class Person {
//类的构造函数实例化的时候执行new的时候执行
constructor(name) {
this._name = name;
}
getName() {
console.log(this._name);
}
setName(name) {
this._name = name
}
}
let p = new Preson('张三')
p.getName(); // 张三
p.setName('李四');
p.getName(); // 李四
实现原代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
class Person{
constructor(name){
this.username=name;
}
getName(){
console.log(this.username);
}
setName(name){
this.username=name;
}
}
var p1 =new Person('ZY');
//p1.getName();
p1.setName('Developer');
p1.getName();
</script>
</head>
<body>
</body>
</html>
输出结果
15、原型
我们所创建的每一个函数解析器都会向函数中添加一个属性prototype
这个属性对应着一个对象这个对象就是我们所谓的原型对象
如果函数作为普通函数调用时 prototype没有任何作用
当函数以构造函数调用时它所创建的对象中都会有一个隐含的的属性
指向该构造函数的原型 我们可以通过__proto__来访问该属性
我们可以将对象中公有的内容统一设置到原型对象中
function Persion(username,age){
}
//console.log(Persion.prototype);
var p = new Persion();
console.log(p.__proto__ == Persion.prototype);
定义原型变量和原型变量
function Persion(username,age){
}
//console.log(Persion.prototype);
Persion.prototype.a = '女';
Persion.prototype.Sayname=function(){
return Persion.name;
}
var p1 = new Persion('moonsec');
var p2 = new Persion();
alert(p1.Sayname());
16、运算符
用于执行程序代码运算会针对一个以上操作数来进行
16.1 算术运算符
+ - * / % ++ --
*字符串拼接使用“+”
16.2 比较运算符
<
>
==
=
<=
>=
=== 全等于 将数值以及数据类型一并比较
==不全等于 将数值以及数据类型一并比较
16.3 赋值运算符
=
+=
-=
*=
/=
%=
a=a+2;==>a+=2
a=a-2;==>a-=2
a=a*2;==>a*=2
a=a/2;==>a/=2
a=a%2;==>a%=2
16.4 逻辑运算符
&& 全真为真
|| 一个为真就是真
取反
16.5 三元运算符三目运算符
表达式1?表达式2:表达式3
当我的表达式1成立时 执行表达式2 否则执行表达式
var max = 2>1?'>':'<';
console.log(max);
17、流程控制语句
17.1 if语句
if(条件){
函数体
}
17.2 if else语句
if(条件){
函数体1
}else{
函数体2
}
17.3 if…else if…else语句
if(条件1){
}else if(条件2){
}else if(条件n){
}else{
}
17.4 switch语句:多分支语句
switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
switch (new Date().getDay()) {
case 6:
text = "今天是周六";
break;
case 0:
text = "今天是周日";
break;
default:
text = "期待周末~";
}
17.5 循环结构
while循环
先判断条件 当条件成立 再执行
while(循环成立条件){
....
}
do...while循环
do...while循环:不论条件成不成立 先执行一遍 再判断
do{
.....
}while(循环成立条件)
for循环for in循环
continue
跳过当前循环直接进入循环的下一个步骤
break:
结束循环
18、JS操作DOM
18.1 什么是DOM
DOMdocument object model文档对象模型是针对HTML和XML的一个API应用程序接口。DOM给我们描述了一个具有层次化特点的节点树允许开发人员增删改查页面的某些部分。
JavaScript能够改变页面中的所有HTML元素JavaScript能够改变页面中的所有HTML属性JavaScript能够改变页面中的所有CSS样式JavaScript能够对页面中的所有事件做出反应
18.2 DOM查找元素
document获取节点的基本方法
document.getElementById('id'); //通过id来获取元素,返回指定的唯一元素。
document.getElementsByName("name");//通过name来获取元素返回name='name'的集合。
.document.getElementsByClassName("classname") //用classname来获取元素返回的是一个class="classname"的集合(不兼容IE8及以下)。
document.getElementsByTagName('div'); //用元素的标签获取元素返回所有标签=“div”的集合。
18.2.1 查找
直接查找
var obj = document.getElementById('id');
间接查找
文件内容操作
innerText 仅文本
innerHTML 全内容
value
input value 获取当前的值
select 获取选中的value的值 document.getElementById('s1').selectedIndex=1
Textarea 获取value的值
案例使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1" class='c1 c2'>
<p>这是一个登陆界面<a >登陆</a></p>
</div>
<input id="myinput" type="text" name='username'>
</body>
</html>
输出结果
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1" class='c1 c2'>
<p>这是一个登陆界面<a >登陆</a></p>
</div>
<input id="myinput" type="text" name='username'>
<select id='myselect'>
<option value="php">php</option>
<option value="python">python</option>
<option value="java">java</option>
</select>
</body>
</html>
这里我们在控制台进行查找操作
18.2.2 操作
样式操作
className 列出样式 字符串
classList 列出样式 返回数组
classList.add 增加样式
classList.remove 删除样式
<div class='c1 c2' styple='font-size:16px'></div>
obj.style.fontSize='16px';
使用过程
这里我们看这些操作命令的作用
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1{
width: 200px;
height: 200px;
background: red;
}
.c2{
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div id='div1' class="c1">
</div>
<input id='i1' type="text" name="username" / >
</body>
</html>
输出结果
这里我们可以看下进行操作之后的对比
属性操作
获取属性
getAttribute()
增加设置一个属性
添加属性
setAttribute('xxx','alexe')
删除属性
removeAttribute(value)
案例使用
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1" style="font-size: 20px;">
<p>这是一个登陆界面</p>
</div>
<input id="i1" type="text" name='username'>
</body>
</html>
输出结果
这里我们进行获取操作
创建标签 并添加到html中
第一种方式 字符串方式
insertAdjacentHTML()
<input type="button" value="+" onclick="add();"/>
<div id="div1">
<p><input type="text"/></p>
</div>
<script>
function add(){
var tag="<p><input type='text'></p>"
document.getElementById('div1').insertAdjacentHTML('beforeEnd',tag);
}
</script>
</body>
有四种值可用
beforeBegin:插入到标签开始前afterBegin:插入到标签开始标记之后beforeEnd:插入到标签结束标记前afterEnd:插入到标签结束标记后
第二种方式 对象的方式
document.createElement
<input type="button" value="+" onclick="add2();"/>
<div id="div1">
<p><input type="text"/></p>
</div>
<script>
function add(){
var tag="<p><input type='text'></p>"
document.getElementById('div1').insertAdjacentHTML('beforeEnd',tag);
}
function add2(){
var tag =document.createElement('input');
tag.setAttribute('type','text');
tag.style.color='red';
var p =document.createElement('p');
p.appendChild(tag)
document.getElementById('div1').appendChild(p);
}
</script>
appendChild 在节点后面增加一个子节点
案例使用
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="+" onclick="add2();"/>
<div id="div1">
<p><input type="text"/></p>
</div>
<script>
function add(){
var tag="<p><input type='text'></p>"
document.getElementById('div1').insertAdjacentHTML('beforeEnd',tag);
}
function add2(){
var tag =document.createElement('input');
tag.setAttribute('type','text');
tag.style.color='red';
var p =document.createElement('p');
p.appendChild(tag)
document.getElementById('div1').appendChild(p);
}
</script>
</body>
</html>
输出结果
提交表单
任何标签都可以通过dom提交
getElementById('id').submit()
<form id='f1' action="https://www.moonsec.com/">
<input type="submit" value="提交" />
<input type="button" value="botton" onclick="Sub();" />
<a onclick="Sub();">提交</a>
</form>
<script>
function Sub(){
document.getElementById('f1').submit();
}
</script>
案例使用
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id='f1' action="https://www.moonsec.com/">
<input type="submit" value="提交" />
<input type="button" value="botton" onclick="Sub();" />
<a onclick="Sub();">提交</a>
</form>
<script>
function Sub(){
document.getElementById('f1').submit();
}
</script>
</body>
</html>
输出结果
其他
console.log 终端输出
alert 弹出框
confirm 确认框 标题 true false
url和刷新
location.href 获取url
location.href ='url' 重定向
location.reload() 重新加载
定时器
setInterval()
clearInterval()
<input id="i1" type="text" />
<input type="button" value="停止" onclick="stop();">
<script>
function setTime(){
var tag = new Date();
document.getElementById('i1').value=tag;
}
var obj=setInterval('setTime()','500');
function stop(){
clearInterval(obj);
}
只执行一次
setTimeout()
clearTimeout()
<div id="status"></div>
<input type="button" value="删除" onclick="Delele();">
<script>
function Delele(){
document.getElementById('status').innerText="已删除";
setTimeout(function(){
document.getElementById('status').innerText="";
},5000)
}
</script>
案例使用
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ZY技术分享</title>
</head>
<body>
<div id="status"></div>
<input type="button" value="删除" onclick="Delele();">
<script>
function Delele(){
document.getElementById('status').innerText="已删除";
setTimeout(function(){
document.getElementById('status').innerText="";
},5000)
}
</script>
</body>
</html>
输出结果
事件
绑定事件两种方式
a.直接标签绑定 直接标签绑定 onclick=''
先获取dom对象然后进行绑定
document.getElementById('xxx').onclick()
案例使用
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id='i1' type="button" value="提交" />
<script>
document.getElementById('i1').onclick(alert('xss'));
</script>
</body>
</html>
输出结果
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |