首页手记 JavaScript 基础入门指南

JavaScript 基础入门指南

标签：

Cocos2d-x Ionic React Native

概述

本文介绍了JavaScript的基本概念、语法和高级主题，涵盖了变量、函数、控制结构、异步编程等核心内容。此外，文章还探讨了跨平台技术，如使用JavaScript开发桌面和移动应用，以及如何通过Node.js实现代后端逻辑。

JavaScript 基础入门指南

1. JavaScript 概述

JavaScript 是一种广泛使用的脚本语言，主要用于网页前端开发。它可以在客户端浏览器中运行，也可以在服务器端通过 Node.js 运行。JavaScript 语法简单，功能强大，是 Web 开发者不可或缺的工具。

1.1 JavaScript 的历史

JavaScript 最初由网景公司（Netscape）在 1995 年开发，最初名为 LiveScript。在 1996 年，网景公司将它更名为 JavaScript，以期与 Java 语言产生关联，从而吸引更多开发者。自那时起，JavaScript 就逐渐成为了 Web 开发的标准之一。

1.2 JavaScript 的用途

JavaScript 主要用于以下几个方面：

前端开发：添加交互性，实现动态效果。
服务器端开发：通过 Node.js 实现后端逻辑。
全栈开发：前端和后端都使用 JavaScript。
桌面应用：Electron 等框架允许用 JavaScript 创建桌面应用。
移动应用：Ionic、React Native 等框架支持使用 JavaScript 开发原生应用。

1.3 JavaScript 的版本

JavaScript 有几个重要的版本更新，包括 ECMAScript 3、ECMAScript 5、ECMAScript 6（ES6）等。每个版本都增加了新的语法和功能。目前，ECMAScript 2023 是最新的标准。

2. JavaScript 开发环境搭建

2.1 安装浏览器

要开始学习 JavaScript，首先需要安装一个支持 JavaScript 的浏览器。推荐安装 Chrome 或 Firefox。这些浏览器内置了开发者工具，方便调试和测试代码。

2.2 安装文本编辑器

文本编辑器是用来编写代码的工具。推荐使用 VSCode、Sublime Text 或 Atom。这些编辑器支持语法高亮、自动完成、调试等功能，帮助开发者更高效地编写代码。

2.3 安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，允许在服务器端使用 JavaScript。要安装 Node.js，可以访问官网下载最新版本：https://nodejs.org/

安装完成后，可以在命令行中输入 node -v 检查是否安装成功。

2.4 配置开发环境

配置开发环境的步骤如下：

安装 Node.js：确保已经安装了 Node.js，并且可以在命令行中调用 node 和 npm 命令。
创建项目目录：在终端中创建一个文件夹，作为项目的工作目录。
初始化项目：运行 npm init，根据提示创建一个 package.json 文件。
安装依赖：使用 npm install 命令安装项目所需的库。

3. JavaScript 基础语法

3.1 变量与类型

JavaScript 中的变量可以用来存储数据。变量的定义语法如下：

let variableName = value;

JavaScript 有几种基本的数据类型：

数字：42、3.14、-5
字符串："Hello"、'World'
布尔值：true、false
空值：null
未定义：undefined
对象：{}、[]
符号：Symbol("foo")

示例代码：

let number = 42;
let string = "Hello";
let boolean = true;
let nullValue = null;
let undefinedValue;
let object = {};
let array = [];
let symbol = Symbol("foo");

3.2 运算符

JavaScript 支持多种运算符，如算术运算符、比较运算符、逻辑运算符等。

3.2.1 算术运算符

算术运算符包括加（+）、减（-）、乘（*）、除（/）、取余（%）等。

示例代码：

let a = 10;
let b = 5;
console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2
console.log(a % b); // 0

3.2.2 比较运算符

比较运算符包括等于（==）、不等于（!=）、严格等于（===）、严格不等于（!==）、大于（>）、小于（<）、大于等于（>=）、小于等于（<=）等。

示例代码：

let num1 = 10;
let num2 = 20;
console.log(num1 == num2); // false
console.log(num1 != num2); // true
console.log(num1 === num2); // false
console.log(num1 !== num2); // true
console.log(num1 > num2); // false
console.log(num1 < num2); // true
console.log(num1 >= num2); // false
console.log(num1 <= num2); // true

3.2.3 逻辑运算符

逻辑运算符包括逻辑与（&&）、逻辑或（||）、逻辑非（!）等。

示例代码：

let a = true;
let b = false;
console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false

3.3 常用内置对象和方法

JavaScript 提供了许多内置对象和方法，用于处理各种常见任务。下面是一些常用的内置对象和方法：

3.3.1 Date 对象

Date 对象用于处理日期和时间。

示例代码：

let date = new Date();
console.log(date); // 输出当前日期和时间

3.3.2 Math 对象

Math 对象提供了一系列数学方法，如求绝对值、最大值、最小值、圆周率等。

示例代码：

console.log(Math.abs(-123)); // 123
console.log(Math.max(1, 2, 3)); // 3
console.log(Math.min(1, 2, 3)); // 1
console.log(Math.PI); // 3.141592653589793

4. 函数

4.1 定义函数

函数是 JavaScript 中重要的构建块，用于封装代码块。定义函数的基本语法如下：

function functionName(param1, param2) {
    // 函数体
    return result;
}

示例代码：

function add(a, b) {
    return a + b;
}
console.log(add(1, 2)); // 3

4.2 函数的调用

函数可以使用函数名后紧跟括号来调用。

示例代码：

function greet(name) {
    return "Hello, " + name;
}
console.log(greet("Alice")); // Hello, Alice

4.3 函数的返回值

函数可以返回一个值，也可以不返回任何值。使用 return 语句返回值。

示例代码：

function add(a, b) {
    return a + b;
}
console.log(add(3, 4)); // 7

4.4 匿名函数

匿名函数是没有名称的函数。通常用于立即执行函数表达式（IIFE）或作为回调函数。

示例代码：

(function() {
    console.log("I am an anonymous function");
})();

4.5 箭头函数

ES6 引入了箭头函数语法，使定义函数更简洁。

示例代码：

let add = (a, b) => a + b;
console.log(add(1, 2)); // 3

5. 控制结构

5.1 `if` 和 `else` 语句

if 和 else 语句用于基于条件执行不同的代码块。

示例代码：

let age = 18;
if (age >= 18) {
    console.log("You are an adult");
} else {
    console.log("You are not an adult");
}

5.2 `switch` 语句

switch 语句根据不同的条件执行不同的代码块。

示例代码：

let day = "Monday";
switch (day) {
    case "Monday":
        console.log("It's Monday");
        break;
    case "Tuesday":
        console.log("It's Tuesday");
        break;
    default:
        console.log("It's not Monday or Tuesday");
}

5.3 `for` 循环

for 循环用于重复执行一段代码，直到满足某个条件。

示例代码：

for (let i = 0; i < 5; i++) {
    console.log(i);
}

5.4 `while` 循环

while 循环用于重复执行一段代码，直到条件不再满足。

示例代码：

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

5.5 `do...while` 循环

do...while 循环先执行一次循环体，然后检查条件是否满足，再决定是否继续循环。

示例代码：

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

6. 对象和数组

6.1 对象

对象是 JavaScript 中数据的容器，可以包含属性和方法。

示例代码：

let person = {
    name: "Alice",
    age: 25,
    greet: function() {
        return "Hello, " + this.name;
    }
};
console.log(person.name); // Alice
console.log(person.greet()); // Hello, Alice

6.2 数组

数组是一种特殊类型的对象，用于存储有序的元素集合。

示例代码：

let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 1
console.log(numbers.length); // 5
numbers.push(6);
console.log(numbers); // [1, 2, 3, 4, 5, 6]

6.3 数组方法

数组有很多内置方法，如 push、pop、shift、unshift、slice、splice 等。

示例代码：

let numbers = [1, 2, 3, 4, 5];
numbers.push(6); // [1, 2, 3, 4, 5, 6]
numbers.pop(); // [1, 2, 3, 4, 5]
numbers.shift(); // [2, 3, 4, 5]
numbers.unshift(1); // [1, 2, 3, 4, 5]
let subArray = numbers.slice(1, 4); // [2, 3, 4]
numbers.splice(1, 2); // [1, 4, 5]

7. 高级主题

7.1 闭包

闭包是指一个函数访问并操作其外部作用域的变量的能力。

示例代码：

function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    }
}

let counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

7.2 模块化编程

模块化编程将代码划分为独立的模块，每个模块负责特定的功能。使用 import 和 export 关键字来导入和导出模块。

示例代码：

module.js

export function add(a, b) {
    return a + b;
}

app.js

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

7.3 Promise 和 Async/Await

Promise 和 Async/Await 用于处理异步编程，使其更易于理解和维护。

示例代码：

使用 Promise

function fetchUser(id) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({ id: id, name: "Alice" });
        }, 1000);
    });
}

fetchUser(1)
    .then(user => console.log(user))
    .catch(error => console.error(error));

使用 Async/Await

async function fetchUser(id) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({ id: id, name: "Alice" });
        }, 1000);
    });
}

async function getUser(id) {
    try {
        let user = await fetchUser(id);
        console.log(user);
    } catch (error) {
        console.error(error);
    }
}

getUser(1);

7.4 类

ES6 引入了类语法，使面向对象编程更直观。

示例代码：

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        return "Hello, " + this.name;
    }
}

let alice = new Person("Alice", 25);
console.log(alice.greet()); // Hello, Alice

7.5 常用第三方库

JavaScript 生态中有许多优秀的第三方库，如 jQuery、React、Vue.js 等。这些库提供了丰富的功能和工具，帮助开发者更高效地开发 Web 应用。

示例代码：

使用 jQuery

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Example</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="clickMe">Click Me</button>
    <script>
        $(document).ready(function() {
            $("#clickMe").click(function() {
                alert("Button clicked");
            });
        });
    </script>
</body>
</html>

使用 React

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { message: "Hello, World" };
    }

    render() {
        return <h1>{this.state.message}</h1>;
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

7.6 跨平台技术

7.6.1 使用 Electron 开发桌面应用

Electron 是一个跨平台的框架，允许使用 JavaScript、HTML 和 CSS 创建桌面应用。以下是一个简单的 Electron 应用示例：

main.js

const { app, BrowserWindow } = require('electron');

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
        },
    });

    win.loadFile('index.html');
}

app.on('ready', createWindow);

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Electron App</title>
</head>
<body>
    <h1>Hello, Electron!</h1>
</body>
</html>

7.6.2 使用 React Native 开发移动应用

React Native 是一个允许使用 JavaScript 和 React 创建原生移动应用的框架。以下是一个简单的 React Native 应用示例：

import React from 'react';
import { AppRegistry, View, Text } from 'react-native';

const App = () => (
    <View>
        <Text>Hello, React Native!</Text>
    </View>
);

AppRegistry.registerComponent('AppName', () => App);

7.7 Node.js 后端逻辑

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，允许在服务器端使用 JavaScript。以下是一个简单的 Node.js API 示例，展示如何创建、运行和测试后端逻辑：

const express = require('express');
const app = express();
const PORT = 3000;

app.get('/', (req, res) => {
    res.send('Hello, World!');
});

app.get('/users', (req, res) => {
    const users = [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
    ];
    res.json(users);
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

8. 总结

在这篇文章中，我们介绍了 JavaScript 的基本概念、语法和一些高级主题。从变量和函数到控制结构和异步编程，JavaScript 为开发者提供了强大的工具来构建动态和交互式的 Web 应用。希望这篇文章能帮助你更好地理解和使用 JavaScript。

9. 参考资料

Mozilla Developer Network (MDN): https://developer.mozilla.org/
JavaScript 语言规范: https://tc39.es/ecma262/multipage/
Node.js 官方文档: https://nodejs.org/api/

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

牧羊人nacy

手记
篇

粉丝

5

获赞与收藏

26

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

JavaScript 基础入门指南

1.1 JavaScript 的历史

1.2 JavaScript 的用途

1.3 JavaScript 的版本

2.1 安装浏览器

2.2 安装文本编辑器

2.3 安装 Node.js

2.4 配置开发环境

3.1 变量与类型

3.2 运算符

3.2.1 算术运算符

3.2.2 比较运算符

3.2.3 逻辑运算符

3.3 常用内置对象和方法

3.3.1 Date 对象

3.3.2 Math 对象

4.1 定义函数

4.2 函数的调用

4.3 函数的返回值

4.4 匿名函数

4.5 箭头函数

5.1 if 和 else 语句

5.2 switch 语句

5.3 for 循环

5.4 while 循环

5.5 do...while 循环

6.1 对象

6.2 数组

6.3 数组方法

7.1 闭包

7.2 模块化编程

7.3 Promise 和 Async/Await

7.4 类

7.5 常用第三方库

7.6 跨平台技术

7.6.1 使用 Electron 开发桌面应用

7.6.2 使用 React Native 开发移动应用

7.7 Node.js 后端逻辑

阅读免费教程

5.1 `if` 和 `else` 语句

5.2 `switch` 语句

5.3 `for` 循环

5.4 `while` 循环

5.5 `do...while` 循环