• JS数据类型之布尔型(boolean)

  • null和undefined

• JS数据类型之对象object

  • 对象之数组

• JS数据类型之自定义对象

• JS之运算符

• JS之流程控制

  • 分支结构

  • 循环结构

• JS之函数

  • function函数

  • 匿名函数

  • 箭头函数

  • 函数中的arguments参数

• JS函数的全局变量和局部变量

  • JS闭包函数

• JS内置对象

  • Date日期对象

  • JSON序列化对象

  • RegExp对象(正则对象)

• BOM与DOM操作

  • BOM与window对象

  • 一些常用的window方法

  • window的子对象

• DOM操作

  • DOM树

  • 节点操作

JS数据类型之布尔型(boolean)

  1.在js中，布尔型主要有两种:  true   false

  2.和python的布尔型区别，js的布尔型都是小写

  3.空字符串，0，null，undefined，NaN都是false

null和undefined

  1.null表示值为空，一般在需要指定一个值或者清空一个变量时才会使用(name = null)

  null补充：null可以手动清空一个变量的值，使得该变量变为object类型，值为null

  2.undefined表示声明了一个变量但是没有给它赋值，那么这个变量的默认值时undefined，   还有如果函数没有明确的返回值，那么返回的值也是undefined。

JS数据类型之对象object

  1. 和python一样，在JS中，也是本着一切皆对象的原则

  2. js允许自定义对象

  3. js提供多个内建对象: String，Data,Array等。

  4. 对象指带有属性和方法的特殊数据类型

对象之数组

  1. js中的数组是使用单独的变量名来储存一系列的值

    var l1 = [1,2,'123'];

     console.log(l1[1]);   //  输出  "2"

  2. js中的数组相当于python中的列表

数组的一些常用方法

JS数据类型之自定义对象

  1. js中的自定义对象相当于python中的字典

  2.定义方式:

    (1)   let d1 = {'name' : 'jason', 'pwd' : '123'}

    (2)    let d2 = new Object()

  3. 自定义对象操作数据值的方式： 句点符

注： 在python中如果让字典也可以通过句点符的方式需要修改类属性

JS之运算符

var x=20;
var res1=x++;  
var res2=++x;

console.log(res2)   //22

JS之流程控制

和python一样，js也有着自己的流程控制

分支结构

  if   else

1.单if分支
    	if(条件){条件成立之后执行的代码}
 	2.if...else分支
    	if(条件){
            条件成立之后执行的代码
        }else{
            条件不成立之后执行的代码
        }
  	3.if...elif...else分支
    	if(条件1){
            条件1成立之后执行的代码
        }else if(条件2){
            条件1不成立条件2成立执行的代码
        }
        else{
            条件不成立之后执行的代码
        }

  switch 

var day = new Date().getDay();
switch (day) {
  case 0:
  	console.log("Sunday");
  	break;
  case 1:
  	console.log("Monday");
  	break;
  default:
  	console.log("...")
}

循环结构

  for 循环

for(let i=1;i<101;i++){
        console.log(i)
    }
	课堂小练习
    	打印数组内所有的数据值
 			l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'jason']
      	  	for(let i=0;i<l1.length;i++){
                console.log(l1[i])
            }

  while 循环

while(条件){
        循环体代码
    }

JS之函数

function函数

  1. js函数的语法结构

function 函数名(形参){
    函数体代码
    return 返回值
}
函数名(实参);  //调用函数

  2. js中函数中的参数不需要一一对应，如果想要限制参数的个数需要使用内置关键字arguments.length做一个长度的判断

function func(a, b){
    if(arguments.length===2){
       console.log(a, b) 
    }else{
       console.log('去你妹的 参数都没给我!!!')
    }
    
}

匿名函数

  在python中，匿名函数使用的是lambda，使用lambda的时候还需要用一个变量名去接收，同样的，在js中也是一样

var sum = function(a, b){
  return a + b;
}
sum(1, 2);

箭头函数

  1. ES6中允许使用“箭头”（=>）定义函数。

  2. 语法：var f = v => v;

var f = v => v;
// 等同于
var f = function(v){
  return v;
}

  3. 如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分

var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

函数中的arguments参数

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
　console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}

add(1,2)

输出：
3
2
1

JS函数的全局变量和局部变量

局部变量：

在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量：

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期：

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！

 var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //输出结果是？   shenzhen


var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是？   beijing

JS闭包函数

  1. 定义在函数内部的函数
     2. 内部函数使用了外部函数名称空间中的名字
ps:只有符合上述两个特征的函数才能称之为闭包函数

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

JS内置对象

  1. 类似于python中的内置函数或内置模块

  2. 创建对象的固定语法  var 变量名 = new 内置对象名();

Date日期对象

创建Date对象的方法

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

 Date对象的方法

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

 const WEEKMAP = {  
  0:"星期天",
  1:"星期一",
  2:"星期二",
  3:"星期三",
  4:"星期四",
  5:"星期五",
  6:"星期六"
};  //定义一个数字与星期的对应关系对象


function showTime() {
    var d1 = new Date();
    var year = d1.getFullYear();
    var month = d1.getMonth() + 1;  //注意月份是从0~11
    var day = d1.getDate();
    var hour = d1.getHours();
    var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  //三元运算

    var week = WEEKMAP[d1.getDay()];  //星期是从0~6

    var strTime = `
    ${year}-${month}-${day} ${hour}:${minute} ${week}
    `;
    console.log(strTime)
};

showTime();

参考示例

JSON序列化对象

  1. 回顾python序列化
          import json
            json.dumps()
          json.loads()

  2. JSON字符串转换成对象

    JSON.parse();

  3. 对象转换成JSON字符串

    JSON.stringify();

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

RegExp对象(正则对象)

  1. 定义正则表达式两种方式

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

  2. 正则校验数据

reg1.test('jason666')
reg2.test('jason666')

注意：    正则表达式中不能有空格

  3. 全局匹配

var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;

注意：    全局匹配时有一个lastIndex属性

BOM与DOM操作

我们要知道，JS分为  ECMAScript  DOM   BOM

  1. ECMAScript 描述了JavaScript语言本身的相关内容

   2. BOM（Browser Object Model）是指浏览器对象模型，它使JS有能力与浏览器进行“对话”

   3. DOM（Document Object Model）是指文档对象模型，通过DOM我们可以访问HTML文档中的所有元素

 BOM与window对象

  1. Window对象是客户端JavaScript最高层对象之一

   2. 在调用window对象的方法和属性时，可以省略对象的引用。例如：window.document.write()可以简写成：document.write()

   3. 所有的浏览器都支持window对象，他表示浏览器窗口

   4. HTML DOM 的 document 也是 window 对象的属性之一

 一些常用的window方法

window的子对象

1.navigator对象

2.screen对象

• screen.availWidth - 可用的屏幕宽度
• screen.availHeight - 可用的屏幕高度

3.history对象

history.forward()  // 前进一页
history.back()  // 后退一页

4.location对象

  window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

5.警告框

  当警告框出现后，用户需要点击确定按钮才能继续进行操作

  alert("我是弹出框");

6. 确认框

  用户点击确认  返回值为 true。

  用户点击取消  返回值为 false

  confirm("你确定我是确认框吗");

7.提示框

  用户点击确认，返回值为输入的值。

  用户点击取消，那么返回值为 null

  prompt("提示你要信确认框的话");

定时器相关操作(重要)

  通过使用JS, 我们可以在一定时间之后来执行代码，不让函数被调用后立即执行。这就叫做  计时事件

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

 定时器相关操作(重要)
   		function func1(){
        	alert('终于要干饭了')
        }
       let t = setTimeout(func1,3000)  // 3秒中之后自动执行func1函数
       clearTimeout(t)  // 取消上面的定时任务
        
       
    	  var s1 = null
        function showMsg() {
            function func1(){
                alert('终于要干饭了')
            }
            s1 = setInterval(func1, 3000)
        }
        function clearMission(){
            clearInterval(s1)
        }
        setTimeout(clearMission, 9000)
        showMsg()

DOM操作

DOM树

  1. DOM是一套对文档的内容进行抽象和概念化的方法

  2. 当页面被加载时，浏览器会创建页面的文档对象模型

  3. HTML DOM模型被构造为对象的树

  4. JS操作html和css操作html是一致的   都是先学习如何查找标签

  直接查找

  4.1 根据id值查找标签，结果直接是标签对象本身

    document.getElementById()

  4.2 根据class值查找标签  结果时数组类型

    document.getElementByClassName()

  4.3 根据标签名查找标签   结果时数组类型

    document.getElementsByTagName()

  注意：

涉及到DOM操作的JS代码应该放在文档的哪个位置(一般放在HTML  body标签内的最下面)

  间接查找

  4.4 间接查找是基于当前标签进行查找

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

节点操作

基本流程

let XXXEle = document.createElement('标签名')
       XXXEle.id = 'id值'
    	XXXEle.innerText = '内部文本'
       divEle.append(XXXEle)
    	ps:动态创建 临时有效 非永久

  1.创建节点

    语法：createElement(标签名)

    let divEle = document.createElement("标签名");

属性节点

  获取文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

  设置文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

XXXEle.属性               只能是默认属性  

XXXEle.setAttribute()  默认属性、自定义属性