JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化

该课程笔记基于b站pink老师的课程视频，视频链接：https://www.bilibili.com/video/BV1Sy4y1C7ha/?spm_id_from=333.337.search-card.all.click&vd_source=47b8ae38c6099b5bc1a761ca77b05155

JS基础语法

注释

• 单行注释 快捷键ctrl + /
• 多行注释快捷键shift + alt + a
• vscode中修改多行注释的快捷键ctrl + shift + /

输入输出语句

输出：

• 浏览器弹出警示框：alert(msg)
• 浏览器控制台打印输出信息：console.log(msg)
• 浏览器弹出输入框，用户可以输入：prompt(msg)

变量

变量声明与使用

//age 为一个变量
var age;
//变量赋值
age = 18;
//变量初始化
var myname = '小明';//JS中用单引号，css和html中用双引号
//输出变量值
console.log(myname);
//多个变量一起申明
var age = 18,
    address = 'sss',
    gz = 1323;
//变量只声明但是不赋值，输出为undefined
//不声明直接赋值使用是可以的，但是会变成全局变量，不推荐
//不声明不赋值，使用时会直接报错

变量的命名规范

• 严格区分大小写
• 不能以数字开头
• 由字母，下划线，数字，美元符号组成。
• 不能使用关键字和保留字var for是错误写法
• 变量名必须有意义
• 遵循驼峰命名法：首字母小写，后面单词的首字母大写，例myFirstName
• 不用使用name作为变量名

数据类型

JS是弱类型语言，变量数据类型是只有程序在运行过程中，根据等号右边的值确定的。

JS是动态语言，变量的数据类型是可以变化的。

var a = 10;
a = 'Pink';

简单数据类型

• 数字型：Number，包括整数和小数

  • 数字前面加0 表示八进制 010 = 8(10进制)
  • 数字面前加0x 表示十六进制 0xa = 10(10进制)
  • 数字的最大值：Number.MAX_VALUE;//1.79e+308
  • 数字的最小值：Number.MIN_VALUE;//5E-324
  • 无穷大：Infinity
  • 无穷小：-Infinity
  • 非数值：NaN
    • isNaN()这个方法用来判断一个变量是否是非数字，如果是数字返回的是false，反之返回true

• 字符串型：加单（双）引号的内容，JS中推荐单引号。外双内单，外单内双

  • 字符串转义符：都是用\开头，写在字符串内部
    • 换行符\n
    • 斜杆\\
    • 单引号\'
    • 双引号\"
    • tab缩进\t
    • 空格\b
  • 获取字符串的长度：str.length
  • 字符串拼接：字符串+任意类型 = 拼接之后的字符串

• 布尔型：true&false

• 未定义数据类型：undefined

  未定义+数字 = NaN

• 空值：null

  空值 + 数字= 数字

获取数据类型

typeof age： 检测数据类型

数据类型转换

1. 转换为字符串

   • num.toString()

   • String(num)

   • num+’’()空字符

2. 转换为数字型

   • parseInt(str)只能取整数部分
   • parseFloat(str)可以读取到小数部分
   • Number(str)强制转换
   • 隐式转换:'12'-0 ----> 12，'123'-'120' = 3，'123'*1--->123

3. 转换为布尔型：Boolean(var)

运算符

算数运算符

+,-,*,/,%

浮点数不能直接进行运算，会有精度问题

比较运算符

逻辑运算符

逻辑中断逻辑与

表达式1 && 表达式2：表达式1为真返回表达式2，表达式1为假返回表达式1

逻辑中断逻辑或

表达式1 && 表达式2：表达式1为真返回表达式1，表达式1为假返回表达式2

赋值运算符

运算符优先级

流程控制

顺序流程控制

分支流程控制

分支流程控制

• if-else语句

• switch语句

• 三元表达式：条件表达式 ？ 表达式1 ：表达式2

  条件表达式成立返回表达式1，反之返回2

循环结构

for

while

do-while

continue关键字：立刻跳出当前循环，进入下一次循环

break关键字：退出整个循环

数组

创建数组

1.
var arr = new Array();

2.
var arr = [];

遍历数组

var arr = [1,2,3,4,5,6];
for(var i = 0; i < arr.length; i++){
    console.log(arr[i]);
}

新增数组元素

1.新增数组元素，改变数组长度
arr.length = 5;//手动增加数组长度

2.修改索引号
arr[arr.length] = 'shiff';

冒泡排序

let arr = [23, 43, 52, 3, 5, 45];

for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j <= arr.length - 1 - i; j++) {
        if (arr[j] > arr[j + 1]) {
            let temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}

函数

声明函数

1、
function sayHI(){
	console.log('hi');
}

function getSum(num1, num2){
    console.log(num1 + num2);
}

2.
var 变量名 = function() {};

var getSum = function(num1, num2){
    console.log(num1 + num2);
}

js函数申明中的形参可以不用申明变量类型

调用函数

sayHI();

arguments:函数中的伪参数，伪数组，拥有length属性，拥有索引号,不具有数组中的某些方法

function fn(){
    console.log(arguments);
}

fn(1,2,3);

作用域

全局作用域：整个script标签，或者一个单独的js文件

局部作用域：函数作用域（函数内部），局部作用域内：局部覆盖全局

作用域链：就近原则

var num = 10;
function fn(){
    var num = 11;
    function fun(){
        consolo.log(num);
    }
    fun();
}
fn();//---> num = 11;接近原则

JS的预解析

js引擎先预解析，在代码执行：

（1）预解析：js引擎会把js里面所有var 还有function提升到当前作用域的最前面

（2）代码执行：按照代码书写顺序从上往下执行

2.预解析 包括：

• 变量预解析：把所有变量的声明提升到当前作用域的最前面，但是不提升赋值
• 函数预解析：

对象

对象是一个具体的事物

对象的构成：

• 属性：特征
• 方法：行为

创建对象

利用字面量创建对象

var obj = {};//创建了一个空的对象

var obj = {
    uname : 'shiff',
    age : 18,
    gender: '女',
    sayHi: function(){
        console.log('hi~');
    }
}
//对象里面的属性或者方法我们采取键值对的形式 键 属性名 ： 值 属性值
//多个属性或者方法之间用逗号，最后一个属性或方法不用加逗号
//方法冒号后面跟的是一个匿名函数
//第二种调用方法：对象名[‘属性名’]
console.log(obj['gender']);
//调用对象的方法：对象名.方法（）
obj.sayHi();

利用new Object创建对象

//利用new Object创建对象
let obj1 = new Object();//创建了一个空对象
obj1.uname = 'shiff';
obj1.age = 18;
obj1.gender = '女';
obj1.sayHi = function (){
    console.log('Hi');
}
console.log(obj1.uname);
console.log(obj1['uname']);
obj1.sayHi();

利用构造函数创建对象

function 构造函数名(){
    this.属性 = 值；
    this.方法 = function (){}
}
new 构造函数名();

//利用构造函数创造对象
function Star(uname, age, gender) {
    this.name = uname;
    this.age = age;
    this.gender = gender;
    this.sing = function(song){
        console.log(song)
    }
}
let ldh = new Star('刘德华',18,'男');//调用函数返回的是一个对象
//1.构造函数名字首字母要大写
//2.构造函数不需要return 就可以返回对象
//3.调用构造函数，必须要使用new
//4.属性和方法面前必须添加this
console.log(ldh.name);
console.log(ldh['gender'])
ldh.sing('冰雨');

构造函数，是抽象了对象的公共部分，封装到了函数里面

通过new关键字创建对象的过程称为对象实例化

new关键字执行过程

1. new构造函数在内存中创建一个空的对象
2. this就会指向刚才创建的空对象
3. 执行构造函数里面的代码，给这个空对象添加属性和方法
4. 返回这个对象

遍历对象

let obj = {
    name : 'shiff',
    age : 18,
    gender: '女',
    fn: function(){
        console.log('233');
    }
}
// for(变量in对象){}
//也可以遍历方法

for(let k in obj){
	console.log(k);//k变量输出 得到的是属性名
    console.log(obj[k]);//obj[k]得到的是属性值
}

JS的内置对象

JS中的对象类型：

• 自定义对象
• 内置对象
• 浏览器对象

Math对象

常用方法

Math.PI					//圆周率
Math.floor()			//向下取整
Math.ceil()				//向上取整
Math.round()			//四舍五入 就近取整
Math.abs()				//绝对值
Math.max()/Math.min()	//最大/最小值
Math.random()			//随机数

日期对象

Date()日期对象是一个构造函数

//创建一个对象
let date = new Date();
//如果没有参数，返回系统的当前时间

console.log(date.valueof());
console.log(date.getTime());
valueof()
getTime()
//返回我们现在时间距离1970.1.1总的毫秒数(时间戳)
//也可以
date1 =  +new Date();
console.log(date1);
//h5新增
console.log(Date.now());//不需要创建实例

倒计时：将来的时间戳-现在时间戳

function repairZero(a){
    return a > 10 ? a : '0' + a;
}
function countDown(time) {
    let nowTime = +new Date();//返回的是当前时间总的毫秒数
    let inputTime = +new Date(time);//返回的是用户输入时间总的毫秒数
    let times = (inputTime - nowTime) / 1000; //除以1000得到秒数
    let d = parseInt(times/60/60/24);//天
    d = repairZero(d);
    let h = parseInt(times/60/60%24);//时
    h = repairZero(h);
    let m = parseInt(times/60%60);//分
    m = repairZero(m);
    let s = parseInt(times%60);//当前的秒
    s = repairZero(s);
    return d + '天' + h + '时' + m + '分' + s +'秒';
}
console.log(countDown("2022-8-17 15:11:00"));

数组对象

创建数组

1.字面量
let arr = [];//空数组

2.构造函数
let arr1 = new Array(2);//创建数组长度为2的空数组

let arr2 = new Array(2,3);//等价于[2,3]有两个数组元素

检测是否为数组

1.instanceof 运算符

arr instanceof Array;//值为true或false判断arr是否为数组


2.Array.isArray([1,2,3]);//true

Array.isArray('shiff');//false
//返回true或者false，H5新增，ie9以上版本支持

添加删除数组的方法

//1.push()在数组末尾添加一个或多个元素
let arr = [1,2,3];
arr.push(4);//arr = [1,2,3,4]
arr.push(5,'pink');//arr = [1,2,3,4,5,'pink']
//push的返回值是新数组的长度，原素组也会发生变化
console.log(arr.push(6));//7
//2.unshift在数组前面添加一个或多个元素，基本特性与push想同
arr.unshift('red','green');
//3.pop()删除数组中的最后一个元素
arr.pop();
//返回是的删除的那个元素，原数组会发生变化
//4.shift()删除数组的第一个元素
//返回的是删除的那个元素，原数组会发生变化
arr.shift();

翻转数组：arr.reverse()

冒泡排序：arr.sort()

arr.sort(function(a,b){
    return a - b;//升序
    //return b - a;//降序
})
console.log(arr);

数组索引方法

let arr = ['red','blue','pink','blue']；
let a = arr.indexOf('blue');// a = 1;
//indexOf返回第一个满足条件bule的索引号
//如果找不到该元素，返回-1
//lastindexOf从后面往前查找第一个为blue的索引号
let b = arr.lastindexOf('blue');//b = 3

数组转换为字符串

1.toString()将我们的数组转换为字符串
let a = [1,2,3];
let string = a.toString();//1,2,3

2.join(分隔符)
let b = [1,2,3];
let s = b.join('-');//1-2-3
let s = b.join('&');//1&2&3

• concat():连接两个或多个数组，返回值为一个新的数组
• slice():数组截取slice(begin,end)，返回被截取的新数组
• splice():数组删除splice(第几个开始，要删除几个数),返回被删除的新数组，且会影响到原数组

基本包装类型:字符串

把简单数据类型包装为了复杂数据类型

• String
• Number
• Boolean

Web APIs：DOM+BOM

API

应用程序编程接口，是一些预定义函数

Web API是浏览器提供的浏览器功能和页面元素的AIP

DOM

处理HTML和XML的接口

• 文档：一个页面
• 元素：所有标签
• 节点：所有内容（标签、属性、文本、注释）

获取元素

• 通过ID获取：getElementById()

  <div id="time">2019-9-9</div>
  <script>
  //1.getElementById()通过获取元素id获得元素对象
  let timer = document.getElementById('time');
  console.log(timer);
  console.log(typeof timer);//返回的是对象
  console.dir(timer);//dir查看对象的属性和方法
  </script>

• 通过标签获取：getElementsByTagName()

  <ul>
      <li>你是大好人</li>
      <li>你是大好人</li>
      <li>你是大好人</li>
      <li>你是大好人</li>
      <li>你是大好人</li>
  </ul>
  <script>
      //返回的是 获取过来的元素对象的集合 以伪数组的形式存储
      let lis = document.getElementsByTagName('li');
      console.log(lis);
      console.log(lis[0]);
      //用for遍历
      for(let i = 0; i < lis.length; i++) {
          console.log(lis[0]);//得到的元素是动态的
      }
  //如果页面中只有一个li，返回的还是伪数组的形式
  //如果界面中没有元素，会返回一个空的伪数组
  </script>
  获取ul标签下的li标签
  element.getElementsByTagName(),获取的时候不包括父元素自己
  //获取文档中的所有ul,注意：伪数组不能作为父元素，一定要指明是哪一个
  let ul = document.getElementByTagName('ul');
  let li = ul[0].getElementByTagName('li');

• 通过类名获取元素：document.getElementsByClassName(‘类名’)

• 通过**querySelector()**获取元素，返回的是第一个元素对象

  //通过类名获取元素，返回一个伪数组
  let boxes = document.getElementsByClassName('box');
  //querySelctor返回指定选择器的第一个元素对象
  //通过类名.类名
  let firstbox = document.querySelector('.box');
  //通过id #id名
  let nav = document.querySelector('#nav');
  //通过标签名
  let li = document.querySelector('li');

• 获取body元素：document.body

• 获取html元素：document.documentElement

事件基础

事件：监控行为——————触发响应

事件三要素：事件源、事件类型、事件处理程序

<button id = "btn">唐伯虎</button>
<script>
    //点击一个按钮，弹出对话框
    //事件有三部分组成：事件源、事件类型、事件处理程序
    //事件源：事件被触发的对象  按钮
    let btn = document.getElementById('btn');
    //事件类型： 如何触发 比如鼠标点击
    //事件处理程序 通过一个函数赋值的方式完成
    btn.onclick = function (){
        alert('点秋香');
    }
</script>

执行步骤三要素：

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采用函数赋值形式）

常见的鼠标事件

操作元素

利用DOM操作元素来改变元素里面的内容、属性

改变元素内容

• element.innerText

  <script>
      //当我们点击了按钮，div里面的文字会发生变化
      let btn = document.querySelector('button');
      let div = document.querySelector('div');
      btn.onclick = function () {
          div.innerText = getDate();
      }
  
      function getDate() {
          let date = new Date();//获得一个时间对象，里面不写内容就是当前时间，动态的
          let year = date.getFullYear();
          let month = date.getMonth() + 1;
          let dates = date.getDate();
          let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
          let day = date.getDay();//获得星期几
          return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];
      }
  
      //我们元素可以不用添加时间
      let p = document.querySelector('p');
      p.innerText = getDate();
  </script>

• elemen.innerHTML

  <script>
      //innerText和innerHTML的区别
      //1.innerText 不识别html标签 非标准 去除空格和换行
      let div = document.querySelector('div');
      div.innerText = '<strong>今天是：2022<strong>'
      //1.innerText 识别html标签 W3C标准
      div.innerHTML = '<strong>今天是：2022<strong>'
      //这两个属性是可读写的 可以获取元素里面的内容 保留空格和换行
      p = document.querySelector('p');
      console.log(p.innerText);
      console.log(p.innerHTML);
  </script>

常见元素的属性操作

<script>
    //修改元素属性 scr
    //1.获取元素
    let pic1 = document.getElementById('1');
    let pic2 = document.getElementById('2');
    let img = document.querySelector('img');
    //2.注册事件
    pic2.onclick = function (){
        img.src = 'images/暂无考勤记录.png';
    }
    pic1.onclick = function (){
        img.src = 'images/暂无回放.png';
    }

</script>

表单元素的操作属性

常见表单属性：

• type
• value
• checked
• selected
• disabled

<script>
    //1.获取元素
    let btn = document.querySelector('button');
    let input = document.querySelector('input');
    //2.注册事件 处理程序
    btn.onclick = function (){
        // input.innerHTML = '点击了'; 这个是普通盒子，比如div标签里面的内容
        //表单里面的值 文字内容是通过value来修改的
        input.value = '被点击了';
        //如果想要某个表单被禁用 不能再点击 disabled
        //btn.disabled = true;//禁用该表单
        //也可以
        this.disabled = true;//this指向的是时间函数的调用这，即btn
    }
</script>

样式属性操作

• element.style:行内样式操作

  test.onclick = function(){
      this.style.color = '#fff';
      this.style.fontSize = '25px';
  }

• element.className：类名样式操作

  <div >
      文本
  </div>
  <script>
      const test = document.querySelector('div');
      test.onclick = function (){
          //点击后让div获取类名
          //让当前元素的类名改为change'
          this.className = 'change';
          
          //可以通过修改元素的classname更改元素的样式，适合于样式较多或者功能较复杂的情况
          //如果想要保留原先的类名，使用多类名选择器
          this.className = 'first change';
      }
  </script>

  

总结

排他算法

先排除其他人，在设置自己的样式

<script>
    //1.获取所有按钮元素
    const bts = document.getElementsByTagName('button');
    //btns得到的是伪数组
    for(let i = 0; i < bts.length; i++){
        bts[i].onclick = function (){
            //1.我们先把所有的按钮背景颜色去掉
            for(let i = 0; i < bts.length; i++){
                bts[i].style.backgroundColor = '';
            }
            //2.然后再让当前的颜色变为pink色
            this.style.backgroundColor = 'pink';
        }
    }