Web安全——JavaScript基础（加入案例）
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.logJavaScript中的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（凡是引号包裹起来的内容全部都是字符串）
布尔： boolean（true、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(..) 将某值转换成数字，不成功则NaNparseFloat(..) 将某值转换成浮点数，不成功则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转化为字符串
使用toJSONStringvar last=obj.toJSONString(); //将JSON对象转化为JSON字符
使用stringifyvar 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+=2a=a-2;==>a-=2a=a*2;==>a*=2a=a/2;==>a/=2a=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？
DOM（document 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 全内容valueinput value 获取当前的值select 获取选中的value的值 document.getElementById('s1').selectedIndex=1Textarea 获取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 获取urllocation.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>
输出结果：