JavaScript学习指南

主题

第1天: JavaScript介绍 ​

🎯 今日目标 ​

  • 了解JavaScript的历史和发展
  • 理解JavaScript的应用领域
  • 设置开发环境
  • 编写第一个JavaScript程序

📖 什么是JavaScript？ ​

JavaScript是一种高级的、解释型的编程语言，最初由Brendan Eich在1995年为Netscape浏览器开发。尽管名字中包含"Java"，但JavaScript与Java是完全不同的编程语言。

JavaScript的特点 ​

  • 动态类型: 变量类型在运行时确定
  • 解释型: 无需编译，直接由浏览器或Node.js执行
  • 多范式: 支持面向对象、函数式和过程式编程
  • 事件驱动: 响应用户交互和系统事件
  • 跨平台: 可在浏览器、服务器、移动设备等环境运行

🌍 JavaScript的应用领域 ​

1. 前端开发 ​

  • 网页交互效果
  • 单页应用(SPA)
  • 响应式用户界面
  • 数据可视化

2. 后端开发 ​

  • Node.js服务器开发
  • API开发
  • 数据库操作
  • 微服务架构

3. 移动开发 ​

  • React Native
  • Ionic
  • Cordova/PhoneGap

4. 桌面应用 ​

  • Electron
  • NW.js

5. 其他领域 ​

  • 游戏开发
  • 物联网(IoT)
  • 机器学习
  • 区块链开发

🛠️ 开发环境设置 ​

1. 浏览器 ​

现代浏览器都内置JavaScript引擎：

  • Chrome (V8引擎)
  • Firefox (SpiderMonkey引擎)
  • Safari (JavaScriptCore引擎)
  • Edge (V8引擎)

2. 代码编辑器 ​

推荐的代码编辑器：

  • Visual Studio Code
  • WebStorm
  • Sublime Text
  • Atom

3. Node.js (可选) ​

用于服务器端JavaScript开发：

bash
# 检查Node.js版本
node --version

# 检查npm版本
npm --version

💻 第一个JavaScript程序 ​

在浏览器中运行 ​

方法1: 内联JavaScript ​

html
<!DOCTYPE html>
<html>
<head>
    <title>我的第一个JavaScript程序</title>
</head>
<body>
    <h1>Hello, JavaScript!</h1>
    
    <script>
        console.log('Hello, World!');
        alert('欢迎来到JavaScript世界！');
    </script>
</body>
</html>

方法2: 外部JavaScript文件 ​

html
<!DOCTYPE html>
<html>
<head>
    <title>我的第一个JavaScript程序</title>
</head>
<body>
    <h1>Hello, JavaScript!</h1>
    <script src="script.js"></script>
</body>
</html>
javascript
// script.js
console.log('Hello, World!');
alert('欢迎来到JavaScript世界！');

方法3: 浏览器控制台 ​

  1. 打开浏览器开发者工具 (F12)
  2. 切换到Console标签
  3. 输入JavaScript代码并按Enter
javascript
console.log('Hello, World!');

🔧 JavaScript基础语法 ​

1. 注释 ​

javascript
// 单行注释

/*
多行注释
可以跨越多行
*/

2. 变量声明 ​

javascript
// ES6之前
var name = 'JavaScript';

// ES6+推荐
let age = 25;
const PI = 3.14159;

3. 数据类型 ​

javascript
// 基本数据类型
let str = 'Hello';          // 字符串
let num = 42;               // 数字
let bool = true;            // 布尔值
let nothing = null;         // 空值
let notDefined = undefined; // 未定义

// 复杂数据类型
let arr = [1, 2, 3];        // 数组
let obj = {name: 'John'};   // 对象

4. 函数 ​

javascript
// 函数声明
function greet(name) {
    return 'Hello, ' + name + '!';
}

// 函数调用
console.log(greet('JavaScript'));

🎮 今日练习 ​

练习1: 基础输出 ​

创建一个HTML文件，使用JavaScript输出以下内容：

javascript
console.log('欢迎来到30天JavaScript挑战！');
console.log('今天是第1天');
console.log('我正在学习JavaScript基础');

练习2: 变量和数据类型 ​

javascript
// 声明不同类型的变量
let firstName = '你的名字';
let lastName = '你的姓氏';
let country = '中国';
let city = '你的城市';
let age = 25;
let isMarried = false;

// 输出变量信息
console.log('姓名:', firstName, lastName);
console.log('国家:', country);
console.log('城市:', city);
console.log('年龄:', age);
console.log('婚姻状况:', isMarried);

练习3: 简单计算 ​

javascript
// 数学运算
let num1 = 10;
let num2 = 5;

console.log('加法:', num1 + num2);
console.log('减法:', num1 - num2);
console.log('乘法:', num1 * num2);
console.log('除法:', num1 / num2);
console.log('取余:', num1 % num2);

🎯 挑战题 ​

创建一个简单的个人信息展示页面：

javascript
// 个人信息
const personalInfo = {
    name: '你的姓名',
    age: 25,
    country: '中国',
    skills: ['HTML', 'CSS', 'JavaScript'],
    isLearning: true
};

// 展示信息
console.log('=== 个人信息 ===');
console.log('姓名:', personalInfo.name);
console.log('年龄:', personalInfo.age);
console.log('国家:', personalInfo.country);
console.log('技能:', personalInfo.skills.join(', '));
console.log('正在学习:', personalInfo.isLearning ? '是' : '否');

📝 今日总结 ​

今天我们学习了：

  1. ✅ JavaScript的历史和特点
  2. ✅ JavaScript的应用领域
  3. ✅ 开发环境的设置
  4. ✅ 第一个JavaScript程序
  5. ✅ 基础语法和数据类型

🔗 相关资源 ​

恭喜你完成了第1天的学习！明天我们将深入学习JavaScript的数据类型。 🎉

下一天: 数据类型 →

Copyright © 2025 e2ways.com