JavaScript安全编程宝典【万字详解】

文章目录

简介
基本说明
特点
两种使用方式
- 在script中写
- 使用script标签引入JS文件
数据类型
- 介绍
- 特殊值
运算符
- 算数运算符
- 赋值运算符
- 逻辑运算符：
- 条件运算符
数组的定义
- 基本使用
- 数组的遍历
函数
- 含义
- 函数定义方式
- - 基本语法
  - 代码示例
- 细节和注意事项
自定义对象
- Object形式
- {} 形式
事件
- 介绍
- 事件一览表
- 事件分类
- 事件的注册
- 静态注册事件
- 动态注册事件
- - - - 动态事件注册的步骤
- onload加载完成事件
- onclick单击事件
- onblur失去焦点事件
- onchange 内容改变事件
- onsubmit事件

参考学习： JavaScript 教程 (w3school.com.cn)

简介

JavaScript是一种强大的、多用途的编程语言，最初由Netscape公司的Brendan Eich在1995年设计，旨在为Web页面增加动态和交互功能。随着时间的推移，JavaScript已经从一种简单的脚本语言发展成为一种功能全面的编程语言，被广泛用于Web前端和后端开发、服务器端应用、桌面应用、移动应用、游戏开发以及物联网项目中。

基本说明

JavaScript 能改变 HTML 内容，能改变 HTML 属性，能改变 HTML 样式 (CSS)，能完成页面的数据验证。

特点

JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释
JavaScript是一种基于对象的脚本语言，可以创建对象，也能使用现有的对象(有对象)。

JavaScript是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程可以变化。
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 是弱类型的</title>
<!-- 案例演示 -->
<!--
解释
1. js 代码可以写在 script 标签中
2. type="text/javascript" 表示这个脚本(script)类型是 javascript
3. type="text/javascript" 可以不写，但是建议写上
4. js 语句可以不写 ; 建议写上
5. var -->
<script type="text/javascript">
// 弱类型
// var name = "haha";
// 输出 alert() 使用弹框方式
// 输出 console.log() 在调试输出
// alert("name=" + name);
// 输出变量的类型 typeof, 输出变量的类型
// alert(typeof name);
// name = 100; //给 name 重新赋值
// alert(typeof(name)); // 类型 number
var age = 10; // 数值
console.log("age=" + age);
console.log(typeof age);
age = "北京";
console.log("age=" + age);
console.log(typeof age);
// 那如果输出字符串 + 数字的话会把数字转成 string 吗
var n = 123 + "abc";
console.log(n);
console.log(typeof n);
</script>
</head>
<body>
</body>
</html>

跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）

两种使用方式

在script中写

代码示例：

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>script 标签中写 JS 代码</title>
  <!-- 解读
  1. 可以在 head 和 body 嵌入 script
  2. 执行顺序从上到下
  3. 建议放在 head -->
  <script type="text/javascript">
  // 在 head 内使用 script 写 js
  console.log("ok");
  </script>
  </head>
  <body>
  <script type="text/javascript">
  // 在 body 内使用 script 写 js
  console.log("hi");
  </script>
  </body>
  </html>

使用script标签引入JS文件

代码示例：

创建两个文件：test.js和js-use.html

test.js：
---------------------------------------------------------------------------------------------------------------------
alert("我是test.js文件");

js-use.html：
--------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 script 标签引入 JS 文件</title>
<!--
<script type="text/javascript" src="引入的js文件"></script>
-->
<script type="text/javascript" src="./.idea/test.js"></script>
</head>
<body>
</body>
</html>

数据类型

介绍
1. 数值类型 number
2. 字符串类型 string
3. 对象类型 object
4. 布尔类型 boolean
5. 函数类型 function

特殊值

undefined 变量未赋初始值时，默认undefined
null 控制
NAN Not a Number 非数值

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型-特殊值</title>
</head>
<body>
<script type="text/javascript">
// 说明：
// 1. typeof() 是 JavaScript 语言提供的一个函数。
// 2. 返回变量的数据类型
// 3. 3 个特殊值：undefined（没有赋值就使用）、null、NaN（当不能识别类型）
var email; // 特殊值 undefined
console.log("email=" + email); // undefined
var address = null; // 特殊值 null
console.log("address=" + address); // null
console.log(10 * "abc"); // NaN (Not a Number)
</script>
</body>
</html>

运算符

算数运算符
赋值运算符

注意事项

等于： == 是简单的做字面值的比较

全等于：===除了做字面值的比较之外，还会比较两个变量的数据类型

逻辑运算符：

注意事项
在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用
0 、null、 undefined、“”(空串) 都认为是 false
遵守短路与的机制

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逻辑运算符注意事项和使用细节</title>
<script type="text/javascript">
// 1. 在 JavaScript 语言中，所有的变量，都可以作为一个 boolean 类型的变量去使用。
// 体会：js 语法是比较松散的。
var name = "cong";
var age = 800;
var n1 = null;
if (!n1) {
    alert("hi~");
}
// 2. 0、null、undefined、""(空串)、NaN 都认为是 false
var address; // undefined
if (!(100 * "hello")) {
    alert("ok~~");
}
// 3. && 且运算，有两种情况 => 解读(即 && 返回值是遵守短路与的机制)
var res1 = null && 800;
alert("res1=" + res1);
var res2 = "cong" || 800;
// 4. || 或运算，有两种情况 => 解读(即 || 返回值是遵守短路或的机制)
alert("res2=" + res2);
// 小练习
var res3 = (10 + 1) || (6 < 0);
alert("res3=" + res3); // 11
// 5. && 运算和 || 运算有短路现象
var n1 = 1;
var n2 = 3;
var res4 = (n1++ > 100) || n2++;
alert("n1=" + n1 + " n2=" + n2);
</script>
</head>
<body>
</body>
</html>

条件运算符

代码示例：

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>条件运算符</title>
  <script type="text/javascript">
  // 1. 规则：如果 (10 > 1) 条件表达式为 T，返回第一个表达式的值
  //    条件表达式为 F，返回第 2 个表达式的值
  // 2. 看出 js 使用比较灵活
  var n1 = 90;
  var n2 = 1;
  var res = n2 > 9 ? "cong" + "你好" : 800 + n1;
  alert("res=" + res);
  </script>
  </head>
  <body>
  </body>
  </html>

数组的定义

基本使用

代码示例：

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>数组定义</title>
  <script type="text/javascript">
  // "Audi", "BMW", "Volvo";
  // 数组定义方式1
  var cars1 = ["Audi", "BMW", "Volvo"];
  console.log("cars1=" + cars1);
  console.log(cars1[1]); // 表示访问 cars1 数组的第 2 个元素, 1 表示下标/索引，从 0 开始编号

  // 数组定义方式2
  var cars2 = []; // 空数组
  // 添加元素
  cars2[0] = "奥迪";
  cars2[1] = "宝马";
  cars2[2] = "奔驰";
  console.log("cars2=" + cars2);
  console.log("cars2[2]=" + cars2[2]); // 奔驰
  console.log("cars2[10]=" + cars2[10]); // 如果该元素不存在，返回的就是 undefined

  // 数组定义方式3
  var cars3 = new Array("Audi", "BMW", "Volvo");
  console.log("cars3=" + cars3);
  console.log("cars3[0]=" + cars3[0]); // Audi

  // 数组定义方式4
  var cars4 = new Array(); // 空数组
  console.log(typeof cars4);
  cars4[0] = "法拉利";
  cars4[1] = "保时捷";
  cars4[2] = "yy"; // 相当于是给数组扩容
  cars4[0] = "zz"; // 替换
  cars4[8] = "红旗"; // 扩容, 如果是跳过了下标给赋值，那么中间没有赋值的元素为 undefined或逗号
  console.log("cars4[3]=" + cars4[3]); // undefined
  console.log("cars4=" + cars4);
  </script>
  </head>
  <body>
  </body>
  </html>

数组的遍历

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组使用和遍历</title>
<script type="text/javascript">
var cars = ["Audi", "BMW", "Volvo", 100, 1.1, true];
// 遍历
console.log("数组的长度= " + cars.length); // 6
for (var i = 0; i < cars.length; i++) {
    console.log(cars[i]); // log 方法会自动换行
}
</script>
</head>
<body>
</body>
</html>

函数

含义

函数是由事件驱动的，或者当它被调用时，执行的可重复使用的代码块

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数快速入门</title>
<script type="text/javascript">
// 定义一个简单的函数
// 解读：如果不调用函数，那么该函数是不会执行的
function hi() {
    // 在 js 中如果要执行函数，有两种方式 1. 主动调用 hi(); 2. 通过事件去触发该函数
    alert("hi cong~");
}
</script>
</head>
<body>
<!-- 这里表示给 button 绑定了 onclick 事件 -->
<!-- 当用户点击了该 button，就会触发 hi() 函数 -->
<button onclick="hi()">点击这里</button>
</body>
</html>

函数定义方式

基本语法
1. function 函数名（形参列表）{
  函数体
  return 表达式
  
  }//调用函数名（实参列表）；

代码示例

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>使用函数方式1</title>
  <script type="text/javascript">
  // 定义没有返回值的函数
  function f1() {
      alert("f1() 被调用...");
  }
  f1();

  // 定义有形参的函数
  // 这里的形参不需要指定类型，name 的数据类型是由实参决定
  function f2(name) {
      alert("hi " + name);
  }
  f2("cong");

  // 定义有形参和返回值的函数，不需要指定返回类型，返回类型由返回的数据来决定
  // js 的函数调用机制和 java 一样
  function f3(n1, n2) {
      return n1 + n2;
  }
  alert("f3(10, 20)=" + f3(10, 20));
  </script>
  </head>
  <body>
  </body>
  </html>

细节和注意事项

JS中函数的重载会完全覆盖掉上一次的定义
函数的arguments隐形参数（作用域在function函数内）
1. 隐形参数:在function函数中不需要定义，可以直接用来获取所有参数的变量。
2. 隐形参数特别像java的可变参数一样。publicvoidfun(int…args)
3. js中的隐形参数跟java的可变参数一样。操作类似数组

应用示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数使用注意事项和细节</title>
<script type="text/javascript">
// 解读
// 1. JS 中函数的重载会覆盖掉上一次的定义
// 2. 当你调用 f1() 时候其实调用的是 f1(name)
// 3. 调用 f1(name) 如果你没有传入实参, 那么这个 name 就是 undefined

// function f1() {
// }

// alert("ok jack~")

// function f1(name) {
// }

// f1();
// alert("hi " + name);

// 2. 函数的 arguments 隐形参数（作用域在 function 函数内）
// (1) 隐形参数: 在 function 函数中不需要定义，可以直接用来获取所有参数
// (2) 隐形参数特别像 java 的可变参数一样。 public void fun(int ... args)
// (3) js 中的隐形参数跟 java 的可变参数一样，操作类似数组

function f2() {
    // 遍历函数的 arguments 隐形参数
    // arguments 是数组
    // 提示：如果我们希望通过 console.log 输出对象的数据，使用 , 连接而不是 +
    console.log("arguments= ", arguments);
    console.log("arguments 长度= " + arguments.length);
    alert("f2()...");
}
f2(10, 20, 30, "cong");

// 3. (1) 如果我们的函数有形参，在传入实参的时候，仍然按照顺序匹配
//    (2) 如果有匹配上，就赋给它，如果没有匹配上，也无所谓
//    (3) 仍然会把所有的实参，赋给 arguments
//    (4) 如果形参个数大于了实参个数，则该形参的值为 undefined

function f3(n) {
    console.log("n=" + n); // 100
    console.log("arguments= ", arguments); // [100, 90, 20]
}
f3(100, 90, 20);

</script>
</head>
<body>
</body>
</html>

自定义对象

Object形式

定义
1. var对象名=newObject();//对象实例（空对象）
  对象名.属性名=值;//定义一个属性
  对象名.函数名=function(){}//定义一个函数
对象的访问
1. 对象名.属性
2. 对象名.函数名()；

应用示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义对象</title>
<script type="text/javascript">
// 自定义对象的方式1
// person 是一个空对象，没有自定义的函数和属性
var person = new Object();
// 增加一个属性 name
console.log("person 类型=" + typeof(person)); // object
person.name = "cong";
// 增加一个属性 age
person.age = 20;
// 增加函数
person.say = function() {
    // 这里的 this 就是 person
    console.log("person 的信息 " + this.name + " " + this.age + " " + this.job);
}
// 调用
// 访问属性
console.log("name= " + person.name + " " + person.email);
// 访问方法
person.say();
console.log("address= " + person.address);
</script>
<!-- 小细节, 如果没有定义属性，直接使用，就会出现变量提升，显示 undefined -->
</head>
<body>
</body>
</html>

{} 形式

定义
var对象名={ 属性名：值,//定义属性
属性名：值,//定义属性,注意有,号
函数名：function(){}//定义函数
};
对象访问
1. 对象名.属性
2. 对象名.函数名（）；

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义对象方式2：{} 形式</title>
    <script type="text/javascript">
        // 演示自定义对象方式2：{} 形式
        var person = {
            name: "cong", // 说明多个属性和函数之间，使用 , 隔开
            age: 20,
            hi: function() {
                console.log("person 信息= " + this.name + " " + this.age);
            },
            sum: function(n1, n2) {
                return n1 + n2;
            }
        }
        // 使用
        console.log("外部访问 name=" + person.name + " age=" + person.age);
        person.hi();
        console.log("sum=" + person.sum(10, 30));
    </script>
</head>
<body>
</body>
</html>

事件

学习文档：JavaScript 事件 (w3school.com.cn)

介绍
1. 事件是电脑输入设备与页面进行交互的响应
2. 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行

事件一览表

属性	当以下情况发生时，出现此事件
onabort	图像加载被中断
onblur	元素失去焦点
onchange	用户改变域的内容
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错误
onfocus	元素获得焦点
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加载
onmousedown	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标移到某元素之上
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
onselect	文本被选定
onsubmit	提交按钮被点击
onunload	用户退出页面

事件分类

事件的注册
1. 事件注册(绑定)：当事件响应(触发)后要浏览器执行哪些操作代码，叫事件注册或事件绑定
静态注册事件
1. 通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式叫静态注册

动态注册事件

通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 =function(){} 这种形式叫动态注册

动态事件注册的步骤

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload 加载完成事件</title>
<script type="text/javascript">
// 定义了一个函数
function sayOK() {
    alert('静态注册 onload 事件 sayOK');
}
// 1. 在 js 中，将页面窗口映射成 window 对象
// 2. window 对象有很多的函数和属性，可以使用
// 3. window.onload 表示页面被加载完毕
// 4. 后面的 function (){} 表示加载完毕后，要执行的函数/代码
// 5. 多说一句
window.onload = function () {
    alert("动态注册 onload 事件");
}
</script>
</head>
<!-- 静态注册 -->
<body>
hello~
<input type="text" value="测试"/>
</body>
</html>

onload加载完成事件

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload 加载完成事件</title>
<script type="text/javascript">
// 定义了一个函数
function sayOK() {
    alert('静态注册 onload 事件 sayOK');
}
// 1. 在 js 中，将页面窗口映射成 window 对象
// 2. window 对象有很多的函数和属性，可以使用
// 3. window.onload 表示页面被加载完毕
// 4. 后面的 function (){} 表示加载完毕后，要执行的函数/代码
// 5. 多说一句
window.onload = function () {
    alert("动态注册 onload 事件");
}
</script>
</head>
<!-- 静态注册 -->
<body>
hello~
<input type="text" value="测试"/>
</body>
</html>

onclick单击事件

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onclick 单击事件</title>
<script type="text/javascript">
function sayOK() {
    alert("你点击了 sayOK 按钮");
}
//当页面加载完毕后，我们再进行动态绑定
//基本概念和机制一定要清楚
window.onload = function () {
    // 动态注册 onclick 事件
    //1. 先拿到 id=btn01 的 button 对应dom对象
    //2. 通过 dom对象动态的绑定onclick事件
    //3. 通过document 的 getElementById 获取对应的dom对象
    var btn01 = document.getElementById("btn01");
    btn01.onclick = function () {
        alert("你点击了 sayHi 按钮");
    }
}
</script>
</head>
<body>
<!--静态注册 onClick 事件-->
<button onclick="sayOK()">sayOK 按钮</button>
<button id="btn01">sayHi 按钮</button>
</body>
</html>

onblur失去焦点事件

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onblur 失去焦点事件</title>
<script type="text/javascript">
//静态绑定
function upperCase() {
    //1. 先得到fname 输入框的value -> 得到对应dom对象
    //toUpperCase()是将字符串大写
    var fname = document.getElementById("fname");
    fname.value = fname.value.toUpperCase();//将其之后返回原来的变量
}
//在页面加载完毕，完成动态绑定
window.onload = function () {
    //1.得到 fname2 的 dom对象
    var fname2 = document.getElementById("fname2");
    fname2.onblur = function () {
        fname2.value = fname2.value.toUpperCase();
    }
}
</script>
</head>
<body>
输入英文单词：
<input type="text" id="fname" onblur="upperCase()" /><br />
输入英文单词：
<input type="text" id="fname2" />
</body>
</html>

onchange 内容改变事件

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange 内容发生改变事件</title>
    <script type="text/javascript">
        function mySal() {
            alert("工资范围变化了~");
        }
        //动态注册
        window.onload = function () {
            //获取到 sel01 的 dom 对象
            var sel01 = document.getElementById("sel01");
            //给 sel01 绑定 onchange 事件
            sel01.onchange = function () {
                alert("你换女友了~");
            }
        }
    </script>
</head>
<body>
你当前工资水平： <!--静态注册 onchange 事件-->
<select onchange="mySal()">
    <option>--工资范围--</option>
    <option>10k 以下</option>
    <option>10k-30k</option>
    <option>30k 以上</option>
</select><br/>
你当前女友是谁：
<select id="sel01"><!--动态绑定 onchange-->
    <option>---女友---</option>
    <option>艳红</option>
    <option>春桃</option>
    <option>春花</option>
</select>
</body>
</html>

onsubmit事件

onsubmit：注册按钮被点击，提交表单

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmit 表单提交事件</title>
<script type="text/javascript">
//静态注册表单提交事件
function register() {
    //先得到输入的用户名和密码
    var username = document.getElementById("username");
    var pwd = document.getElementById("pwd");
    //判断是否为空""
    if ("" == username.value || "" == pwd.value) {
        alert("用户名和密码不能为空, 不能提交");
        return false; //不提交
    }
    //表示要提交
    return true;
}
//动态注册表单提交事件
window.onload = function () {
    //使用折半法, 观察原页面是否真的是最新的, 是不是修改的页面和访问的页面一致
    //得到 form2 表单 dom 对象
    var form2 = document.getElementById("form2");
    //给 form2 绑定 onsubmit 事件
    //解释 onsubmit 绑定的函数，会直接将结果(f,t)返回给onsubmit
    form2.onsubmit = function () {
        if(form2.username.value == "" || form2.pwd.value == "") {
            alert("用户名和密码不能为空, 不能提交");
            return false; //不提交
        }
        return true;
    }
}
</script>
</head>
<body>
<h1>注册用户1</h1> <!-- 静态注册表单提交事件-->
<form action="1.txt" onsubmit="return register()">
    u: <input type="text" id="username" name="username"/><br/>
    p: <input type="password" id="pwd" name="pwd"/><br/>
    <input type="submit" value="注册用户"/>
</form>
<h1>注册用户2</h1> <!-- 动态注册表单提交事件-->
<form action="1.txt" id="form2">
    u: <input type="text" name="username"/><br/>
    p: <input type="password" name="pwd"/><br/>
    <input type="submit" value="注册用户"/>
</form>
</body>
</html>