javascript学习笔记

最新推荐文章于 2024-09-09 09:35:48 发布

机智的瑶哥

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量458

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/m0_51787681/article/details/125251624

版权

1前言

1.1 HTML/CSS/JS 的关系

在这里插入图片描述

1.2 浏览器执行 JS 简介

浏览器分成两部分：渲染引擎和 JS 引擎

渲染引擎：
用来解析HTML与CSS，俗称内核，比如chrome 浏览器的blink，老版本的 webkit
JS引擎：
也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

1.3 JS 的组成

在这里插入图片描述

DOM——文档对象模型
文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）
BOM——浏览器对象模型
浏览器对象模型（Browser Object Model，简称BOM）是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

2.函数

2.1 函数的使用

声明函数

// 声明函数
function 函数名() {
   
    //函数体代码
}

function 是声明函数的关键字,必须小写
由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum

调用函数

// 调用函数
函数名();  // 通过调用函数名来执行函数体代码

调用的时候千万不要忘记添加小括号

2.2 函数的参数

函数参数语法

形参：函数定义时设置接收调用时传入

实参：函数调用时传入小括号内的真实数据

函数参数的运用：

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) {
      // 可以定义任意多的参数，用逗号分隔
  // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);

调用的时候实参值是传递给形参的
形参简单理解为：不用声明的变量
实参和形参的多个参数之间用逗号（,）分隔

2.3 arguments的使用

当不确定有多少个参数传递的时候，可以用 arguments 来获取。JavaScript 中，arguments实际上它是当前函数的一个内置对象。arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法

注意：在函数内部使用该对象，用此对象获取函数调用时传的实参。

2.4 函数的两种声明方式

自定义函数方式(命名函数)

利用函数关键字 function 自定义函数方式
```
// 声明定义方式
function fn() {
     ...}
// 调用  
fn();  
```
- 因为有名字，所以也被称为命名函数
- 调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面
函数表达式方式(匿名函数）

利用函数表达式方式的写法如下：
```
// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){
     ...}；
// 调用的方式，函数调用必须写到函数体下面
fn();
```
- 因为函数没有名字，所以也被称为匿名函数
- 这个fn 里面存储的是一个函数
- 函数表达式方式原理跟声明变量方式是一致的
- 函数调用的代码必须写到函数体后面

2.5 作用域

2.5.1 作用域概述

JavaScript（es6前）中的作用域有两种：

全局作用域
局部作用域（函数作用域）

2.5.2 全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

2.5.3 局部作用域

作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。

2.5.4 JS没有块级作用域

块作用域由 { } 包括。
在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用，如下面的Java代码：

java有块级作用域：
```
if(true){
     
  int num = 123;
  system.out.print(num);  // 123
}
system.out.print(num);    // 报错
```
以上java代码会报错，是因为代码中 { } 即一块作用域，其中声明的变量 num，在 “{ }” 之外不能使用；

而与之类似的JavaScript代码，则不会报错：

Js中没有块级作用域（在ES6之前）
```
if(true){
     
  var num = 123;
  console.log(123); //123
}
console.log(123);   //123
```

2.3 全局变量和局部变量的区别

全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间。

2.6 预解析

2.6.1 预解析的相关概念

JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
代码执行：从上到下执行JS语句。

预解析会把变量和函数的声明在代码执行之前执行完成。

2.6.2 变量预解析

变量提升（变量预解析）： 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

console.log(num);  // 结果是多少？
var num = 10;      // ？

结果：undefined

注意：变量提升只提升声明，不提升赋值

2.6.3 函数预解析

函数提升： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

fn();
function fn() {
   
    console.log('打印');
}

结果：控制台打印字符串 --- ”打印“ 

注意：函数声明代表函数整体，所以函数提升后，函数名代表整个函数，但是函数并没有被调用！

4.4 函数表达式声明函数问题

函数表达式创建函数，会执行变量提升，此时接收函数的变量名无法正确的调用：

fn();
var  fn = function() {
   
    console.log('想不到吧');
}

结果：报错提示 ”fn is not a function"

解释：该段代码执行之前，会做变量声明提升，fn在提升之后的值是undefined；而fn调用是在fn被赋值为函数体之前，此时fn的值是undefined，所以无法正确调用

2.7 创建对象的三种方式

2.7.1 利用字面量创建对象

键：相当于属性名

值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

代码如下：

var star = {
     
    name : 'pink',
    age : 18,
    sex : '男',
    sayHi : function(){
     
        alert('大家好啊~');
    }
};

上述代码中 star即是创建的对象。

访问对象的属性
- 对象里面的属性调用 :对象.属性名，这个小点 . 就理解为“ 的 ”
- 对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号
  
  示例代码如下：
```
console.log(star.name)     // 调用名字属性
console.log(star['name'])  // 调用名字属性
```
调用对象的方法
- 对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号
  
  示例代码如下：
```
star.sayHi();              // 调用 sayHi 方法,注意，一定不要忘记带后面的括号
```

变量、属性、函数、方法总结

属性是对象的一部分，而变量不是对象的一部分，变量是单独存储数据的容器

变量：单独声明赋值，单独存在
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征

方法是对象的一部分，函数不是对象的一部分，函数是单独封装操作的容器

函数：单独存在的，通过“函数名()”的方式就可以调用
方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。

2.7.2. 利用 new Object 创建对象

创建空对象
```
var andy = new Obect();
```
给空对象添加属性和方法

示例代码如下：
```
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
     
    alert('大家好啊~');
}
```
注意：
- Object() ：第一个字母大写
- new Object() ：需要 new 关键字
- 使用的格式：对象.属性 = 值;

2.7.3 利用构造函数创建对象

构造函数
- 构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
- 构造函数的封装格式：
```
function 构造函数名(形参1,形参2,形参3) {
       
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}
```
- 构造函数的调用格式
```
var obj = new 构造函数名(实参1，实参2，实参3)
```
  以上代码中，obj即接收到构造函数创建出来的对象。
- 注意事项
  1. 构造函数约定首字母大写。
  2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
  3. 构造函数中不需要 return 返回结果。
  4. 当我们创建对象的时候，必须用 new 来调用构造函数。
- 其他
  
  构造函数，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）
  创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化
new关键字的作用
1. 在构造函数代码开始执行之前，创建一个空对象；
2. 修改this的指向，把this指向创建出来的空对象；
3. 执行函数的代码
4. 在函数完成之后，返回this—即创建出来的对象

2.8 内置对象

2.8.1 内置对象

JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象
前面两种对象是JS 基础内容，属于 ECMAScript；第三个浏览器对象属于 JS 独有的.
JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

2.8.2 日期对象

Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。

获取当前时间必须实例化：

var now = new Date();

获取指定时间的日期对象

var future = new Date('2019/5/1');

注意：如果创建实例时并未传入参数，则得到的日期对象是当前时间对应的日期对象

使用Date实例的方法和属性

方法名	说明	代码
getFullYear()	获取当年	dObj-getFullYear()
getMonth)	获取当月（0-11）	dObj-getMonth()
getDate)	获取当天日期	dObj getDate()
getDay()	获取星期几（周日0到周六6）	dObj-getDay()
getHours()	获取当前小时	dobj-getHours()
getMinutes()	获取当前分钟	dObj-getMinutes（）
getSeconds()	获取当前秒钟	dobj.getSeconds（）

通过Date实例获取总毫米数

总毫秒数的含义

基于1970年1月1日（世界标准时间）起的毫秒数

获取总毫秒数

// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())	
console.log(date.getTime())	
// 2. 简单写可以这么做
var now = + new Date();			
// 3. HTML5中提供的方法，有兼容性问题
var now = Date.now();

1.5 数组对象

创建数组的两种方式

字面量方式
- 示例代码如下：
```
var arr = [1,"test",true];
```
new Array()
- 示例代码如下：
```
var arr = new Array();
```
  注意：上面代码中arr创建出的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组时传入参数
  
  参数传递规则如下：
  - 如果只传入一个参数，则参数规定了数组的长度
  - 如果传入了多个参数，则参数称为数组的元素

3. DOM 介绍

3.1 什么是DOM

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

3.1.1 DOM树

在这里插入图片描述

DOM树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

文档：一个页面就是一个文档，DOM中使用document表示
节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

3.2 获取元素

3.2.1. 根据ID获取

语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null

案例代码

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

3.2.2. 根据标签名获取元素

语法：document.getElementsByTagName('标签名') 
		或者 element.getElementsByTagName('标签名') 
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）

3.2.3 H5新增获取元素方式

1.document.getElementsByClassName（类名）；//根据类名返回元素对象集合
2.document.querySelector（'选择器'）；//根据指定选择器返回第一个元素对象
3.document.queryselectorAll（'选择器'）；//根据指定选择器返回
注意：
queryselector和queryselectorAll里面的选择器需要加符号，比如：document.queryselector（'#nav'）；

3.2.4 获取特殊元素（body，html）

获取body元素
1.doucumnet.body//返回body元素对象
获取html元素
2.document.documentElement//返回htm1元素对象

3.3 事件基础

3.3.1 事件概述

简单理解： 触发— 响应机制。

3.3.2 事件三要素

事件源（谁）：触发事件的元素
事件类型（什么事件）：例如 click 点击事件
事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

3.3.3 执行事件的步骤

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

3.3.4 常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

3.4 操作元素

JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）

3.4.1. 改变元素内容（获取或设置）

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

案例代码

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