一、什么是JavaScript

了解JavaScript从最基础的概念说起，所谓JavaScript，是一门完备的动态编程语言，当应用于HTML文档时，可以为网站提供动态交互特性，JavaScript相当简洁，但却非常灵活，当然相比HTML、CSS学习起来而言，JavaScript更加复杂，接下来具体学习JavaScript的语法。

二、从基础的JavaScript学起

首先先建一个名为index.js的文件，在index.html文件的标签前添加新的代码如下：

<script src="index.js" defer></script>

该步骤是先将Javascript引入页面作用于HTML，以便后续代码使用，随后再将如下代码添加到index.js文件中:

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

即可在网页中打印得到hello world。

1.变量和数据类型

JavaScript中的主要数据类型包括：

Number: 数字，如 123，3.14，-10。
String: 字符串，可以使用单引号或双引号包围，如 'hello'，"world"。
Boolean: 布尔值，true 或 false。
Null: 表示无值或空值。
Undefined: 表示变量未定义。
Object: 对象，JavaScript中的复杂数据类型

let name = 'Jack'; // string
let age = 20; // number
let isStudent = true; // boolean
let object = {}; // object
let notDefined; // undefined

2.控制结构

条件语句 JavaScript的条件语句包括 if...else、switch 等。

let age = 20;
if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

let fruit = "apple";
switch (fruit) {
  case "banana":
    console.log("I like banana.");
    break;
  case "apple":
    console.log("I like apple.");
    break;
  default:
    console.log("I like all fruits.");
}

循环语句 JavaScript的循环语句包括 for、while、do...while 等。

for (let i = 0; i < 5; i++) {
  console.log(i);
}

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

3.函数

函数是一段可以重复使用的代码块，可以接收参数，也可以有返回值。

function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("World")); // 输出 "Hello, World!"

4.对象

在JavaScript中，对象是键值对的集合。

let person = {
  name: "John",
  age: 30,
  greet: function() {
    return "Hello, " + this.name;
  }
};
console.log(person.name); // 输出 "John"
console.log(person.greet()); // 输出 "Hello, John"

5.DOM操作

JavaScript可以用于操作网页上的元素，这被称为DOM（Document Object Model）操作。

let element = document.getElementById('myElement');
element.style.color = 'red';

6.事件处理

可以使用JavaScript来响应用户的操作，例如点击按钮、输入文本等。

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('Button clicked!');
});

了解完了JavaScript的基本语法以后，接下来学习相关的网页交互：

事件：事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是点击事件，鼠标的点击操作会触发该事件。可尝试将下面的代码输入到控制台，然后点击页面的任意位置：

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

document.querySelector 和 alert 是浏览器内置的函数，随时可用，alert()函数在浏览器窗口内弹出一个警告框，还应为其提供一个字符串参数，以告诉它警告框里要显示的内容。在这里选用了 <html>元素，然后调用了的 addEventListener() 方法，将事件名称click以及其回调函数（当事件发生时，调用该函数）传入该函数中作为调用参数。在这里addEventListener()的函数称之为匿名函数，有另一种写法，称之为箭头函数() => 代替 function ()：

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

实现简单的个性化欢迎

添加button元素

<button>切换用户</button>

设置变量

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 (!localStorage.getItem("name")) {
  setUserName();
} else {
  let storedName = localStorage.getItem("name");
  myHeading.textContent = "欢迎回来，" + storedName;
}

这里首次使用了取非运算符（逻辑非，用 ! 表示）来检测 'name' 数据是否存在。若不存在，调用 setUserName() 创建。若存在（即用户上次访问时设置过），调用 getItem() 获取保存的名字，像上文的 setUserName() 那样设置 textContent。

设置onclick事件处理

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

第一次访问网页时，页面将询问用户名并发出一段个性化的信息。可随时点击按钮来改变用户名。告诉你一个额外的福利，因为用户名是保存在 localStorage 里的，网页关闭后也不会丢失，所以重新打开浏览器时所设置的名字信息将依然存在。

当用户名为null时

//名字不为NULL
function setUserName() {
  let myName = prompt("请输入你的名字。");
  localStorage.setItem("name", myName);
  myHeading.textContent = "欢迎回来，" + myName;
}
//名字为NULL
function setUserName() {
  let myName = prompt("请输入你的名字。");
  if (!myName) {
    setUserName();
  } else {
    localStorage.setItem("name", myName);
    myHeading.textContent = "欢迎回来，" + myName;
  }
}

如果 myName 没有值或值为 null，就再次从头运行setUserName()。如果有值（上面的表达式结果不为真），就把值存储到 localStorage 并且设置标题。

实现效果：

弹窗

效果

学习总结

在学习完了js以后，感觉js要复杂很多，最基础的可能还是html，js有很多函数接口，这些需要自己多用才知道。
js在网页交互上有起着很大的作用，能够轻松实现一些网页行为
学习js还是需要多去搜索，自己多了解才能学到东西，学习起来还是比较困难的。

笔记三、初识前端-JS | 青训营