这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
前言
今天主要了解一下JS的一些基础知识：
- 什么是JS？
- JS与页面设计有什么联系？
- JS的基础语法与数据结构
一. JS初识
- JavaScript 可以找到并改变 HTML内容
- JavaScript 可以更改 HTML 属性值
- JavaScript 可以更改 HTML 样式 (CSS)，例如更改
display来隐藏或显示 HTML 元素
JavaScript 使用关键字 var 、 let 和 const 来声明变量，区分大小写，可以保存任何类型的数据，并且类型是动态的，即同一个变量可以用来保存不同的数据类型
var与let的区别：
- let声明的变量不能重复声明
- let声明的变量不能变量提升
- var是函数作用域，let是块状作用域
- 使用let声明的变量不属于顶层对象
变量提升：当使用var声明变量时，该变量会被提升到作用域的顶端，但是赋值的部分不会提升。
浏览器中的顶层对象是window，但 Node 和 Web Worker 没有window。
浏览器和 Web Worker 里面，self也指向顶层对象，但是 Node 没有self。
在Node 中的顶层对象是global，但其他环境都不支持。
二. 在哪里设置JS
- 外部JS文件，用
src标记文件路径 or URL - 内嵌式 - 写到
script标签里 - 行内式
三. JS操控数据的几种形式
- 写入到 HTML内容 - innerHTML
- 在HTML输出 - document.write()，可能会覆盖原文档
- 警告窗 window.alert() - window可选
- 浏览器控制台 console.log()
- document.getElementById("元素id").innerHTML = 内容 ;
id 属性定义 HTML 元素，再使用document.getElementById(id)来找到HTML元素，
最后使用innnerHTML属性来设置HTML内容
- 在加载 HTML 文档后使用 document.write() 将删除所有现有的 HTML，
这是因为调用了document.open()创建一个新的文档流，覆盖了原来的内容
四. JS的数据类型
String、 Number、 Bigint（大整数）、 Boolean、 Undefined、 Null、 Symbol、Object
其中Object包括： object、 array、 date
const person = {firstName:"aaa", lastName:"AAA"}; // 对象：{键值对}
const cars = ["a", "bb", "ccc"]; // 数组对象
const date = new Date("2023-1-20"); // 日期对象
可以通过对象名.属性名 或 对象名["属性名"] 访问
person.firstName ; // "aaa"
person["fiestName"] ; // "aaa"
对象既然有了属性，当然也可以有方法
// 对象
const person = {
// 属性
firstName: "John",
lastName : "Doe",
id : 5566,
// 方法
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
其中的this 关键字根据其使用方式指代不同的对象：
- 在对象方法中，this指代当前对象。
- 单独使用，this指的是全局对象。
- 在函数中，this指的是全局对象 [object Window]
- 在严格模式下的函数中，由于严格模式不允许默认绑定，this是undefined，
- 在一个事件中，this指的是接收到该事件的元素。
"use strict";
function myFunction() {
return this; // undefined
}
<button onclick="this.style.display='none'">Click to Remove Me!</button>
五. JS函数
JavaScript 函数是设计用于执行特定任务的代码块，在某物调用它或事件发生时执行
function name (parameter1, parameter2, ...) {
// 要执行的代码
}
