网页简历制作 04 JavaScript基础

武昌鱼
网站建设
2024-02-22
294热度
0评论

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

01 “hellow world”示例

scripts 的文件夹下创建一个名为 main.js 的文件

下一步，在 index.html 文件标签前的新行添加以下代码。

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

现在将以下代码添加到 main.js 文件中：

let myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";

用 querySelector() 函数获取标题的引用，并把它储存在 myHeading 变量中，之后，把 myHeading 变量的属性 textContent （标题内容）修改为“Hello world!” 。

Javascript快速入门

02 变量（Variable）

使用let或者var声明一个变量

let myVariable;

进行变量赋值

myVariable = "李雷";

写在同一行之中

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

03 注释

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

//单行注释

04 运算符

根据两个变量产生结果

运算符	解释	符号	示例
加	将两个数字相加，或拼接两个字符串。	`+`	`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`

05 条件语句

if ... else

let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("我最喜欢巧克力冰淇淋了。");
} else {
  alert("但是巧克力才是我的最爱呀……");
}

(这玩意咋跟一般的编程语言这么相似)

06 函数 Function

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

alert("hello!");

进行乘法运算的函数

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

07 事件

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

有点意思的

08 图像切换器

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");
  }
};

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

获取这张图片的 src 属性值。
用一个条件句来判断src的值是否等于原始图像的路径：
1. 如果是，则将 src 的值改为第二张图片的路径，并在img内加载该图片。
2. 如果不是，则把 src 的值重新设置为原始图片的路径，即原始状态。

09 个性化欢迎页

在页面底部增加此行代码

<button>切换用户</button>

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

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

if (!localStorage.getItem("name")) {
  setUserName();
} else {
  let storedName = localStorage.getItem("name");
  myHeading.textContent = "Mozilla 酷毙了，" + storedName;
}

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

哇哦，真的是酷毙了的~