day17-18进一步学习JS第二部分

笔记（学习时间：3小时）

二、MDN 阅读完JavaScript第一步及JavaScript基础要件

JS第一步

事前准备

写在下篇文章。

JavaScript 初体验

练习时，可以使用开发者工具 JavaScript 控制台，即chrome浏览器中按f12，点击console，换行是shift+enter。ctrl+l：清屏

浅谈对象（Object）

通过 focus() 方法让光标在页面加载完毕时自动放置于 输入框内，这意味着玩家可以马上开始第一次猜测，而无需点击输入框。 这只是一个小的改进，却提高了可用性——为使用户能投入游戏提供一个良好的视觉线索。

查找并解决 JavaScript 代码的错误

• 语法错误：代码中存在拼写错误，将导致程序完全或部分不能运行，通常你会收到一些出错信息。只要熟悉语言并了解出错信息的含义，你就能够顺利修复它们。
• 逻辑错误：有些代码语法虽正确，但执行结果和预期相悖，这里便存在着逻辑错误。这意味着程序虽能运行，但会给出错误的结果。由于一般你不会收到来自这些错误的提示，它们通常比语法错误更难修复。
• console.log(n) 可以把变量n的值打印到控制台。
• Math.random() 它生成一个在 0 和 1 之间的十进制随机数，例如 0.5675493843。
• Math.floor() 它会舍弃小数部分返回与之最接近的整数。
• Math.floor(Math.random() * 100) + 1; 得到1~100的随机数。

property（属性）

忘了写字符串开始的引号：
SyntaxError: expected expression, got ‘string’（得到一个 ‘string’ 而非表达式）

忘了写字符串结束的引号：
SyntaxError: unterminated string literal（字符串字面量未正常结束）
unterminated（未结束）literal（字面意义的）

如何存储你需要的信息 — 变量

querySelector（查询选择器）

<button>Press me</button>
<script>
const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
</script>
}

var 与 let 的区别

var兼容性好
let更靠谱

变量类型

与其他编程语言不同，在 JavaScript 中你不需要声明一个变量的类型。

let myAge = 17;//number类型
let dolphinGoodbye = 'So long and thanks for all the fish';//string类型
let iAmAlive = true;//boolean（布尔）类型
let myNameArray = ['Chris', 'Bob', 'Jim'];
let myNumberArray = [10,15,40];//array（数组）类型

当数组被定义后，您可以使用如下所示的语法来访问各自的值，例如下行:

myNameArray[0]; // should return 'Chris'
myNumberArray[2]; // should return 40

---

let dog = { name : 'Spot', breed : 'Dalmatian' };//object（对象）类型

要检索存储在对象中的信息，可以使用以下语法:

dog.name

---

动态类型

JavaScript是一种“动态类型语言”，这意味着不同于其他一些语言(译者注：如C、JAVA)，您不需要指定变量将包含什么数据类型（例如number或string）
例如，如果你声明一个变量并给它一个带引号的值，浏览器就会知道它是一个字符串.

名为typeof的特殊的操作符 ——它会返回所传递给它的变量的数据类型:

let myNumber = '500'; 
typeof myNumber;// 返回string

JavaScript中的基础数学 — 数字和操作符

% 求余（取模）
** 幂

let num1 = 4;
num1++;//返回4（这是因为浏览器先返回当前值，然后增加变量。 ）
num1//返回5
num2--//同理
//若使用++num1 和 --num2就是先自增/减再返回值。

===严格等于
!==严格不等于
//也有==和!=的版本，这种的话类型不同也算相同，容易出错。

文本处理 — JavaScript中的字符串

用\转义以确保它们被识别成文本

let bigmouth = 'I\'ve got no right to take my place...';
bigmouth;

另一种点击事件的书写方式

<button>Press me</button>
const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

---

• 如果可以的话， Number 对象将把传递给它的任何东西转换成一个数字。
• 另一方面，每个数字都有一个名为 toString() 的方法，它将把它转换成等价的字符串。

有用的字符串方法

let browserType = ‘mozilla’;

• 获得字符串的长度：browserType.length;
• 检索特定字符串字符：browserType[0];（第一个）browserType[browserType.length-1];（最后一个）
• 在字符串中查找子字符串，返回它的位置：browserType.indexOf(‘zilla’);（结果是2）browserType.indexOf(‘vanilla’);（没找到，返回-1）
• 提取。browserType.slice(0,3);（提取moz，[0,3)）
• 提取。browserType.slice(2);（某个字符之后提取字符串中的所有剩余字符[2,末尾]）

let radData = ‘My NaMe Is MuD’;

• 转换大小写：radData.toLowerCase();（变小）radData.toUpperCase();（变大）
• 替换字符串的某部分：browserType.replace(‘moz’,‘van’);（vanilla）

大写修正实践

  var input2 = cities[i].toLowerCase();
  var first = input2.slice(0,1);
  var first2 = first.toUpperCase();
  var input3 = input2.replace(first,first2);
  var result = input3;

从原先部分得到新字符串实践

  var input = stations[i];
  var station = stations[i].slice(0,3);
  var find = stations[i].indexOf(";");
  var name = stations[i].slice(find + 1)
  var input2 = station + ": " + name
  var result = input2;

数组

访问和修改数组元素

（从零开始计数）

• 访问：shopping[0];
• 修改：shopping[0] = ‘tahini’;
• 数组中包含数组的话称之为多维数组，访问多维数组：random[2][2];
  （let random = [‘tree’, 795, [0, 1, 2]];）

console.log(变量) //可以把变量打印至控制台

一些有用的数组方法（数组里不一定是数，不要有思维定式）

• 获取数组长度：.length
• 字符串变数组：（一个字符串变成了有六个值的数组）

let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
let myArray = myData.split(',');
myArray;

• 数组变字符串：

let myNewString = myArray.join(',');
myNewString;

另一种方法：（tostring方法）（这个方法不能指定分隔符）

let dogNames = ["Rocket","Flash","Bella","Slugger"];
dogNames.toString(); //Rocket,Flash,Bella,Slugger

• 添加项（在末尾添加一个或多个项用逗号分隔）（同时返回数组的新长度）：.push()
• 将新数组长度存储在变量中：var newLength = myArray.push(‘Bristol’);
• 删除最后一个元素（返回被删除的项）：.pop
• 同样，被删除的项可以存储在变量中：let removedItem = myArray.pop();
• unshift() 和 shift() 从功能上与 push() 和 pop() 完全相同只是它们分别作用于数组的开始，而不是结尾。（unshift为添加）

实践：打印产品价格

关键代码：

  var subArray = products[i].split(":");
  var name = subArray[0];
  var price = Number(subArray[1]);
  total += price;
  itemText = name + " --$ " + price;

注意拼写啊！拼写错了会出错并且没结果的。
我把split中的li拼写错了。

实践：前5个搜索

.pop（删除数组末尾）
.push（在数组末尾添加）
.shift（删除数组开头）
.unshift（在数组开头添加）

JS基础要件

条件语句

explicitly specify（显式指定）（明确地详述）

以下写法是错误的：

if (x === 5 || 7 || 10 || 20) {
  // run my code
}

这个写法的意思是：7或10或20或x === 5（为了避免歧义，我把7卸载了前面）
由于任何不是 false, undefined, null, 0, NaN 的值，或一个空字符串（’’）在作为条件语句进行测试时实际返回true，以上语句永远返回true。

三元运算符

condition ? exprIfTrue : exprIfFalse
例：
1

var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';

2

  ( select.value === 'black' ) ? update('black','white') : update('white','black');

循环

略

函数

• 请记住，这些内置浏览器函数不是核心JavaScript语言的一部分——被定义为浏览器API的一部分，它建立在默认语言之上，以提供更多的功能（请参阅本课程的早期部分以获得更多的描述）。我们将在以后的模块中更详细地使用浏览器API。
• 函数与方法的区别在于方法是在对象内定义的函数。

匿名函数

匿名函数与事件处理程序一起使用：

var myButton = document.querySelector('button');

myButton.onclick = function() {
  alert('hello');
}

以下内容看看玩就行

将匿名函数分配为变量的值：

var myGreeting = function() {
  alert('hello');
}

于是现在可以使用以下方式调用此函数：

myGreeting();

还可以将该函数分配为多个变量的值：

var anotherGreeting = function() {
  alert('hello');
}

现在可以使用以下任一方法调用此函数：

myGreeting();
anotherGreeting();

但这只会令人费解，所以不要这样做！创建方法时，最好坚持下列形式：

function myGreeting() {
  alert('hello');
}

函数参数

略

函数作用域（ scope）和冲突

• 所有函数的最外层被称为全局作用域。 在全局作用域内定义的值可以在任意地方访问。（函数访问变量时，要考虑变量的作用域）
• 函数内部可以有函数

一个冲突的例子：

<!-- Excerpt from my HTML -->
<script src="first.js"></script>
<script src="second.js"></script>
<script>
  greeting();
</script>

// first.js
var name = 'Chris';
function greeting() {
  alert('Hello ' + name + ': welcome to our company.');
}

// second.js
var name = 'Zaptec';
function greeting() {
  alert('Our company is called ' + name + '.');
}

• 这两个函数都使用 greeting() 形式调用，但是你只能访问到 first.js 文件的greeting()函数（第二个文件被忽视了）。另外，第二次尝试使用 let 关键字定义 name 变量导致了一个错误。将代码锁定在函数中的部分避免了这样的问题（第一个问题还是没有避免），并被认为是最佳实践。

创建函数

alert（警示的）

• 不管你是先定义后调用还是先调用后定义都行
• 对于点击事件，如果使用实名函数，函数后面不能加括号。括号是函数调用运算符，只有在想直接调用函数的地方才这么写，如果加了括号，点击事件失效。对于点击事件，使用匿名函数时，加了括号，是因为定义函数需要加括号。

函数返回值

• isNaN()函数用来确定一个值是否为NaN
• NaN意为Not-A-Number

parameter（参数）
validate（认证）

事件介绍

• .random()返回的值大于等于0小于1
• JS中的事件机制不同于一些其他语言

使用网页事件的方式

一、事件处理器属性（如.onclick）

两种方法：
1

const btn = document.querySelector('button');

btn.onclick = function() {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

2

const btn = document.querySelector('button');

function bgChange() {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

btn.onclick = bgChange;

复习：第二种方法最后一行的函数后没括号哦！括号是函数调用运算符。

一些事件

btn.onfocus 置于焦点时
btn.onblur 解除焦点时
btn.ondblclick 颜色将仅于按钮被双击时改变
window.onkeypress 按下并松开
window.onkeydown 按下
window.onkeyup 松开
以上三个事件如果你将事件处理器添加到按钮本身，它将不会工作 — 我们只能将它添加到代表整个浏览器窗口的 window对象中。
btn.onmouseover 鼠标移入
btn.onmouseover 鼠标移出

• 一些事件非常通用，几乎在任何地方都可以用（比如 onclick 几乎可以用在几乎每一个元素上），然而另一些元素就只能在特定场景下使用，比如我们只能在 video 元素上使用 onplay。

二、行内事件处理器 - 请勿使用

略

三、addEventListener() 和removeEventListener()

• 在addEventListener() 函数中, 我们具体化了两个参数——我们想要将处理器应用上去的事件名称，和包含我们用来回应事件的函数的代码。注意将这些代码全部放到一个匿名函数中是可行的，实名也可行~
• 这个机制带来了一些相较于旧方式的优点。有一个相对应的方法，removeEventListener()，这个方法移除事件监听器。
• 在这个简单的、小型的项目中可能不是很有用，但是在大型的、复杂的项目中就非常有用了，可以非常高效地清除不用的事件处理器，另外在其他的一些场景中也非常有效——比如您需要在不同环境下运行不同的事件处理器，您只需要恰当地删除或者添加事件处理器即可。

可以给同一个监听器注册多个处理器（指函数AB）：

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

然而，不用这个函数就不行：（第二行会覆盖第一行）

myElement.onclick = functionA;
myElement.onclick = functionB;

• 此外，该事件机制还提供了许多其他强大的特性和选项。这对于本文来说有点超出范围，但是如果您想要阅读它们，请查看addEventListener()和removeEventListener()参考页面。（以后康康！）

用那种好呢？

HTML事件处理，这个out啦。因为不好用啊！
事件处理器属性的选项会更少，于是兼容性更好。
那两个函数更强大。

其他事件概念

我累了，歇会儿啊。
歇够了

事件对象

通常使用e / evt / event命名
.target属性始终是事件刚刚发生的元素的引用

function bgChange(e) {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}  

btn.addEventListener('click', bgChange);

还有一些别的属性，用到的时候再说。

阻止默认行为

preventDefault()

事件冒泡及捕获

冒泡阶段：

• 浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它
• 然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素。

捕获阶段反过来，从开始。

---

• 默认情况下，所有事件处理程序都是在冒泡阶段注册的，这在大多数情况下更有意义。如果您真的想在捕获阶段注册一个事件，那么您可以通过使用addEventListener()注册您的处理程序，并将可选的第三个属性设置为true。
• stopPropagation()函数, 当在事件对象上调用该函数时，它只会让当前事件处理程序运行，但事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行(不会向上冒泡)。

事件委托

• 如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并让子节点上发生的事件冒泡到父节点上，而不是每个子节点单独设置事件监听器。
• 例如：如果你想让每个列表项被点击时弹出一条信息，您可以将click单击事件监听器设置在父元素
  上，这样事件就会从列表项冒泡到其父元素
  上。

  结论

  • 以上是早期阶段需要了解的所有web事件。事件并不是JavaScript的核心部分——它们是在浏览器Web APIs中定义的。
  • 另外，理解JavaScript在不同环境下使用不同的事件模型很重要——从Web api到其他领域，如浏览器WebExtensions和Node.js(服务器端JavaScript)。