在百度前端技術學院作任務的總結

時間 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自己能訪問。