JavaScrpit基础入门

最新推荐文章于 2024-10-12 10:41:56 发布

想进大厂的小王

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量797

点赞数 13

文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/m0_74209411/article/details/139279600

版权

JavaScript 是一种用于网页开发的脚本语言，它主要用于增强网页的交互性和动态性。HTML 用于定义网页的结构，包括文本、图像、链接等内容，而 CSS 用于定义网页的样式，包括颜色、布局、字体等。JavaScript 通过与 HTML 和 CSS 结合使用，可以实现各种动态效果和交互功能，例如表单验证、页面动画、用户界面更新等。

HTML、CSS 和 JavaScript 通常一起使用，共同构建出现代网页的完整体验。HTML 负责网页结构，CSS 负责网页样式，JavaScript 负责网页的行为和交互。三者之间的协作使得开发者能够创建出丰富、动态、交互性强的网页。

一、引入方式

在 HTML 中引入 JavaScript 有两种常见的方式：内部引入和外部引入。

内部引入：在 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>Document</title>
    <script>
        // 这里写内部的 JavaScript 代码
        console.log("Hello, world!");
    </script>
</head>
<body>
    <!-- 其他 HTML 内容 -->
</body>
</html>

外部引入：将 JavaScript 代码保存在一个独立的 .js 文件中，然后在 HTML 文件中通过 <script> 标签引入外部 JavaScript 文件。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部 JavaScript 文件 -->
    <script src="script.js"></script>
</head>
<body>
    <!-- 其他 HTML 内容 -->
</body>
</html>

无论是内部引入还是外部引入，都可以在 HTML 文件中通过 <script> 标签来加载 JavaScript 代码，实现网页的交互和动态效果。

二、基础语法

1. 变量声明

在 JavaScript 中，你可以使用 var、let 或 const 来声明变量。

使用 var：在整个函数范围内声明变量，如果在函数外部声明，则为全局变量。
使用 let：在块级作用域内声明变量，只在声明的块中有效。
使用 const：在块级作用域内声明一个只读的常量。
```
var x = 10;
let y = 20;
const PI = 3.14;
```

2. 数据类型

JavaScript 中的数据类型包括基本数据类型和复杂数据类型：

基本数据类型：包括数字（Number）、字符串（String）、布尔值（Boolean）、null、undefined。

复杂数据类型：包括对象（Object）、数组（Array）、函数（Function）等。

let numberVar = 10;
let stringVar = "Hello, world!";
let booleanVar = true;
let nullVar = null;
let undefinedVar;

3. 运算符

JavaScript 支持多种运算符，包括算术运算符、赋值运算符、比较运算符、逻辑运算符等。

算术运算符：+、-、*、/、% 等。
赋值运算符：=、+=、-=、*=、/= 等。
比较运算符：==、===、!=、!==、>、<、>=、<= 等。

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

let a = 10;
let b = 5;
let c = a + b; // 算术运算符
let d = a > b; // 比较运算符
let e = true && false; // 逻辑运算符

4.对象的创建与使用

在 JavaScript 中，对象是非常核心的数据结构，用于存储各种键值对的集合。对象可以包含多种类型的数据，包括数值、字符串、布尔值、函数、甚至其他对象。

JavaScript 对象可以通过对象字面量的方式直接定义，也可以使用构造函数来创建。

对象字面量：

let person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    greet: function() {
        console.log("Hello, " + this.firstName + " " + this.lastName);
    }
};

构造函数：

function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.greet = function() {
        console.log("Hello, " + this.firstName + " " + this.lastName);
    };
}

let person = new Person("John", "Doe", 30);

访问对象属性和方法

对象的属性和方法可以通过点符号（.）或方括号（[]）来访问。

// 使用点符号
console.log(person.firstName); // 输出 "John"
person.greet(); // 调用方法，输出 "Hello, John Doe"

// 使用方括号
console.log(person['lastName']); // 输出 "Doe"
person['greet'](); // 调用方法，输出 "Hello, John Doe"

修改和添加属性

你可以通过简单的赋值操作来修改对象的属性或添加新的属性。

person.age = 31; // 修改已存在的属性
person.gender = "male"; // 添加新的属性

删除属性

使用 delete 关键字可以删除对象的属性。

delete person.age; // 删除 age 属性

对象的复杂性

对象可以包含其他对象，形成嵌套结构，也可以包含数组和函数。例如：

let person = {
    name: "John",
    address: {
        street: "123 Main St",
        city: "New York"
    },
    hobbies: ["reading", "movies"],
    greet: function() {
        console.log("Hello, I'm " + this.name);
    }
};

console.log(person.address.city); // 输出 "New York"
person.greet(); // 输出 "Hello, I'm John"

三、函数的申明与使用

在 JavaScript 中，函数是一种执行特定任务或计算值的代码块。它们是实现代码重用、模块化和抽象化的基本工具。

函数可以通过几种不同的方式声明：

函数声明（Function Declaration）：

function sayHello() {
    console.log("Hello, world!");
}

函数表达式（Function Expression）：

function sayHello() {
    console.log("Hello, world!");
}

箭头函数（Arrow Function） - ES6 引入了箭头函数，提供了一种更简洁的方式来写函数：

function sayHello() {
    console.log("Hello, world!");
}

调用函数

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

let result = add(5, 3);  // result 将得到 8
console.log(result);

4. 高阶函数

JavaScript 支持高阶函数，即函数可以接受其他函数作为参数或者返回一个函数。

function higherOrderFunction(callback) {
    console.log("Something before the callback.");
    callback();
    console.log("Something after the callback.");
}

higherOrderFunction(() => {
    console.log("This is the callback function.");
});