javascript学习笔记

最新推荐文章于 2024-10-18 17:51:23 发布

权律三

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量147

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/qq_44108861/article/details/111409253

版权

let 允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与var关键字不同的是，它声明的变量只能是全局或者整个函数块的。

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 同样的变量!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}
function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 不同的变量
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

反斜杠是一个转义字符。转义字符将特殊字符转换为字符串字符
=== 为绝对相等，即数据类型与值都必须相等
javascript中 x=5 x==“5”//返回true x===“5”//返回false，要求值和类型都相等

HTML 表单实例
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

显式函数绑定
在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

在下面实例中，当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法：

实例
var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // 返回 "John Doe"

JavaScript 异步编程(较为重要)

javascript 事件概念和监听事件（待定）

<a>标签 target属性
_parent：在父窗口中打开链接
_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)

设置 target 属性时， top 与 parent 的打开方式十分类似，需仔细区分。
比如网 A 中镶嵌了 iframe 网页 B，网页 B 又镶嵌了 iframe 网页C。
如果网页 C 中连接设置 target=_parent，则跳转将网页 B 去掉直接在 A 中嵌入网页 C 中链接页面。
如果网页 C 中 target=_top ，则直接跳出所有 iframe 框架，直接转向 C 中链接页面。

jQuery选择器
知识点1
知识点2
ps:

$(div p span) 
//层级选择器div下的p元素中的span元素,注意此处的p元素为以div为根的Dom树中的所有p节点
$(div>p) 
//父子选择器div所有儿子节点中的p元素，比层级选择器范围小

this，表示当前的上下文对象是一个html DOM对象，可以调用html对象所拥有的属性，方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性值。

HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>,<a>, <img>

//<dl> <dt> <dd>都是块级元素，每新增一个都会以新行开始
//带有项目和描述的描述列表
<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

background-color属性设置一个元素的背景颜色。
元素的背景是元素的总大小，包括填充和边界（但不包括边距）。
CSS盒模型
1,执行上下文分全局上下文，函数上下文和块级作用域
2，代码执行流每进入一个新上下文，都会创建一个作用域链，用于搜索变量和函数
3 ##DOM节点类
EventTarget—>Node—>[Document,Element,characterData]
Element—>[SVGElement,XMLElement,HTMLElement]
HTMLElement—>[HTMLInputElement,HTMLAnchorElement,HTMLBodyElement]
##给定节点的全部属性和方法都是继承链的结果

方法是内部方法的最小包装，捕捉器透明地将读取写入操作通过Reflect转发给原始对象

DOMContentLoaded事件(document.readystate=interactive)[文档被全部读取，当DOM准备就绪，文档已被解析完毕]

1,浏览器已完全加载HTML。并构建了DOM树，但像和样式表之类的外部资源可能尚未加载完成。
2,DOMContentLoaded事件必须等待所有脚本执行结束之后才会发生
3，若样式表后面有一个脚本，那么该脚本必须等待样式表加载完成，脚本可能想要获取元素的坐标和其他与样式表相关的属性。因此DOMContentloaded事件在等待脚本时，同时也在等待脚本前面的样式表加载完成。
???:[如果我们在文档加载完成之后]

document.readystate

1.[1]initial readystate:loading
2,[2]readystate:interactive
3,[2]DOMContentloaded
4,[3]iframe onload
5,[4]img onlaod
6,[4]readystate:complete
7,[4]window onload

Sass

Sass是CSS预处理器，可以帮助我们减少CSS重复的代码，节省开发时间
标签选择器，类选择器，ID选择器，多类样式声明，结构选择器,属性选择器，伪类选择器,NOT排除选择器
article :first-child//article后面有空格
article>:first-child//article的第一个子元素
article h1:first-of-type

标签定义HTML页面中的主题变化（比如话题的转移）,并表示为一条水平线。常被用来分割HTML页面中的内容（或者定义一个变化）。

当浏览器加载html时遇到

标签，定义预格式化的文本
文本溢出与空白处理技巧
CSS盒模型中，要想让两个容器的边框紧挨在一起，外容器的内边距和内部容器的外边距都要为0.
box-sizing属性指明width和height属性的具体指向（contentBox OR borderBox）box-sizing:border-BOX时 width||height=content+padding+border
# 单行文本溢出
div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}三个属性配置必不可少
[流式布局]：在相对其原始设计而言过大或过小的屏幕上不能正常显示，在大屏幕手机上显示效果或变成有些页面元素宽度被拉得很长。
[自适应布局]（Adaptive layout）：改变屏幕分辨率可以切换不同的静态局部，但在每个静态布局中，页面元素不随窗口大小的调整发生变化，可把自适应布局看成是静态布局的一个系列。
[Responsive layout]:可看作是流式布局和自适应布局设计理念的融合。
媒体查询+流式布局。通常使用@media媒体查询和网格系统配合相对布局单位进行布局。
[弹性布局]

# CSS3自适应属性：fill-available fit-content max-content[??]min-content
fill-available:元素撑满可用空间，参考的基准为父元素有多宽多高。
max-content：它的宽度和高度，会自动调整为刚刚好容纳下子元素中那个长度最长的元素即可。参考的基准为子元素有多宽多高。
min-content:刚刚好容纳下子元素中那个“最小宽度值”最大的元素即可。【最小宽度值】[比如图片，最小宽度值，就是图片原始的宽高；如果是一串中文，则最小宽度值为单个汉字的宽高；如果是一串英文，则最小宽度值为里面单词最长的那个。]
fit-content:与max-content的区别是，max-content在计算元素的宽高时按照文字不换行计算，如果容纳的content超过父元素，则不换行，直接溢出。而fit-content在包含内容超过父元素后，换行，不会发生溢出父元素的情况。[https://www.cnblogs.com/vickylinj/p/14361230.html]
background-clip:padding-box|border-box|content-box
规定背景覆盖盒子的范围
background-origin:指定背景图像的放置位置
background-repeat:no-repeat|repeat;
background-size:contain|cover;
CSS外边距合并 CSS inline-block CSS溢出，定位，max-width，Dislay，对齐
知乎CSS：vertical-align属性中第三组的图应该可以说明上面的结论
baseline,top,text-top,text-bottom,middle
先有.center行盒子text-align属性为center确定了行盒子的baseline位置。
p元素出现在屏幕上时，它可能包含了多行内容，每行内容由多个内联元素组成(内联标签或者是包含,文本的匿名内联元素)，每一行都叫做一个line-box。
[问题1]:line-height属性对普通行内元素的影响，虽然不会影响外包框的高度，但会影响行内元素在行框中的垂直布局。
行高的定义 #content-area:字体固有属性 #virtual-area 
TO-DO-List：CSS你真的很了解vertical-align吗？4.vertical-align：sub
现象：定义相同的font-size值，在不同的字体下，高度不一样。
解释：每款字体会定义em-square，它是用来盛放字符的金属容器，一般被定为宽高均为1000相对单位，该1000相对单位以font-size为参照（1 em-square=font-size/1000）。不同的字体有不同的Ascent和Descent边界，两者之间的距离决定了该字体元素的content-area(内容区域)。
当line-height的值是一个数字时，其实就是相对于font-size的倍数，而不是相对于content-area，所以line-height很有可能使得virtual-area比content-area矮。
line-Box的高度(line-height)根据子元素的高度（virtual-area）计算出来的。
absolute绝对定位会脱离当前的文档流，影响其他元素的定位。
line-Gap属性值是字体设计师自己定义的，virtual-area的高度是(Ascent-Descent+line-Gap)*(font-size/1000)
vertical-align属性是计算line-box高度的重要属性
进一步发现：line-box的高度为可以容纳下所有line-box内所有line-height的高度。
浏览器认为每个line-box的起始位置都有一个宽度为0的字符，并将其纳入line-box的高度的计算中。(是不是和下面两个注释讲的一个意思)

 
 

 
 

用父元素baseline高度加上父元素中x-height的一半的高度
来对齐当前元素的垂直方向的中点。
当我们创建了一个元素，但尚未将其插入文档中，或者它或他的祖先具有display：none时，offsetParent为null，并且offsetWidth和offsetheight为0。
scrollLeft/scrollTop:从元素的左上角开始，滚动出元素的上半部分的
width/height.若修改该属性，浏览器会滚动对应的元素。
let scrollBottom=elem.scrollHeight-elem.scrollTop-elem.clientHeight;//完全高度减去已滚出顶部的高度减去开见部分的高度得到的结果就是滚动出来的底部的部分。
.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
/* 如果有多行文本，请添加如下代码：*/
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}垂直居中多行文本

elem.getBoundingClientRect()返回DomRect类的对象
elementFromPoint(x,y)
为了显示元素附近的东西，我们可以使用getBoundingCilentRect来获取其坐标，然后使用CSSposition和left，top。right，bottom。
文档相对坐标从文档的左上角来开始计算，而不是窗口，在CSS中，窗口坐标对应于position：fixed，而文档坐标与顶部的position:absolute类似。
#获得当前页面的滚动：
1，document.documentElement.scrollLeft/scrollTop
2,window.pageXOffset/window.pageYOffset
TBD:元素章节“把note放在元素内部”
#with async,in the head

scripts marked defer are executed right after the dominteractive event,which happens after the HTML is loaded,parsed and the DOM is built.
CSS and images at this point are still to be parsed and loaded.脚本到底会不会等待CSS样式表加载完成再执行。
async 

document.body.setAttribute('onclick',"alert(1);aler(2");

浏览器读取html特性时，浏览器将会使用特性中的内容创建一个处理程序。上面的标记会生成下面这个属性
button.οnclick=function(){
  sayThanks();
};
elem.addEventListener("click",function(){
  sayThanks();
});

默认导出的实体可以没有名称(如下),因为每个文件只有一个export default，因此不带花括号的import知道要导入的内容是什么
export default class{
  ...
}
重新导出(re-export)
在声明一个class/function/...之前
export [default] class/function/variable...
独立的导出：
export{x[as y],...}
重新导出：
export{x[as y],...}from "module"
export * from"module"
export {default [as y]}from "module"
强制类型转换/隐式类型转换
CSS布局：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout
溢出内容处理：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content
 white-space空白处理，break-spaces对行尾空格的处理。
 promise实现，function视频，webpack视频
 #event-delegation
 目标元素的捕获和冒泡阶段的事件处理是一体的吗？
Promise.all(...)
重写整个原型会切断最初原型与构造函数的联系，但实例引用的仍然是最初的原型。
从源对象访问器属性取得的值，比如获取函数，会作为一个静态值赋给目标对象。换句话说，不能在两个对象之间转移获取函数和设置函数。
默认参数作用域与暂时性死区
Object.assign()方法：对每个符合条件的属性（可枚举并且自有属性），该方法会使用源对象上的[[Get]]取得属性的值，然后使用目标对象上的[[Set]]设置属性的值。(若有显式的getter和setter则调用显式的)
ECMAScript中所有函数的参数都是按值传递的，这意味着函数外的值会被复制到函数内部的参数中。
1,任何实现iterable接口的数据结构都可以被实现Iterator接口的结构“消费”，
2,迭代器是按需创建的一次性对象，每个迭代器都会关联一个可迭代对象，而迭代器会暴露迭代其关联可迭代对象的API。
3,实现可迭代协议的所有类型都会自动兼容接受可迭代对象的任何语言特性。
4,可迭代协议要求同时具备两种能力：支持迭代的自我识别能力和创建实现iterator接口的对象的能力。
可以迭代可迭代对象，也可以直接迭代迭代器。只不过前者要多一步调用可迭代对象[Symbol.iterator]属性来获取迭代器的操作。
1,在容器上放一个处理程序。
2，在处理程序中——检查源元素
3，事件发生在感兴趣的元素内，那么处理该事件。
# function declaration hoisting in block scope
#提前终止迭代器