整理

代码/整理

术语整理

代码/整理

• CSS:层叠样式表
• CSS中的元素样式设置叫做类选择器：.be-text{color:blue;}
• 直接在元素当中添加属性的叫做内联样式（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数据上传服务器，例<form action="/img/png"></form>
  * required必填字段，伪类。例<input type="text" required>
  * optional伪类提供可选外观样式
  * radio单选按钮，例<input type="radio">
  * 所有关联的单选按钮都应该使用相同的 _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;}。关于单位可以关注[[数值单位]]

• 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%;解释
  * 像素和百分比比较多
  * 百分比作为单位出现时，语句应尽量在 _border-width后面，结果会根据先后顺序有不同样式展示

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 //背景裁剪到内容区 (content-box) 外沿。
  * background-clip: TEXT //背景被裁剪为文字的前景色(只有chrome支持)。
  * background-clip: inherit //继承

• background-image为一个元素设置一个或多个背景图(在z轴上堆叠，第一个指定的图像最接近用户)
  * 即使有图片情况下也应该绘制背景色———用于网络中断情况下使用

• background-origin**规定了指定背景图片 _{background-image} 属性的原点位置的背景相对区域. **
  * background-attachment 为fixed时，该属性将被忽略不起作用。
  * background-origin: border-box //背景图片的摆放以border区域为参考
  * background-origin: padding-box //背景图片的摆放以padding的区域为参考
  * background-origin: content-box //背景图片的摆放以content的区域为参考
  * 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 类似，不显示边框，重叠情况下优先级最低
  [image:2D11AA56-BD08-4F76-A400-BF52F01DBBCD-294-00017510B2BA5D90/3A06FF2E-2BF3-4A5F-B2B7-7506EC06FB2E.png]

• hidden类似 _none，不显示边框，重叠情况下优先级最高
  [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显示为一系列短的方形虚线。没有定义线段长度和大小，需要视不同实现而定
  [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]

数值单位

代码/整理/细分概念

绝对长度单位

• px每英寸96个左右，1px在不同设备上代表不同的数量的像素点
• 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大小，单位前的数值与父级元素的大小成倍数关系，如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(回文)。

注意你需要去掉字符串多余的标点符号和空格，然后把字符串转化成小写来验证此字符串是否为回文。

函数参数的值可以为"racecar"，"RaceCar"和"race CAR"。

当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。

function palindrome(str) {
  // 请把你的代码写在这里
  return true;
}
palindrome("eye");

提示可用的语句：

• 替换字符串中的字符String.replace()
• 将字符串中的字母转换为小写String.toLowerCase()

步骤解析：

1. 排除字符串中的所有非单词字符；
2. 统一所有字母的大小写;
3. 定义一个变量用来承载倒序文本[[reverse]];
4. 判断倒序文本与未倒序的文本是否相等，并输出结果；

function Palindrome(str) {                  //定义一个函数为Palindrome，需要输入参数str
  var a=str.replace(/\W+/g,'');             //把str参数中的所有非单词字符排除赋值给参数a
  a=a.replace(/\_+/g,'');                   //把a参数中所有下划线字符排除并赋值给a本身
  a=a.toLowerCase();                            //把a参数中所有字母转换为小写并赋值给a本身
  b=a.split("").reverse().join("");     //把a参数中所有字母倒序导出给b
  if(b==a){                                     //判断a是否等于b，并输出结果
    return true;
  }else{
    return false;
  }  
}

找出最长单词

代码/案例讲解

找出最长单词 Find the Longest Word in a String

找出最长单词

在句子中找出最长的单词，并返回它的长度。

函数的返回值应该是一个数字。

当你完成不了挑战的时候，记得开大招'Read-Search-Ask'

function findLongestWord(str) {
  // 请把你的代码写在这里
  return str.length;
}

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

提示可用的语句：

通过检索到的字符将字符串分割为数组String.split()
检索字符串长度/数组长度String.length

步骤解析1：

1. 检索字符串中的空格并通过空格将字符串分割为数组；
2. 检索数组每个字符串的长度并把最长长度赋值给变量；
3. 输出变量；

function findLongestWord(str) {
  str = str.split(" ");                 //通过空格符分割字符串为数组
  var zc = 0;
  for(var i=0; i<str.length; i++){      //检索数组每个字符串的长度并把最长长度赋值给zc
    if (zc<str[i].length){
      zc=str[i].length;
    }
  }
  return zc;
}
findLongestWord("The quick brown fox jumped over the lazy dog");

步骤解析2：

1. 检索字符串中的空格并通过空格将字符串分割为数组；

• 通过Array.sort()对数组进行长度排序；

3. 输出数组最后一位的长度；

function findLongestWord(str){
    str = str.split(" ");                   //通过空格符分割字符串为数组;
    var zc=str.sort(function(a, b) {        //通过Array.sort()对数组进行长度排序；
      return a.length - b.length;
    });
    return zc[zc.length-1].length;      //输出数组最后一位的长度；
}
findLongestWord("The quick brown fox jumped over the lazy dog");

句中单词首字母大写

代码/案例讲解

句中单词首字母大写 Title Case a Sentence

确保字符串的每个单词首字母都大写，其余部分小写。

像'the'和'of'这样的连接符同理。

当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。

function titleCase(str) {
  // 请把你的代码写在这里
  return str;
}
titleCase("I'm a little tea pot");

提示可用的语句：

String.split()

步骤解析1：

1. 将字符串调整为纯小写并通过空格符分割成单词组成的数组；
2. 把分割的数组首字母大写+其他字母；
3. 组合单词字符串为语句字符串

function titleCase(str) {
  var a=str.toLowerCase();          //将字符串转变为小写
  a=a.split(" ");                       //通过空格将字符串分割为数组
  var zh=[];
  for (var i=0; i<a.length; i++){   //循环单词的个数，并对每个单词的首字母大写+后面字母
    zh[i]=a[i][0].toUpperCase()+a[i].substring(1);
  }
  zh=zh.join(" ");                      //通过空格分隔符组合数组为字符串
  return zh;
}

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

找出多个数组中的最大数

代码/案例讲解

找出多个数组中的最大数 Return Largest Numbers in Arrays

右边大数组中包含了4个小数组，分别找到每个小数组中的最大值，然后把它们串联起来，形成一个新数组。

提示：你可以用for循环来迭代数组，并通过arr[i]的方式来访问数组的每个元素。

当你完成不了挑战的时候，记得开大招'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. 对对象中每一个数组进行检索并使它们按照从大到小的顺序排序
2. 读取每一个数组中的第一个添加到新定义的数组当中

function largestOfFour(arr) {
  var c=[];
  for (var i=0; i<arr.length; i++){             //检索对象的每一个数组
    arr[i].sort(function(a,b){return b-a;});        //对数组中的数据进行从大到小排序
    c.push(arr[i][0]);                              //把每个数组第一位追加到新数组的第一位
  }
  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是一个负数则返回一个空字符串。

当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。

function repeat(str, num) {
  // 请把你的代码写在这里
  return str;
}

repeat("abc", 3);

提示可用的语句：

Global String Object

步骤分析：

1. 判断num是否为负数，是则输出空内容
2. 否则，循环num次，每一次对对象a追加字符串str
3. 合并数组a为字符串并输出

function repeat(str, num) {
  var a=[];
  if (num<0){           //判断num是否为负数，是则输出空内容
    return "";  
  }else{                    //否则循环num次，每次追加str到a对象上
    for (var i=0; i<num; i++){
      a.push(str);
    }
  }
  str=a.join("");       //合并a对象的数组为字符串并输出
  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。

当你完成不了挑战的时候，记得开大招'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

用瑞兹来截断对面的退路）

如果字符串的长度比指定的参数num长，则把多余的部分用...来表示。

切记，插入到字符串尾部的三个点号也会计入字符串的长度。

但是，如果指定的参数num小于或等于3，则添加的三个点号不会计入字符串的长度。

当你完成不了挑战的时候，记得开大招'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);

猴子吃香蕉, 分割数组

代码/案例讲解

猴子吃香蕉, 分割数组 Chunky Monkey

（猴子吃香蕉可是掰成好几段来吃哦）

把一个数组arr按照指定的数组大小size分割成若干个数组块。

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

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

当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。

function chunk(arr, size) {
  // 请把你的代码写在这里
  return arr;
}

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

提示可用的语句：

Array.push()
Array.slice()

步骤分析：

1. 通过arr的长度/size得出最终会输出数组数量b
2. 得出每一次的数组内容并把内容追加到a上，循环b次
3. 输出a

function chunk(arr, size) {
  var a=[];
  var b=arr.length/size;                            //通过arr的长度/size得出最终会输出数组数量b
  for(var i=0; i<b; i++){   
    a.push(arr.slice(size*i,size*(i+1)));       //得出每一次的数组内容并把内容追加到a上，循环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);

截断数组

代码/案例讲解

截断数组 Slasher Flick

返回一个数组被截断n个元素后还剩余的元素，截断从索引0开始。

当你完成不了挑战的时候，记得开大招'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

（蛤蟆可以吃队友，也可以吃对手）

如果数组第一个字符串元素包含了第二个字符串元素的所有字符，函数返回true。

举例，["hello", "Hello"]应该返回true，因为在忽略大小写的情况下，第二个字符串的所有字符都可以在第一个字符串找到。

["hello", "hey"]应该返回false，因为字符串"hello"并不包含字符"y"。

["Alien", "line"]应该返回true，因为"line"中所有字符都可以在"Alien"找到。

当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。

function mutation(arr) {
  // 请把你的代码写在这里
  return arr;
}

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

提示可用的语句：

String.indexOf()

步骤分析：

1. 将所有字符串转换为小写
2. 检测第二个字符串中的字符在第一个数组中是否存在，不存在即输出false，循环第一个字符串的长度次
3. 循环未输出false即输出true

function mutation(arr) {
  arr[0]=arr[0].toLowerCase();          //将所有字符串转换为小写
  arr[1]=arr[1].toLowerCase();
  for(var i=0; i<arr[1].length; i++)    //检测第二个字符串中的字符在第一个数组中是否存在，不存在即输出false，循环第一个字符串的长度次
    if(arr[0].indexOf(arr[1][i])==-1){
      return false;
    }
  return true;                              //循环未输出false即输出true
}
mutation(["hello", "hey"]);

过滤数组假值

代码/案例讲解

过滤数组假值 Falsy Bouncer

过滤数组假值

（真假美猴王）

删除数组中的所有假值。

在JavaScript中，假值有false、null、0、""、undefined 和 NaN。

当你完成不了挑战的时候，记得开大招'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]);

摧毁数组

代码/案例讲解

摧毁数组 Seek and Destroy

金克斯的迫击炮！

实现一个摧毁(destroyer)函数，第一个参数是待摧毁的数组，其余的参数是待摧毁的值。

当你完成不了挑战的时候，记得开大招'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);

数组排序并找出元素索引

代码/案例讲解

数组排序并找出元素索引 Where do I belong

我身在何处？

先给数组排序，然后找到指定的值在数组的位置，最后返回位置对应的索引。

举例：where([1,2,3,4], 1.5) 应该返回 1。因为1.5插入到数组[1,2,3,4]后变成[1,1.5,2,3,4]，而1.5对应的索引值就是1。

同理，where([20,3,5], 19) 应该返回 2。因为数组会先排序为 [3,5,20]，19插入到数组[3,5,20]后变成[3,5,19,20]，而19对应的索引值就是2。

当你完成不了挑战的时候，记得开大招'Read-Search-Ask'。

function where(arr, num) {
  // 请把你的代码写在这里
  return num;
}

where([40, 60], 50);

提示可用的语句：

Array.sort()

步骤分析：

1. 将num加入到数组arr中
2. 为数组arr重新排序
3. 检索num在与arr[i]相等的情况时输出i

function where(arr, num) {
  arr.push(num);                                //将num加入到数组arr中
  arr.sort(function(a,b){return a-b;}); //为数组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);

步骤优化：

• 循环语句可以用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，又叫移位密码。

移位密码也就是密码中的字母会按照指定的数量来做移位。

一个常见的案例就是ROT13密码，字母会移位13个位置。由'A' ↔ 'N', 'B' ↔ 'O'，以此类推。

写一个ROT13函数，实现输入加密字符串，输出解密字符串。

所有的字母都是大写，不要转化任何非字母形式的字符(例如：空格，标点符号)，遇到这些特殊字符，跳过它们。

当你完成不了挑战的时候，记得开大招'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码区间在65-90之间，不在此区间的可以不进行运算
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++){      //通过循环检索字符串每个字符
    var ix=str.charCodeAt(i);
    if (ix<65 || ix>90){                    //首先把UTF-18不在65-90区间的原样输出
      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 的。 有些时候我们创建一些 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%宽度，占据全部视口的容器

jQuery

• jQuery通过选择器来选择一个元素的，然后操作元素做些改变。
• 需要在后台引入jQuery库
• $(docment).ready(function{方法});添加jQuery方法
• 所有jQuery方法都是以$开始的，简称bling
• ::引用:: ：
  * 引用元素的方式(“button”) (“div”) (h1)等
  * 引用相同class元素输入元素名并在之前加点(.well)
  * 引用id输入id并在之前加# (#well)
  * 按照索引顺序(1开始)引用目标元素的第n个子元素(.元素:nth-child(n))
  * 搜索class元素且索引为奇数的所有元素 (".元素:odd").
  * 索引为偶数的所有元素 (".元素:even").
  * 引用整个页面"body"
  * 检索结果的第n个$($(".slot")[n])
  *
• ::方法::：
  * 添加class效果:.addClass("")
  * 去掉class效果：.removeClass("")
  * 改变CSS样式：.css("属性","属性值")
  * 调整元素的属性（如可选状态）.prop("属性",属性的状态)
  * 添加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提供的数据内容

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

JavaScript

• 函数可以有自己的私有属性和私有方法
  * 私有属性var a;在函数内部直接定义即可
  * 私有方法 var a=function(){};不用命名直接跟在定义后面
• 对象拥有自己的特征，称为属性，对象还有自己的函数，称为方法 。
• 当函数需要结束但不想输出内容时return null
• 字符串想要加入特殊字符时，以图片格式为例
  * .html('<img src="' + 自定义的字符串 + '">'可以理解为三段：
  * '<img src="'
  * 自定义的字符串
  * '">'
• 构造函数var 函数名 = function() {this.属性1 =值;this.属性2=值;this.属性3=值;};
  * 构造函数也可以添加参数用以快速修改属性。
  * 例var 函数名=function(参数1，参数2){this.参数1=值; 参数2=值2}
  * 调用构造函数是传入参数的方式就可以是var 新函数名=new 函数名(值1,值2);
  * 调用构造函数var abc = new Car();car()为旧的构造函数
  * 这里的myCar我们也叫做car的一个实例，但是跟普通对象没有区别
  * 构造函数加属性函数名.属性=值

针对数组的运算

• .map方法迭代运算数组，例数组名2 = 数组名1.map(function(val){return val * 4;});对数组每个字符*4
  * 不会改变原数组
  * 函数内应该是个数学运算
• .filter方法筛选数组，例数组名2 = 数组名1.filter(function(val){return val<5;});会筛选出小于5的字符
  * 不会改变原数组
  * 函数内应该是布尔运算
• .sort方法按字母顺序或数字顺序排序，例数组名.sort(function(a,b){retunrn b-a});
  * 会改变原数组
  * 函数有两个参数一般是(a,b)函数内应该是return a-b从小到大排序或return b-a从大到小排序
  - [ ] 函数左侧也可以有等号用以赋值
• .reverse方法翻转数组例数组名.reverse()
  * 会改变原数组
• .concat方法可以把两个数组的内容合并到一个数组写法数组3=数组1.concat(数组2);
  * 不会改变原数组？
  * 以写法为例，新数组的排序是先数组1后数组2
• .split方法使用指定字符将字符串 分割为数组例数组名=字符串名.split('分割字符');
  * 不会改变原数组？
• .join方法使用指定字符将数组 合并为字符串例字符串名=数组名.join('中间字符');
  * 不会改变原数组？
• .forEach对数组中的每个元素执行指定函数，例数组.forEach(function(参数){})

针对对象的运算

• Object.keys()返回一个包含所有给定对象自身可枚举属性名称的数组。例Object.keys(对象名)
  * 返回对象的所有属性组成的数组

正则表达式

• \d数字选择器
• +允许正则表达式匹配一个或更多数字，例\d+
• g在结尾加g(global的简写)，允许正则表达式找到所有匹配而不是仅仅找到第一个例/\b/g
• 转换大写可以匹配非小写形式的结果例\d选择数字 \D选择非数字
• \s选择字符串中的空白例：/\s+/g空字符包含：
  * " "空格符
  * \r回车符
  * \n换行符
  * \t制表符
  * \f换页符

其他

• 字符 -> 字符串(多个字符的组合) -> 数组(多个数组或字符的集合) -> 对象(拥有不同的属性，每个属性对应不同的值) -> 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