MDN JS学习笔记 Day 2 （JavaScript 基础要件）

demo 1 :

products = [
    "Underpants:6.99",
    "Socks:5.99",
    "T-shirt:14.99",
    "Trousers:31.99",
    "Shoes:23.99"
  ];

  for (var i = 0; i <= products.length; i++) {
    let item = products[i].split(":");
    var name = item[0];
    var price = item[1];
    total += price;
    itemText = 0;
    itemText = name + "- $ " + price;
    var listItem = document.createElement("li");
    listItem.textContent = itemText;
    list.appendChild(listItem);
  }

  totalBox.textContent = "Total: $" + total.toFixed(2);

split()  是操作字符串的

---

循环：

var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];    【下列目的：比较 < 和 <= 】

break: 完全跳出循环

continue: 跳过当前循环而执行下一个循环

跳过： while 和 do...while

建议使用for，因为它可能是最简单地帮你记住一切 - 初始化程序，退出条件和最终表达式都必须整齐地放入括号，所以很容易看到他们在哪里并检查你没有丢失他们。

---

for(i=0;i<10;i++){console.log(i)};  //控制台输出 0 到 9。

---

创建功能时，最好只要坚持下列形式：

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

---

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

Press me  

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

即使在单一文件中，内置事件处理器也不是一个好主意。一个按钮看起来还好，但是如果有一百个按钮呢？您得在文件中加上100个属性。这很快就会成为维护人员的噩梦。使用 Java Script，您可以给网页中的 button 都加上事件处理器。就像下面这样：

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].onclick = bgChange;
}

---

addEventListener()和removeEventListener()

您也可以给同一个监听器注册多个处理器，下面这种方式不能实现这一点：

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

第二行会覆盖第一行，但是下面这种方式就会正常工作了：

 

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

---

事件对象

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

btn.addEventListener('click', bgChange);

在这里，您可以看到我们在函数中包括一个事件对象e，并在函数中设置背景颜色样式在e.target上 - 它指的是按钮本身。 事件对象 e 的target属性始终是事件刚刚发生的元素的引用。 所以在这个例子中，我们在按钮上设置一个随机的背景颜色，而不是页面。

控制台输出：MouseEvent {isTrusted: true, screenX: 290, screenY: 191, clientX: 290, clientY: 94, …}

 

当您要在多个元素上设置相同的事件处理程序时，e.target非常有用，并且在发生事件时对所有元素执行某些操作。

我们使用JavaScript创建了16个

元素。接着我们使用 document.querySelectorAll()选择全部的元素,然后遍历每一个,为每一个元素都添加一个onclick单击事件，每当它们点击时就会为背景添加一个随机颜色。

var divs = document.querySelectorAll('div');

for (var i = 0; i < divs.length; i++) {
  divs[i].onclick = function(e) {
    e.target.style.backgroundColor = bgChange();
  }
}