蓝旭前端预习4

沫沫.momo

已于 2023-04-20 18:17:10 修改

阅读量358

点赞数 1

文章标签：前端 javascript html

于 2023-04-15 17:24:10 首次发布

本文链接：https://blog.csdn.net/2201_75663851/article/details/130127644

版权

（3）window.fetch() 实现方法

（4）async 和 awit实现方法

十、课后总结

一、JavaScript介绍

1、概念

一种运行在客户端（浏览器）的编程语言，实现人机交互的效果。

2、作用

网页特效（监听用户的一些行为让网页做出对应的反馈）
表单验证（针对表单数据的合法性进行判断）
数据交互（获得后台数据，渲染到前端）
服务端编程（node.js）

3、组成

页面文档对象模型：DOM
通过DOM提供的接口可以对页面上的各种元素进行操作（大小、颜色、位置等）
浏览器对象模型：BOM
通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

二、js引用方式

（1）内部引入

直接写在html文件里，用script标签包住

语法：

<body>
   <script>
      alert('你好,js')
   </script>
</body>

拓展：alert（'你好，js'）页面会弹出警告对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部js</title>
</head>
<body>
    <script>
        alert("hello world!")
    </script>
<input type="text">
</body>
</html>

补充：当script标签在input标签前时，先弹出script标签，点击确定后才能进行文本框输入，反之则先有文本框再有script标签弹出（先来后到）

（2）外部引入

先在src外面构建一个文件夹然后在里面创建一个.js文件，并将代码写在以.js结尾的文件里，通过script标签，引入到html页面中，适合于JS 代码量比较大的情况

语法：

<body>
   <script src='my.js'></script>
   //中间不要写内容
</body>

补充：引用外部 JS文件的 script 标签中间不可以写代码（写了也不生效）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部js</title>
</head>
<body>
    <script src='a.js'></script>
</body>
</html>

alert('我是外部的js文件')

（3）行内引入

行内引入方式必须结合事件来使用，内部引用和外部外部不做要求，即<开始标签 on+事件类型=“js代码”></结束标签>

语法：

<body>
  <!-- οnclick="alert('Hello JavaScript')" -->
  <!-- 双引号中的代码为js代码 -->
  <!-- 避免引号冲突，js代码使用单引号 -->
  <input type="button" value="按钮" onclick="alert('你好,js')">
</body>

补充： JS常用事件(使用时在最前面加上on)

blur 失去焦点
change 下拉列表选项中项改变或文本框内容改变
click 鼠标点击
dbclick 鼠标双击
focus 获得焦点
keydown键盘按下
keyup 键盘弹起
load 页面加载完毕
mousedown/mouseover/mousemove/mouseout 鼠标按下/经过/移动/离开
reset 表单重置
select 文本被选择
submit 表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内js</title>
</head>
<body>
        <input type="button" value="按钮" onclick="alert('你好,js')">
        <!-- 先点击按钮，才会有内容弹出 -->
</body>
</html>

三、注释及结束符

单行注释：//
多行注释：/* */
结束符注意点：用；作为结束符，为风格统一，要么都写，要么不写（要学会端水）
注意单双引号的使用：HTML：推荐使用双引号；JS ：推荐使用单引号

四、输入输出语法

方法	说明	归属
alert(‘弹出警示框要显示的内容’)	页面弹出警示框	浏览器
console.log(‘控制台打印’)	控制台输入语法，程序员调试使用	浏览器
prompt(‘提示信息’)	页面弹出输入框，包含一条文字信息，提示用户输入文字	浏览器
document.write('要输出的内容')	向body内输入内容	浏览器

补充：alert() 主要用来显示消息给用户，而console.log() 是用来给程序员自己看运行时的消息

（1）alert

<body>
  <script>
    alert('弹出警示框要显示的内容')
  </script>
</body>

（2）console.log

<body>
  <script>
    console.log('控制台打印')
  </script>
</body>

补充：打开浏览器控制台：

先点击鼠标右键，再点击检查
同时摁住Fn以及F12

（浏览器控制台详解：http://t.csdn.cn/6W4Kp以及http://t.csdn.cn/qg66V）http://t.csdn.cn/6W4Kp

（3） prompt

<body>
  <script>
    prompt('请输入信息')
  </script>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <body>
        <script>
          prompt('请输入信息')
        </script>
      </body>     
</body>
</html>

（4）document.write

<body>
  <script>
    document.write('要输出的内容')
  </script>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
        <script>
           document.write('我是div标签')
           document.write('<h1>我是标题</h1>')
        /* 可以在输入内容中添加html标签 */
        </script>
</body>

</html>

五、变量

1、概念

即一个存放数据的容。若在内存中开辟一块空间来存放数据，则这个存放数据的空间就是变量。

2、声明变量

关键词	声明变量	作用范围	补充
var	函数级作用域	在整个函数中
let	块级作用域	在声明的代码块内	let声明的变量可以被重新赋值
const	块级作用域	在声明的代码块内	const声明变量是常量，不能被更改

（1）var声明

//使用var声明一个变量，使用该关键字声明变量后，计算机会自动为其分配内存空间
var age

//将右边的值赋给左边的变量
age = 18

//声明变量的同时初始化变量
var age = 18

// 更新变量：一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准
<body>
  <script>
    var age = 18
    age = 20
    alert(age)
  </script>
</body>

//同时声明多个变量：只需要写一个var，多个变量名之间使用英文逗号隔开
<body>
    <script>
        var age = 18, username = 'momo'
        console.log(age, username)
    </script>
</body>

//声明变量特殊情况:只声明，不赋值(没有赋值，变量未定义)
var age
console.log(age)

（2）let声明

let声明作用域

let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问，而var可以跨块访问，同时let也不允许同一个块作用域中出现重复声明。

//let拒绝冗杂
var name;
var name;

let age;
let age; // Error；标识符age已经声明过了

for循环中的var、let声明

//for循环中var定义的迭代变量会渗透到循环体外部：
for (var i = 0; i < 5; ++i) {
    // 循环逻辑
}
console.log(i); // 5

//改成使用let之后，这个问题就消失了，因为迭代变量的作用域仅限于for循环块内部：
for (let i = 0; i < 5; ++i) {
    // 循环逻辑
}
console.log(i); // Error: i没有定义

//使用var和let定义for循环中的变量，循环里使用定时器setTimeout后循环结果如下代码：
for (var i = 0; i < 5; ++i) {
    setTimeout(() => console.log(i), 0)
}
// 输出5、5、5、5、5

for (let i = 0; i < 5; ++i) {
    setTimeout(() => console.log(i), 0)
}
// 输出0、1、2、3、4

（3）const声明

const的行为与let基本相同，唯一的区别是：const是用来定义常量的，而且定义常量时必须赋值，不赋值会报错，定义之后是不允许被修改的，修改const声明的变量会导致运行时错误。

const age = 18;
age = 36; // Error: 给常量赋值

// const不允许重复声明
const name = 'mama';
const name = 'baba'; // Error

// const声明的作用域也是块
const name = 'mama';
if (true) {
    const name = 'baba';
}
console.log(name); // mama

3、命名规范

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。如：var、for、while
变量名必须有意义，使用可以看变量名就知道其意义的。如： age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。如：myFirstName

六、运算符

1、概念

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

2、分类

（1）算术运算符

先乘除后加减，有括号先算括号

运算符	说明
+	加
-	减
*	乘
/	除
%	取余（取模）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>算术运算符</title>
</head>
<body>
    <script>
      console.log(1 + 1)
      console.log(1 - 1)
      console.log(1 * 1)
      console.log(1 / 1)
      console.log(5 % 3) //取余(用于判断某个数能否被整除）
    </script>
</body>
</html>

（2）递增和递减运算符

需要反复给数字变量添加或减去1

运算符	说明
++i；--i	先加（减）后用
i++；i--	先用后加（减）

（3）比较运算符

用于比较运算，结束后，会返回一个布尔值（true / false）作为比较运算的结果

运算符	说明
<	小于
>	大于
>=	大于等于（大于或等于）
<=	小于等于（小于或等于）
==	等于
!=	不等于
===;!==	全等，要求值和数据类型都相等

（4）逻辑运算符

运算符	说明
&&	与
\|\|	或
！	非

七、数据类型

1、基本数据类型

（1）String （字符串型）

通过使用单引号(' ')、双引号(" ")或反引号(` `)包裹的数据都叫字符

 let str = 'hello'
 let str1 = "你好"
 let str2 = `hello world`//注意函数名被赋不同值的变量名不一致

引号不能嵌套，双引号不能放双引号，单引号不能放单引号；单双引号可以互相嵌套，但不可以自己嵌套自己（口诀：外双内单；外单内双）
在字符串中我们可以使用\作为转义字符，当表示一些特殊符号是可以使用 \进行转义：

\“想表达的内容”、\‘想表达的内容’、\n表示换行、\t制表符（空格）、\表示(2个斜杠出来1个斜杠)

补充：

+作用：数字相加，字符相连（例如：'hello' + '你好' => hello你好），也可用于两个变量的相加

模板字符串：外面用`` ,里面${变量名}

 <script>
        let age = 19
         //document.write('我今年age岁了')//错误：引号里的全是字符串
         //document.write('我今年' + age + '岁了')//看变量age的变化
         document.write('我今年${age}岁了')
 </script>

（2）Number （数字型）

在JS中所有的数值都是Number类型,包括整数（正、负）和浮点数（小数）
可以表示数字的最大值。如果使用Number表示的数值超过了最大值，则会返回一个Infinity（无穷大），表示一个正无穷；-Infinity，表示一个负无穷。使用typeof检查Infinity时，也会返回一个number
NaN表示一个特殊的数字，表示Not A Number。任何对NaN的操作（例如：NaN - 2）都会返回NaN

<script>
        console.log('hello' - 2) //字符串-数字  打印 NaN (注意字符串有单引号)
</script>

（3）Boolean（布尔型）

布尔值只有两个固定的值，主要用来逻辑判断
true:表示真；false:表示假
使用typeof检验一个布尔值时，会返回一个boolean

<script>
        let answear = true  //只能写true或false，否则会当作变量来看（所以一定要写对，不要粗心）
        console.log(answear) 
        console.log(3 > 5)
</script>

（4） Null （空类型）

Null的值只有一个，就是null(空值），是专门用来表示一个为空的对象
若使用typeof检测一个null值时，会返回一个object(对象)
null：对象数据类型
赋值了，但内容为空

<script>
       let  box = null
       console.log(box)
       console.log(null + 1) //1
</script>

（5）Undefined （未定义类型）

Undefined类型的值只有一个，就是Undefined(未定义)
使用typeof检查Undefined值时，也会返回一个Undefined
未赋值

<script>
     let age
     console.log(age)
     console.log(undefined + 1) //NaN
</script>

2、引用数据类型

Object（对象）

一种无序的数据集合

内置对象

Math对象是JavaScript提供的一个“数学高手”对象，提供了一系列做数学运算的方法

方法	说明
random	生成0-1之间的随机数（包含0不包括1）
ceil	向上取整
floor	向下取整
max	最大值
min	最小值
pow	幂运算
abs	绝对值

3、数据类型转换

隐式转换

<script>
        console.log(4-"0");  //  4
        console.log(4+"0");  //  40
        console.log(4*"0");  //  0
        console.log(4/"2");  //  2 
        console.log("hello"-0) //NaN
        console.log(+'123')  //转化为数字型
</script>

显式转换

<script>        
        let str = '123'
        console.log(Number(str)) //123
</script>

*数据类型的强弱

<script>
          //js 弱数据类型的语言
          let num = 'hello' 
          console.log(num) //console正常打印，只有赋了值，才明白是什么数据类型
          //java 强数据类型的语言   int num = 10 (int：一定是整数)
</script>

*检测数据类型

作为运算符：typeof x

<script>
        let num = 18
        console.log(typeof num)
        let str = '18'
        console.log(typeof str)
</script>

4、数组

数组是按顺序保存，每个数据都有自己的编号，且编号是从0开始

(1)数组的创建

字面量创建：

let 数组名=[数据1，数据2，数据3]

构造函数方式：

let arr=new Array(数据1，数据2，数据3)

(2)数组的赋值

先声明再赋值：

let arr = []
arr[0] = 1
Arr[1] = 2

声明时直接赋值：

let arr = -[3 ,4];
let arr1 = new Array(3,4);

(3)删除数据

从开始删除：

let arr = [1,2,3,4,5];
arr.shift();
console.log(arr);//输出arr数组目前删除元素后的数组[ 2, 3, 4, 5 ]

从后面删除：

let arr = [1,2,3,4,5];
arr.pop();
console.log(arr);//输出arr数组目前删除元素后的数组[ 1, 2, 3, 4 ]

(4)增加数据

从末尾增加

let arr = [1,2,3,4,5];
arr.push(6);
console.log(arr);//输出arr数组目前增加元素后的数组[ 1, 2, 3, 4, 5, 6 ]

从开始增加

let arr = [1,2,3,4,5];
arr.unshift(6);
console.log(arr);//输出arr数组目前增加元素后的数组[ 6, 1, 2, 3, 4, 5 ]

八、函数

1、概念

把一段需要重复使用的代码，用function语法包起来，方便重复调用，分块和简化代码

2、函数的声明

function 方法名(){
     //要执行的代码
}

3、函数的调用

名字(); 函数可以多次调用

//函数声明
function fn(){
    console.log(1);
}
 
//函数的调用
fn();

在事件中调用，直接写函数名，不使用括号

//函数声明
function fn(){
    console.log(1);
}
 
//函数在事件中的调用
fn();

补充：函数封装的两个案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    //     // 1.求两个数的和
    //     function getSum() {
    //    //prompt:页面弹出输入框，提示用户输入文字
    //         let num1 = +prompt('请输入第一个数')
    //         let num2 = +prompt('请输入第二个数')
    //         console.log(num1 + num2)
    //     }
    //     getSum()
            // 2.求1-100之间所有数的和
            function getSum() {
               let sum = 0  //别忘了累加和
               for (let i = 1; i <=100; i++) {
               sum += i //+和=之间不要有空格，否则会报错
                } 
            console.log(sum)
            }
            getSum()
    </script>
</body>
</html>

4、函数表达式

把函数存到变量里

匿名函数自执行：声明后不需要调用就直接执行

(function(){
    console.log("匿名函数自执行");
})();

函数表达式：把函数存到变量，或将函数存到数组的对应位置里等，调用时通过变量或数组对应位置进行调用。调用时需要写括号。

5、函数传参

获取元素，最好从父级元素获取，全部从document中获取，可能会出现混乱

形参：形式上的参数——给函数声明一个参数；
实参：实际的参数——在函数调用时给形参赋的值

function function(形参1,形参2){
    //函数执行代码
}
 
function(实参1,实参2);//调用时传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    function getSum(end) { //end=50
       //console.log(end)
        let sum = 0  //别忘了累加和
        for (let i = 1; i <=end; i++) {
        sum += i //+和=之间不要有空格，否则会报错
         } 
     console.log(sum)
     }
     getSum(50)
     getSum(100)
     getSum(180)
     getSum(180)
     getSum(600)
    </script>
</body>
</html>

函数的不定参（可变参）—关键字arguments

代表所有实参的集合。通过下标获取参数的每一位；通过length获取实参的个数

6、函数返回值

函数返回值即函数执行之后的返回结果。所有函数都会有函数返回值即函数执行后一定会返回一个结果，如果没有定义默认返回undefined

在函数中，return后定义返回值；
在函数中，return之后的代码就不会再执行了
return只能用于函数中，用在其他地方会报错

7、this指向问题

执行环境上下文对象，它指向谁取决于什么时候调用、被谁调用。在方法中，this 表示该方法所属的对象

若单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在事件中，this 表示接收事件的元素。
在显式函数绑定时，我们可以自己决定this的指向

九、异步

1、概念

js中的同步任务就是按照顺序执行，异步相较于同步，多了条选择的路线

2、方法

webwork：为了让任务在多线程去执行,防止复杂逻辑阻塞线程
promise ：为了让异步任务顺序执行,解决地狱回调
window.fetch H5（新增的拉取资源的 api） 1.通过.then() 2.数据序列化 3.通过.then()获取数据
jquery.deffered对象：为了让创建的deffered对象的时候和异步任务属于同步代码的结果,并且能够保证deffered和promise进行转换
async和awit ：实质上是对Promise()对象提供的 -语法糖-. 让代码更简洁.通过同步代码的形式来实现异步操作

（1）werbwork实现方法

①在html中引入index.js主线程
②在index.js中创建分线程 var w =new webwork('work.js')
③在index.js中通过 w.postmesage('数据') 向子线程发送数据
④在work.js中通过onmessage=function(ev){ev.data postmessage(a)} 接受主线程发送过来的ev.data数据
⑤在index.js中通过onmessage=function(ev){ev.data} ev.data 接受 a 的值.

（2）promise实现方法

①创建promise实例   var p =new promise((reslove,reject)=>{reslove('res')});
②p.then(res=>  console.log(res))
③  // reslove(变量) 对应的是 then(变量 => {变量的操作})

（3）window.fetch() 实现方法

window.fetch('url').then(
     console.log(res)
     return res.json() //必须序列化  返回的是一个respones对象
)

（4）async 和 awit实现方法

async function f2() {
    var books = await $.get('https://autumnfish.cn/top/artists');
    return books
};
f2().then(res => {
    console.log(res);
})

十、课后总结

***最重要的是学会了控制台的使用（已对上方内容进行了添加补充，主要是代码及其运行结果）

听完课后补充的一些代码，自己动手很重要!写的时候发现了很多小错误~积累经验啦~

1、明白了let、const与var的区别和联系（上面声明变量部分已补充）

2、明白了封装的意思，添加了一个函数封装部分；了解了匿名函数的使用

3、明白了数据类型强弱的区别

4、通过作业练习，能够更好的了解使用函数的声明，调用和形参

5、补充学到了很多异步部分的知识

两个定时器：setInterval（隔一段时间执行一次）和setTimeout（执行一次）
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除，也就是说setTimeout()只执行一次，setInterval()可以执行多次。两个函数的参数也相同，第一个参数是要执行的code或句柄，第二个是延迟的毫秒数。

setTimeOut用法
setInterval(function(){
    执行代码
},时间间隔（毫秒）)

setTimeout(function(){
    执行代码
},时间间隔（毫秒）)

clearTimeout(定时器标识)//清除setTimeout定时器

clearInterval(定时器标识)//清除setInterval定时器

学长讲的很好，学到了很多（撒花~~~）

沫沫.momo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
蓝旭前端预习4

一种运行在客户端（浏览器）的编程语言，实现人机交互的效果。Undefined类型的值只有一个，就是Undefined(未定义)当声明一个变量，但不给这个变量赋值时，它的值就是Undefined使用typeof检查Undefined值时，也会返回一个Undefined。
复制链接

扫一扫