【JavaScript】基础

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 设置/获取属性值

1. 大部分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>
   
   

2. 对于合成词的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>
   
   

3. 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>

4. 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>
   
   

5. 在DOM编程中，某些元素具备HTML元素没有的方法，如：

   1. 在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()