unit01
一、JavaScript基础
1.1 什么是JavaScript?
JavaScript
是一种运行在客户端的解释性脚本语言,目前JavaScript
也可以运行的服务器端–Node.js
JavaScript
与Java
语言之间不存在任何关系。
1.2 JavaScript有什么用?
JavaScript
主要用于实现客户端交互,如表单验证、菜单效果等。
1.3 JavaScript的组成
JavaScript
由ECMAScript(ES)
、DOM
和BOM
组成
ECMAScript
主要规定了JavaScript
中的变量、数据类型、流程控制语句及内置对象
DOM(Document Object Model)
,文档对象模型,主要规定了对于页面中的元素进行访问和控制
BOM(Browser Object Model)
,浏览器对象模型,主要规定了与浏览器相关的API
1.4 JavaScript的使用方式
1.4.1 内部脚本
<script type="text/javascript">
...
</script>
1.4.2 外部脚本
<script src="JS文件的路径及名称"></script>
1.5 JavaScript代码需要注意的事项
JavaScript
严格区分大小写- 每行
JavaScript
代码"必须"以分号结尾
1.6 注释
单行注释
//注释内容
多行注释
/*
注释内容
...
*/
二、变量
2.1 什么是变量?
变量(variable
)是指存储在内存中有名称的信息,其值在程序运行期间可以发生变化。
变量不能永久存储信息
1.2 声明变量
var variableName;
let variableName;
var
用于声明全局变量,let
用于声明局部变量
2.3 变量的命名规范
- 变量名称必须以字母或下划线或
$
开头,包含字母、数字及下划线 - 变量名称严禁与关键字相同
- 变量名称最好见文知意
- 变量名称最好遵守驼峰标记法,如
userId
2.4 变量赋值
var variableName = value;
let variableName = value;
var variableName1;
let variableName2;
variableName1 = value;
variableName2 = value;
三、数据类型
JavaScript支持的数据类型有:
3.1 字符串(String
)
字符串的数据类型必须括在英文双引号或单引号之间,声明的方式有:
直接量方式
var usrename = 'Tom';
var password = "123456";
构造函数方式
var username = new String('Tom');
var password = new String("123456");
3.1.1 转义符
转义符 | 描述 |
---|---|
\ ’ | 单引号 |
\" | 双引号 |
\\ | 反斜线 |
\n | 换行 |
\r | 回车 |
\t | 水平制表符 |
\v | 垂直制表符 |
3.1.2 模板字符串
var username = "Tom";
var education = "专科";
var str = "我的姓名是:" + username + ",学历是:" + education;
模板字符串可以直接访问变量或者进行运算,其语法结构为:
var username = "Tom";
var education = "专科";
var age = 23;
//直接通过字符串拼接
var str1 = "我的姓名是:" + username + ",学历是:" + education;
//模板字符串
var str2 = `
我的姓名是:${username},学历是:${education}
我今年${age}岁
我明年${age-1}岁
我来自北京
我喜欢编程
`
console.log(str1)
console.log(str2)
3.1.3 字符串对象的属性和方法
-
length
属性用于获取字符串的长度string.length
如:
console.log("Python".length); var username = "Frank"; console.log(username.length);
-
indexOf()
方法用于返回一个字符串在另一个字符串中第一次出现的位置string.indexOf(search_string)
-
lastIndexOf()
方法用于返回一个字符串在另一个字符串中最后一次出现的位置string.lastIndexOf(search_string)
如:
var code = 'JavaScript'; //第一次出现的位置 console.log(code.indexOf('a')); //最后一次出现的位置 console.log(code.lastIndexOf('a')); //如果没有出现,则返回-1 console.log(code.lastIndexOf('w'));
-
substr()
方法用于截取字符串,其语法结构为:string.substr(start[,length])
-
substring()
方法用于截取字符串(包含起始位置,不包含结束位置),其语法结构为:string.substring(begin[,end])
如:
var code = 'JavaScript'; //截取字符串,从第几位开始,截取长度 console.log(code.substr(2,4)) //截取字符串,从第几位开始到第几位结束(不包含结束位) console.log(code.substring(2,4))
小功能 :
//要求:获取任意文件的扩展名 var filename = "4522356.txt.jpg.png.shtml"; var position = filename.lastIndexOf('.'); var extension = filename.substr(position+1).toLowerCase(); console.log(extension);
-
split()
方法用于拆分字符串,其语法结构为:string.split(separator)
如:
var users_str = 'Tom,Rose,Frank,Ben,David'; var users_array = users_str.split(','); console.log(users_array);
3.2 数值型(Number
)
直接量方式
var age = 26;
var salary = 899633.35
构造函数方式
var height = new Number(189)
var weight = new Number(56)
console.log(typeof(height),height)
console.log(typeof(weight),weight)
3.2.1 Number对象的属性和方法
-
Number.MAX_VALUE
属性用于表示最大的数 -
Number.MIN_VALUE
属性用于表示最小的数 -
Number.MAX_SAFE_INTEGER
属性用于表示最大的安全的整数 -
Number.MIN_SAFE_INTEGER
属性用于表示最小的安全的整数 -
toFixed()
用于保留到小数点的几位,其语法结构为:string NumberObject.toFiexed([length])
如:
var i = 6.29; console.log(i.toFixed()); console.log(i.toFixed(1));
3.3 布尔型
只有两个值:true
和 false
在默认情况下,0
或0.0
或''
或""
或undefined
将转换为false
if (0){
console.log('0认为是true');
} else {
console.log('0认为是false');
}
if (0.0){
console.log('0.0认为是true');
} else {
console.log('0.0认为是false');
}
if (''){
console.log('\'\'认为是true');
} else {
console.log('\'\'认为是false');
}
if (""){
console.log('""认为是true');
} else {
console.log('""认为是false');
}
if (undefined){
console.log('undefined认为是true');
} else {
console.log('undefined认为是false');
}
3.4 undefined
有以下情况将返回undefined
:
- 声明但未赋值的变量
- 声明但赋值为
undefined
的变量 - 引用了不存在的对象属性
var i ;
var m = undefined;
var obj = {}
console.log(i)
console.log(m)
console.log(obj.id)
3.5 null
null
表示空对象,主要用于断开继承链,它的类型为object
var t = null;
console.log(null,typeof(null))
3.6 Function
直接量方式
function function_name([parameters,...]){
...
...
return 返回值;
}
如:
function getExtension(filename){
let position = filename.lastIndexOf('.');
let extension = filename.substr(position+1).toLowerCase();
return extension;
}
console.log(getExtension("123.56..jpg"));
console.log(getExtension("123.56.jpg.HtML"));
3.7 Object
3.7.1 自定义对象
{
属性名称:值,
属性名称:值,
}
如:
var obj = {
id:1,
username:'Frank',
age:23,
sex:true,
salary:8966.66
}
console.log(obj.id);
console.log(obj.username);
3.7.2 内置对象
-
Math
对象Math
对象是一个静态对象,提供了与数学操作相关的API
Math.PI
属性将返回PI
的值console.log(Math.PI)
Math.ceil()
用于向上取整,其语法结构为:Math.ceil(number)
Math.floor()
用于向下取整,其语法结构为:Math.floor(number)
//假设有两个变量 recordsCount 和 pagesize,分别用于表示总记录数和每页显示的记录数 //要求:计算出总页数 -- pageCount var pageCount = Math.ceil(recordsCount/pagesize);
Math.random()
用于产生0~1(不包含)
之间的随机数Math.random()
Math.pow()
用于进行幂运算Math.pow(base,exp)
console.log(Math.pow(2,3)); //8
-
Array
对象数组用于存储一组相关的数据,声明数组:
直接量方式
//空数组 var users = [] //指定成员的数组 var databases = ['MySQL','SQL Server','Oracle']
构造函数方式
//空数组 var mobiles = new Array(); //代表有三个成员的数组,这三个成员的值是undefined var students = new Array(3); //只有一个成员的数组 var teachers = new Array('Tom'); //多个成员的数组 var browsers = new Array('Edge','Chrome','Firefox'); / //以下为错误代码,JS解释器会认为2.8是数组的长度 var t = new Array(2.8);
-
length
属性用于获取数组的成员数量var users = ['Tom','Rose','Frank']; console.log(users.length);
-
push()
方法用于在数组的未尾添加一个或多个成员,返回值为数组的新长度var teachers = ['Tom']; console.log(teachers); var counts = teachers.push('Rose','Frank'); console.log(counts) console.log(teachers)
-
unshift()
方法用于在数组的开头添加一个或多个成员,返回值为数组的新长度counts = teachers.unshift('Ben','David'); console.log(counts) console.log(teachers)
-
shift()
方法用于删除数组的第一个成员,并且返回该成员var first = teachers.shift(); console.log(first + '被删除了');
-
pop()
方法用于删除数组的最后一个成员,并且返回该成员var last = teachers.pop(); console.log(last + '被删除了');
-
forEach()
方法用于遍历数组,其语法结构为://箭头函数,item代表的是组成数组的成员,index代表的是成员的索引值 teachers.forEach((item,index)=>{ console.log(item,index) }); //匿名函数 teachers.forEach(function(item,index){ console.log(item,index) })
-
-
Date
对象构建
Date
对象var now = new Date();
Date
对象的方法getFullYear()
方法用于获取年份getMonth()
方法用于获取月份(取值范围为0~11)getDate()
方法用于获取日期getDay()
方法用于获取星期(0代表星期日,依次类推)getHours()
方法用于获取小时getMinutes()
方法用于获取分钟getSeconds()
方法用于获取秒getMilliseconds()
方法用于获取毫秒
var now = new Date(); var year = now.getFullYear(); var month = now.getMonth()+1; var day = now.getDate(); console.log(year + '年' + month + '月' + day + '日');
var now = new Date(); var weekday = now.getDay(); //数字,0代表星期日 var weekday_array = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; console.log(weekday_array[weekday]);
四、运算符
4.1 按作用划分
-
算术运算符 ,如
+(正数)
、-(负数)
、+
、-
、*
、/
、%(取余)
等console.log(3 + 2); console.log(3 - 2); console.log(3 * 2); console.log(3 / 2); console.log(5 % 2); //结果为1
-
字符串运算符:
+
var username = 'Tom'; console.log('我的名字是:' + username)
-
赋值运算符,如
=
、+=
、-=
、*=
、/=
、%=
var i = 6; i += 2; //原型: i = i + 2; i /= 2; //原型: i = i / 2;
-
自增/自减运算符:
i++、i--、++i、--i
后缀方式(
i++、i--
):先使用,后加减var i = 5; console.log(i++);//先使用(此时代表先输出即5),然后再加1 console.log(i);//6
前缀方式(
++i、--i
):先加减,后使用var n = 3; console.log(++n); //先加1,即得到4,然后再输出 console.log(n); //4
-
比较运算符:
>
、>=
、==
、<=
、<
、===
、!==
===
称是全等,要求值与数据类型完全一致!==
称为不全等(要么值不同,要么类型不同,要么值和类型都不同) -
逻辑运算符:
!
、&&
、||
短路求值:在运行逻辑运算时,只有第一个表达式的结果确定整个表达式结果时,后续的表达式不再进行运算
&&
运算时第一个表达式的结果为false
||
运算符时第一个表达式的结果为true
-
三元运算符:
expression? true value :false value
如:
var i = 4; var m = i > 3 ? 5 : 2; console.log(m);
4.2 运算符的优先级
一、二、三、赋值
算术、比较、逻辑
五、流程控制语句
5.1 分支结构
// 单分支
if (condition){
//执行代码
}
//双分支
if (condition){
//执行代码
} else {
//执行代码
}
//多分支
//双分支
if (condition){
//执行代码
}else if (condition) {
//执行代码
}else if (condition) {
//执行代码
} ... else{
//执行代码
}
如果执行代码只有一行时,花括号可以省略
i = 5;
if(i>3) console.log("Helo");
i = 5;
if(i>3) console.log("Hello"); else console.log("World");
switch(表达式){
case 值1:
//执行代码
break;
case 值2:
//执行代码
break;
...
default:
//执行代码
break;
}
如:
var n = 3;
switch(n){
case 2:
console.log('中国');
break;
case 1:
console.log('美国');
break;
default:
console.log('法国');
break;
case 3:
console.log('德国');
break;
}
//等价于
if (n===1){
console.log('美国');
} else if (n === 2){
console.log('中国');
} else if(n === 3){
console.log('德国');
} else {
console.log('法国');
}
5.2 循环结构
//表达式1,无条件执行一次,一般用于变量的初始化
//表达式2,在每次循环前执行一次,用于判断是否符合条件,以决定能否进行循环体
//表达式3,在每次循环完成后执行一次,用于实现步长的操作
for(expression1;expression2;expression3){
// 执行代码
}
如:
for( var i = 1; i< 3; i++){
console.log(i)
}
console.log('Hello');
//第一步:将1赋值给i,然后再判断i是否小于3,结果为 true ==> 输出1
//第二步:i++,结果为2
//第三步:再判断i是否小于3,结果为 true ==> 输出2
//第四步:i++,结果为3
//第五步:再判断i是否小于3,结果为false,于是跳过循环而执行其他的代码 -- 输出Hello
unit02
一、循环结构
1.1 while
循环
while (condition){
//执行代码
}
var i = 1;
while(i < 6){
console.log(i);
i++;
}
1.2 do...while
循环
do{
//执行代码
} while(condition);
如:
var i = 1;
do{
console.log(i);
i++;
} while(i<6);
for
循环、while
循环称为前测型循环(当型循环),即进行条件测试,条件成功后才进入循环体
do...while
循环称为后测型循环,即先进入循环体(第一次),然后再判断条件是否符合,以决定能否第二次进入循环体
for
循环、while
循环至少执行零次,而do...while
至少执行一次。
for
的三个条件表达式都可以省略 – 其实它是其他的方式取代输出1~5
var i = 1;//变量的初始化,等价于for语句的expression1; for(;;){ console.log(i); i++; //变量的累加,等价于for语句的expression3(步长) if(i>6){//退出循环的条件 ,等价于for语句的中expression2(退出循环的条件) break; } }
二、DOM
编程
DOM(Document Object Model)
文档对象模型,是一种用于处理HTML/XML
文档的技术。
DOM
由DOM Core
、HTMLDOM
和XMLDOM
三部分组成
2.1 节点(Node
)
一切皆节点 – 在HTML
文档中,所有的存在的元素、属性、内容等统称为节点(Node
)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
节点存在类型
- 文档节点(
Document
) – 指整个的HTML文件 - 元素节点(
Element
) – 指HTML标记 - 属性节点(
Attribute
) – 指HTML属性 - 注释节点(
Comment
) – 指HTML注释 - 文本节点(
Text
) – 指HTML内容
2.1.1 节点属性
-
nodeName
属性将返回节点名称Node.nodeName;
-
nodeType
属性将返回节点类型Node.nodeType
节点类型 值 ELEMENT_NODE
1 ATTRIBUTE_NODE
2 TEXT_NODE
3 COMMENT_NODE
8 DOCUMENT_NODE
9 -
nodeValue
2.1.2 节点方法
2.2 获取元素
HTMLElement document.getElementById(string id)
NodeList document.getElementsByName(string name)
NodeList HTMLElement.getElementsByName(string name)
HTMLCollection document.getElementsByClassName(string name)
HTMLCollection HTMLElement.getElementsByClassName(string name)
2.3 设置/获取内容
innerHTML
属性用于获取/设置元素的HTML内容
varaible = HTMLElement.innerHTML
HTMLElement.innerHTML = value
innerText
属性用于获取/设置元素的文本内容
varaible = HTMLElement.innerText
HTMLElement.innerText = value
2.4 设置/获取属性值
-
大部分
HTML
标记的单一单词属性即HTMLElement
对象的属性,如:<body> <p><img src="images/1.jpg" alt="" id="image"></p> <p><a href="http://www.baidu.com" id="link">百度</a></p> <p> <input type="button" value="单击我变图片" onclick="changeImage()"> <input type="button" value="单击我,改变链接" onclick="changeLink()"> </p> </body> <script> function changeImage(){ //获取图像元素 var imageEle = document.getElementById("image"); //设置属性 imageEle.src = 'images/2.jpg'; } function changeLink(){ var linkEle = document.getElementById("link"); linkEle.href = 'http://www.jd.com'; linkEle.innerText = '京东'; } </script>
-
对于合成词的
HTML
属性(如body
的bgcolor
、table
的cellpadding、cellspacing
属性)在DOM
编程中采用驼峰标记法命名,如:<body> <table width="200" border="1" id="table"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> </table> <p> <input type="button" value="单击我,把页面背景色为灰色" onclick="changeBC()"> <input type="button" value="单击我设置表格属性" onclick="changeTableAttr()"> </p> </body> <script> function changeBC(){ //注意 bgColor 的写法 document.body.bgColor = '#999' } function changeTableAttr(){ var tableEle = document.getElementById("table"); //注意 cellPadding和cellSpacing 的写法 tableEle.cellSpacing = '0'; tableEle.cellPadding = '20'; } </script>
-
HTML
标记的class
属性在DOM
编程中采用className
属性取代(class
是ES
的关键字)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
color:red;
}
.blue{
color:blue;
}
</style>
</head>
<body>
<p id="p" class="red">我是段落</p>
<p><input type="button" value="使用蓝色的类" onclick="changeClass()"></p>
</body>
<script>
function changeClass(){
var pEle = document.getElementById("p");
//注意className的写法(因为class是ES的关键字)
pEle.className = 'blue';
}
</script>
-
HTML
标记的布尔属性(如单选框和复选框的checked
,列表项的selected
等) 在DOM
编程中采用boolean
类型来表示<input type="radio" checked> <input type="checkbox" checked> <!--下拉列表的的multiple属性可以让下拉列表框允许多选--> <select multiple> <option selected>...</option> ... </select>
<body> <p><input type="checkbox" id="checkbox">中国</p> <p><input type="button" value="单击我,选定复选框" onclick="changeStatus()"></p> </body> <script> function changeStatus(){ let checkboxEle = document.getElementById("checkbox"); checkboxEle.checked = true; } </script>
-
在
DOM
编程中,某些元素具备HTML
元素没有的方法,如:-
在
DOM
编程中HTMLFormElement
对象存在submit()
和reset()
两个方法,其中submit()
方法用于提交表单,reset()
方法用于重置表单//提交表单 HTMLFormElement.submit(); //重置表单 HTMLFormElement.reset();
-
2.5 NodeList
NodeList
是一个节点列表,其类似于数组对象(不存在push()、shift()
等方法),其存在的属性和方法有:
length
属性用于获取NodeList
包含的成员数量
int NodeList.length
item()
方法用于获取NodeList
中指定索引的成员
Node NodeList.item(index)
forEach()
方法用于遍历NodeList
NodeList.foreach((item,index)=>{
//item代表的每一个Node
//index代表的是Node对应的索引
})
2.6 HTMLCollection
HTMLCollection
是一个集合,类似于数组对象
length
属性用于获取集合中成员的数量
int HTMLCollection.length
item()
方法用于返回集合中指定索引的成员
Node HTMLCollection.item(index)
三、事件(Event)
对于已经存在的HTML元素进行事件操作时,可通过HTML元素的事件属性来实现,如:
<!--代表是单击按钮时调用函数fun1()-->
<input type="button" value="单击我" onclick="fun1()">
如:
<body>
<p id="p">我是段落</p>
<p><input type="button" value="单击我,改变段落的内容" onclick="changeText()"></p>
</body>
<script>
function changeText(){
//获取段落元素
var pEle = document.getElementById("p");
//设置段落元素的内容
pEle.innerHTML = '<i>我变倾斜了</i>'
}
</script>
鼠标事件(MouseEvent
)
-
click
代表鼠标单击,其语法结构为:HTMLElement.onclick = function(){ //执行代码 }
如:
<p id="p">我是段落</p> <p><input type="button" value="单击我,改变段落的内容" id="button"></p> <script> //获取按钮对象 var buttonEle = document.getElementById("button"); //按钮对象单击事件 buttonEle.onclick = function(){ let pEle = document.getElementById("p"); pEle.innerHTML = '我改变了哟'; } </script>
-
mouseover
,代表鼠标悬停HTMLElement.onmoseover = function(){ //执行代码 }
-
mouseout
,代表鼠标移出HTMLElement.onmoseout = function(){ //执行代码 }
-
mousemove
,代表鼠标移动HTMLElement.onmosemove = function(){ //执行代码 }
unit03
一、DOM
编程
1.1 DOM
编程
-
在
DOM
编程中,某些元素具备HTML
元素没有的方法和属性HTMLSelectElement
对象对于
HTMLSelectElement
对象,其存在onchange
事件,代表发生了改变HTMLSelectElement
对象存在value
属性(在HTML
标记不存在该属性),用于获取被选定选项的的值HTMLSelectElement.value
HTMLSelectElement
对象存在length
属性(在HTML
标记不存在该属性),用于获取/设置列表项的数量HTMLSelectElement.length HTMLSelectElement.length = value
创建
Option
对象new Option(text[,value])
将
Option
对象添加到HTMLSelectElement
对象内 – 通过HTMLSelectElement
对象的add()
方法HTMLSelectElement.add(HTMLOptionElement)
focus
()方法的作用是让指定的表单控件获得焦点,其语法结构为:HTMLElement.focus()
HTMLFormElement
对象存在两个事件:onsubmit()
和onreset()
事件 -
HTML
标记的style
属性在DOM
编程中将返回CSS2Properties
或CSSStyleDeclaration
对象//设置内联CSS样式 HTMLElement.style.CSS属性名称 = value //获取内联CSS样式
如果
CSS
属性名称为单一单词则直接书写;如果为短横线分隔的单词,则将短横线去掉后采用驼峰标记法,如<body> <p id="p" style="color:red">中国</p> </body> <script> var pEle = document.getElementById("p"); //单一单词则直接书写 pEle.style.color = 'blue'; //短横线分隔的单词,则将短横线去掉后采用驼峰标记法 pEle.style.fontSize = '30px'; pEle.style.border = '1px solid #000'; </script>
对于
float
属性既可以直接书写float
也可以使用cssFloat(建议)
取代<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style></style> <style> #div{ width:150px; height: 150px; border:2px solid #f00; } </style> </head> <body> <div id="div">中国</div> <p> <input type="button" value="第一种方式" onclick="float1()"> <input type="button" value="第二种方式" onclick="float2()"> </p> </body> <script> function float1(){ let divEle = document.getElementById("div"); divEle.style.float = 'left'; } function float2(){ let divEle = document.getElementById("div"); //注意cssFloat的写法 divEle.style.cssFloat = 'right'; } </script>
-
HTML
标记的自定义属性 –data-*
如:
<p data-id="12" id="p1">中国</p> <p data-id="34" id="p2">美国</p>
HTML
标记的自定义属性在DOM
编程中将返回DOMStringMap
对象,会将自定义属性名称转换为驼峰标记法,如<body> <div id="div" data-id="5" data-spm-id="7">中国</div> </body> <script> var divEle = document.getElementById("div"); console.log(divEle.dataset); //结果为:{id: "5",spmId: "7"} </script>
1.2 节点的创建与删除
节点的创建分为两步:
A.创建(元素)节点
document.createElement(tagName)
B.将新创建的节点添加到父节点内
HTMLElement.appendChild(node)
节点的删除
HTMLElement.removeChild(subHTMLElement)
1.3 获取对象
HTMLCollection document.getElementsByTagName(string tagName)
HTMLCollection HTMLElement.getElementsByTagName(string tagName)
1.4 节点的关系
-
childNodes
属性返回指定节点的所有子节点NodeList Node.childNodes
-
parentNode
属性返回指定节点的父节点Node Node.parentNode
-
firstChild
属性返回指定节点的第一个子节点Node Node.firstChild
-
lastChild
属性返回指定节点的最后一个子节点Node Node.lastChild
-
nextSibling
属性返回当前节点的下一个兄弟节点Node Node.nextSibling
-
previousSibling
属性返回当前节点的上一个兄弟节点Node Node.previousSibling
1.5 事件
onchange
事件代表的对象发生了改变,如下拉列表框
onblur
事件代表的是对象失去焦点
onfocus
事件代表的是对象获得焦点
unit04
一、JSON
1.1 什么是JSON
JSON(JavaScript Object Notation)
,是一种轻量的的数据交换格式 ,可适用于所有的语言。
1.2 JSON
支持的数据结构
JSON
支持的数据结构为:数组和对象
数组
[value[,...]]
对象
{
string:value
[,...]
}
1.3 数据类型
JSON
中支持的数据类型有:Number
、Boolean
、null
、string
、Array
、object
1.4 JavaScript&JSON
JSON.stringify()
方法用于JS
中的数组或对象转换为JSON
格式的字符串
string JSON.stringify(Array|Object)
如:
//JS数组
let data = [
{'id':1,"username":'Rose'},
{"id":2,"username":"Frank"},
{"id":3,"username":"David"}
]
let json_string = JSON.stringify(data);
console.log(json_string);
JSON.parse()
方法用于将JSON
格式的字符串转换为JS
中的数组或对象,其语法结构为:
Array|Object JSON.parse(string)
如:
let string = '[{"id": 1, "username": "Rose"}, {"id": 2, "username": "Frank"}, {"id": 3, "username": "David"}, {"id": 6, "username": "Python"}]';
//将JSON格式的字符串转换为JS的数组
users = JSON.parse(string)
1.5 Python&JSON
import json
json.loads()
函数用于将JSON
格式的字符串转换为Python
的列表或字典,其语法结构为:
list|dict json.loads(str)
如:
json_string = '[{"id":1,"username":"Rose"},{"id":2,"username":"Frank"},{"id":3,"username":"David"}]'
# 一个是将JSON格式的字符串转换为Python语言的数据类型 -- list
users = json.loads(json_string)
print(users)
json.dumps()
方法将为Python
的列表或字典转换为JSON
格式的字符串,其语法结构为:
str json.dumps(list|dict)
如:
users = [
{"id": 1, "username": "Rose"},
{"id": 2, "username": "Frank"},
{"id": 3, "username": "David"},
{"id": 6, "username": "Python"}
]
string = json.dumps(users)
print(string)
二、BOM
2.1 什么是BOM
?
BOM(Browser Object Model)
,浏览器对象模型
BOM
提供了与浏览器相关的API
,如浏览器的类型、设置或获取地址栏地址等。
在BOM
中window
对象是顶层对象,代表是窗口对象,在当前窗口中访问window
对象的属性和方法时可以省略掉window
,如:window.document
可以直接写成document
。
2.2 方法
window.alert()
方法用于弹出警示对话框,其语法结构为:
window.alert(string)
window.confirm()
方法用于弹出询问对话框,其语法结构为:
boolean window.confirm(string)
window.prompt()
方法用于弹出输入对话框,其语法结构为:
string window.prompt(string)
window.setTimeout()
方法用于执行一次在指定间隙时间后的相关功能,其语法结构为:
timeId = window.setTimeout(
function(){
//...
},
毫秒
)
window.clearTimeout()
用于清除由setTimeout()
方法设置的timeId
window.clearTimeout(timeId)
window.setInterval()
用于实现每间隙指定的时间(单位为毫秒)执行相关的功能,其语法结构为:
timeId window.setInterval(
function(){
},
毫秒
)
window.clearInterval()
方法用于清理掉由Interval()
方法设置的timeId
window.clearInterval(timeId)
2.1 属性
2.4.1location
属性
window
对象的location
属性将返回Location
对象,对于获取/设置地址栏的信息,Location
对象的属性有
href
属性用于获取/设置地址栏中的地址,其语法结构为:
//获取
variable = location.href
//设置
location.href = value
search
属性用于获取地址栏中的查询参数(?id=1&pid=2&cid=3
),其语法结构为:
string location.search
实践中获取指定地址栏参数的自定义函数的代码如下:
function getParamValue(name){
let params = location.search.substr(1);
let array = params.split('&');
array.forEach((item)=>{
temp = item.split('=');
if(temp[0] == name){
return temp[1];
}
});
return -1;
}
2.4.2 navigator
属性
window
对象的navigator
属性将返回Navigator
对象,对于获取浏览器的相关信息,它的属性有:
userAgent
(简称为UA
,用户代理器),其语法结构为:
variable = navigator.userAgent
2.4.3 sessionStorage
和localStorage
属性
sessionStorage
属性和localStorage
属性将返回Storage
对象
sessionStorage
和localStorage
最多可存储2MB
的数据
sessionStorage
称为会话存储,其存储的数据在关闭浏览器后将自动消失
localStorage
称为本地存储,其存储的数据将"永远"有效 – 除非手动或通过程序的方式将其清除
localStorage.length
属性用于获取本地存储的键的数量
int localStorage.length
localStorage.setItem()
方法用于设置指定key
的value
,如果指定的key
已存在,则更新:
localStorage.setItem(key,value)
localStorage.getItem()
方法用于获取指定key
的值:
string localStorage.getItem(key)
localStorage.removeItem()
方法用于删除指定的key
:
string localStorage.removeItem(key)
localStorage.clear()
方法方法用于删除所有的key
localStorage.clear()
2.4.4 history
属性
history
属性将返回History
对象,代表的历史记录,其存在的属性和方法有:
length
属性用于获取历史记录的数量
int history.length
back()
方法用于后退,其语法结构为:
history.back()
forward()
方法用于前进,其语法结构为:
history.forback()
go()
方法用于前进或后退,其语法结构为:
history.go(数字)
//如果为正数,则表示前进,如history.forward() 等价于 history.go(1)
//如果为负数,则表示后退,如history.back() 等价于 history.go(-1)
2.4.5 console
属性
console
属性返回console
对象,代表的是控制台,其方法:
//以日志格式输出
console.log(string)
//以警告格式输出
console.warn(string)
//以错误格式输出
console.error(string)
//清空控制台
console.clear()
//分组输出
console.group("组标签")
//...
console.groupEnd()