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

您所在的位置：网站首页 › 网站放置备案号代码是什么 › 前端学习记录~2023.6.8~JavaScript基础

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

2023-06-16 05:12| 来源: 网络整理| 查看: 265

前言JavaScript 基础1. JavaScript 是什么2. JavaScript 快速入门1）变量（Variable）2）数据类型3）注释4）运算符5）条件语句6）函数7）事件 3. 完善网页：添加更多功能特性1）添加一个图像切换器2）添加个性化欢迎信息3）用户名如果为 null 呢？总结

前言

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

JavaScript 基础 1. JavaScript 是什么

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

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

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

2. JavaScript 快速入门 1）变量（Variable）

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

比如：

let myVariable;

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

2）数据类型变量解释示例String字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）括起来let myVariable = '李雷';Number数字：无需引号let myVariable = 10Boolean布尔值（真 / 假）： 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 使图片在点击时进行切换

找到另一张想要展示的图片，尺寸和第一张尽量相同存储到 images 目录下在 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"); } } 保存所有文件并用浏览器打开 html

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

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

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

打开index.html，在标签前添加以下代码，这将在页面底部显示一个切换用户字样的按钮切换用户使用下面的js代码来获取新按钮和标题的引用，并保存至变量中 let myButton = document.querySelector("button"); let myHeading = document.querySelector("h1"); 添加下面函数来设置个性化欢迎信息（函数需要在调用后生效，下文中提供了两种对该函数的调用方式） function setUserName(){ let myName = prompt("请输入你的名字"); localStorage.setItem("name", myName); myHeading.textContent = myName + "，宁吃了么？"; }

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

添加下面的if ... else块。我们可以称之为初始化代码，因为它在页面初次读取时进行构造工作 if(!localStorage.getItem("name")){ setUserName(); } else{ let storedName = localStorage.getItem("name"); myHeading.textContent = myName + "，宁吃了么？"; }

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

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

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

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

3）用户名如果为 null 呢？

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

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

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

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

学习时涉及的前端项目代码放在了这里。

【本文地址】

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

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

今日新闻

推荐新闻