day01 变量和数据

一、邂逅JavaScript

1.1 计算机语言和编程语言区别

• 计算机语言：人与计算机交流的语言，包括机器语言（0和1）、汇编语言等

• 编程语言：人类用来编写程序指令的语言，比如JavaScript、Python、Java等

• 简单理解：编程语言是我们给计算机下命令的工具

1.2 编程语言发展历史

发展过程：机器语言 → 汇编语言 → 高级语言

• 机器语言：全是0和1，计算机直接理解

• 汇编语言：用简单英文单词代替0和1

• 高级语言：类似英语的语法，人类更容易理解

1.3 JavaScript的起源和历史

• 1995年由Brendan Eich发明

• 最初叫LiveScript，为了蹭Java热度改名JavaScript

• 重要：JavaScript和Java是两种完全不同的语言！

1.4 JavaScript的组成部分

JavaScript = ECMAScript + DOM + BOM

• ECMAScript：核心语法规则

• DOM：操作网页内容（比如改变文字、图片）

• BOM：操作浏览器窗口（比如弹出新窗口）

1.5 JavaScript的运行-JS引擎

• JS引擎：浏览器中专门执行JavaScript代码的"翻译官"

• 不同浏览器使用不同引擎：

  • Chrome：V8引擎

  • Firefox：SpiderMonkey

  • Safari：JavaScriptCore

1.6 JavaScript的应用场景

1. 网页交互：按钮点击、表单验证

2. 动画效果：轮播图、下拉菜单

3. 游戏开发：网页小游戏

4. 服务器开发：Node.js

5. 移动应用：React Native

二、JavaScript基础

2.1 编写JavaScript的位置

三种方式：

1. 内部JavaScript：写在HTML的<script>标签里

   <script>
     alert('你好，世界！');
   </script>

2. 外部JavaScript：写在单独的.js文件里

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

3. 行内JavaScript：直接写在HTML标签里（不推荐）

   <button οnclick="alert('点击了！')">点击我</button>

2.2 document.write方法

• 向HTML文档中写入内容

• 注意：如果在页面加载完成后使用，会覆盖整个页面

// 在页面加载时使用
document.write("这是写入的内容");
​
// 示例
document.write("<h1>欢迎来到我的网站</h1>");
document.write("<p>今天天气真好</p>");

2.3 noscript

• 当浏览器不支持JavaScript时显示的内容

• 现在很少用到，因为现代浏览器都支持JS

<noscript>
  您的浏览器不支持JavaScript，请升级浏览器！
</noscript>

2.4 编写JavaScript注意事项

1. 分号：每条语句最好以分号结尾

2. 大小写敏感：myVar和myvar是两个不同的变量

3. 代码格式：保持良好的缩进和空格

4. 引号匹配：引号要成对出现

2.5 浏览器交互方式

四种常用输出方式：

1. alert() - 警告框

   alert('这是一个警告！');

2. confirm() - 确认框

   let result = confirm('你确定要删除吗？');
   console.log(result); // 返回true或false

3. prompt() - 输入框

   let name = prompt('请输入你的名字：', '张三');
   console.log(name); // 返回输入的内容

4. console.log() - 控制台输出（最常用）

   console.log('这是在控制台输出的信息');

2.6 Chrome调试工具

按F12打开，常用功能：

• Console：查看错误信息和测试代码

• Elements：查看和修改HTML/CSS

• Sources：调试JavaScript代码

• Network：查看网络请求

2.7 JavaScript注释的写法

// 这是单行注释

/*
这是多行注释
可以写很多行
*/

/**
 * 这是文档注释
 * 用于说明函数用途
 * @param {string} name 用户名
 */
function sayHello(name) {
  console.log('你好,' + name);
}

2.8 插件和配置

• 代码编辑器：VS Code（推荐）、Sublime Text

• 必要插件：代码高亮、自动补全、错误提示

• 浏览器插件：有助于调试的扩展工具

三、变量和数据类型

3.1 变量的理解

变量就像储物柜

• 变量名 = 储物柜的标签

• 变量值 = 储物柜里存放的东西

• 定义变量 = 租一个储物柜并贴上标签

3.2 变量的定义

三种方式：

var name = "小明";     // 老方式，现在少用
let age = 18;         // 新方式，推荐使用
const PI = 3.14;      // 常量，值不能改变

3.3 变量的练习

// 定义变量
let userName = "李雷";
let userAge = 20;
let isStudent = true;
let score = 95.5;

// 使用变量
console.log("姓名：" + userName);
console.log("年龄：" + userAge);
console.log("是否是学生：" + isStudent);
console.log("分数：" + score);

// 修改变量值
userAge = 21;
console.log("修改后的年龄：" + userAge);

3.4 变量的注意

1. 命名规则：

   • 可以包含字母、数字、_、$

   • 不能以数字开头

   • 不能是关键字（如var、let等）

   • 区分大小写

2. 好习惯：

   • 使用有意义的变量名

   • 多个单词用驼峰命名：myFirstName

   • 常量用全大写：MAX_SIZE

3. 错误示例：

   let 123abc = "错误";     // 不能数字开头
   let var = "错误";        // 不能用关键字
   let my-name = "错误";    // 不能用连字符

3.5 认识数据类型

JavaScript是动态类型语言：变量类型可以改变

let x = 10;        // 现在是数字
x = "hello";       // 现在变成字符串
x = true;          // 现在变成布尔值

完整的数据类型：

基本数据类型（原始类型）：

1. 数字(Number)：整数、小数、特殊数值

   let age = 18;           // 整数
   let price = 99.9;       // 小数
   let infinity = Infinity; // 无穷大
   let notNumber = NaN;    // 非数字

2. 字符串(String)：文本，用引号包围

   let name = "张三";      // 双引号
   let message = '你好';   // 单引号
   let intro = `我是${name}`; // 模板字符串（ES6新特性）

3. 布尔值(Boolean)：true或false

   let isLogin = true;
   let hasCar = false;
   let isAdult = (age >= 18); // 通过比较得到布尔值

4. 未定义(Undefined)：声明了但未赋值

   let x;
   console.log(x); // 输出：undefined

5. 空(Null)：空值

   let empty = null;

6. 符号(Symbol)：ES6新增，表示唯一值

   let id = Symbol("id");

7. 大整数(BigInt)：ES2020新增，表示大整数

   let bigNumber = 123456789012345678901234567890n;

引用数据类型：

1. 对象(Object)：键值对集合

   let person = {
     name: "小明",
     age: 18,
     isStudent: true
   };

2. 数组(Array)：有序数据集合

   let fruits = ["苹果", "香蕉", "橙子"];
   let scores = [95, 88, 76];

3. 函数(Function)：可重复使用的代码块

   function sayHello() {
     console.log("你好！");
   }

3.6 typeof操作符

用来查看变量的数据类型：

console.log(typeof 42);                    // "number"
console.log(typeof "hello");               // "string"
console.log(typeof true);                  // "boolean"
console.log(typeof undefined);             // "undefined"
console.log(typeof null);                  // "object"（历史遗留问题）
console.log(typeof Symbol("id"));          // "symbol"
console.log(typeof 123n);                  // "bigint"
console.log(typeof {name: "小明"});        // "object"
console.log(typeof [1, 2, 3]);             // "object"（数组也是对象）
console.log(typeof function() {});         // "function"

3.7 数据类型转换

// 转字符串
let num = 123;
let str = String(num);     // "123"
let str2 = num.toString(); // "123"

// 转数字
let strNum = "456";
let num2 = Number(strNum);    // 456
let num3 = parseInt("123abc"); // 123
let num4 = parseFloat("3.14"); // 3.14

// 转布尔值
let bool1 = Boolean(1);      // true
let bool2 = Boolean(0);      // false
let bool3 = Boolean("");     // false
let bool4 = Boolean("hello"); // true

---