Web 开发学习笔记三（js 基础）

变量（Variable）

let my = 'my';
var My = 'My';

变量	解释	示例
String	字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）括起来。	let myVariable = '李雷';
Number	数字：无需引号。	let myVariable = 10;
Boolean	布尔值（真 / 假）： true/false 是 JS 里的特殊关键字，无需引号。	let myVariable = true;
Array	数组：用于在单一引用中存储多个值的结构。	let myVariable = [1, '李雷', '韩梅梅', 10]; 元素引用方法：myVariable[0], myVariable[1] ……
Object	对象：JavaScript 里一切皆对象，一切皆可储存在变量里。这一点要牢记于心。	let myVariable = document.querySelector('h1'); 以及上面所有示例都是对象。

运算符

运算符	解释	符号	示例
加	将两个数字相加，或拼接两个字符串。	+	6 + 9; "Hello " + "world!";
减、乘、除	这些运算符操作与基础算术一致。只是乘法写作星号，除法写作斜杠。	-, *, /	9 - 3; 8 * 2; //乘法在 JS 中是一个星号 9 / 3;
赋值运算符	为变量赋值（你之前已经见过这个符号了）	=	let myVariable = '李雷';
等于	测试两个值是否相等，并返回一个 true/false （布尔）值。	===	let myVariable = 3; myVariable === 4; // false
不等于	和等于运算符相反，测试两个值是否不相等，并返回一个 true/false （布尔）值。	!==	let myVariable = 3; myVariable !== 3; // false
取非	返回逻辑相反的值，比如当前值为真，则返回 false。	!	原式为真，但经取非后值为 false： let myVariable = 3; !(myVariable === 3); // false

 完整列表请参阅 表达式和运算符。

函数（Function）

document.querySelector 和 alert 是浏览器内置的函数，随时可用。

alert() 函数在浏览器窗口内弹出一个警告框，还应为其提供一个字符串参数，以告诉它警告框里要显示的内容。

事件

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是点击事件，鼠标的点击操作会触发该事件。

document.querySelector("html").addEventListener("click", function () {
  alert("别戳我，我怕疼。");
});

传递给 addEventListener() 的函数被称为匿名函数，因为它没有名字。匿名函数还有另一种我们称之为箭头函数的写法，箭头函数使用 () => 代替 function ()：

document.querySelector("html").addEventListener("click", () => {
  alert("别戳我，我怕疼。");
});

prompt() 函数，与 alert() 类似会弹出一个对话框。但是这里需要用户输入数据，并在确定后将数据存储在 myName 变量里。接下来将调用 localStorage API，它可以将数据存储在浏览器中供后续获取。这里用 localStorage 的 setItem() 函数来创建一个'name' 数据项，并把 myName 变量复制给它。最后将 textContent 属性设置为一个欢迎字符串加上这个新设置的名字。

function setUserName() {
  let myName = prompt("请输入你的名字。");
  localStorage.setItem("name", myName);
  myHeading.textContent = "Mozilla 酷毙了，" + myName;
}

更多内容请访问 Javascript 学习页面。