为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Javascript基础知识教程：入门必学内容

Javascript基础知识教程：入门必学内容

标签：
JavaScript
概述

JavaScript 是一种广泛用于网页开发的编程语言，由 Netscape 公司的 Brendan Eich 在 1995 年创建。它允许开发者在网页上添加动态内容、控制浏览器行为以及与用户进行交互。JavaScript 是前端开发的核心语言，也是唯一可以在客户端被浏览器环境直接执行的脚本语言。

JavaScript 简介

JavaScript 是一种广泛用于网页开发的编程语言，由 Netscape 公司的 Brendan Eich 在 1995 年创建。它允许开发者在网页上添加动态内容、控制浏览器行为以及与用户进行交互。JavaScript 是前端开发的核心语言，也是唯一可以在客户端被浏览器环境直接执行的脚本语言。

JavaScript 的特点和优势

  1. 跨平台性：JavaScript 不依赖于特定的操作系统或硬件设备，可以在任何支持 JavaScript 的浏览器中运行。
  2. 即时性：无需编译，编写好的 JavaScript 代码可以直接在浏览器中运行。
  3. 灵活性：可嵌入 HTML 文档中，无需额外的脚本文件或插件。
  4. 事件驱动：能够通过事件（如用户点击、鼠标悬停等）触发代码执行。
  5. 强大的库支持：如 jQuery、React 和 Vue 等库和框架提供了丰富的功能，简化了 Web 开发过程。

JavaScript 的应用场景

  1. 前端开发：动态更新网页内容、响应用户交互。
  2. 后端开发：通过 Node.js 实现服务器端逻辑。
  3. 游戏开发：例如使用 WebGames 和 Phaser.js 开发基于浏览器的游戏。
  4. 桌面应用开发：使用 Electron 框架创建跨平台的应用程序。
  5. 移动应用开发：通过 React Native 和 Ionic 等框架开发移动应用。
  6. 数据分析与可视化：利用 D3.js 库进行数据可视化。
  7. 机器学习与人工智能：尽管不是主要语言，但可以通过 TensorFlow.js 等库进行简单的机器学习项目。

JavaScript 环境搭建

如何安装开发工具

  1. 下载和安装 Node.js：

  2. 下载和安装浏览器：

  3. 安装 VSCode 插件：
    • 打开 VSCode，点击左侧菜单栏中的扩展图标（一个方块图标），搜索并安装以下插件：
      • Live Server：可以在本地启动一个简单的服务器，实时更新页面内容。
      • JavaScript (ES6) code snippets：提供一些常用的代码片段，方便编写代码。
      • HTML CSS Support：提供 HTML 和 CSS 的语法高亮和自动补全功能。
      • Prettier - Code formatter：代码格式化工具，使代码更美观。

如何创建第一个 HTML 文件

  1. 创建一个文件夹：

    • 打开命令行工具（如 Windows 的命令提示符或 macOS/Linux 的 Terminal），创建一个新的文件夹： 
      mkdir myFirstProject
cd myFirstProject
  2. 创建一个 HTML 文件：
    • 在命令行工具中，使用 touch 命令创建一个新的 HTML 文件： 
      touch index.html
    • 也可以通过 VSCode 打开文件夹，右键点击文件夹创建一个新文件，并命名为 index.html。
    • 使用代码编辑器（如 VSCode）打开 index.html 文件，输入以下基本的 HTML 结构： 
      <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>My First Web Page</title>
</head>
<body>
 <h1>Hello, World!</h1>
 <script>
     console.log('Hello, World!');
 </script>
</body>
</html>
    • 保存文件。

如何在 HTML 文件中引入 JavaScript 代码

  1. 内联脚本：

    • 在 index.html 文件的 <head> 或 <body> 部分直接写入 <script> 标签，包含简单的 JavaScript 代码： 
      <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>My First Web Page</title>
</head>
<body>
 <h1 id="greeting">Hello, World!</h1>
 <script>
     document.getElementById('greeting').innerText = 'Hello, JavaScript!';
 </script>
</body>
</html>
    • 这个示例中，我们通过 document.getElementById 获取到 id 为 greeting 的 <h1> 元素，并修改其内容。
  2. 外部脚本文件：
    • 创建一个名为 main.js 的外部文件，用于存放 JavaScript 代码。 
      touch main.js
    • 在 main.js 文件中，编写如下代码： 
      document.addEventListener('DOMContentLoaded', function() {
 document.getElementById('greeting').innerText = 'Hello, External Script!';
});
    • 在 index.html 文件中，通过 <script> 标签引入外部脚本： 
      <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>My First Web Page</title>
</head>
<body>
 <h1 id="greeting">Hello, World!</h1>
 <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="main.js"></script>
</body>
</html>
    • 这个示例中，DOMContentLoaded 事件确保了页面完全加载后再执行脚本代码，可以避免在 DOM 元素还未加载完成时尝试访问它们。

JavaScript 基本语法

变量与数据类型

  1. 变量声明：

    • 使用 var、let 或 const 关键字来声明变量。var 可以重复声明，而 let 和 const 不能。
    • 例如： 
      var message = 'Hello, World!';
let counter = 0;
const PI = 3.14159;
    • var 声明的变量具有函数作用域，而 let 和 const 具有块作用域。
    • 注意：const 表示变量引用不可更改，但引用的对象内部属性可以修改。

  2. 数据类型：

    • 原始类型（Primitive Types）：
      • number：数字类型，例如 123、3.14。
      • string：字符串类型，例如 'Hello'、"World"。
      • boolean：布尔类型，只有 true 和 false。
      • undefined：未定义类型，表示未赋值的变量。
      • null：空值类型，表示空对象。
      • symbol（ES6）：唯一标识符，常见于对象的私有属性。

    • 引用类型：

      • object：包括数组、日期、函数等。
      • 例如： 
        
let number = 123;
let string = 'Hello';
let boolean = true;
let undefinedVar; // undefined
let nullVar = null;

      let obj = {
      name: 'John',
      age: 30
      };
      let arr = [1, 2, 3];

运算符及其使用

  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
console.log(++a);   // 11
console.log(--b);   // 4

  2. 比较运算符：

    • ==：相等（忽略类型）
    • ===：严格相等（比较值和类型）
    • !=：不相等（忽略类型）
    • !==：严格不相等（比较值和类型）
    • <：小于
    • <=：小于或等于
    • >：大于
    • >=：大于或等于
    • 例如： 
      let a = 10;
let b = '10';
console.log(a == b); // true
console.log(a === b); // false
console.log(a > b); // false
console.log(a >= b); // true

  3. 逻辑运算符：

    • &&：逻辑与，只有当两个操作数都为 true 时才返回 true
    • ||：逻辑或，只要一个操作数为 true 就返回 true
    • !：逻辑非，取反操作
    • 例如： 
      let a = true;
let b = false;
console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false
  4. 位运算符：
    • &：按位与
    • |：按位或
    • ^：按位异或
    • ~：按位取反
    • <<：左移
    • >>：右移
    • >>>：无符号右移
    • 例如： 
      let a = 5; // 0101
let b = 3; // 0011
console.log(a & b); // 1, 0001
console.log(a | b); // 7, 0111
console.log(a ^ b); // 6, 0110
console.log(~a);    // -6, 1010 (two's complement)
console.log(a << 1); // 10, 1010
console.log(a >> 1); // 2, 0010
console.log(a >>> 1); // 2, 0010

条件语句与循环

  1. 条件语句：

    • if：基本条件判断
    • if-else：选择分支
    • if-else if-else：多分支选择
    • switch：多条件分支
    • 例如： 
      let score = 85;
if (score >= 90) {
 console.log('Excellent!');
} else if (score >= 70) {
 console.log('Good job!');
} else {
 console.log('Keep trying!');
}
    • 使用 switch 语句： 
      let fruit = 'apple';
switch (fruit) {
 case 'apple':
     console.log('Red fruit');
     break;
 case 'banana':
     console.log('Yellow fruit');
     break;
 default:
     console.log('Unknown fruit');
}
  2. 循环：
    • for 循环： 
      for (let i = 0; i < 5; i++) {
 console.log(i);
}
    • while 循环： 
      let count = 0;
while (count < 5) {
 console.log(count);
 count++;
}
    • do-while 循环： 
      let count = 0;
do {
 console.log(count);
 count++;
} while (count < 5);

函数与对象

函数定义与调用

  1. 函数定义：

    • 使用 function 关键字定义一个函数： 
      function greet(name) {
 console.log('Hello, ' + name + '!');
}
greet('World'); // 输出：Hello, World!
    • 使用箭头函数（ES6）： 
      const greet = (name) => {
 console.log('Hello, ' + name + '!');
};
greet('World'); // 输出：Hello, World!

  2. 调用函数：

    • 函数定义之后，可以通过提供参数调用它： 
      function add(a, b) {
 return a + b;
}
let result = add(10, 20); // 调用函数并存储结果
console.log(result); // 输出：30
  3. 返回值：
    • 函数可以返回一个值，通常使用 return 关键字实现： 
      function multiply(a, b) {
 return a * b;
}
let result = multiply(5, 3);
console.log(result); // 输出：15

参数传递与返回值

  1. 参数传递：

    • 函数可以通过参数接收传入的数据： 
      function calculateArea(length, width) {
 return length * width;
}
let area = calculateArea(5, 10);
console.log(area); // 输出：50
    • 参数可以是任意类型，包括对象和数组： 
      function printArray(arr) {
 console.log(arr.join(', '));
}
let numbers = [1, 2, 3, 4];
printArray(numbers); // 输出：1, 2, 3, 4
  2. 返回值：
    • 函数可以返回一个值，通常使用 return 语句： 
      function subtract(a, b) {
 return a - b;
}
let result = subtract(20, 10);
console.log(result); // 输出：10
    • 函数也可以不返回任何值，此时返回 undefined： 
      function logMessage(message) {
 console.log(message);
}
logMessage('Hello, World!'); // 输出：Hello, World!

对象和数组的创建与操作

  1. 对象：

    • 使用 {} 定义对象： 
      let person = {
 name: 'John',
 age: 30,
 greeting: function() {
     console.log('Hello, my name is ' + this.name);
 }
};
person.greeting(); // 输出：Hello, my name is John
    • 使用点符号访问和修改对象属性： 
      person.age = 31;
console.log(person.age); // 输出：31
    • 使用 delete 关键字删除对象属性： 
      delete person.greeting;
console.log(person.greeting); // 输出：undefined
  2. 数组：
    • 使用 [] 定义数组： 
      let fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]); // 输出：apple
    • 使用 push 方法向数组末尾添加元素： 
      fruits.push('grape');
console.log(fruits); // 输出：['apple', 'banana', 'orange', 'grape']
    • 使用 pop 方法移除数组末尾的元素： 
      fruits.pop();
console.log(fruits); // 输出：['apple', 'banana', 'orange']
    • 使用 length 属性获取数组长度： 
      console.log(fruits.length); // 输出：3

DOM 操作与事件处理

选择 DOM 元素的方法

  1. 使用 getElementById：
    • 获取指定 id 的元素： 
      let element = document.getElementById('myElement');
console.log(element); // 输出元素节点
  2. 使用 getElementsByClassName：
    • 获取具有指定类名的所有元素： 
      let elements = document.getElementsByClassName('myClass');
console.log(elements); // 输出元素节点集合
  3. 使用 querySelector 和 querySelectorAll：
    • 获取第一个匹配 CSS 选择器的元素： 
      let element = document.querySelector('.myClass');
console.log(element); // 输出元素节点
    • 获取所有匹配 CSS 选择器的元素： 
      let elements = document.querySelectorAll('.myClass');
console.log(elements); // 输出元素节点集合

修改元素样式和内容

  1. 修改内容：

    • 使用 innerText 或 innerHTML 修改元素内容： 
      let element = document.getElementById('myElement');
element.innerText = 'New content';
console.log(element.innerText); // 输出：New content
    • 使用 innerHTML 可以插入 HTML 代码： 
      element.innerHTML = '<span>HTML content</span>';
console.log(element.innerHTML); // 输出： <span>HTML content</span>
  2. 修改样式：
    • 使用 style 属性直接修改元素的样式： 
      let element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '20px';
console.log(element.style.color); // 输出：red
console.log(element.style.fontSize); // 输出：20px

添加和触发事件

  1. 添加事件监听器：

    • 使用 addEventListener 方法为元素添加事件监听器： 
      let button = document.getElementById('myButton');
button.addEventListener('click', function() {
 alert('Button clicked!');
});
    • 使用 onclick 属性直接绑定事件处理程序： 
      <button id="myButton" onclick="alert('Button clicked!')">Click me</button>
  2. 触发事件：
    • 使用 dispatchEvent 方法触发已添加的事件： 
      let event = new MouseEvent('click', {
 bubbles: true,
 cancelable: true,
 view: window
});
let button = document.getElementById('myButton');
button.dispatchEvent(event);

常见问题与调试技巧

常见错误及其解决方法

  1. 作用域错误：

    • 问题：在函数外部使用了内部变量。
    • 解决方法：确保变量声明正确并且作用域合适。 
      function foo() {
 let x = 5;
 return x;
}
console.log(foo()); // 输出：5

  2. 类型错误：

    • 问题：将字符串与数字进行比较或计算。
    • 解决方法：确保变量类型匹配。 
      let a = '5';
let b = 10;
console.log(a + b); // 输出：510
console.log(Number(a) + b); // 输出：15
  3. 未定义错误：
    • 问题：尝试访问未声明或初始化的变量。
    • 解决方法：确保变量已声明并初始化。 
      let name;
console.log(name); // 输出：undefined
name = 'John';
console.log(name); // 输出：John

使用浏览器开发者工具调试代码

  1. 打开开发者工具：
    • 在浏览器中按 F12 或 Ctrl+Shift+I（Windows）或 Cmd+Opt+I（Mac）打开开发者工具。
  2. 使用控制台：
    • 在控制台中输入 console.log 语句，调试输出信息。 
      let x = 10;
console.log(x); // 输出：10
  3. 设置断点：
    • 在代码编辑器中设置断点，调试程序执行过程。
  4. 查看网络请求：
    • 查看并分析网络请求，优化加载速度和资源使用。
  5. 检查 DOM 和 CSS：
    • 使用元素面板查看和修改页面元素，调试样式和布局问题。

良好的编程习惯与代码规范

  1. 使用 let 和 const：

    • 尽量避免使用 var，使用 let 和 const 替代。 
      const PI = 3.14159;
let counter = 0;

  2. 代码规范：

    • 代码应遵循统一的缩进格式，推荐使用 2 个空格或 4 个空格进行缩进。 
      function foo() {
 let x = 5;
 if (x > 0) {
     console.log(x);
 }
}

  3. 注释和文档：

    • 使用注释解释代码逻辑，便于他人理解。 
      // 计算圆的面积
function calculateCircleArea(radius) {
 return Math.PI * radius * radius;
}

  4. 函数长度和参数数量：

    • 尽量使函数简短且单一职责，参数数量不宜过多。 
      function calculateRectangleArea(width, height) {
 return width * height;
}
  5. 命名规范：
    • 变量名应清晰描述其用途，避免使用含义模糊的名称。 
      let employeeName = 'John Doe';
let employeeAge = 30;
点击查看更多内容
发表于 2025.01.02 21:43， 共 81 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

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

评论

作者其他优质文章

正在加载中

海绵宝宝撒

JAVA开发工程师
手记
篇
粉丝
40
获赞与收藏
125

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消