一站式搞定Javascript(一)

DOM (Document Object Model): DOM是W3C的标准，它定义了一个HTML或XML文档的逻辑结构和如何访问和操作这个结构的方式。DOM把文档当作一个节点树，其中每一个节点都是一个对象，可以被程序访问和修改。开发者可以通过JavaScript来遍历这个节点树，添加、删除或修改元素和属性，从而实现动态地改变网页内容、结构和样式。DOM使得web页面的内容和结构变得可编程，是实现网页交互性的基础。

BOM (Browser Object Model): BOM则是对浏览器窗口和框架的抽象表示，它提供了与浏览器窗口进行交互的对象集合，比如访问浏览器窗口尺寸、导航历史、弹出新窗口、操作浏览器界面元素（如工具栏、状态栏）等。BOM不是W3C标准的一部分，因此不同浏览器实现的BOM可能有所差异。BOM中最常见的对象是window对象，它是浏览器窗口的顶级对象，其他BOM对象（如navigator、location、history、screen等）通常都是window对象的属性。

总结来说，DOM关注的是文档内容和结构，而BOM关注的是浏览器窗口及与浏览器交互的能力。两者共同构成了Web开发者与浏览器进行交互和操作网页的强大工具集。

2.JS引入方式

行内式(在行内直接绑定事件)

<div onclick="fun"></div>

内嵌式（写在html页面中，用script标签引入）

<script>
    js代码
</script>
//切记将script标签放在dom元素的尾部，因为先加载dom标签后再用js操作dom
//window.onload = function(){
    //js代码
//}
 // 在页面加载完毕后

外部js（script标签中的src文件路径进行引入）

创建一个html文件，再创建一个js文件，在html界面引入js文件，适用于要求规范化开发，以及js代码较多时。

<script src="./js/01.js"></script>

模块化的导入

JavaScript模块化导入是ES6引入的一个重要特性，旨在解决大型项目中代码组织、复用和依赖管理的问题。主要有两种基本的模块导入方式：import语句和export语句的配合使用。下面简单介绍这两种语句的基本用法。

`export`

export用于导出模块对外提供的接口。它可以导出变量、函数或类。

导出单一成员

// module.js
export const PI = 3.14;
export function calculateArea(radius) {
  return PI * radius * radius;
}

导出默认成员

每个模块只能有一个默认导出，默认导出不需要使用大括号。在Vue-cli学习时常用，初学者可以等学Vue时再掌握，在学javascript时用处较少。

// module.js
export default function add(x, y) {
  return x + y;
}

如在实际开发中：

`import`

import语句用于从其他模块导入导出的变量、函数或类。

导入单一或多个成员

// main.js
import { PI, calculateArea } from './module';

console.log(PI); // 3.14
console.log(calculateArea(2)); // 12.56

例如

导入默认成员

1// main.js
2import add from './module';
3
4console.log(add(1, 2)); // 3

导入所有成员为一个对象

如果一个模块导出了多个成员，你也可以选择全部导入为一个对象。

// main.js
import * as module from './module';

console.log(module.PI); // 3.14
console.log(module.calculateArea(2)); // 12.56

模块化导入导出极大地提高了JavaScript代码的可维护性和可复用性，是现代前端开发不可或缺的一部分。需要注意的是，使用这些特性时要确保你的开发环境和目标浏览器支持ES6模块，或者通过工具如Babel进行转换。

3.注释

单行注释 //

多行注释 /* */

注释快捷键 ctrl + /

4.输入输出

console控制台输出

console.log()

console.tab()

console.time()

console.timeEnd()

在控制台输出，常用于检查代码是否达到想要效果

console.table([1,2,3,4,5])
    // 打印表格形式
console.time("test")
    // var num = 0
    // for(var i = 0 ; i < 999999;i++){
    //     num += i
    // }
    // console.log(num)
console.timeEnd("test")
    // 测试对应代码块内的运行时间
console.log(2)
//打印数字、字符串等
var num = 123
console.log(num)
//打印变量

document.write()不推荐

在页面中输出内容，是一个在早期 JavaScript 编程中常用的函数。这个函数的主要用途是在页面加载过程中动态生成和插入内容。它有一些重要的限制和副作用，比如把dom重绘，需要再次加载，浏览器消耗大。

document.write("Hello, World!");
//这段代码会在页面的当前位置输出 "Hello, World!" 文本。

用别的方法替代并实现效果：

替代1.innerHTML

直接修改某个元素的HTML内容。

document.getElementById("someElement").innerHTML = "New Content";

替代2.textContent

修改元素的纯文本内容，不解析HTML。

document.getElementById("someElement").textContent = "New Text";

替代3.DOM Manipulation

使用JavaScript DOM API（如 createElement, appendChild, insertBefore 等）来创建和插入新的DOM节点，这种方式更加灵活且性能更优。

let newElement = document.createElement("p");
newElement.textContent = "New Paragraph";
document.body.appendChild(newElement);

弹出框

window.alert() 弹出警告框

window.alert("你好")

window.prompt() 弹出输入框

window.prompt("你好");

window.confirm() 确定取消框

5.变量与常量：存储数据的容器

创建：变量声明和变量赋值

使用var关键字：这是最传统的声明变量的方式。var声明的变量具有函数作用域或全局作用域，但在ES6之后，因其作用域和提升（hoisting）特性可能导致一些不易察觉的错误，逐渐被let和const取代。

1.var 可以重复声明

2.var 声明变量存在声明变量提前的问题

3.var 声明的变量作用域为全局作用域

4.var声明的变量如果和函数名重合那么函数覆盖变量

5.预编译的过程中被 GO = { num : undefined -> 123

var message = "Hello, world!";
var num = 2;

使用let关键字： let是ES6引入的，提供了块级作用域的变量声明，适合在循环或条件语句等需要限制变量生命周期的场景中使用。

let 不能重复声明
let 存在变量声明提前，但是提前到暂时性死区中
let 作用域是块级作用域 { }

let count = 0;

使用const关键字： const也是ES6引入的，用于声明一个常量，其值在声明后不能被重新赋值。它同样具有块级作用域。

let的优点它都有
const声明和赋值必须同时
const 声明栈内存的值不能改变

const PI = 3.14

变量的特殊情况：

// 变量声明未赋值值为undefined
var age;
console.log(age)
// 不声明不赋值直接使用会报错
console.log(a)
// 不声明直接赋值使用则变量自动声明为全局变量
num = 13;
console.log(num)

变量命名规范：

不能以数字开头
一般以数字、字母和下划线组成
不能用关键字和保留字
变量区分大小写，尽量语义化，使用小驼峰(backgroundColor)命名

数据类型:变量的数据类型取决于变量值

6.数据类型

基本数据类型

number， string， boolearn， null， undefined， Symbol（ES6引入）

引用数据类型

Object万物皆对象

强制类型转换

Number() ,String() ,Boolearn() ,parseInt() ,parseFloat()

Number(value)：尝试将给定的值转换为数字。如果转换失败，则返回NaN。
String(value)：将任何类型的值转换为字符串形式。
Boolean(value)：将给定的值转换为布尔值。除了以下几种情况外，其他值都被视为true：null、undefined、0、NaN、空字符串('')或false。
parseInt(string, radix)和parseFloat(string)：分别将字符串转换为整数和浮点数。radix是可选的，用于指定进制。

例如：

let str = "456";
let numStr = Number(str);
console.log(numStr); 
console.log(typeof(numStr));

运行结果：

隐式类型转换

利用数学运算符号把类型转换为数字

+， - ，*， /， %

例如：

let strNum = "100";
let intNum = +strNum; // 或使用 parseInt(strNum, 10) 更精确控制
console.log(intNum); // 输出：100

运行结果：

判断变量数据类型

typeof（value）

js中的五大假值

0 ，null ，undefined， "" ，NaN

7.打开方式

“Preview in Default Browser”：flie/本地打开；这个选项会在默认的浏览器中打开你的网页文件。它仅仅是将你的文件在浏览器中打开，你所做的更改不会自动地重新加载和渲染。
“Open with Live Server”：http协议打开；http://127.0.0.1:5500/16/qie.html域名+端口+文件地址

这个选项需要安装 Live Server 插件，它会通过在本地启动一个小型的实时服务器来打开你的网页文件。它不仅会在浏览器中打开你的文件，还会自动检测你对文件的更改，并在保存文件后自动重新加载和渲染页面。这使得在开发过程中实时查看更改效果非常方便。

8.字符串拼接

在 ES6（ECMAScript 2015）中，有多种方法可以进行字符串拼接。

模板字符串（Template literals）：使用反引号``字符创建模板字符串，可以使用${}` 在字符串中插入变量或表达式。

const name = 'Alice';
const age = 25;
const message = `My name is ${name} and I'm ${age} years old.`;
console.log(message); // 输出: My name is Alice and I'm 25 years old.

字符串连接操作符（String concatenation）：可以使用加号（+）进行字符串拼接。

const name = 'Charlie';
const age = 35;
const message = "My name is " + name + " and I'm " + age + " years old.";
console.log(message); // 输出: My name is Charlie and I'm 35 years old.
      // ES5
        var str = "小A";
        console.log( str + "\n欠我一顿饭")
        document.write("<h1>"+ str +"欠我一顿饭</h1>")