来源：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暂时够用了，大家下来自己在仔细的琢磨一下，在顺便自己实验一下。
网友评论