前端小白之学好Javascript 第一天 （变量，数据类型）

前言

  当你作为一个JavaScript小白时，最重要的任务是打下坚实的基础。小白要学习好JavaScript的基本概念，如变量、数据类型、条件语句和循环，然后逐渐深入了解现代JavaScript特性，如ES6的箭头函数、Promise和async/await。实践是关键，因此不断编写小型代码片段，并在错误中学习，这样才能不断提升自己。

  以下的内容皆是粗糙的介绍，并不是很详细，只是介绍具体的用法，概念解释比较少，随着进一步的学习，会再次深入学习这些内容。

一，js的组成部分

  js的组成部分包含BOM，DOM，ECMAScript。ECMAScript.js 是js的规范和核心。DOM是文档对象模型，BOM是浏览器对象模型。

二，js的引入方式。

js的引入方式其实是和css的引入方式是差不多的。分为行内，内嵌，外接。

1.内部引入（行内代码）

<!-- 行内代码 -->
<div onclick="alert('hello world')">Hello World</div>

其中的 onlick="alert("hello world")"就是行内引用。行内引用比较直接。不需要额外添加内容。

2.内嵌式

一般是在html的最尾端，</body>的上方加上<script></script>标签开始使用。

例如：

<script type="text/javascript">
	alert('Hello JavaScript')
</script>

3，外链式

外部引入JavaScript文件的方式与外部引入CSS文件的方式非常相似。在HTML中，你可以使用<script>标签的src属性来引入外部JavaScript文件，就像引入外部CSS文件一样，如下所示：

 <script src="./02-js使用方式.js"></script>

三，window对象

  1,警告框，以下两者都可以。

  用于在浏览器中显示警告对话框的方法。它会在页面上弹出一个小对话框，通常包含一条消息和一个"确定"按钮，用户需要点击"确定"按钮才能关闭对话框。

window.alert("警告框");
alert("警告框");

具体效果：

会出现这个弹窗，确认框和输入框，都会出现相应的弹窗。

2.确认框window.confirm("");

  它通常用于向用户提出一个确认或取消的问题。这个对话框通常包含两个按钮："确定" 和 "取消"，用户可以选择其中一个来回应问题。

windows.confirm("确认框");
confirm("确认框");

3.输入框window.prompt("");

用于在浏览器中弹出一个对话框，其中包含一个文本输入字段，以便用户可以输入文本。

window.prompt("输入框");
prompt("输入框");

4，console.log("");

在控制台输出打印信息，它的基本语法非常简单，通常接受一个或多个参数，然后将这些参数的值输出到控制台。

console.log("Hello, world!");

5，console.dir（）；

以目录形式显示 JavaScript 对象的详细信息，特别是对象的属性和方法。对于查看复杂对象的结构非常有用。

// 创建一个示例对象
var person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    zipCode: "12345"
  }
};

// 使用 console.dir 显示对象的详细信息
console.dir(person);

6，document.wirite（）；

 放内容放置在HTML页面中

document.write("Hello, World!");

代码和文本都可以，但是要慎用。因为他会替换掉当前页面的内容，可能会破环页面的结构。
 

四，变量

1，声明变量

var是变量的声明方式之一，var 声明的变量具有函数作用域。

var num;

2，变量赋值

num=10;

3，变量初始化

var num=10;

4，完整的代码。

var num=10;
console.log(num);

  具体效果如下：

五，变量的提升

1，不声明变量，打印

console.log(num);    

结果如下：

这段话意思是：在代码中尝试使用一个名为 "num" 的变量，但是该变量在当前作用域中未被定义。

2，声明变量，不赋值，打印

var num;
console.log(num);

结果如下

出现以下结果表示：变量存在，但尚未被赋予一个值。

3，先打印，后声明，不赋值

console.log(num);
var num;

  出现了和第2个一样的结果，这是为什么？

 

  在我们提供的代码中，虽然在 console.log(num) 之后声明了 var num，但是 JavaScript 的变量提升（hoisting）机制会将变量声明提升到其所在作用域的顶部。这意味着即使你在 console.log 之后声明了变量 num，实际上 JavaScript 在执行 console.log 时仍然会将其视为已声明但未初始化，因此其值为 undefined。

  这是 JavaScript 的工作方式，它会将所有变量声明提升到函数或全局作用域的顶部。因此，你的代码在运行时实际上等同于：

var num; // 变量声明被提升到作用域的顶部

console.log(num); // 输出 undefined

  这就是为什么 num 的值是 undefined 而不是引发 "num is not defined" 错误。在这种情况下，num 已经被声明，但它没有被赋予一个值，所以它的默认值是 undefined。如果你想避免这种情况，应该在使用变量之前给它一个初始值。

4，先打印，然后声明和赋值

   console.log(num);
   var num=2

当我们在控制台检查的时候发现，他依然和第2个结果一毛一样，这是为什么？

这是因为JavaScript 仍然会将变量声明提升到作用域的顶部，但是赋值部分仍然保留在原始位置。

所以上面的代码就等价于：

var num; // 变量声明被提升到作用域的顶部
console.log(num); // 输出 undefined
num = 2; // 变量赋值语句

六，基本数据类型

1,字符串（String）: 用于表示文本，例如："Hello, World!"。

var str="hello word";

2,数字（Number）: 用于表示数字，包括整数和浮点数，例如：42 或 3.14。

var num=1;

3,布尔（Boolean）: 用于表示逻辑值，只有两个值，true 和 false。

var bl=true;

4,空值（null）: 表示变量没有值。

var nl=null;

5,未定义（undefined）: 表示声明了变量但未赋值。

var lar=undefined;

6,NaN,（非数值，Not-a-Number）: 表示一个非数值，通常出现在数学运算中无法得出有效结果的情况下。例如：

var not=NaN;

七，检测数据类型

 typeof 是 JavaScript 中的一个运算符，用于检测给定变量的数据类型。它返回一个字符串，表示变量的数据类型。

var str = "Hello, World!";
console.log(typeof str); // 输出 "string"

var num = 42;
console.log(typeof num); // 输出 "number"