MIT web dev 学习笔记 3

2025-05-29

本笔记主要记录MIT Web Development Crash Course课程的笔记,本节主要记录的是第一节课程的JavaScript的部分,课程链接在here

1 js简介

p.s. better for not fresh hand

JavaScript的目的是什么?

image-20250529154027798

上节课已经学到了,html是网页的骨架,css是网页的装饰,那么js是用来解决什么的呢?

js类似于肌肉和器官来保证整个网页的顺利运行——操纵网页内容的程序语言,让网页富有交互性

运行的环境:浏览器的console,按住ctrl+shift+j

2 js的数据类型

image-20250529154846871

需要注意的是,js没有float和int之分,所有的这些都被归结在number下

另一个需要考虑的是,js有Null和Undefined的两种tricky的东西

3 js的operator

对于number的加减乘除等操作是很正常的,另外对字符串的相加操作也是如常的,除此之外,对于Boolean的产生也是基本和python一致(不等于和等于是三个符号)。

image-20250529161259220

不难发现这里的判断是否相等用的是===,不相等则是用的!==

这里需要讨论一下=====的区别

对于一般的编程语言,一般都用==来判断这俩变量是否指向同一个内存地址,这个是在js中是通过===实现的,而一般的==在js里则进行的首先是type一致化的操作,然后再进行比较,这就会导致很多和直觉相左的结果:

image-20250529162015499

例如这里的2=="2"就会先将2"2"转换成相同类型,例如都转化为"2"然后再比较,这时两者是相等,所以返回的是true

由于上述机制的存在,所以我们比较时总是使用三重符号,而非双等号这种‘

对于array呢?

image-20250605212716097

image-20250605212732291

即便内容一样,但他们是存在两个不同的存储对象的,所以对应的指针也是不一样的,因此===false

因此我们想要copy一个array并不能直接使用等号:

image-20250605213023050

而是得用spread operator:

image-20250605213040604

4 js 基本语法

需要注意的是,每行语句的结尾都需要一个分号。与python不同的是,js是缩进不敏感的,对于代码块的分辨来源于大括号{},注释则是通过//实现

对于js的变量定义,需要申明,使用let语句申明,同时变量的命名需要使用驼峰命名法才行,不建议使用下划线的命名方式

image-20250529162851460

对于常量的定义则是通过const语句实现

image-20250529163149528

为什么要有变量和常量之分?为了安全coding,防止某些常量被修改影响后续程序。如果试图要改变const常量,js回返回错误信息

需要注意的过去对于变量定义还有一个定义方式var,区别在于var的作用域是仅仅被函数限制的(函数内变量),而let的变量是被大括号所限制的

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 0, 1, 2
}
//setTimeout是异步函数,如果是var的化,循环结束才会执行回调,此时回调是循环结束之后进行的也就说i全都是3了
function test() {
  if (true) {
    var a = 123;
  }
  console.log(a); // 123,a 在整个函数内都可见
}

所以为了更清晰的变量作用域,请不要使用var

5 null和undefined

undefined表示没有分配内容,例如对于变量可以只声明而没赋值

null则表示的是没有值

为了清楚的了解变量的值,我们可以使用console.log()的方式实现类似于print的效果

结构化字符串的实现:

let a=1;
let b=2;
console.log(`a+b=${a+b}`);

另一种调试的方法是使用alert函数

6 array in js

在js中,array类似于python的list但是其中的元素可以是任何一种数据类型

image-20250529174906305

也可以很容易的实现获取,删除,增加,以及替换

pets.push("rabbit"); //add rabbit in the end
pets.pop(); // delete element from the end

7 conditionals, loop in js

判断语句:

if (hour<12){
    console.log("Good Morning");
}else if (hour<16){
    console.log("Good Afternoon");
}else{
    console.log("Good night");
}

循环语句:

image-20250605212151901

for循环则如下:

image-20250605212212967

被遮挡的部分是pets[i]

除此之外也可以通过以下的方式实现:

image-20250605212320533

直接遍历每个元素,而非通过索引再实现

8 object properties

jsobject propertiespythondict很接近

image-20250605212536049

9 functions

使用()=>{}的方式构造,但问题在于并不能called,所以需要加上name

image-20250605213155916

我们可以变为:

image-20250605213440721

所以我们如果要call这个函数,只需要:

image-20250605213532170

除此之外,其实我们可以把function作为another function的输入,这称之为callback

image-20250605213915709

B是得到function的return结果,而不是function本身

正确答案是A,C

image-20250605214057786

除此之外,还有class,不过不太常用于本课程