探新Web前端开发(四)

Flexbox

长久以来，唯一可用的且有稳定的跨浏览器兼容性的能用来构建 CSS 布局的工具只有 floats 和 positioning。它们是即可行，表现也不错的布局方案，但是在某些布局方面它们就有限制，并且难以实现。
以下简单的布局要求是难以或不可能用这样的工具（ floats 和 positioning）方便且灵活的实现的：

• 垂直居中父内容的里一块内容。
• 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
• 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

这个时候flexbox就可以使得很多布局任务变得更加容易

指定元素的布局为 flexible

首先，我们需要选择将哪些元素将设置为 flexible 框。我们需要给这些 flexible 元素的父元素 display 设置一个特定值。比如:

section {  display: flex;}

所以，就这样一个简单的声明就给了我们所需要的一切，我们的多列布局具有大小相等的列，并且尽管内容不一样多但列的高度都是一样。
假如你想设置行内元素成 flexible box，也可以置 display 属性的值为 inline-flex。

换行

当你给<article> 设定了宽度，例如:
css
article {
flex: 200px;
}

可能会有一个问题出来即处于容器中的 flexbox 子元素会溢出，破坏了布局。比如:

在这里我们看到，子代确实超出了它们的容器。 解决此问题的一种方法是将以下声明添加到 section 的css 规则中：
flex-wrap: wrap
布局变成这样了:

我们有了多行 flexbox — 任何溢出的元素将被移到下一行。在 article 元素上设置的 flex: 200px 规则，意味着每个元素的宽度至少是200px；你可能还注意到，最后一行上的最后几个项每个都变得更宽，以便把整个行填满。

JS

JavaScript 是允许你在网页中实现复杂事情的一门编程语言 —— 每次当你浏览网页时不只是显示静态信息—— 显示即时更新的内容

解释代码 vs 编译代码

在编程环境中，你或许听说过这两个术语 解释 [interpreted] 和 编译 [compiled]。JavaScript 是一个解释语言——代码从上到下运行，而运行的结果会马上被返回。在浏览器运行代码前，你不必先把它转化为其他形式。

另一方面来说，编译语言则需要在运行前转化为另一种形式。比如说 C/C++ 则要先被编译成汇编语言，然后再由电脑运行。

两种方式都有不同的优势。

服务器端代码 vs 客户端代码

你或许也听说过 服务器端 [server-side] 和 客户端 [client-side] 代码这两个术语，尤其是在网页开发的语境中。客户端代码是在用户的电脑上运行的代码——当浏览一个网页时，这个网页的客户端代码就会被下载，然后由浏览器来运行和展示。
在另一方面，服务器端代码则在服务器上运行，然后它的结果会由浏览器进行下载和展示。流行的服务器端网页语言包含以下几个例子：PHP, Python, Ruby, ASP.NET 和 JavaScript！JavaScript 同时也能用作服务器端语言，比如说在流行的 Node.js 环境中
动态 [dynamic] 这个词被用来描述客户端 JavaScript 和服务器端语言——它指的是能更新网页/应用的内容以在不同环境下显示不同事物，当有需要时产生新内容的能力。服务器端代码会动态地在服务器上产生新的内容，比如说从数据库中提取信息。反之，客户端 JavaScript则在用户的浏览器中动态地生成新的内容，比如说创建一个新的 HTML 表格，从中插入从服务器请求到的数据，然后在已经向用户展示了的网页中显示这个表格。

变量

在JavaScript中，所有代码指令都会以分号结尾 (;) — 如果忘记加分号，你的单行代码可能执行正常，但是在多行代码在一起的时候就可能出错。所以，最好是养成主动以分号作为代码结尾的习惯。

Boolean

var test = 6 < 3;
这是使用“小于”操作符（<）来测试6小于3。正如你所料的，将会返回false

Object

var dog = { name : 'Spot', breed : 'Dalmatian' };
要检索存储在对象中的信息，可以使用以下语法:
dog.name

Number

与其他一些编程语言不同，JavaScript只有一个数据类型，就是Number

比较运算符

大部分运算符还是跟其他语言一样的，除了:

运算符 名称 目的 例子 === 严格等于 测试左右值是否相等 5===2+4 !== 严格不等于 测试左右值是否不相等 5!==2+3

我经常会看到有些人在他们的代码中使用==和！=来平等和不相等 - 这些都是JavaScript中的有效运算符，但它们与=== /！==不同，前者测试值是否相同， 但是数据类型可能不同，而后者的严格版本测试值和dataype是否相同

数字与字符

• 如果可以的话， Number ()将把传递给它的任何东西转换成一个数字。
  var myString = ‘123’;
  var myNum = Number(myString);
  typeof myNum;
• 另一方面，每个数字都可以用一个名为 toString() 的方法，它将把它转换成等价的字符串。
  var myNum = 123;
  var myString = myNum.toString();
  typeof myString;

有用的String方法

获得字符串的长度

var browserType = 'mozilla';
browserType.length;
字符串的长度有用是有很多原因的, 例如，你可能想算出一连串名字的长度，并用名字长度来作为名字排序的依据，亦或让一个用户知道他输入的用户名太长，已经超出了输入的字符串长度限制。

检索特定字符串字符

可以使用方括号符号返回字符串中的任何字符
browserType[0];

在字符串中查找子字符串并提取它

有时候你想知道一个较大的字符串是否存在于另一个较大的字符串中（我们通常会说一个字符串中存在一个子字符串）。 这可以使用indexOf()方法来完成，该方法需要一个parameter :你想要搜索的子字符串 。
browserType.indexOf('zilla');
这给了我们2的结果，因为子串“zilla”从“mozilla”内的位置2（0，1，2 - 所以3个字符）开始。

slice()方法:
browserType.slice(2);
返回browserType位置2及之后的所有剩余字符串

数组

创建数组

var random = ['tree', 795, [0, 1, 2]];

字符串和数组之间的转换

1. 首先，创建一个字符串：
   var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
2. 用每个逗号分隔它：
   var myArray = myData.split(',');
3. 尝试找到新数组的长度，并从中检索一些项目：
   myArray.length;
   myArray[0];
   myArray[1];
   myArray[myArray.length-1];
4. 也可以使用join()方法进行相反的操作:
   var myNewString = myArray.join(',');
5. 将数组转换为字符串的另一种方法是使用toString()方法。 toString（）可以比join（）更简单，因为它不需要一个参数，但更有限制。 使用join（）可以指定不同的分隔符
   var dogNames = ["Rocket","Flash","Bella","Slugger"];
dogNames.toString();

switch statements

switch 语句 他们以单个表达式/值作为输入，然后查看多个选项，直到找到与该值相匹配的选项，执行与之相关的代码
例子:
var select = document.querySelector(‘select’);
var para = document.querySelector(‘p’);
select.addEventListener(‘change’, setWeather);

function setWeather() {
var choice = select.value;
switch (choice) {
case ‘sunny’:
para.textContent = ‘It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.’;
break;
case ‘rainy’:
para.textContent = ‘Rain is falling outside; take a rain coat and a brolly, and don\’t stay out for too long.’;
break;
case ‘snowing’:
para.textContent = ‘The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.’;
break;
case ‘overcast’:
para.textContent = ‘It isn\’t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.’;
break;
default:
para.textContent = ”;
}
}

循环吧代码

你应该使用哪种循环类型？

对于基本用途，for，while和do … while循环大部分可互换。他们都可以用来解决相同的问题，你使用哪一个将在很大程度上取决于你的个人偏好- 哪一个你最容易记住或最直观的。

函数-可复用代码块

浏览器内置函数

1. 有很多浏览器内置函数，当我们操作一个字符串的时候，例如：
   var myText = ‘I am a string’;
   var newString = myText.replace(‘string’, ‘sausage’);
   console.log(newString);
2. 或者当我们操作一个数组的时候：
   var myArray = [‘I’, ‘love’, ‘chocolate’, ‘frogs’];
   var madeAString = myArray.join(’ ‘);
   console.log(madeAString);
   !将数组中的数值以空格为分隔，组成一个字符串
3. 或者当我们生成一个随机数时：
   var myNumber = Math.random()

JavaScript有许多内置的函数，可以让您做很多有用的事情，而无需自己编写所有的代码。

匿名函数

例如:
function() {
alert('hello');
}
这个函数叫做匿名函数 — 它没有函数名! I它也不会自己做任何事情。 你通常使用匿名函数以及事件处理程序, 例如，如果单击相关按钮，以下操作将在函数内运行代码：
var myButton = document.querySelector('button');
myButton.onclick = function() {
alert('hello');
}
你还可以将匿名函数分配为变量的值，例如：
var myGreeting = function() {
alert('hello');
}
现在可以使用以下方式调用此函数：
myGreeting();
但这只会令人费解，所以不要这样做！创建功能时，最好只要坚持下列形式：
function myGreeting() {
alert('hello');
}
主要使用匿名函数来运行负载的代码以响应事件触发（如点击按钮） - 使用事件处理程序。再次，这看起来像这样：
myButton.onclick = function() {
alert('hello');
}

功能范围和冲突

scope即作用域 — 处理函数时一个非常重要的概念。当你创建一个函数时，函数内定义的变量和其他东西都在它们自己的单独的范围内, 意味着它们被锁在自己独立的隔间中, 不能访问内部的其他函数或函数之外的代码.

所有函数的外层被称为全局作用域。 在全局作用域内定义的值可以被任意地方访问。
例如，假设有一个HTML文件，它调用两个外部JavaScript文件，并且它们都具有使用相同名称定义的变量和函数：

<script src="first.js"></script><script src="second.js"></script><script>  greeting();</script>// first.jsvar name = 'Chris';function greeting() {  alert('Hello ' + name + ': welcome to our company.');// second.jsvar name = 'Zaptec';function greeting() {  alert('Our company is called ' + name + '.');}

这两个greeting()函数都被调用，但是你只能访问second.js文件的greeting()函数 - 它稍后会在源代码中应用到HTML中，它的变量和函数会覆盖first.js。

事件介绍

事件是你在编程时系统内的发生的动作或者发生的事情，系统通过它来告诉你在你愿意的情况下你可以以某种方式对它做出回应。

It’s not just web pages

值得注意的是并不是只有 JavaScript 使用事件——大多的编程语言都有这种机制，并且它们的工作方式不同于 JavaScript。实际上，JavaScript 网页上的事件机制不同于在其他环境中的事件机制。
比如, Node.js 是一种非常流行的允许开发者使用 JavaScript 来建造网络和服务器端应用的运行环境。Node.js event model 依赖定期监听事件的监听器和定期处理事件的处理器——虽然听起来好像差不多，但是实现两者的代码是非常不同的，Node.js 使用像 on ( ) 这样的函数来注册一个事件监听器，使用 once ( ) 这样函数来注册一个在运行一次之后注销的监听器。

内联事件处理程序 - 不要使用这些

您的代码中可能还会看到类似这样的模式：
<button onclick="bgChange()">Press me</button>
function bgChange() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
你不应该使用这些 - 它们被认为是不好的做法。如果您只是做一些非常快速的事情，那么使用事件处理程序属性似乎很容易，但是很快就变得无法管理和低效。

一开始，你不应该混用 HTML 和 JavaScript，因为这样文档很难解析——最好的办法是只在一块地方写 JavaScript 代码。