0x01 什么是JavaScript
JavaScript是Web的轻量级编程语言，它描述网页的行为，与HTML和CSS一起工作。
使用<script>标签在HTML中可插入JavaScript。
可以放在哪里？
JavaScript代码可以放在<head>或者<body>中，也可以都有，且个数不限。
当然，也可以把JS脚本保存在外部文件中，从而被多个网页使用。
在调用外部JS脚本时，在<script>标签中使用src属性设置要使用的js文件。
0x02 JavaScript 输出
JavaScript本身没有打印、输出的函数，但是可以通过以下方式来输出数据。
| 方式 | 作用 |
|---|---|
| window.alert() | 弹框 |
| document.write() | 将内容写入HTML文档 |
| innerHTML | 写入HTML元素 |
| console.log | 写入浏览器控制台 |
弹框
弹框
写入内容至HTML文档
写入内容至HTML文档
写入HTML元素
写入HTML元素
写入浏览器控制台
写入浏览器控制台
0x03 JavaScript 语法
使用var定义变量，字符串可使用单引号或双引号，操作符、保留字、注释与C语言等类似。
JavaScript语句和变量都对大小写敏感。
在每条可执行语句结尾都需要加上英文的分号。
JavaScript 会忽略多余的空格。
变量声明
变量声明完之后未赋值前，不带初始值，即为undefined。
一条语句，多个变量的声明，与C语言类似，不在此赘述。
重新生命JavaScript变量时，该变量的值不会丢失，即：
var name="xiaoming";
var name;
这两条语句顺序执行之后，name变量的值依旧为xiaoming。
数据类型
JavaScript拥有动态类型，相同的变量可以用作不同的类型，即：
var x; //x为undefined
var x = 3.14; //x为数字
var x = "fine"; //x为字符串
var x = 'nice'; //x为字符串
var x = true; //x为布尔类型
var x = new Array("Cat","Dog","Rabbit"); //x为数组类型
……
对象（Object）：
对象中不同属性之间用逗号分隔。
var name={
firstname : "Amy"，
lastname : "Joe"，
}
在使用时，寻址方式可以使用以下两种方式：
person = name.firstname; //点可以理解为“的”，即名字里面的名
person = name["firstname"];
可以使用new来生命变量类型，例如：var name = new String;
注意：undefined和null是不一样的，null表示变量的值为空，可以用来清空变量的值；undefined表示变量不含值。
函数
函数声明类似C语言，开头用function。
JavaScript函数可以通过一个表达式来定义，可以存储在变量中，函数表达式存储在变量中之后，该变量也可以作为函数来使用。例：
var x = function(m, n){return m+n};
var z = x(6, 7);
关于JavaScript的类型转换、循环语句、比较等与C语言类似，不再赘述。
正则表达式
语法：
/正则表达式主体/修饰符（可选）
正则表达式主体是需要检索的内容。
在JavaScript中正则表达式一般使用search()和replace()两种方法，前者为检索需要的内容，并显示位置；后者为检索并替换相应的内容。
| 修饰符 | 含义 |
|---|---|
| i | 不区分大小写的匹配 |
| g | 全局匹配，即查找所有匹配项，而非找到第一个之后就停止 |
| m | 多行匹配 |
| 量词 | 含义 |
|---|---|
| n+ | 匹配至少包含一个n的字符串 |
| n* | 匹配包含0个或者多个n的字符串 |
| n? | 匹配包含0个或一个n的字符串 |
JavaScript de RegExp对象在遇到不清楚的时，查询完整的RegExp参考手册即可。
正则表达式
0x04 JavaScript 验证
表单验证
HTML表单验证可以通过HTML自动验证也可以使用JavaScript来验证，HTML表单自动验证比较简单，就不写了。
使用JavaScript来进行表单验证时，也是在方法中定义自己的需求。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript表单验证</title>
</head>
<body>
<h1>请按要求输入相应内容</h1>
<br>
<p>姓名：</p><input id="name" type="text">
<p>学号：</p><input id= "sNo" type="text">
<br>
<button type="button" onclick="function1()">Submit</button>
<p id="demo"></p>
<script>
function function1() {
var x = document.getElementById("name").value;
var regName = /^[\u4E00-\u9FA5]+$/; //正则匹配判断是否为中文字符
var y = document.getElementById("sNo").value;
var regNum = /^\d{8}$/; //正则匹配判断是否为八位正整数
if(!regName.test(x)) {
text = "姓名输入有误，请重新输入";
}else if (!regNum.test(y)) {
text = "学号输入有误，请重新输入";
}else {
text = "提交成功";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
表单验证
验证API
JS的API中有表单验证的功能，其中方法checkValidity()可以验证input元素中的输入是否合法，返回的是true或flase。setCustomValidity()方法可以自定义错误提示信息。
具体函数，可在使用时按需查询。
一开始把验证API看成了API验证，怎么都搞不拎清啥意思。我大概是个魔鬼吧hhh
0x05 JavaScript JSON
JavaScript Object Notation（数据交换格式），是独立的语言。
语法规则
- 数据为键/值对；
- 数据之间用逗号分隔；
- 大括号{}保存对象；
- 方括号[]保存数组；
- 一个名称对应一个值；
- 名称和值都各自用双引号引起来；
- 数组可以包含对象；
- 一个对象可以保存多个键/值对
example：
"demo":[
{"name":"Cat","Color":"Orange"},
{"name":"Dog","Color":"Black"},
{"name":"Rabbit","Color":"White"}
]
JSON字符串和JS对象相互转换
| 函数 | 描述 |
|---|---|
| JSON.parse() | JSON字符串转JS对象 |
| JSON.stringify() | JS对象转JSON字符串 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON字符串转JS对象</title>
</head>
<body>
<p id="miao"></p>
<script>
var text = '{"demo":['+
'{"name":"Cat","Color":"Orange"},'+
'{"name":"Dog","Color":"Black"},'+
'{"name":"Rabbit","Color":"White"}]}';
fine = JSON.parse(text);
document.getElementById('miao').innerHTML = fine.demo[0].name+"'s color is "+fine.demo[0].Color;
</script>
</body>
</html>
JSON字符串转JS对象
JS对象转JSON字符串的操作类似。
写完这一部分，我只想说：代码不规范，调试好几行泪QAQ
网友评论