前端学习记录~2023.6.8~JavaScript基础

---

前言

本次只是整理记录 MDN 网站上最前面的基础入门的三大件基础，后续会分别专门深入探究。

---

JavaScript 基础

1. JavaScript 是什么

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

在index.html文件的</body>标签前的新行添加下面代码来把js引入页面以发挥作用

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

我们将 <script> 放在 HTML 文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略

2. JavaScript 快速入门

1）变量（Variable）

变量 是存储值的容器。要声明一个变量，先输入关键字 let 、const 或 var，然后输入合适的名称

比如：

let myVariable;

行末的分号表示当前语句结束，不过只有在单行内需要分割多条语句时，这个分号才是必须的

2）数据类型

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

3）注释

多行：

/*
这里的所有内容
都是注释
*/

单行：

// 这是一条注释

4）运算符

js 的运算符较多，直接参考下面这个网站的具体解释

表达式和运算符

5）条件语句

也就是if ... else

let iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('我最喜欢巧克力味儿了');
} else {
  alert('为什么不是巧克力！');
}

==相等 运算符在比较不同类型的操作数时会尝试进行强制类型转换
===严格相等 运算符会认为不同类型的操作数是不同的

6）函数

用来封装可复用的功能。

有一些是浏览器内置的函数，如document.querySelector和alert

let myVariable = document.querySelector('h1');

alert('hello!');

或者自己定义函数，比如：

function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

7）事件

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码作为响应。

比如点击事件，鼠标的点击会触发该事件：

document.querySelector("html").addEventListener("click", function(){
    alert("你刚刚点了鼠标");
});

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

document.querySelector("html").addEventListener("click", () =>{
    alert("你刚刚点了鼠标");
});

3. 完善网页：添加更多功能特性

尝试一些更多特性

1）添加一个图像切换器

这里将用新的DOM API为网页添加另一张图片，并用 JavaScript 使图片在点击时进行切换

1. 找到另一张想要展示的图片，尺寸和第一张尽量相同
2. 存储到 images 目录下
3. 在 js 文件中添加下面代码

let myImage = document.querySelector("img");
myImage.onclick = function(){
    let mySrc = myImage.getAttribute("src");
    if (mySrc === 'images/s1mple.jpg'){
        myImage.setAttribute("src", "images/tc.jpg");
    }
    else{
        myImage.setAttribute("src", "images/s1mple.jpg");
    }
}

4. 保存所有文件并用浏览器打开 html

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

1. 获取这张照片的src属性值
2. 用一个条件句判断该属性值是否等于原始图像的路径
   a. 如果是，则将src的值改为第二张图片的路径，并在<img>内加载该图片
   b. 如果不是（也就是已经修改过），则把src重新设置为原始图像路径

2）添加个性化欢迎信息

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

1. 打开index.html，在<script>标签前添加以下代码，这将在页面底部显示一个 切换用户 字样的按钮

<button>切换用户</button>

2. 使用下面的js代码来获取新按钮和标题的引用，并保存至变量中

let myButton = document.querySelector("button");
let myHeading = document.querySelector("h1");

3. 添加下面函数来设置个性化欢迎信息（函数需要在调用后生效，下文中提供了两种对该函数的调用方式）

function setUserName(){
    let myName = prompt("请输入你的名字");
    localStorage.setItem("name", myName);
    myHeading.textContent = myName + "，宁吃了么？";
}

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

4. 添加下面的if ... else块。我们可以称之为初始化代码，因为它在页面初次读取时进行构造工作

if(!localStorage.getItem("name")){
    setUserName();
}
else{
    let storedName = localStorage.getItem("name");
    myHeading.textContent = myName + "，宁吃了么？";
}

使用!来检测name数据是否存在。
如果不存在，就调用setUserName()函数来创建。
如果存在（即用户上次访问时设置过），就调用getItem获取保存的名字，再像之前的setUserName()那样设置textContent

5. 最后，为按钮设置onclick事件处理器。按钮按下时运行setUserName()函数。这样用户就可以通过按这个按钮来设置新的名字

myButton.onclick = function(){
    setUserName();
}

第一次访问网页时，页面将询问用户名并发出一段个性化的信息。可随时点击按钮来改变用户名。

因为用户名是保存在localStorage里的，网页关闭后也不会丢失，所以重新打开浏览器时所设置的名字信息将依然存在

3）用户名如果为 null 呢？

在刚才的例子中，如果在输入用户名的对话框中点击"取消"那么名字的位置会显示为 null，也就是 “null, 宁吃了么”。
这是因为取消提示对话框后值将设置为null

另外，如果不输入内容直接点击"确认"，那就会显示为"，宁吃了么"

如果要避免这些问题，就需要在setUserName中检查用户是否输入了 null 或空名字，当出现这两种情况时就继续提示用户输入姓名：

function setUserName(){
    let myName = prompt("请输入你的名字");
    if(!myName){
        setUserName();
    }
    else
    {
        localStorage.setItem("name", myName);
        myHeading.textContent = myName + "，宁吃了么？";
    }
}

---

总结

本次只是基本入门，后续会更详细探究。