关于我第二次学习 JavaScript 这件事情

其实之前在学习安全的时候，面对 XSS 这种完全依托于 JavaScript 的漏洞，就大概也过了一边它的语法，但是非常粗略，所以现在学习 Java Web 的时候，还是觉得很有必要将 JavaScript 的各种语法都认真过一遍的。那么 JavaScript 学习笔记 2.0 开始吧！

快速入门

嵌入位置

  1. 在任何位置使用 <script>alert(“hello”)</script> ，只要被 script 标签包裹，就可以在里面填入 JavaScript 代码。

  2. 把 JavaScript 代码放到一个单独的 .js 文件当中，然后用 script 标签里面的 src 属性来引入这个文件。

1
<script src="./xorex/space/do.js"></script>

变量类型

JavaScript 种一共有：String Number Boolean Object Function 变量类型。一个变量，除了有上面这几种类型，还有三种特殊的类型， undefined null NaN 。

  • undefined 定义变量没有初始值时默认值为此特殊值，表示一个 无 的原始值，类型为 undefined 类型，转为数值的时候为 NaN

  • null 为空值，表示 无 的对象。转为数值的时候为 0 ，是一种特殊的 Object 类型。

  • NaN 表示 Not a Number 非数值类型，是一种特殊的 Number 类型，因为 typeof NaN 返回的就是 Number。

无穷大除以无穷大、给任意负数做开方运算 或者 算数运算符与不是数字或无法转换为数字的操作数一起使用时都将返回 NaN

关系运算

JavaScript 和 PHP 一样有强相等和弱相等。

弱相等：== 仅仅是字面值比较 12 和 “12” 返回 true

强相等：=== 不但进行字面值比较，还会进行 12 和 “12” 返回 false

逻辑运算

JavaScript 同样拥有 && || ! 这样的逻辑运算，但是在 JavaScript 中，所有的数值都可以表示逻辑值，其中只有 0 null undefined “”（空串） false 会认为布尔假，其他的值都为布尔真。

  • 对于 && 运算，当表达式为真的时候，返回最后一个表达式的值。表达式为假的时候，返回第一个为假的值。

  • 对于 || 运算，当表达式为真的时候，返回第一个为真的表达式的值，表达式为假的时候，返回最后一个表达式的值。

  • 并且逻辑运算有惰性运算的性质，当第一个表达式可以确定整个逻辑运算的结果的时候，后面的表达式将不会被计算。

数组

JavaScript 的数组是可变长数组，根据下标随意拓展长度，属于类型为 Object 类型，使用 [] 表示，里面可以同时存储不同类型的数值。

1
2
3
4
var Xorex=[false,1,2,"3"];
Xorex[10]="";
alert(Xorex)
alert(Xorex.length)

然后会返回：

1
2
false,1,2,3,,,,,,,
11

循环

  1. for 循环

for 循环基本上和 Java 的相同，唯一不同的是增强 for 循环的用法，JavaScript 使用了关键词 in ，并且增强 for 返回的是数组下标而不是元素。

1
2
3
4
var Xorex=[false,1,2,"3",4];
for(var i in Xorex) {
    alert(Xorex[i]);
}
  1. while 循环

while 循环完全和 Java 一模一样。

函数

声明函数，只需要有关键词 function 即可，剩下什么都不用管。

1
2
3
function func(a,b) {
    return a+b;
}

变量类型可以是 function 类型，那么意味着变量可以保存方法，如下。

1
2
3
4
var Xorex=function(a,b) {
    return a+b;
}
alert(Xorex(1,2));

JavaScript 不允许方法重载。

函数有一个隐形参数，arguments 是一个数组，里面保存了此函数传入的所有参数，可以在函数内调用。

1
2
3
4
5
6
7
var Xorex=function(a,b) {
    for(var i in arguments) {
        alert(arguments[i]);
    }
    return a+b;
}
alert(Xorex(1,2));

上面代码会弹三次，1，2，3。

面对对象

方法一：将变量变为 object 类型，然后，初始化一个属性等于声明一个属性，初始化一个方法等于声明一个方法。

1
2
3
4
5
6
7
var Xorex=new Object();
Xorex.name="Xorex";
Xorex.age="1024";
Xorex.speak=function() {
    alert("Name:"+this.name+" age:"+this.age)
}
Xorex.speak();

方法二：使用大括号定义对象格式：

1
2
3
4
5
6
7
8
9
10
11
12
var 对象名= {
    属性名:值,
    属性名:值,
    属性名:值,

    方法名:function(参数) {
        方法代码
    },
    方法名:function(参数) {
        方法代码
    }
}

需要注意的是逗号只有最后一个元素不用写。

对应的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var Xorex={
    name:"Xorex",
    age:"1024",

    speak:function() {
        alert("Name:"+this.name+" age:"+this.age);
    },

    jump:function() {
        alert("I am jumping!")
    }
}
Xorex.speak();
Xorex.jump();

对于属性值，既可以用 . 访问，如 Xorex.name ，也可以用 [] 来访问，如 Xorex[name]。

事件

事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载，用于页面加载完成之后的初始化 js 操作。
onsubmit 表单提交事件，用于验证表单数据
onblur 失去焦点事件，用于验证填写框内容
  1. 静态事件注册：

在需要事件的标签加上对应的事件属性，值为对应事件的 JavaScript 代码，比如下面的：

1
2
3
4
5
6
7
<button onclick="alert('This is Xorex');//里面直接写对应执行代码">Xorex</button> 
<button onclick="getAlert()//将对应代码封装成函数调用">Yukino</button>
<script>
function getAlert() {
    alert("This is Yukino!");
}
</script>
  1. 动态事件注册：

在 windows.onload 事件里面设置代码，表示窗口页面加载完之后执行里面的事件注册代码。

然后里面通过 document.getElementById(“ID”) 来获取对应 html 标签元素对象，然后再设置此对象的某个事件为某个方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<button id="Xorex">Xorex</button>
<button id="Yukino">Yukino</button>
<script>
function getXorex() {
    alert("This is Xorex!");
}
function getYukino() {
    alert("This is Yukino!");
}
window.onload=function() {
    var Xorex=document.getElementById("Xorex"); // 获取元素对象
    Xorex.onclick=getXorex; //注册元素对象 onclick 事件执行代码 getXorex()

    var Yukino=document.getElementById("Yukino");
    Yukino.onclick=getYukino;
}
</script>

onsubmit 事件

因为是验证表单提交内容，如果出现不合法数据，则会阻止表单的提交，而阻止的方法就是返回一个 false 

1
2
3
4
5
6
7
8
9
<form action="https://xorex.space" method="get" onsubmit="return func()//这里一定要有 return 返回函数返回的 false">
    <input type="submit" value="去博客吧！">
</form>
<script>
function func() {
    alert("这玩意不合法，不能提交！")
    return false;
}
</script>

然后在点击事件代码里就可以拦截表单的提交了。

向标签里写入内容

JS 可以往 HTML 代码中写入属性和内容。

写入属性，获取使用 getElementById 获取对应 html 元素 DOM 对象，然后 对象名.属性名=属性值 即可设置。

写入内容：获取元素 DOM 对象之后 对象名.innerHTML=写入内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
用户名<input type="text" id="username" value="">
<span id="Test"></span>
<button onclick="onclickfunc()">校验</button>

<script>
function onclickfunc() {
    var usernameObj=document.getElementById("username");
    var name=usernameObj.value;
    var pattern=/^\w{5,10}$/;
    var testObj=document.getElementById("Test"); // 校验是否符合正则表达式

    if(pattern.test(name)) { //设置属性 style 为绿色，写入内容
        testObj.style="color:green";
        testObj.innerHTML="Test Correct!"
    } 
    else { //设置属性 style 为红色，写入内容
        testObj.style="color:red";
        testObj.innerHTML="Test Uncorrect!";
    }
}
</script>