《撩课-玩转JavaScript》笔记

《基于撩课-玩转JavaScript》
1、 我想输出正三角形，但是为什么输出的是平行四边形？
 
快捷键和JavaScript技巧
0、快速/…/注释：Ctrl+Shift+/
1、常用的弹窗: 前面加window.也是一样的效果
alert() 弹出个提示框 （确定）
confirm() 弹出个确认框 （确定，取消）
prompt() 弹出个输入框 让你输入东西
2、三个等号：一个等号是赋值操作，
==， 两边值的类型相同时，等同于三个等号；不同的时候，要先进行类型转换，再比较。
三个等号先判断类型，如果不是同一类型则为false。不做类型转换，类型不同的一定不等。
3、break是跳出循环，而continue是跳出本次循环，然后继续下一次循环。

4、利用能否进入if判断的方式来筛选所需要的奇/偶数
输出的是偶数

5、 for死循环等价于while（1）
6、网页在线画图工具：https://www.processon.com/
7、vw：视窗宽度的百分比（1vw代表视窗的宽度为1%）
vh：视窗高度的百分比
8、拿所有的节点就不要下标，拿单个节点就要加下标。例如：拿第一个img节点

9、关于function $(id)的定义中出现的问题：
9.1
这里的id必须要是String类型，而传进来的已经是带引号的String。所以定义函数时不要再加引号了

第一章
JavaScript是什么-前端开发的脚本语言（解释型语言 ）
解释型语言和编译型语言的主要区别：
JavaScript应用场景

JavaScript的组成
JS、HTML、CSS三者的关系
JS书写格式-除了用于处理CSS语句，其他时候都放在尾部
（1）行内式
（2）页内式–写在文档的尾部–除非添加预加载函数
因为加载顺序是从上往下，需要先加载HTML，再执行JS，否则JS代码无法完成交互和会造成加载卡顿。
预加载函数：等HTML加载完毕后，再加载JS语句。可以让JS语句的位置没有限制。
（3）外链式-用得最多
JS常见输出方式
（1）网页弹窗
（2）控制台输出
（3）直接向body里输出内容
后面两种用得不多
（4）网页弹出输入框
（5）window.confirm方法
JS基础语法（上）
定义以及初始化变量

变量在内存空间里的体现形式
定义变量：①在栈区开辟空间，②赋值就是将具体的数据保存到该空间，③通过变量名称可以关联该空间，④在外界可以通过变量名称取到该空间的数据。
面试题-不借助中间变量交换两个变量的值

JS数据类型
null和undefined没有tostring方法，调用会报错
null和undefined应该调用String()方法，直接输出字符串
JS的三种流程结构
1.顺序结构2.选择结构3.循环结构
创建数组的原理
右边的new Array是在堆区开辟内存空间，存储数组的数据，堆区的每块存储空间都有自己的地址，栈区存放着堆区存储空间的地址，变量名保存的是地址，可以通过地址找到堆区的空间。
数组可以存任何类型的数据
JS中的数组可以任意改变长度
减小数组长度：会自动删除长度之外的元素。
例如让长度为4的数组的长度变为2
增加数组长度：会自动填充空的元素。
例如让原来长度为4的数组的长度变为6

取出数组指定位置的元素（很巧妙的用法！）
例如去第三个元素（与Java一样）

为什么可以这样使用动态赋值？
newarr.length的值在第一次进入if语句的时候为0，对应了该数组的第一个位置。newarr[0]=arr[1]；此时把第一个非0的值赋给newarr的第一个位置，然后第二次进入if循环的时候，newarr.length的值为1，对应newarr[]的第二个位置。依次循环下去，就实现了动态赋值。
JS中return的作用
①结束函数的运行②返回结果的值
变量的作用域问题

①因为先执行函数fn3（），所以先输出的是倒数1-3行的值
②num2和num3前面没有var，所以是全局变量，所以第3-4行输出的内容为100，而第2行会报错（num1是fn3函数里的局部变量，在第2行没有被定义，所以无法被调用）
new关键字
（1）new和构造函数一起使用才有意义
（2）构造函数：
1）是一种特殊的函数
2）用于创建类对象，首字母要大写
3）和new一起使用才有意义
（3）new做了哪些事情：
1）new在内存中创建一个新的空对象
2）new会让this指针指向这个新的对象
3）执行构造函数，给这个新对象添加属性和方法
4）返回这个新对象
var p = new Person(‘小明’, ‘20’, ‘男’);
new Person(‘小明’, ‘20’, ‘男’);

1）执行Fn（）时，是普通函数调用。this指向的是window对象，所以输出window
2）执行 new Fn()则是构造函数的用法，this指向当前的对象Fn

var p = new Person(‘小明’, ‘20’, ‘男’);详细分析过程

1）new在内存中创建一个新的空对象
new Person先在堆区开辟空白的内存空间，里面暂时没有数据。
new Person在栈区空间里有地址，将该地址放入栈区。也就是栈区的地址指向了堆区的空间
2）new会让this指针指向这个新的对象
this指向了栈区的地址，间接指向了堆区的person（this指向地址，地址指向堆区空间）
3）执行构造函数，给这个新对象添加属性和方法
执行构造函数也就是实例化了Person，并且给其赋值，最后返回这个对象
4）返回这个新对象
返回对象相当于返回this，因为this指向地址，而地址指向堆区空间。this返回给等号左边的变量，因为变量指向了this
Window 对象
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
this关键字
this是一根指针（上图中的箭头就是指针，指向了内存中的某一个区间）
（1）普通函数执行，内部this指向全局对象window
（2）函数在定义this的时候是不确定的，只有在调用时才确定
（3）如果函数作为对象的方法，被该对象所调用，那么函数内的this则指向该对象
（4）构造函数中的this是一个隐式对象，所有的属性和方法都挂载到这个隐式对象上，然后通过new调用，从而实现了实例化
基本数据类型在内存中的存储

①str1指向栈区开辟的一块空间存放数据‘小撩’。
②复制一份str1的内容，并让str2指向新复制的内容。
③str1=’AAA’;改变了第一块空间内的值。而这一操作对第二块空间无任何影响，因为它们是独立的，所以就会有不同的输出内容。

虽然改是p1的属性，但因为p2指向的也是同样的person对象，所以输出的是‘大撩’和true
复杂数据类型在内存中的存储

var p2 = p1;相当于复制了一份p1的地址并放在栈区新开辟的内存空间里。虽然内容完全相同，但p1和p2是相互独立的
基本类型作为函数的参数

num1和num2都是存在栈区，而作为参数的基本数据类型n1和n2也是存在栈区，这四者是相互独立的。
复杂类型作为函数的参数

第一个p.name输出var p这个对象的属性‘小撩。’
第二个p.name输出的是刘德华。因为func§;做的是将对象p作为参数传入func函数，然后执行person.name=‘刘德华’;修改了其属性。所以。
内置对象
Array对象
Math对象
String对象
Date对象
基本数据类型只涉及栈，而复杂数据类型堆和栈都涉及
第五章-JS正则表达式精讲

正则表达式是对字符串操作的一种逻辑公式，用特定字符的组合形成“规则字符串”，并且可以实现对字符串的过滤逻辑。
1）匹配

2）提取
3）替换
第六章-JS特效系列
Web APIs

（1）BOM-浏览器对象模型-一套操作浏览器功能的API
可以通过BOM操作浏览器窗口，比如弹出框、控制浏览器跳转等。
（2）DOM-文档 对象模型-一套操作页面元素的API
DOM可以把HTML看成是文档数，通过DOM提供的API可以对树上的节点 进行操作。
NodeType节点类型的值