来源:http://bbs.ichunqiu.com/thread-10399-1-1.html?from=ch
首发:i春秋社区
注明:转载请务必注明i春秋社区(bbs.ichunqiu.com)
前言
Hello,大家好,今天开始,我们的SQL注射基础部分就已经结束了。(后面还会有高级部分,例如Bypass WAF,盲注,还有关于SQL注射的各种造轮子……)
那么,从今天开始,我们就进入Web前端的世界吧~~要想玩转前端,很重要的一点就是要会HTML,CSS,JavaScript的基础。
相信大家都是搞Web的,HTML和CSS肯定多少都会一点,但是JS的话,我曾听很多朋友说好难。(听到这句话的时候,我是无语的,能说出这句话的人,肯定是lazy man,根本舍不得花时间去学习)
既然如此,我们就在学习前端的安全之前,先来补习一些简单的JS知识吧~
目录
root@1~# JavaScript简介
root@2~# JavaScript小例子
root@3~# JavaScript变量
root@4~# JavaScript函数
root@5~# JavaScript流程控制
root@6~# JavaScript事件
正文
root@1~# JavaScript简介
我们在补习一些简单的、后面学习所需的JS知识之前呢,先来简单的给大家介绍下JavaScript这门语言。这样有助于大家对JS有个更加完整的理解。
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。
上面这一段呢,都摘自“百度百科”。因为这样更具有权威性质。但是这种文绉绉的介绍大家读起来也很累,而且可能涉及到一些专有名词,导致大家没办法理解它的意思。
所以,我还是稍微说一下吧。首先,JS是一种直译式的脚本语言。什么是直译式的脚本语言呢?其实就是那些把代码写在文本里,用解释器直接执行文本中代码的语言,就类似于我个人很常用的Python和PHP,这些都是不用编译直接通过解释器执行的语言,而不像C/C++一样,需要先编译了才能运行。
然后JS的第二个特点就是“弱类型”,什么意思呢?我们来看如下代码:
[C]纯文本查看复制代码
1
2
3
4
5#include [/color]
[color=#000000]intmain(){[/color]
[color=#000000]inta = 10;[/color]
[color=#000000]return0;[/color]
[color=#000000]}
这是一段C语言代码,在main函数中,定义了一个int型变量a,值为10。那么在后面的执行过程中,这个变量a就一直是int型了。在后文中就无法对a赋值浮点数和字符串了。而JS呢,则不一样:[AppleScript]纯文本查看复制代码
1
2
3var a=10;//此时为int
a="Hello World!";//此时为string
/*同样是变量a,却可以存储两种不同类型的数据*/
可以看到,同样是变量a,在JS中就可以随存储的值的类型不同而导致变量的类型不同。
OK,就到这里吧,我们接着看下一个内容。
root@2~# JavaScript小例子
OK,接下来,我们来看几个JS的小例子,来简单看一下JS能做什么。
#栗子1——页面输出:
首先,要进行页面输出,我们就得使用到document.write()方法,首先document是一个对象,从JS一开始就存在的一个对象,它代表当前的页面(文档),我们调用它的write()方法就能够向该对象中写入内容,我们看如下代码:

我们从外部引入了一个app.js文件,内容如下:

我们来加载一下,效果如下:

OK了,可以看到效果了,如果,对于前面,我说的document不理解的童鞋这下可以理解了,所谓的document对象其实就是app.html,也就是引入app.js的那个html文件,我们如果不在某个document里执行JS,则会发生这样的的事情:

接着我们来看栗子2。
#栗子2——响应事件
这是JS最常见的一个应用,我们举例如下页面:

多了个按钮button,我们将app.js的内容清空,访问如下:

我们可以看到一个Say Hello按钮,但是如果我们点击它却又什么用都没有。
于是我们就可以个这个元素添加onclick属性,让它有点用:

我们添加了onclick属性之后,一但这个元素被点击,就会调用onclick的值,这里是beClick()函数,我们在app.js中定义这个函数:

接着,我们再来点击的话:

接下来是第三个栗子了。
#栗子3——获取并修改元素
我们这次的doucment如下:

清空app.js,浏览下:

我们这下子来尝试通过JS修改h1元素的值,首先给h1元素加个id,如下:

然后给button加个onclick事件:

然后修改app.js为:

然后浏览页面如下:

然后点击一下x按钮,效果如下:

O了,关于JS的应用的演示就到这里了。我们来看下个内容。
root@3~# JavaScript变量
OK,接下来,我们来正式的补习一点JS的知识,首先就是JS的变量。我们在JS中定义变量通常是使用:
[JavaScript]纯文本查看复制代码
1
var变量名;
来定义的。
我们举个例子:

这个栗子中变量a是一个整型(整数)数据,b是一个浮点型(小数)数据,c是字符型(字符串)数据,d是布尔型(真和假)数据。
我们来看数据的运算与操作。首先,我们看如下栗子:

那么这个变量d的值就为100了,嘿嘿,接着,我们来看如下这个栗子:

这样的话c就是1.9,浮点型数据加上整形数据就会成为浮点型数据。
再看这样一个栗子:

我们的c的值就成了HelloWorld,不信你看:

好的,JS的变量部分就讲到这里了,我们接着下一个内容。
root@4~# JavaScript函数
OK,接着来说JS的函数,所谓函数是怎么一回事呢?我们先来想像一下,当我们要写上万行代码来实现某些功能的时候,如果在不实用函数的情况下,根本无法理清代码之间的逻辑。
但是我们使用函数的情况下,就不会了。在JS中定义函数的方法很简单,就是:
[JavaScript]纯文本查看复制代码
1
2
3function函数名(参数表){
函数体;
}
我们来看个栗子:

我们来加载一下,看下console的输出:

这就是函数,大家自行体会一下,这个不怎么好解释,有些人体会好了就会了结构化程序设计。。。
这就是自定义函数了,我们再来看下,JS自己的函数:

然后,加载一下:

哈哈,我都有点佩服我的机智~~哈哈哈哈哈哈。好了,不开玩笑了,一会被这对“新人”知道了可就不好了。(哈哈哈哈哈哈哈,还是忍不住幸灾乐祸一番啊,哈哈哈哈哈)
root@5~# JavaScript流程控制
好了,接下来,我们来学习JS的流程控制,首先是if...else...语句。我们来看一个实际栗子:

我们来看下效果:

接下来,我们来看switch...case...流程,这个就不像if...else...流程了,这个要比if...else...流程稍微难一些。
我们得先接触一下,这个流程的结构如下:
[JavaScript]纯文本查看复制代码
01
02
03
04
05
06
07
08
09
10
11switch(a){
case1:
alert(1);//当a为1时要执行的
break;
case2:
alert(2);//当a为2时要执行的
break;
default:
alert("Unkonw!");//既不是1也不是2时要执行的
break;
}
我们接下来就来看个栗子:

我们来看效果:

再接下来就是For循环,JS的For循环和C语言的是一样的,和Python的是不一样的,我们来看:
[JavaScript]纯文本查看复制代码
1
2
3for(初始化变量;循环条件;改变条件){
循环体;
}
我们就来举个栗子讲解:

这个For循环的第一个位置var i=0就是初始化变量,然后设定循环条件为i小于100,最后每次循环体执行后就把i的值加1。
我们来看效果:

一直不停的弹窗,弹了100次。。(坑人必备。。其实坑不了,因为有个禁止此页再显示对话框。。。)
接着是While循环,结构如下:
[AppleScript]纯文本查看复制代码
1
2
3while(循环条件){
循环体;
}
我们来看一个实际栗子:

还是弹TT一百次啦,哈哈。
好了关于JS的流程控制就到这里,我们再来整个我看了很爽的代码:

嘿嘿嘿嘿嘿嘿嘿嘿。。。。(别说我猥琐。。。)
root@6~# JavaScript事件
最后,我们就拿JS事件来结尾吧,先上图:


OK了,JS就这些事件,常见的呢,我们就来演示一下,首先是onclick事件,就是被点击:

接着,我们来浏览器上看看:

点一下ClickMe就会弹窗,接下来,我们再来演示onmouseout、onmouseover事件,代码如下:

Browser上打开,如下:

然后把鼠标移到TEXT上面:

OK了,相信补习的这点JS暂时够用了,大家下来自己在仔细的琢磨一下,在顺便自己实验一下。
网友评论