【Web前端开发】——JavaScript基础

根据MDN网站学习记录笔记

---

前言

JavaScript 是一门编程语言，可为网站添加交互功能（例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等）。

---

一、JavaScript是什么？

JavaScript（缩写：JS）是一门完备的动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。

二、JavaScript快速入门

变量

变量是存储值的容器。JavaScript对大小写敏感。要声明一个变量，先输入关键字 let 或 var，然后输入合适的名称：

let myVariable;
// 变量定义后可以进行赋值
myVariable = '李雷';
//也可以将定义、赋值操作写在同一行
let myVariable = '李雷';
//可以直接通过变量名取得变量的值
myVariable;
//变量在赋值后是可以更改的
let myVariable = '李雷';
myVariable = '韩梅梅';

变量的多种数据类型：

变量	解释	示例
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');以及上面所有示例都是对象。

运算符

es：
等于=== 测试两个值是否相等，并返回一个true/false（布尔）值
不等于！==测试两个值是否不相等，并返回一个true/false（布尔）值

---

条件语句和函数

语法类似于其他编程语言，略

事件

最简单的事件是 点击事件，鼠标的点击操作会触发该事件。 可尝试将下面的代码输入到控制台，然后点击页面的任意位置：

document.querySelector('html').onclick = function() {
    alert('别戳我，我怕疼。');
}

将事件与元素绑定

document.querySelector('html').onclick = function() {};
//等价于
let myHTML = document.querySelector('html');
myHTML.onclick = function() {};

三、完善示例网页

添加一个图像切换器

// 获取这张图片的 src 属性值。
// 用一个条件句来判断 src 的值是否等于原始图像的路径:
// 如果是，则将 src 的值改为第二张图片的路径，并在  内加载该图片。
// 如果不是（意味着它已经修改过）, 则把 src 的值重新设置为原始图片的路径，即原始状态。

let myImage = document.querySelector('img');

myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute('src', 'images/firefox2.png');
    } else {
      myImage.setAttribute('src', 'images/firefox-icon.png');
    }
}

添加个性化欢迎信息

在用户初次进入站点时将网页的标题改成一段个性化欢迎信息（即在标题中添加用户的名字）。名字信息会由 Web Storage API 保存下来，即使用户关闭页面之后再重新打开，仍可得到之前的信息。还会添加一个选项，可以根据需要改变用户名字以更新欢迎信息。

    <button>切换用户button>

    <script src="scripts/main.js" defer>script>

// 这里首先把  元素的引用存放在 myImage 变量里。然后将这个变量的 onclick 事件与一个匿名函数绑定。每次点击图片时：

// 获取这张图片的 src 属性值。
// 用一个条件句来判断 src 的值是否等于原始图像的路径:
// 如果是，则将 src 的值改为第二张图片的路径，并在  内加载该图片。
// 如果不是（意味着它已经修改过）, 则把 src 的值重新设置为原始图片的路径，即原始状态。

let myImage = document.querySelector('img');

myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute('src', 'images/firefox2.png');
    } else {
      myImage.setAttribute('src', 'images/firefox-icon.png');
    }
}

// 获取新按钮和标题的引用，并保存至变量中
let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');

// prompt() 函数， 与 alert() 类似会弹出一个对话框
function setUserName() {
    let myName = prompt('请输入你的名字。');
    // 调用 localStorage API ，它可以将数据存储在浏览器中供后续获取
    localStorage.setItem('name', myName);
    myHeading.textContent = 'Mozilla 酷毙了，' + myName;
  }

// 初始化代码
if(!localStorage.getItem('name')) {
    setUserName();
  } else {
    let storedName = localStorage.getItem('name');
    myHeading.textContent = 'Mozilla 酷毙了，' + storedName;
  }

// 为按钮设置 onclick 事件处理器
myButton.onclick = function() {
    setUserName();
 }

// 避免取消提示对话框后值将设置为 null，这是 JavaScript 中的一个特殊值，表示引用不存在。
// 更新 setUserName() 来检查用户是否输入了 null 或者空名字
function setUserName() {
    let myName = prompt('请输入你的名字。');
    if(!myName || myName === null) {
      setUserName();
    } else {
      localStorage.setItem('name', myName);
      myHeading.innerHTML = 'Mozilla 酷毙了，' + myName;
    }
  }