在百度前端技术学院作任务的总结

时间 2019-12-08

标签百度前端技术学院任务总结繁體版

原文原文链接

Task1（第一天）：css

定个大目标——我要在秋招拿到心仪的offer。html

Task4（第四天）：前端

关于background-image，若是想获得两个相同的背景图（好比左上角一个logo，右上角又一个logo），怎么办？这么办：background-image:url(baidu.jpg),url(baidu.jpg);。而后background-repeat的值设为no-repeat（设置1个no-repeat就好，会应用到2个url上）,而background-position的值设2组，用逗号隔开。

Task5（第五天和第六天）：

1. 输出的空格可累加。正则表达式

2.改变<dd>的缩进量用margin。express

Task6（第七天到第八天）：canvas

1.flex属性的第一个参数设置为0则意味着不参与分配剩余的可用空间。数组

2.属性calc()还能这样用：width: calc(100% - 100px);，能够用来实现一个左侧固定宽度、右侧根据浏览器宽度进行自适应变化的两栏布局。注意减号先后要有空格。浏览器

3.绝对定位的元素不会干扰页面上其余元素的位置。可是，若是没设置top、bottom、left或right，那绝对定位的元素的位置会被页面上其余元素影响。app

4.通常状况下，盒子会忽略height的百分比设置，除非盒子是绝对位置。less

5.body {margin: 0;}可让开发者工具中的盒模型的offset为0。

6.4px问题：inline-block元素之间即便把margin设为0也仍有间隙。解决办法之一：把margin设为负的，通常可设为-0.25em。

7.flex属性：决定如何分配剩余空间。不设置的话则flex items不会填满整行。

8.flex item之间彷佛不会发生外边距崩塌（我浏览器用的是edge）。

Taks7（第九天到第十一天）：

1.section与article：通常来讲，当元素内容明确地出如今文档大纲中时，section 就是适用的；不管从结构上仍是内容上来讲，article 自己就是独立的、完整的。有个最简单的判断方法是看这段内容脱离了所在的语境，是否仍是完整的、独立的，若是是，则应该用article标签。对于一段主题性的内容，则就适用 section，而假如这段内容能够脱离上下文，做为完整的独立存在的一段内容，则就适用 article。原则上来讲，能使用 article 的时候，也是可使用 section 的，可是实际上，假如使用 article 更合适，那么就不要使用 section 。

2.如何把背景图片恰好彻底显示出来？答：把盒子的width和height设成背景图片的宽度和高度。

3.如何在背景图片上加一个滤镜（好比透明度为0.6的黑色：rgba(0,0,0,0.6)）？答：把背景图片设置在background-image、把滤镜设置在background-color里，是不行的，由于background-color永远在background-image的下面，因此不可见。解决办法是把二者都设置在background-image里（在background-image里，写在前面的在上面，因此把滤镜写前面），可是background-image里不能直接用rgba(0,0,0,0.6)，由于这是一个color，因此咱们能够利用梯度，改写成

linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.6))就能够啦。不过用filter更简便。

4.心情：第一次用overflow属性来把隐藏不想看见的内容（要和width属性配合），真是激动人心。

5.网页写好后改图片的文件名，由于搜索引擎也把图片的文件名计入 SEO，所以应该给图片取一个描述性的文件名：dinosaur.jpg 比 img835.png 要好。不过做为背景的图片应该不须要取这样的描述性的文件名。

</section>

</section>

</article>

以上这种状况，若是使用这样的选择器：article img:nth-of-type(1)，那结果是2个<img>都会被选中，由于<img>此时不是<article>的直接子元素。

7.设置了定位属性（除了position:static）的元素，能够经过更改z-index来更改元素的先后位置。

8.CSS滤镜（ filter）属性提供图形特效，好比亮暗、模糊、锐化和变色等，一般被用于调整图片、背景和边界的渲染。好东西啊，好比filter: brightness(0.3)能够调整图片的亮度为原来的30%，以前我还傻乎乎地用一个背景（好比rgba(0, 0, 0, 0.7)）挡在图片的前面来调整亮度（要结合第7条的方法），很是麻烦。

9.lang属性的设置会影响文本格式，好比lang="zh"的文本格式和lang="en-US"的不同，不过不设置lang的文本格式和lang="en-US"的彷佛同样。

Task8（第十二天到第十五天）：

1.假设A选择器的专用性比B选择器的专用性高，可是A选择器选的是父元素而B选择器选的是子元素，则子元素的样式仍是由B选择器来决定。

2.绝对定位：咱们能够将元素相对于页面的 <html> 元素边缘固定，或者相对于离元素最近的被定位的父元素（除了static定位）。

3.必定要注意像“A B”这样的选择器是指A下的全部B，即便不是直接子元素。若是不注意，以后在B下再添加B就会出问题了，由于你还觉得以前写的“A B”规则没影响到B下的B呢。因此若是你要再B下再添加B，则以前最好用“A>B”。

4. CSS巧妙实现分隔线的几种方法：http://www.daqianduan.com/4258.html

5.滥用相对定位来布局彷佛不可取（由于相对定位不会改变文档流，即不会影响其它元素的位置），应优先使用padding和margin。

6.若是父元素“紧密”包裹着子元素，那要移动子元素的话就移动父元素。好比：<a><img></a>。

7.按钮用<button>，别用<div>和<span>。

8. <figure> and <figcaption>，好东西，有利于减小<div>和<span>的使用量。

Task11（第十九天）：

1.querySelector()的参数能够是你在CSS中学到的各类选择器，而后选择第一个匹配的。

Task12（第二十到第二十一天）：

1.window.onkeypress事件可用来监听是否有键按下；若是想只监听某一个键，要用if语句判断e.keyCode。默认是监听全局整个页面是否有键按下，若是只想监听当某个元素被聚焦时是否有键按下，则能够用if语句判断当前激活的元素document.activeElement.id是否等于你想要监听的元素的id。PS：回车是13，Esc是27。

2.CSS：display: none可使元素隐藏。

3.原本觉得能用e.target就也能用this，如今发如今事件委托中只能用e.target。

4.方法setTimeout()，设置一个定时器，该定时器在定时器到期后会执行一个函数，栗子（来自MDN）：

　　HTML：

　　 <p>Live Example</p>
　　<button onclick="delayedAlert();">Show an alert box after two seconds</button>
　　<p></p>
　　<button onclick="clearAlert();">Cancel alert before it happens</button>

　　JavaScript：

　　var timeoutID;
　　function delayedAlert() {

　　 timeoutID = window.setTimeout(slowAlert, 2000);
　　}
　　function slowAlert() {
　　alert('That was really slow!');
　　}
　　function clearAlert() {
　　window.clearTimeout(timeoutID);
　　}

　　该栗子在网页中设置了两个简单的按钮，以触发 setTimeout() 和 clearTimeout() 方法：按下第一个按钮会在 2s 后显示一个警告对话框，并将这次 setTimeout 的延时 ID 保存起来。按下第二个按钮能够取消此次延时调用行为。setInterval()的用法和setTimeout()差很少（interval意为间隔）。

5. 在JavaScript中，布尔属性（好比disabled）不能用style来设置（由于布尔属性不属于style），能够用setAttribute来设置——这彷佛是段废话。另外，不管disabled的值是什么（包括false），结果都是disabled。更简便的方式是用.disabled等于一个字符串来设置，只要不是空字符串，结果就是disabled。

6.一个字符串和一个数字相减，会自动把字符串转化为数字；而！！！一个字符串和一个数字相加，是把数字转换为字符串！！！

7.css sprite：一种网页图片应用处理方式，目的是节省带宽和存储空间，但彷佛很麻烦。

8.用CSS animation实现动画彷佛方便简单（比起用setInterval()）。

9.函数parseInt()：可用于让字符串参数"1234blue"返回数字1234。

Task13（第二十二到第二十四天）：

1.判断单选按钮是否被选中：看radio.checked的返回的布尔值（radio是在JavaScript中的引用了单选按钮的变量）。另外，Element.hasAttribute()彷佛只能检查HTML中有没有明确写的属性，像checked这种布尔属性，即便没写也是有的，但检查不出来。

2.正则表达式：\s表示空格，+表示一个或多个，()表示捕获组，.表示任意字符，\n表示与模式中的第n个捕获组匹配的匹配项。

3.for-in语句：可用于枚举对象的属性，返回的是表示属性名字的字符串。

4.大坑：string类型的变量能够用方括号访问其中的字符，可是没法用经过方括号修改其中的字符，缘由是：ECMAScript中的字符串是不可变的，也就是说，字符串一旦建立，它们的值就不能改变，要改变某个变量保存的字符串，首先要销毁原来的字符串，而后再用另外一个包含新值的字符串填充该变量，因此用方括号改变部分字符是行不通的。

5.大坑2：对于一个对象，你能够用方括号来建立新属性。而后你可能会想固然地觉得若是连续用两个方括号就会先在对象下建立一个新对象，而后在新对象下再建立一个属性——这样是不行的。即便第一个方括号中的是原对象原本就有的属性，也要该属性是一个对象才行得通，若是是字符串，那第二个方括号至关于访问这个字符串中的字符。

Task14（第二十五到第二十七天）：

1.属性. selectedIndex是select中被选中的option的索引。

2.使用.querySelector不必定非得是document，别的JavaScript中的变量也能够的。

3.移除子结点能够用.remove()，这样就不须要用麻烦的. removeChild()（后者要明确写出父结点）。

4.使用延迟脚本或异步脚本能使刷新浏览器后select的状态回到默认状态（而不是刷新前用户更改了的状态）。

Task15（第二十八到第三十天）：

1.写代码前画流程图。

2.响应键盘按键的事件keyup, keypress, keydown以及input不仅是能够设置在window上，好比还能够设置在input上。keyup，会响应回车键、ESC键、上下左右键，长按只形成一次响应；keypress，会响应回车键，长按会形成屡次响应，和中文输入法有关则不响应；keydown，会响应回车键、ESC键、上下左右键，长按会形成屡次响应；input，不响应回车键、ESC键、上下左右键。文本输入框通常用input。

3.querySelectorAll返回的结果是NodeList，不是正常的数组，好比没有indexOf方法。

4.属性 previousSibling返回当前节点的前一个兄弟节点（可能不是元素）,没有则返回null；previousElementSibling 返回当前元素在其父元素的子元素节点中的前一个元素节点。另外还有nextSibling和nextElementSibling。

5.若是一个元素上有两个事件，好比一个input元素上的input事件和keydown事件，则按下键盘时，彷佛是后面的事件处理器先执行。

6.全选用户输入（好比text类型的input元素）用select方法。

7.后续咱们的代码可能会愈来愈多，如今一堆东西的代码都放在一个文件中，实在是不方便代码维护，因此，请你把你的代码进行拆分，在你的项目根目录下，创建一个scripts目录，建立几个js文件，把对应的代码放入。对了，页面入口主流程的代码，好比一些初始化的工做，放到一个叫作app.js的文件中

Task16（第三十一到第三十三天）：

1.let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.

2.事件委托（ Event delegation）：冒泡还容许咱们利用事件委托——这个概念依赖于这样一个事实,若是你想要在大量子元素中单击任何一个均可以运行一段代码，您能够将事件监听器设置在其父节点上，而不是每一个子节点单独设置事件监听器。

3.Element.children表示子元素；Element.childElementCount表示子元素的个数。

4.函数的定义位置（用等号的那种定义方式除外）和使用位置谁在前谁在后无所谓，前提是在同一个js文件中。

Task17（第三十四到第三十六天）：

1.大坑：建立和svg相关的元素时，要使用createElementNS函数并传入svg的命名空间，不然建立出来的节点默认为html dom而不是svg dom。这样的话，建立出来的和svg相关的元素就不会显示。

2.给每一个标签都加上一个id属性是个好主意，由于这样你就能在咱们的脚本中很容易的找到它。

3.load事件：当一个资源及其依赖资源已完成加载时，将触发load事件。

4.edge的F12的控制台的错误提示不行啊，老是不许确，有时不只位置不对，错的缘由也不对。

5.HTML中的元素的属性和CSS是不同的，能够把整个CSS当作是元素的其中一个属性，即style。

6.<canvas>元素用于生成（动态更新的）图标很方便。

7.mouseover事件：鼠标滑过。

8.清空canvas画布的方式：canvas每当高度或宽度被重设时，画布内容就会被清空，因此，能够这样来清空：

canvas.height = canvas.height;。

9.在调试JavaScript时，遇到断点而暂停的时候，也能够在控制台里输入命令。

10.大坑：内容是数字的字符串之间比大小，你觉得会按数字来比？

11.<canvas>不能设置百分比width和height（不是指CSS的）。若是想让<canvas>根据视口调整大小，那就要用window.onresize事件动态改变<canvas>的绝对大小和用window.innerWidth计算出<canvas>的绝对大小。

12.有时用margin: 0 auto;不能居中时，可能须要的不是margin: 0 auto;而是text-align: center;。

13.数组的slice方法能够返回数组的部分连续内容。

14.toString()是方法，几乎每一个值都有的方法，除了null和undefined；在不知道要转换的值是否是null和undefined的状况下，还可使用函数String()，效果是：若是值有toString()方法，则调用；若是值是null或undefined，则返回'null'或'undefined'。

Task18（第三十七到第三十八天）：

1.blur事件：失去焦点时发生。

2.在函数内，定义和函数外同名的变量并对其执行操做（好比赋值），不会影响函数外同名的变量，只不过在函数内就用不了函数外同名的变量。

3.重大发现：class的值能够是中文！

4.用for循环给一大堆元素加事件监听器时在循环体内要用this或e.target，不然事件发生时事件处理器处理的就不是发生了事件的元素，而是for循环的最后一个元素。

5.若是在一个函数体内this用着用着就没了（好比this.parentElement.textContent = '';this.parentElement.textContent = temp;中的第二个this就是null），但又还想用，则能够先把它存起来（好比var parent = this.parentElement;，以后用parent代替this.parentElement就行了）。

6.一个 EventTarget 上的 EventListener 被移除以后，若是此事件正在执行，会当即中止。

7.若是父元素和子元素有相同的事件监听器（事件处理器可能不一样），好比click，并且想触发子元素事件时不会触发父元素的事件（由于冒泡因此默认状况下会触发父元素的事件），就要用e.stopPropagation();阻止冒泡。

8.想让一个事件触发等同于另外一个事件触发，把后者放在前者里就能够了。

9.若是点击事件里面还有个点击事件，然后者所在的元素是前者的父元素，那前者的触发会致使后者的触发，由于冒泡。

10.body元素不是整个页面，html元素才是。

11.火狐的F12，即便用步入也不会进入冒泡触发的事件的函数，而是直接跑完，除非在冒泡触发的事件的函数里加断点。另外，即便设了断点，关掉F12就能防止遇到断点。

12.大坑：能够用 addEventListener()对一个元素反复添加相同的事件监听器（用X.onY不行，后者会覆盖前者），因此相应的事件发生一次时，将执行屡次相同的事件处理器。

13.若是遇到了一种状况，而this就是被设计出来专门处理这种状况的，才用this，不然能不用就不用（好比考虑能不能用querySelector代替），由于this麻烦。

Task19（第三十九到第四十一天）：

1.location返回的是一个对象，location.hash返回的是一个字符串。

2.字符串的replace()方法不会改变原字符串，只是返回修改后的字符串。

3.函数外的变量的定义都集中放在一个js文件里（省得重复定义）。

4.大坑：checkbox.setAttribute('checked', '');和checkbox.checked = ' ';的效果在Edge上不太同样，后者可能有BUG，因此尽可能用前者。红宝书推荐用后者。

5.pushState彷佛比location+hash好用。

6.浏览器彷佛不会把 history.state存在本地，因此重启浏览器后history.state为空。

7.冒泡有时是个大坑，有时可能还不如遍历全部子元素来设置事件监听器（思绪清晰，虽然性能差了），而不是把监听器设置在父元素上（容易出叉子，由于除了你本想设置监听器的子元素，该父元素的其它子元素也会由于冒泡而触发监听器；并且，若是你想经过改变监听器们的顺序来决定同一个子元素的监听器们的执行顺序，则不管怎么排，要冒泡的监听器都是最后执行）。举个例子，有一组子元素，子元素包括一些<label>和一些<input>，<label>和<input>一一对应，你想给<input>设置监听器，好比点击<input>时触发事件，若是你把监听器设置在父元素上，则点击<label>时会触发两次事件，一次是点击<label>冒泡到父元素上触发的，另外一次是由于点击<label>的同时会产生点击<input>的效果（由于它们相关联），那<input>又会冒泡到父元素上触发一次事件，因此一共触发了两次，这并非咱们想要的，咱们只想触发一次。因此，情形简单时再用事件委托可能比较好。不过，再次强调：设置的监听器越多，页面的总体运行性能就越差。

8.大坑：用 checkbox.checked = ''取消复选框的选中状态后，不能用checkbox.setAttribute('checked', '')来从新选中（用checkbox. removeAttribute('checked')取消选中的才能够），只能用 checkbox.checked = ' '来从新选中。经过这点能够看出，JavaScript的变量的属性（property）的优先级凌驾于HTML的属性（attribute）之上，即设置了前者的话后者怎么设置都无效了。

Task21（第四十四到第四十六天）：

1.设Person为一个构造函数，则在定义Person时：在Person内部的用相似this.name定义的，只有Person的实例能访问；而在外部用相似Person.getInstance()定义的，只有Person自己能访问。