前端之Javascript小结

世界上最催悲的事，是你暗恋某个女孩，而 她开心地和另一个人在一起。当你满腔文艺 气忧伤地在月光下独自漫步思念她的时候， 同在一片月光下她拉着某个人的手靠在某个 人的臂弯里亲吻某个人的嘴唇……空气中翻涌 着两情相悦的荷尔蒙气息……

JavaScript

前言:其实一开始我内心是挺抵触JavaScript的,不是因为觉得她难学,但是我本身对Java有一种畏惧的情绪.虽然说JavaScript与java的关系就好像巴基斯坦和卡巴斯基一样,有个基吧的关系,但是总觉得还是挺抵触的.但是JavaScript的应用需求又挺大,不仅仅在WEB安全方面的XSS漏洞,因为JavaScript只要是浏览器就可以运行,所以不管是win,mac,linux还是Android或者iOS,只要有浏览器就可以运行,而且还搞出来一个node.js做后端….生态是真的大…

其实最主要的是七月末的时候和小桃红聊天,她说JavaScript挺简单,并且纳入了她的教学课程…想想还是决定克服一下心理障碍学习下,讲道理会Python和PHP,在学JavaScript其实很容易上手的

当我正式学了一半后发现，会PHP和Python再学JavaScript简直不要太简单，里面的数据类型，逻辑运算符，判断符号，调用函数，闭包，函数作用域等等都差不多一样，不过需要注意的是JavaScript的一些特性和在HTML中引用的一些属性要专门学习。

基础用法

关于JavaScript写在script标签里面和引入外部js代码在第一篇html小结中说过了,这里不做复习.

打印输出

<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>

这样页面中会显示出一个一级标题和一个段落,需要注意的是document.write只能在HTML流中写,如果写在后面或者函数中则会覆盖掉页面的内容.

JavaScript 可以通过不同的方式来输出数据：

1. 使用 window.alert() 弹出警告框。
2. 使用 document.write() 方法将内容写到 HTML 文档中。
3. 使用 innerHTML 写入到 HTML 元素。
4. 使用 console.log() 写入到浏览器的控制台。

事件反应

首先科普一下alert()这个函数,这是JavaScript的弹框函数,这一个函数在检查XSS跨站脚本攻击中最常见

<button type="button" onclick="alert('欢迎!')">点我!</button>

onclick是点击的意思,如果被点击就弹窗出来.

修改图片

首先科普一下内置的document.getElementById()函数，该函数的作用是寻找指定的标签，然后把结果赋值给一个变量．

下面通过创建函数，用一个实例来说明作用

<script>
function changeImage()
＃　创建函数，函数名为changeimage
{
    element=document.getElementById('myimage')
    # 查找ｍyimage这个属性，结果赋值给element这个变量
    if (element.src.match("１１１１１１１"))　
    ＃ 如果element的src属性中出现了１１１１１１１
    ＃如果是Ｐｙｔｈｏｎ的话，应该还会有ｓｅａｒｃｈ的用法
    {
    element.src="/images/２２２２２２２.gif";
    ＃ 如果匹配到了１１１１１１１，那么这个事件的图片地址属性就改成了上面的
    }
    else
    {
    element.src="/images/１１１１１１１.gif";
　＃　不然图片的地址属性就改成这个
    }
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/１１１１１１１．gif" width="100" height="180">
＃　然后执行这个ｊｓ代码，如果这个图(这个图片的属性是ｍｙｉｍａｇｅ，也就是函数要寻找的属性，这张图引用的图片是１１１１１１１.ｇｉｆ文件)
＃　执行函数，寻找到了１１１１１１１这个值，把图片替换成２２２２２２２.gif

这一块包括的知识点比较多，函数的创建，函数的启动(被点击就启动)，寻找指定的属性，修改属性的内容．

网页中替换文本

其实通过上面的代码大概知道怎么做了，使用document.getElementById()函数寻找到ｉｄ值，然后修改，修改的单词是innerHTML．

document.getElementById("demo").innerHTML="浪子６６６６６";

这行代码的意思是寻找id=demo的标签内，把标签内的文本修改成浪子６６６６６

注释符号

javascript的注释符号是两个反斜杠…

//我被注释了哟～～

或者

/*
这
里
面
全
都
被
注
释
了
哦
~
*/

数据类型

ＪａｖａＳｃｒｉｐｔ提供的数据类型和Ｐｙｔｈｏｎ很相似，有数字型，字符串型，数组[Ｐｙｔｈｏｎ中的字典]，字典．

函数

与PHP一样的语法，具有当前作用域，闭包等等特性，具有returndefangfa1,还有匿名函数，但是匿名函数与python的lambda不一样，JavaScript的匿名函数的写法如下：

;(function() {var a = 100;})();

函数传参

function myFunction(a, b) {
       return a * b;       // 返回 a 乘以 b 的结果
}

传入的参数是ａ，ｂ．如果函数中有新的变量别忘了使用ｖａｒ定义

定义变量

ＪａｖａＳｃｒｉｐｔ与Ｐｙｔｈｏｎ不一样，定义新的变量的时候要先声明一下，使用ｖａｒ声明，这一点和ｊｉｎｊａ２的语法又很像，这就是缘分啊～～
比如：

var add=19
var app='浪子'

中级用法

ＪａｖａＳｃｒｉｐｔ的语法和关键词与Ｐｙｔｈｏｎ和ＰＨＰ极为相似，用法如下

break    用于跳出循环。
catch    语句块，在 try 语句块执行出错时执行 catch 语句块。
continue    跳过循环中的一个迭代。
do ... while    执行一个语句块，在条件语句为 true 时继续执行该语句块。
for    在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in    用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function    定义一个函数
if ... else    用于基于不同的条件来执行不同的动作。
return    退出函数
switch    用于基于不同的条件来执行不同的动作。
throw    抛出（生成）错误 。
try    实现错误处理，与 catch 一同使用。
var    声明一个变量。
while    当条件语句为 true 时，执行语句块。

数组

ＪａｖａＳｃｒｉｐｔ中的数组说像Ｐｙｔｈｏｎ中的列表，倒不如说与ＰＨＰ的数组一样．不过使用前要声明变量

var list_arry=['aaa','bbb','ccc']

数组可以使用索引，比如list_arry[0]

对象Object

其实就是Ｐｙｔｈｏｎ的字典

var dict_ob={
name:'admin',
age:18
}

调用的方法与Ｐｙｔｈｏｎ也差不多，使用dict_ob.name或dict_ob[‘name’]都能取到值．

null

null只有在需要明确指定（或清空）一个量时才使用，如删除用户介绍：user.intro = null。

null只能手动设置，JS本身不会将任何量的默认值设为null。

typeof null 会返回 “object”

null是个”假值”

if(null) {
  // 这里永远都不会执行
}

undefined

“undefined”这个词的字面意思是”未定义”，好的，那我声明一个变量

var a; 
console.log(a); // undefined

a就是underfined

OK，我来赋值

var a = undefined; // 
console.log(a); // undefined

undefined可以被赋值…

同上

undefined == null 返回 true

undefined是个”假值”

if(undefined) {
  // 这里永远都不会执行
}

字符串长度

使用内置的ｌｅｎｇｔｈ函数获取长度

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

运算符和对比符

ＪａｖａＳｃｒｉｐｔ中的运算符和比较符号与ＰＨＰ以及Ｐｙｔｈｏｎ差不多，只要稍微熟悉一下即可，其中++是自增,–是自减

var id=1;
id ++;

字符串相加使用的加号，如果把数字与字符串相加，结果将成为字符串．

比较符号稍微多点新东西，把ＭＹＳＱＬ的一点运算符算进去了

＆＆---ａｎｄ
|| ----ｏｒ
！  ---ｎｏｔ

条件运算符

if–else－-switch–break语法和ＰＨＰ一样．．．．

遍历与循环

和ＰＨＰ语法一样

格式如下

<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++){
    document.write(cars[i] + "<br>");
}
</script>

本例中的循环将继续运行，只要变量 i 小于 5：

while (i<5)
{
    x=x + "The number is " + i + "<br>";
    i++;
}

typeof 操作符

和Ｐｙｔｈｏｎ的ｔｙｐｅ()一样的用法，获取对象的数据类型

typeof "John"                // 返回 string 
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

小心思

我感觉ＪａｖａＳｃｒｉｐｔ和ＰＨＰ后面的语法完全一个吊样，我去复习一下ＰＨＰ就相当于把ＪａｖａＳｃｒｉｐｔ预习了一遍．．．．

关于ＪａｖａＳｃｒｉｐｔ还需要熟悉一下他的特性，操作页面，然后还有一些专门的语法和结构．

This

这个就很牛逼了，且听我慢慢道来。在JavaScript中定义变量中可以定义函数，比如下面的实例

var user()={
first_name:'lang';
last_name:'zi';
fullname:function(){
return user.first_name+user.last_name;
}
}
console.log(user.fullname());

这样会输出完整的langzi，但是还可以这么写

var user()={
first_name:'lang';
last_name:'zi';
fullname:function(){
return this.first_name+this.last_name;
}
}
console.log(user.fullname());

this直接指代的是自己的对象，this指向的对象是this被调用的方式，比如上面的this在函数中被调用，name就指向函数中，如果在函数外console.log(this)，结果就是undefind或者windows。

function user(){
this.name='langzi';
this.age=10;
}
var name = new user():
console.log(name)

这样同样会打印出user（）函数里的对象属性

call

这个接着this来，JavaScript调用函数的时候，比如调用name()函数其实就是name.call()

function print_name(){
console.log("我是"+this.name);
}

因为name没有定义，所以是undefind或者是空，但是神奇的地方来了

var xth={
name:'小桃红';
}
yo.call(xth)

这样就会打印出 我是小桃红

如果要传参的话

function print_name(name){
console.log("我是"+this.name+name);
}
var xth={
name:'小桃红';
}
yo.call(xth,啦啦啦)

就会打印出 我是小桃红啦啦啦

表单验证

HTML 表单验证可以通过 JavaScript 来完成。以下实例代码用于判断表单字段(fname)值是否存在，如果存在，则弹出信息，否则阻止表单提交：

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

HTML 代码：

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

XSS

恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。

XSS的原理：

1. 攻击者对含有漏洞的服务器发起XSS攻击（注入JS代码）。
2. 诱使受害者打开受到攻击的服务器URL。
3. 受害者在Web浏览器中打开URL，恶意脚本执行。

具体参考XSS实例演示

对象

常见的HTML事件

ＨＴＭＬ事件与ｊｓ绑定在一起是很常见的，也是ＪａｖａＳｃｒｉｐｔ的主要功能

onchange    HTML 元素改变
onclick    用户点击 HTML 元素
onmouseover    用户在一个HTML元素上移动鼠标
onmouseout    用户从一个HTML元素上移开鼠标
onkeydown    用户按下键盘按键
onload    浏览器已完成页面的加载

windows

alert(1);

弹窗提示信息

confirm("您是否年满十八岁");

弹窗，带有ok和取消。可以把这个confirm的结果赋值给一个变量，结果只有True和False两个结果

prompt("请输入用户名");

弹窗，带一个输入框，同上可以把结果赋值给一个变量

时间

倒计时

window.setTimeout(function(){alert('时间到了');},2000)
// 2000是2000毫秒,也就是2秒钟后弹窗时间到了

计时器

window.setInterval(function(){console.log('你看到我了，你又看到我了...');},1000)
// 每隔一秒钟就提示 你看到我了，你又看到我了
// 这个可以之前定义一个变量 var count = 1,然后在函数中自增这个变量
// window.setInterval(function(){count++;console.log('你看到我了，你又看到我了...'+count);},1000)

断计时器

计时器是无限重复，了断他使用window.clearInterval，具体方法如下

var count = 1
timer = window.setInterval(function(){count++;if(count>100){cleatInterval(timer);return;}console.log('你看到我了，你又看到我了...'+count);},1000)

ＪａｖａＳｃｒｉｐｔ实例