网页简历制作 04 JavaScript基础
- 网站建设
- 2024-02-22
- 444热度
- 0评论
JavaScript 是一门编程语言,可为网站添加交互功能(例如:游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等)
01 “hellow world”示例
scripts
的文件夹下创建一个名为 main.js 的文件
下一步,在 index.html
文件
JavaScript 是一门编程语言,可为网站添加交互功能(例如:游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等)
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!” 。
使用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'); 以及上面所有示例都是对象。 |
/*
这里的所有内容
都是注释。
*/
//单行注释
根据两个变量产生结果
运算符 | 解释 | 符号 | 示例 |
---|---|---|---|
加 | 将两个数字相加,或拼接两个字符串。 | + |
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 |
if ... else
let iceCream = "chocolate";
if (iceCream === "chocolate") {
alert("我最喜欢巧克力冰淇淋了。");
} else {
alert("但是巧克力才是我的最爱呀……");
}
(这玩意咋跟一般的编程语言这么相似)
let myVariable = document.querySelector("h1");
alert("hello!");
进行乘法运算的函数
function multiply(num1, num2) {
let result = num1 * num2;
return result;
}
document.querySelector("html").addEventListener("click", function () {
alert("别戳我,我怕疼。");
});
有点意思的
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
的值改为第二张图片的路径,并在img内加载该图片。src
的值重新设置为原始图片的路径,即原始状态。在页面底部增加此行代码
<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();
};
哇哦,真的是酷毙了的~