整理

代碼/整理

術語整理

代碼/整理

• CSS:層疊樣式表
• CSS中的元素樣式設置叫做類選擇器：.be-text{color:blue;}
• 直接在元素當中添加屬性的叫做內聯(lián)樣式（inline style）<h2 style="color:red"></h2>
• 類選擇器的集合<style></style>稱為元素選擇器
• a標簽鏈接的外部頁面<a herf=""></a>錨元素
  * a標簽鏈接的默認占位符# <a herf="#"></a>

HTML/CSS概念知識點整理

代碼/整理/概括

文本屬性 | html

• <rl></ul>無序號列表典鸡，例

<ul>
    <li>milk<li>
    <li>cheese<li>
<ul/>   

    * 可以通過[list-style-type](https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type)定義頭部圓點樣式指么；

• <ol><ol/>有序列表慧起，例

<ol>
    <li>milk<li>
    <li>cheese<li>
</ol>

Form表單 html

• <input type="text">輸入框標簽
  * placeholder輸入框默認值（非標準語句蟀俊，應減少使用）嚷硫，例<input type="text" placeholder="請輸入文字">
  * action數(shù)據(jù)上傳服務器类垫，例<form action="/img/png"></form>
  * required必填字段培廓，偽類。例<input type="text" required>
  * optional偽類提供可選外觀樣式
  * radio單選按鈕误褪，例<input type="radio">
  * 所有關聯(lián)的單選按鈕都應該使用相同的 _name屬性,例

                <label><input type ="radio" name = "indr">indr</label>
                <label><input type ="radio" name = "indr">ggdr</label>

                    * [<label>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label)
    * `checkbox`**復選框**责鳍，例`<input type="checkbox">`
            * 嵌套在 ~<label>中使用~
            * `checked`**默認選中**，[checked](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:checked)振坚。例`<input type="cradio" checked`
                    * 可以用單選及復選兩種情況下
    * `submit`**提交按鈕**元素的value值薇搁，例`<button type = "submit">this button submit the form</button>`
            * 會有一個默認的按鈕樣式斋扰，也可以通過CSS調整樣式

常用標簽 | html

• <div>盛裝其他元素的容器包含所有的 _全局屬性

全局屬性
[[全局屬性]]是所有HTML元素共有的屬性; 它們可以用于所有元素渡八，即使屬性可能對某些元素不起作用。

border 邊框 | CSS

• border-color元素邊框传货，例：.sye{boder-color:red;}
  * 也可以寫成類似border-top(方向)-color的形式,例.sye{border-color: red yellow green blue;}

• border-width邊框寬度屎鳍，例：.sye{border-width: 1px;}。關于單位可以關注[[數(shù)值單位]]

• border-style邊框樣式问裕，具體樣式參考[[邊框樣式]]逮壁，例：.sye{border-style:solid;}
  * 一般情況下solid樣式比較多；

• border-radius圓角粮宛，例：.sye{border-radius:4px;}
  * 有不同的寫法例：
  * border-radius: 30px; 四個角都是圓角
  * border-radius: 25% 10%;第一個角和第三個角有圓角（左上角右下角）
  * border-radius: 10% 30% 50% 70%;四個角不同的圓角（從左上角順時針）
  * border-radius:10% / 50%;解釋
  * 像素和百分比比較多
  * 百分比作為單位出現(xiàn)時窥淆，語句應盡量在 _border-width后面，結果會根據(jù)先后順序有不同樣式展示

background 背景 | CSS

• background可以直接寫屬性巍杈，例
  * background: green; //綠色背景
  * background: content-box radial-gradient(crimson, skyblue); //徑向漸變
  * background: no-repeat url("../../media/examples/lizard.png"); //圖片背景
  * background: left 5% / 15% 60% repeat-x url("../../media/examples/star.png"); //重復圖片
  * //疊層圖片

     background: center / contain no-repeat url("../../media/examples/firefox-logo.svg"),
            #eee 35% url("../../media/examples/lizard.png"); 

• background-color背景色屬性值為顏色值或者transparent關鍵詞二選一忧饭。例background-color:red;

• background-clip設置元素的背景（背景圖片或顏色）是否延伸到邊框下面background-clip.例
  * background-clip: border-box //背景延伸到邊框外沿（但是在邊框之下）。
  * background-clip: padding-box //邊框下面沒有背景筷畦，即背景延伸到內邊距外沿词裤。
  * background-clip: content-box //背景裁剪到內容區(qū) (content-box) 外沿刺洒。
  * background-clip: TEXT //背景被裁剪為文字的前景色(只有chrome支持)。
  * background-clip: inherit //繼承

• background-image為一個元素設置一個或多個背景圖(在z軸上堆疊吼砂，第一個指定的圖像最接近用戶)
  * 即使有圖片情況下也應該繪制背景色———用于網絡中斷情況下使用

• background-origin**規(guī)定了指定背景圖片 _{background-image} 屬性的原點位置的背景相對區(qū)域. **
  * background-attachment 為fixed時逆航，該屬性將被忽略不起作用。
  * background-origin: border-box //背景圖片的擺放以border區(qū)域為參考
  * background-origin: padding-box //背景圖片的擺放以padding的區(qū)域為參考
  * background-origin: content-box //背景圖片的擺放以content的區(qū)域為參考
  * background-origin: inherit //繼承

• background-position指定背景圖片的初始位置（相對于 _{background-origin} 來說）例background-position: 25% 75%;
  * 初始值：0% 0%
  * 顯示方式：positionX/Y=(容器的寬度-圖片的寬度)* percentX/Y(百分比);

• background-repeat定義背景圖像的重復方式可以沿著水平方向/垂直方向/兩個軸/不重復渔肩，例
  * 單值語法
  * background-repeat: repeat-x; //沿x軸重復因俐，repeat-x等同與repeat no-repeat
  * background-repeat: repeat-y; //沿y軸重復
  * background-repeat：repeat； //沿著兩個軸重復
  * backround-repeat: space; //兩端對齊的擠壓伸縮適配
  * background-repeat: round; //有足夠空間添加下一個之前擠壓拉伸
  * background-repeat: no-repeat; //圖像不會被重復
  * background-repeat: inherit; //
  * 雙值語法
  * background-repeat: repeat space //沿x重復周偎，y軸兩端對齊情況下擠壓拉伸
  * background

邊框樣式 border-style

代碼/整理/細分概念 border-style

• none和 _hidden 類似女揭，不顯示邊框，重疊情況下優(yōu)先級最低
  [image:2D11AA56-BD08-4F76-A400-BF52F01DBBCD-294-00017510B2BA5D90/3A06FF2E-2BF3-4A5F-B2B7-7506EC06FB2E.png]

• hidden類似 _none栏饮，不顯示邊框吧兔，重疊情況下優(yōu)先級最高
  [image:F44D96FB-AA3A-4304-835C-E45E66E82A01-294-00017510B2CA3F11/FD4B6476-7626-488C-8727-A58A03E5EBC0.png]

• dotted顯示為一系列圓點。標準中沒有定義兩點之間的建個大小袍嬉，圓點半徑是 _border-width 計算值的一半
  [image:FF35EF3C-357A-4BE9-A4F0-EC7A599FF4A8-294-00017510B2D95E74/69B59C86-775E-40E5-8F60-8753CA7B6E9A.png]

• dashed顯示為一系列短的方形虛線境蔼。沒有定義線段長度和大小，需要視不同實現(xiàn)而定
  [image:6C57B15C-4BAB-4EED-86B1-B32093AC4E1E-294-00017510B2F47CC8/80506E16-309A-4BF0-AB22-6C3905720A32.png]

• solid顯示為一條實線
  [image:1195804E-14AD-4AB2-AEFB-D65B4AEAC4B4-294-00017510B3384644/E52CC47E-011F-4F8A-A088-3692665B4FF5.png]

• double顯示為一條雙實線伺通，寬度= _border-width
  [image:E4C64A9A-DD24-474B-AD7A-5B60692AA21C-294-00017510B3589B44/6B017AC1-963F-48FD-A2BC-22DA0A738ACB.png]

• groove顯示為有雕刻效果的邊框箍土，樣式與 _ridge 相反
  [image:EA285A02-A354-4642-BFD4-37A9F1453BF4-294-00017510B37F2F29/CE423011-F327-4A3D-AC41-855EABE9398B.png]

• ridge顯示為有浮雕效果的邊框，樣式與 _groove 相反
  [image:295ACF67-6A6F-4DD4-BA1C-6A367A101F3A-294-00017510B3915675/6735DFC0-AE63-40EB-BC2C-AFAA0F2D7623.png]

• inset顯示為陷入效果的邊框罐监，與 _outset相反吴藻。當指定到 _{border-collapse}為 _collapsed的單位格時，會顯示為 _groove的樣式
  [image:7EC4C7C9-70B3-4646-82AF-144C99636B2A-294-00017510B3A0FA52/F247DB22-A22F-47F2-9DA2-3460D11F7A15.png]

• outset顯示為有凸出效果的邊框弓柱，樣式與 _inset相反沟堡。當它指定到 _{border-collapse}為 _collapsed的單元格時，會顯示為 _ridge的樣式
  [image:484BA383-2E67-4687-AD04-EA57AAE66023-294-00017510B3B31EBB/13A5DE03-2E03-4856-AF69-C643A882041E.png]

數(shù)值單位

代碼/整理/細分概念

絕對長度單位

• px每英寸96個左右矢空，1px在不同設備上代表不同的數(shù)量的像素點
• mm毫米
• cm厘米（10毫米）
• in英寸（2.54厘米）
• pt榜（1/72英寸）
• pc12點活字（1pc=12點）
• mozmm一個實驗單位航罗，無論顯示器的尺寸或分辨率如何，都會嘗試在一毫米處進行渲染屁药。很少會用到粥血，但可能在移動設備特別有用。
• 1in=96px; 3pt=4px; 25.4mm=96px;

相對長度單位 相對字體大小單溫

• em一般用來自動適應用戶所使用的字體酿箭。1em 等于當前的字體尺寸复亏。2em 等于當前字體尺寸的兩倍。例如缭嫡，如果某元素以 12pt 顯示缔御，那么 2em 是24pt。
• ex1ex ≈ 0.5em是字體的x-height（相當于字體尺寸的一半）
• rem相當于父級元素的font-size大小械巡，單位前的數(shù)值與父級元素的大小成倍數(shù)關系刹淌，如2rem相當于父級元素的大小的2倍
• lh等于元素行高l _line-height 的計算值
• rlh等于根元素的行高 _line-height 的計算值

窗口比例的長度單位

• vh相當于窗口高度的1%
• vw相當于窗口寬度的1%
• viEqual to 1% of the size of the initial containing block, in the direction of the root element’s inline axis（axis:軸）.
• vbEqual to 1% of the size of the initial containing block, in the direction of the root element’s block axis（axis:軸）.
• vmin相當于窗口高度寬度之間的最小值的1%
• vmax相當于窗口高度寬度之間的最大值的1%

練習

檢查回文字符串

代碼/案例講解 #其他/簡書

案例：檢查回文字符串 Check for Palindromes

如果給定的字符串是回文饶氏，返回true，反之有勾，返回false疹启。

如果一個字符串忽略標點符號、大小寫和空格蔼卡，正著讀和反著讀一模一樣喊崖，那么這個字符串就是palindrome(回文)。

注意你需要去掉字符串多余的標點符號和空格雇逞，然后把字符串轉化成小寫來驗證此字符串是否為回文荤懂。

函數(shù)參數(shù)的值可以為"racecar"，"RaceCar"和"race CAR"塘砸。

當你完成不了挑戰(zhàn)的時候节仿，記得開大招'Read-Search-Ask'。

function palindrome(str) {
  // 請把你的代碼寫在這里
  return true;
}
palindrome("eye");

提示可用的語句：

• 替換字符串中的字符String.replace()
• 將字符串中的字母轉換為小寫String.toLowerCase()

步驟解析：

1. 排除字符串中的所有非單詞字符掉蔬；
2. 統(tǒng)一所有字母的大小寫;
3. 定義一個變量用來承載倒序文本[[reverse]];
4. 判斷倒序文本與未倒序的文本是否相等廊宪，并輸出結果；

function Palindrome(str) {                  //定義一個函數(shù)為Palindrome女轿，需要輸入參數(shù)str
  var a=str.replace(/\W+/g,'');             //把str參數(shù)中的所有非單詞字符排除賦值給參數(shù)a
  a=a.replace(/\_+/g,'');                   //把a參數(shù)中所有下劃線字符排除并賦值給a本身
  a=a.toLowerCase();                            //把a參數(shù)中所有字母轉換為小寫并賦值給a本身
  b=a.split("").reverse().join("");     //把a參數(shù)中所有字母倒序導出給b
  if(b==a){                                     //判斷a是否等于b箭启，并輸出結果
    return true;
  }else{
    return false;
  }  
}

找出最長單詞

代碼/案例講解

找出最長單詞 Find the Longest Word in a String

找出最長單詞

在句子中找出最長的單詞，并返回它的長度蛉迹。

函數(shù)的返回值應該是一個數(shù)字傅寡。

當你完成不了挑戰(zhàn)的時候，記得開大招'Read-Search-Ask'

function findLongestWord(str) {
  // 請把你的代碼寫在這里
  return str.length;
}

findLongestWord("The quick brown fox jumped over the lazy dog");

提示可用的語句：

通過檢索到的字符將字符串分割為數(shù)組String.split()
檢索字符串長度/數(shù)組長度String.length

步驟解析1：

1. 檢索字符串中的空格并通過空格將字符串分割為數(shù)組北救；
2. 檢索數(shù)組每個字符串的長度并把最長長度賦值給變量荐操；
3. 輸出變量；

function findLongestWord(str) {
  str = str.split(" ");                 //通過空格符分割字符串為數(shù)組
  var zc = 0;
  for(var i=0; i<str.length; i++){      //檢索數(shù)組每個字符串的長度并把最長長度賦值給zc
    if (zc<str[i].length){
      zc=str[i].length;
    }
  }
  return zc;
}
findLongestWord("The quick brown fox jumped over the lazy dog");

步驟解析2：

1. 檢索字符串中的空格并通過空格將字符串分割為數(shù)組扭倾；

• 通過Array.sort()對數(shù)組進行長度排序淀零；

3. 輸出數(shù)組最后一位的長度；

function findLongestWord(str){
    str = str.split(" ");                   //通過空格符分割字符串為數(shù)組;
    var zc=str.sort(function(a, b) {        //通過Array.sort()對數(shù)組進行長度排序膛壹；
      return a.length - b.length;
    });
    return zc[zc.length-1].length;      //輸出數(shù)組最后一位的長度；
}
findLongestWord("The quick brown fox jumped over the lazy dog");

句中單詞首字母大寫

代碼/案例講解

句中單詞首字母大寫 Title Case a Sentence

確保字符串的每個單詞首字母都大寫唉堪，其余部分小寫模聋。

像'the'和'of'這樣的連接符同理。

當你完成不了挑戰(zhàn)的時候唠亚，記得開大招'Read-Search-Ask'链方。

function titleCase(str) {
  // 請把你的代碼寫在這里
  return str;
}
titleCase("I'm a little tea pot");

提示可用的語句：

String.split()

步驟解析1：

1. 將字符串調整為純小寫并通過空格符分割成單詞組成的數(shù)組；
2. 把分割的數(shù)組首字母大寫+其他字母灶搜；
3. 組合單詞字符串為語句字符串

function titleCase(str) {
  var a=str.toLowerCase();          //將字符串轉變?yōu)樾?  a=a.split(" ");                       //通過空格將字符串分割為數(shù)組
  var zh=[];
  for (var i=0; i<a.length; i++){   //循環(huán)單詞的個數(shù)祟蚀，并對每個單詞的首字母大寫+后面字母
    zh[i]=a[i][0].toUpperCase()+a[i].substring(1);
  }
  zh=zh.join(" ");                      //通過空格分隔符組合數(shù)組為字符串
  return zh;
}

titleCase("I'm a little tea pot");

找出多個數(shù)組中的最大數(shù)

代碼/案例講解

找出多個數(shù)組中的最大數(shù) Return Largest Numbers in Arrays

右邊大數(shù)組中包含了4個小數(shù)組工窍，分別找到每個小數(shù)組中的最大值，然后把它們串聯(lián)起來前酿，形成一個新數(shù)組患雏。

提示：你可以用for循環(huán)來迭代數(shù)組，并通過arr[i]的方式來訪問數(shù)組的每個元素罢维。

當你完成不了挑戰(zhàn)的時候淹仑，記得開大招'Read-Search-Ask'。

function largestOfFour(arr) {
  // 請把你的代碼寫在這里
  return arr;
}

largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

提示可用的語句：

Comparison Operators

步驟分析：

1. 對對象中每一個數(shù)組進行檢索并使它們按照從大到小的順序排序
2. 讀取每一個數(shù)組中的第一個添加到新定義的數(shù)組當中

function largestOfFour(arr) {
  var c=[];
  for (var i=0; i<arr.length; i++){             //檢索對象的每一個數(shù)組
    arr[i].sort(function(a,b){return b-a;});        //對數(shù)組中的數(shù)據(jù)進行從大到小排序
    c.push(arr[i][0]);                              //把每個數(shù)組第一位追加到新數(shù)組的第一位
  }
  return c;
}
largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

簡短寫法：

function largestOfFour(arr) {
  for (var i=0; i<arr.length; i++){
    arr[i]=arr[i].sort(function(a,b){return a-b;})[arr[i].length-1];
  }
  return arr;
}
largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

重復輸出字符串

代碼/案例講解

重復輸出字符串 Repeat a string repeat a string

（重要的事情說3遍）

重復一個指定的字符串 num次肺孵，如果num是一個負數(shù)則返回一個空字符串匀借。

當你完成不了挑戰(zhàn)的時候，記得開大招'Read-Search-Ask'平窘。

function repeat(str, num) {
  // 請把你的代碼寫在這里
  return str;
}

repeat("abc", 3);

提示可用的語句：

Global String Object

步驟分析：

1. 判斷num是否為負數(shù)吓肋，是則輸出空內容
2. 否則，循環(huán)num次瑰艘，每一次對對象a追加字符串str
3. 合并數(shù)組a為字符串并輸出

function repeat(str, num) {
  var a=[];
  if (num<0){           //判斷num是否為負數(shù)蓬坡，是則輸出空內容
    return "";  
  }else{                    //否則循環(huán)num次，每次追加str到a對象上
    for (var i=0; i<num; i++){
      a.push(str);
    }
  }
  str=a.join("");       //合并a對象的數(shù)組為字符串并輸出
  return str;
}
repeat("abc", 3);c

后期理解簡化版

function repeat(str, num) {
  var a="";
  if(num<0){
    return "";
  }else{
    for(var i=0; i<num; i++){
      a+=str;
    }
  }
  return a;
}
repeat("abc", 3);

檢查字符串結尾

代碼/案例講解

檢查字符串結尾 Confirm the Ending

判斷一個字符串(str)是否以指定的字符串(target)結尾磅叛。

如果是屑咳，返回true;如果不是，返回false弊琴。

當你完成不了挑戰(zhàn)的時候兆龙，記得開大招'Read-Search-Ask'。

function confirmEnding(str, target) {
  // 請把你的代碼寫在這里
  return str;
}

confirmEnding("Bastian", "n");

提示可用的語句：

String.substr()

步驟分析：

1. 獲得target的長度
2. 通過target的長度獲得字符串str字符串結尾相同長度的字符串
3. 比對target與str結尾的字符串輸出結果

function confirmEnding(str, target) {
  var a=target.length;      //獲得target的長度為a
  var b=str.length;         //獲得str字符串的長度為b
  str=str.substr(b-a);      //將str結尾與a等長的字符串為第(b-a)到a位通過substr賦值給str
  if(target==str){              //比對縮短后的str與target獲得結果
    return true;
  }else{
    return false;
  }
}
confirmEnding("Bastian", "n");

簡化版：

function confirmEnding(str, target) {
  return str.substr((str.length-(target.length)),str.length-1)===target;
}
confirmEnding("Bastian", "n");

截斷字符串

代碼/案例講解

截斷字符串 Truncate a string

用瑞茲來截斷對面的退路）

如果字符串的長度比指定的參數(shù)num長敲董，則把多余的部分用...來表示紫皇。

切記，插入到字符串尾部的三個點號也會計入字符串的長度腋寨。

但是聪铺，如果指定的參數(shù)num小于或等于3，則添加的三個點號不會計入字符串的長度萄窜。

當你完成不了挑戰(zhàn)的時候铃剔，記得開大招'Read-Search-Ask'。

function truncate(str, num) {
  // 請把你的代碼寫在這里
  return str;
}

truncate("A-tisket a-tasket A green and yellow basket", 11);

提示可用的語句：

String.slice()

步驟分析：

1. 判斷字符串長度是否小于num值查刻，是則直接輸出
2. 判斷字符串長度或num是否小于等于3键兜，是則輸出輸出字符串的0到num位+”…“；否則輸出字符串的0到Num-3位+”…“

function truncate(str, num) {
  var a=str.length;
  if(a<=num){                       //判斷字符串長度是否小于num值穗泵，是則直接輸出
    return str;
  }else if(num<=3){             //判斷num是否小于等于3普气，是則輸出輸出字符串的0到num位+”…“
    return str.substring(0,num)+"...";
  }else{                                //否則輸出字符串的0到Num-3位+”…“
    return str.substring(0,num-3)+"...";
  }
}
truncate("A-tisket a-tasket A green and yellow basket", 11);

猴子吃香蕉, 分割數(shù)組

代碼/案例講解

猴子吃香蕉, 分割數(shù)組 Chunky Monkey

（猴子吃香蕉可是掰成好幾段來吃哦）

把一個數(shù)組arr按照指定的數(shù)組大小size分割成若干個數(shù)組塊。

例如:chunk([1,2,3,4],2)=[[1,2],[3,4]];

chunk([1,2,3,4,5],2)=[[1,2],[3,4],[5]];

當你完成不了挑戰(zhàn)的時候佃延，記得開大招'Read-Search-Ask'现诀。

function chunk(arr, size) {
  // 請把你的代碼寫在這里
  return arr;
}

chunk(["a", "b", "c", "d"], 2);

提示可用的語句：

Array.push()
Array.slice()

步驟分析：

1. 通過arr的長度/size得出最終會輸出數(shù)組數(shù)量b
2. 得出每一次的數(shù)組內容并把內容追加到a上夷磕，循環(huán)b次
3. 輸出a

function chunk(arr, size) {
  var a=[];
  var b=arr.length/size;                            //通過arr的長度/size得出最終會輸出數(shù)組數(shù)量b
  for(var i=0; i<b; i++){   
    a.push(arr.slice(size*i,size*(i+1)));       //得出每一次的數(shù)組內容并把內容追加到a上，循環(huán)b次
  }
  return a;
}
chunk(["a", "b", "c", "d"], 2);

簡化版本

function chunk(arr, size) {
  var newArr=[];
 for(var i=0; i<arr.length;i+=size){
   newArr.push(arr.slice(i,i+size));
 } 
  return newArr;
}
chunk(["a", "b", "c", "d"], 2);

截斷數(shù)組

代碼/案例講解

截斷數(shù)組 Slasher Flick

返回一個數(shù)組被截斷n個元素后還剩余的元素仔沿，截斷從索引0開始坐桩。

當你完成不了挑戰(zhàn)的時候，記得開大招'Read-Search-Ask'于未。

function slasher(arr, howMany) {
  // 請把你的代碼寫在這里
  return arr;
}

slasher([1, 2, 3], 2);

提示可用的語句：

Array.slice()
Array.splice()

步驟分析：

• 直接輸出arr中的第howMany到最后一位即可

function slasher(arr, howMany) {
  return arr.slice(howMany);
}
slasher([1, 2, 3], 2);

splice方法版：

function slasher(arr, howMany) {
  arr.splice(0, howMany);
  return arr;
}
slasher([1, 2, 3], 4);

比較字符串

代碼/案例講解

比較字符串 Mutations

（蛤蟆可以吃隊友撕攒，也可以吃對手）

如果數(shù)組第一個字符串元素包含了第二個字符串元素的所有字符，函數(shù)返回true烘浦。

舉例抖坪，["hello", "Hello"]應該返回true，因為在忽略大小寫的情況下闷叉，第二個字符串的所有字符都可以在第一個字符串找到擦俐。

["hello", "hey"]應該返回false，因為字符串"hello"并不包含字符"y"握侧。

["Alien", "line"]應該返回true蚯瞧，因為"line"中所有字符都可以在"Alien"找到。

當你完成不了挑戰(zhàn)的時候品擎，記得開大招'Read-Search-Ask'埋合。

function mutation(arr) {
  // 請把你的代碼寫在這里
  return arr;
}

mutation(["hello", "hey"]);

提示可用的語句：

String.indexOf()

步驟分析：

1. 將所有字符串轉換為小寫
2. 檢測第二個字符串中的字符在第一個數(shù)組中是否存在，不存在即輸出false萄传，循環(huán)第一個字符串的長度次
3. 循環(huán)未輸出false即輸出true

function mutation(arr) {
  arr[0]=arr[0].toLowerCase();          //將所有字符串轉換為小寫
  arr[1]=arr[1].toLowerCase();
  for(var i=0; i<arr[1].length; i++)    //檢測第二個字符串中的字符在第一個數(shù)組中是否存在甚颂，不存在即輸出false，循環(huán)第一個字符串的長度次
    if(arr[0].indexOf(arr[1][i])==-1){
      return false;
    }
  return true;                              //循環(huán)未輸出false即輸出true
}
mutation(["hello", "hey"]);

過濾數(shù)組假值

代碼/案例講解

過濾數(shù)組假值 Falsy Bouncer

過濾數(shù)組假值

（真假美猴王）

刪除數(shù)組中的所有假值秀菱。

在JavaScript中振诬，假值有false、null衍菱、0赶么、""、undefined 和 NaN脊串。

當你完成不了挑戰(zhàn)的時候辫呻，記得開大招'Read-Search-Ask'

function bouncer(arr) {
  // 請把你的代碼寫在這里
  return arr;
}

bouncer([7, "ate", "", false, 9]);

提示可用的語句：

Boolean Objects
Array.filter()

步驟分析：

• 沒太明白，之后有時間再回顧

function bouncer(arr) {
  return arr.filter(Boolean);
}
bouncer([7, "ate", "", false, 9]);

摧毀數(shù)組

代碼/案例講解

摧毀數(shù)組 Seek and Destroy

金克斯的迫擊炮洪规！

實現(xiàn)一個摧毀(destroyer)函數(shù)印屁，第一個參數(shù)是待摧毀的數(shù)組，其余的參數(shù)是待摧毀的值斩例。

當你完成不了挑戰(zhàn)的時候，記得開大招'Read-Search-Ask'从橘。

function destroyer(arr) {
  // 請把你的代碼寫在這里
  return arr;
}

destroyer([1, 2, 3, 1, 2, 3], 2, 3);

提示可用的語句：

Arguments object
Array.filter()

步驟方法：

function destroyer(arr){
  var a=arguments;
  function pt(abt){
    for(var i=0; i<=a.length;i++){
      if(abt==a[i]){
        return false;
      }
    }
  return true;
  }
  return arr.filter(pt);
}
destroyer([1, 2, 3, 1, 2, 3], 2, 3);

數(shù)組排序并找出元素索引

代碼/案例講解

數(shù)組排序并找出元素索引 Where do I belong

我身在何處念赶？

先給數(shù)組排序础钠，然后找到指定的值在數(shù)組的位置，最后返回位置對應的索引叉谜。

舉例：where([1,2,3,4], 1.5) 應該返回 1旗吁。因為1.5插入到數(shù)組[1,2,3,4]后變成[1,1.5,2,3,4]，而1.5對應的索引值就是1停局。

同理很钓，where([20,3,5], 19) 應該返回 2。因為數(shù)組會先排序為 [3,5,20]董栽，19插入到數(shù)組[3,5,20]后變成[3,5,19,20]码倦，而19對應的索引值就是2。

當你完成不了挑戰(zhàn)的時候锭碳，記得開大招'Read-Search-Ask'袁稽。

function where(arr, num) {
  // 請把你的代碼寫在這里
  return num;
}

where([40, 60], 50);

提示可用的語句：

Array.sort()

步驟分析：

1. 將num加入到數(shù)組arr中
2. 為數(shù)組arr重新排序
3. 檢索num在與arr[i]相等的情況時輸出i

function where(arr, num) {
  arr.push(num);                                //將num加入到數(shù)組arr中
  arr.sort(function(a,b){return a-b;}); //為數(shù)組arr重新排序
  for (var i=0; i<arr.length; i++){         //檢索num在與arr[i]相等的情況時輸出i
    if(arr[i]===num){
      return i;
    }
  }
  return num;
}
where([40, 60], 50);

步驟優(yōu)化：

• 循環(huán)語句可以用indexOf()代替

function where(arr, num) {
  arr.push(num);
  arr.sort(function(a,b){return a-b;});
  return arr.indexOf(num);
}
where([40, 60], 50);

凱撒密碼

代碼/案例講解

凱撒密碼 Caesars Cipher

凱撒密碼

（讓上帝的歸上帝，凱撒的歸凱撒）

下面我們來介紹風靡全球的凱撒密碼Caesar cipher擒抛，又叫移位密碼推汽。

移位密碼也就是密碼中的字母會按照指定的數(shù)量來做移位。

一個常見的案例就是ROT13密碼歧沪，字母會移位13個位置歹撒。由'A' ? 'N', 'B' ? 'O'，以此類推诊胞。

寫一個ROT13函數(shù)暖夭，實現(xiàn)輸入加密字符串，輸出解密字符串厢钧。

所有的字母都是大寫鳞尔，不要轉化任何非字母形式的字符(例如：空格，標點符號)早直，遇到這些特殊字符寥假，跳過它們。

當你完成不了挑戰(zhàn)的時候霞扬，記得開大招'Read-Search-Ask'糕韧。

function rot13(str) { // LBH QVQ VG!
  // 請把你的代碼寫在這里
  return str;
}

rot13("SERR PBQR PNZC");  // 你可以修改這一行來測試你的代碼

提示可用的語句：

String.charCodeAt()
String.fromCharCode()

步驟分析：

1. 此處需要通過獲取字符的UTF-18(即ACSII碼),大寫字母的UTF-18碼區(qū)間在65-90之間，不在此區(qū)間的可以不進行運算
2. 大于中間值(77)的可以-13并輸出相應字符追加到新字符串當中
3. 小于或等于中間值(77)的可以+13并輸出相應字符追加到新字符串中
4. 合并字符串并輸出
5. 需要注意的點：
   • .charCodeAt()方法的一般格式是：字符串.chartCodeAr(字符串索引)
   • .fromCharCode()方法一般格式是：字符類型.fromCharCode(UTF-18編碼)

function rot13(str) {
  var tem=[];
  for(var i=0; i<str.length; i++){      //通過循環(huán)檢索字符串每個字符
    var ix=str.charCodeAt(i);
    if (ix<65 || ix>90){                    //首先把UTF-18不在65-90區(qū)間的原樣輸出
      tem.push(String.fromCharCode(ix));
    }else if(ix>77){                        //大于UTF-18中間值的-13并輸出相應字符
      tem.push(String.fromCharCode(ix-13));
    }else{                                  //否則+13并輸出相應字符
      tem.push(String.fromCharCode(ix+13));
    }
  }
  return tem.join("");
}
rot13("SERR PBQR PNZC");

自動生成文本案例

代碼/案例講解

HTML

<body class="bd">
  <div class="bgcl" id="bdcl" style="background:#02BFB8"></div>
  <div>
    <div class="tcbg txtCenter">
      <div class="txt color1" id="txtx"><i class="fa fa-quote-left icon"></i> My 66 year old son rates this colour very gorgeous :-\)</div>
      <h5 class="designer color1" id="designer">-Copy it to your clipboard to use it.</h5>
      <div style="margin-top:30px">
        <a href="#" class="twitter" style="background:#22d4b6" id="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
        <a href="#" target="view_window" style="background:#22d4b6" class="twitter tumblr" id="tumblr"><i class="fa fa-tumblr" id="tumblr" aria-hidden="true"></i></a>
        <div class="twitter newQuote" style="background:#22d4b6" id="bbttnn" onclick="abbr()">New Quote</div>
      </div>
    </div>
  </div>
</body>

CSS

bd{
  width:100%;
  height:100%;
}
.bgcl{
  position:absolute;
  width:100%;
  height:100%;
  transition: all 1s;
}
.tcbg{
  position:absolute;
  width:550px;
  position: absolute;
  left:50%;
  margin-left:-275px;
  top:200px;
  padding:40px 50px;
  background: #FFFFFF;
  box-shadow: 0 30px 150px 0 rgba(0,0,0,0.10);
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.1);
}
.icon{
  font-size:38px;
  transition: all 1s;
}
.color1{
  color:#22d4b6;
  transition: all 1s;
}
.txt{
  font-size:30px;
  font-family:DIN-Bold;
  text-align: center;  
  transition: all 1s;
}
.designer{
  font-family: DINCond-BoldAlternate;
  font-weight:200;
  text-align:right;
  font-size:20px;
  margin-top:24px;
  transition: all 1s;
}
.twitter{
  float:left;
  text-align:center;
  width:40px;
  height:40px;
  font-size:20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius:4px;
  color:#fff;
  transition: all 1s;
}
.twitter:hover{
  opacity:0.7;
  transition: all 1s;
}
.tumblr{
  margin-left:16px;
  transition: all 1s;
}
.newQuote{
  font-family:DIN-Bold;
  font-size:16px;
  width:auto;
  padding:16px;
  position:absolute;
  right:50px;
  transition: all 1s;
}

JavaScript

function randomColor()
{
  var col=["#333","#7f92ab","#a88a4d","#6993c3","#f9824c","#4c80a8","#44a7b5","#0f52df"];
  var flo=Math.floor(Math.random() * col.length);
      
  return col[flo];
}

function randomTxtx()
{
  var jj=["It's sleek not just amazing!","This design has navigated right into my heart.","Found myself staring at it for minutes.","I want to learn this kind of hero! Teach me.","Amazing shapes!","Delightful, friend. I like the use of typography and layers!","Nice use of space grey in this shot =\)","So cool and fun =\)","Such radiant.","My 50 year old son rates this colour very beastly, friend.","Navigation, layers, shot, spaces – incredible mate","Revolutionary work you have here.","Ahhhhhhh...","Ivory. Engaging. It keeps your mind occupied while you wait."];
  var flo=Math.floor(Math.random()*jj.length);
  
  return jj[flo];
}


function abbr()
{
  c=randomColor();
  d=randomTxtx();
  
  var div1=document.getElementById('bbttnn');
  var txtx=document.getElementById('txtx');
  var designer=document.getElementById('designer');
  var twitter=document.getElementById('twitter');
  var tumblr=document.getElementById('tumblr');
  var bdcl=document.getElementById('bdcl');
  
  bdcl.style.background=c;
  txtx.style.color=c;
  txtx.innerHTML=d;
  designer.style.color=c;
  div1.style.background=c;
  twitter.style.background=c;
  tumblr.style.background=c;
  
}

九月第三周學習筆記

代碼/每周筆記 #now

CSS

• 并不是每一個 class 屬性都是用于 CSS 的喻圃。 有些時候我們創(chuàng)建一些 class 只是為了更方便地在jQuery中選中這些元素萤彩。
• float:left樣式相當于是讓div對象靠左，自然失去了本身寬度樣式斧拍。
• 設置居中的一些方式：
  * 絕對定位方式（通過設置margin為自動雀扶，并把四個方向的絕對定位值設置為相等）：

position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

    * 設置外邊距（距離側邊50%-本身寬度/高度的一半）：

position: relative;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;  
}
/*外邊距為自身寬高的一半 未知容器的寬高，margin換transform：transform: translate(-50%, -50%)*/

    * 通過設置容器的flexbox居中方式

display: flex;
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */

    * 文字垂直居中

#content {
   line-height: 200px; /*等于其height*/
 }
 #content span {
   display: inline-block; /*設置為行內塊*/
   width: 200px;    
   overflow: hidden; /*防止內容溢出*/
   white-space: nowrap;
   text-overflow: ellipsis;
 }

HTML

• <b></b>加粗

BootStrap

• <button></button>是Bootstrap專屬標簽/元素
  * class="btn-primary"原始按鈕樣式（未被操作）
  * class="btn-block"可用于<a>, <button>, 或 <input> 元素上：塊級按鈕(拉伸至父元素100%的寬度)
• class="btn-default"默認標準按鈕
• class="img-responsive"使圖片變成響應式
• class="text-center"文本居中
• class="container-fluid"用于100%寬度，占據(jù)全部視口的容器

jQuery

• jQuery通過選擇器來選擇一個元素的愚墓，然后操作元素做些改變予权。
• 需要在后臺引入jQuery庫
• $(docment).ready(function{方法});添加jQuery方法
• 所有jQuery方法都是以$開始的，簡稱bling
• ::引用:: ：
  * 引用元素的方式(“button”) (“div”) (h1)等
  * 引用相同class元素輸入元素名并在之前加點(.well)
  * 引用id輸入id并在之前加# (#well)
  * 按照索引順序(1開始)引用目標元素的第n個子元素(.元素:nth-child(n))
  * 搜索class元素且索引為奇數(shù)的所有元素 (".元素:odd").
  * 索引為偶數(shù)的所有元素 (".元素:even").
  * 引用整個頁面"body"
  * 檢索結果的第n個$($(".slot")[n])
  *
• ::方法::：
  * 添加class效果:.addClass("")
  * 去掉class效果：.removeClass("")
  * 改變CSS樣式：.css("屬性","屬性值")
  * 調整元素的屬性（如可選狀態(tài)）.prop("屬性",屬性的狀態(tài))
  * 添加HTML標簽和文字到元素.html()
  * 元素之前的內容都會被方法的內容所替換掉
  * 只修改標題不改變標記.text()
  * 移除HTML元素.remove()
  * 把元素移動到其他元素當中.appendTo()
  * 把元素拷貝到其他元素中.clone().appendTo().clone只有復制作用浪册，不會產生實際效果扫腺，需要復合使用
  * 訪問指定元素的父元素parent()，需要復合使用,例parent().css("color","red")
  * 訪問指定元素的子元素children()村象，需要復合使用笆环，例children().css("color","red")
  * *點擊效果 .click(function(){});
• ::效果::：
  * ("animated bounce") 回彈動畫需要在后臺Animate.css庫(.addClass(“”)/.removeClass(""))
  * ("animated shake") 抖動效果需要在后臺Animate.css庫(.addClass(“”)/.removeClass(""))
  * ("animated fadeOut")漸隱效果需要在后臺Animate.css庫(.addClass(“”)/.removeClass(""))
  * ("disabled", true)使樣式不可選(.prop("disabled", true))
  * (<em></em>)重寫和強調標題文本.html(<em>文本</em>)
  * ("animated fadeOut")懸掛退出需要在后臺Animate.css庫(.addClass(“”)/.removeClass(""))
• 點擊事件$("元素").on("click", function(){});
• 調取接口：

$.getJSON("鏈接地址", function(json) {
  $("元素").html(JSON.stringify(json)); //?
});

• 以文本形式顯示JSON內對象的所有屬性及值 一般用于引用JSON文件之前檢查一下JSON提供的數(shù)據(jù)內容

 $("#getMessage").on("click", function()
      {
        $.getJSON("JSON地址", function(參數(shù)1)
          {
            var 參數(shù)2 = "";
            參數(shù)1.forEach(function(參數(shù)3)
              {
                var keys = Object.keys(參數(shù)3); 
                參數(shù)2 +="<div class = 'CSS名稱'>"; 
                keys.forEach (function(參數(shù)4)
                  {
                    參數(shù)2 +="<b>" + 參數(shù)4 + "</b>: " + 參數(shù)3[key] +"<br>";
                  });
                參數(shù)2 += "</div><br>";
              })
              $(".message").html(參數(shù)2);
            });
        });
    }); 

JavaScript

• 函數(shù)可以有自己的私有屬性和私有方法
  * 私有屬性var a;在函數(shù)內部直接定義即可
  * 私有方法 var a=function(){};不用命名直接跟在定義后面
• 對象擁有自己的特征，稱為屬性厚者，對象還有自己的函數(shù)躁劣，稱為方法 。
• 當函數(shù)需要結束但不想輸出內容時return null
• 字符串想要加入特殊字符時籍救，以圖片格式為例
  * .html('<img src="' + 自定義的字符串 + '">'可以理解為三段：
  * '<img src="'
  * 自定義的字符串
  * '">'
• 構造函數(shù)var 函數(shù)名 = function() {this.屬性1 =值;this.屬性2=值;this.屬性3=值;};
  * 構造函數(shù)也可以添加參數(shù)用以快速修改屬性习绢。
  * 例var 函數(shù)名=function(參數(shù)1，參數(shù)2){this.參數(shù)1=值; 參數(shù)2=值2}
  * 調用構造函數(shù)是傳入參數(shù)的方式就可以是var 新函數(shù)名=new 函數(shù)名(值1,值2);
  * 調用構造函數(shù)var abc = new Car();car()為舊的構造函數(shù)
  * 這里的myCar我們也叫做car的一個實例蝙昙，但是跟普通對象沒有區(qū)別
  * 構造函數(shù)加屬性函數(shù)名.屬性=值

針對數(shù)組的運算

• .map方法迭代運算數(shù)組闪萄，例數(shù)組名2 = 數(shù)組名1.map(function(val){return val * 4;});對數(shù)組每個字符*4
  * 不會改變原數(shù)組
  * 函數(shù)內應該是個數(shù)學運算
• .filter方法篩選數(shù)組，例數(shù)組名2 = 數(shù)組名1.filter(function(val){return val<5;});會篩選出小于5的字符
  * 不會改變原數(shù)組
  * 函數(shù)內應該是布爾運算
• .sort方法按字母順序或數(shù)字順序排序奇颠，例數(shù)組名.sort(function(a,b){retunrn b-a});
  * 會改變原數(shù)組
  * 函數(shù)有兩個參數(shù)一般是(a,b)函數(shù)內應該是return a-b從小到大排序或return b-a從大到小排序
  - [ ] 函數(shù)左側也可以有等號用以賦值
• .reverse方法翻轉數(shù)組例數(shù)組名.reverse()
  * 會改變原數(shù)組
• .concat方法可以把兩個數(shù)組的內容合并到一個數(shù)組寫法數(shù)組3=數(shù)組1.concat(數(shù)組2);
  * 不會改變原數(shù)組败去？
  * 以寫法為例，新數(shù)組的排序是先數(shù)組1后數(shù)組2
• .split方法使用指定字符將字符串 分割為數(shù)組例數(shù)組名=字符串名.split('分割字符');
  * 不會改變原數(shù)組烈拒？
• .join方法使用指定字符將數(shù)組 合并為字符串例字符串名=數(shù)組名.join('中間字符');
  * 不會改變原數(shù)組圆裕？
• .forEach對數(shù)組中的每個元素執(zhí)行指定函數(shù)，例數(shù)組.forEach(function(參數(shù)){})

針對對象的運算

• Object.keys()返回一個包含所有給定對象自身可枚舉屬性名稱的數(shù)組荆几。例Object.keys(對象名)
  * 返回對象的所有屬性組成的數(shù)組

正則表達式

• \d數(shù)字選擇器
• +允許正則表達式匹配一個或更多數(shù)字吓妆，例\d+
• g在結尾加g(global的簡寫)，允許正則表達式找到所有匹配而不是僅僅找到第一個例/\b/g
• 轉換大寫可以匹配非小寫形式的結果例\d選擇數(shù)字 \D選擇非數(shù)字
• \s選擇字符串中的空白例：/\s+/g空字符包含：
  * " "空格符
  * \r回車符
  * \n換行符
  * \t制表符
  * \f換頁符

其他

• 字符 -> 字符串(多個字符的組合) -> 數(shù)組(多個數(shù)組或字符的集合) -> 對象(擁有不同的屬性吨铸，每個屬性對應不同的值) -> JSON(多個對象的集合)
  * 每個對象的屬性和屬性值的組合叫：鍵值對(key-value pairs)"行拢。
• 通過瀏覽器獲取當前位置

if (navigator.geolocation)
  {
    navigator.geolocation.getCurrentPosition(function(position)
      {
        $("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
      });
  }   

九月第三周學習筆記.jpg

練習.jpg

整理.jpg