30分钟入门javascript(大学生版)

于 2024-07-25 14:44:14 发布
阅读量634 收藏 9
点赞数 15
文章标签： javascript 开发语言 ecmascript vue.js 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64904350/article/details/140689679
版权

30分钟入门JavaScript

1. JavaScript简介

JavaScript（简称JS）是一种高级、解释型的编程语言。最初由网景公司开发，用于网页的交互式操作。如今，JavaScript已成为了几乎所有现代网站不可或缺的一部分，并且被广泛应用于服务器端（Node.js）、桌面应用、移动应用等多个领域。

2. 基本语法

2.1 变量声明

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

var message = "Hello, world!";
let score = 100;
const PI = 3.14159;
  • var是ES5及之前版本中使用的方式，具有函数作用域或全局作用域。
  • let和const是ES6引入的，具有块级作用域。
2.2 数据类型

JavaScript是一种弱类型语言，支持多种数据类型，包括：

  • 数字（Number）
  • 字符串（String）
  • 布尔值（Boolean）
  • 空值（null）
  • 未定义（undefined）
  • 对象（Object）
  • 数组（Array）
  • 函数（Function）
2.3 基本运算符

JavaScript提供了丰富的运算符，包括算术运算符、比较运算符、逻辑运算符等。

let a = 10;
let b = 5;
let sum = a + b; // 15
let difference = a - b; // 5
let product = a * b; // 50
let quotient = a / b; // 2
let modulus = a % b; // 0

3. 控制结构

3.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.");
}
3.2 循环

JavaScript提供了for、while和do...while循环。

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

let count = 0;
while (count < 3) {
    console.log(count);
    count++;
}

do {
    console.log("Hello");
} while (false);

4. 函数

函数是一段可以重复使用的代码块。在JavaScript中，可以使用函数表达式或函数声明来定义函数。

function sayHello(name) {
    console.log("Hello, " + name);
}

sayHello("Alice"); // Hello, Alice

let greet = function (name) {
    console.log("Hi, " + name);
};

greet("Bob"); // Hi, Bob

5. 对象和数组

5.1 对象

对象是键值对的集合，键是字符串，值可以是任何类型。

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

person.greet(); // Hello, John
5.2 数组

数组用于存储有序的数据集合。

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Apple
console.log(fruits.length); // 3

fruits.push("Date");
console.log(fruits); // ["Apple", "Banana", "Cherry", "Date"]

6. 事件和DOM操作

JavaScript可以与HTML文档交互，操作DOM（文档对象模型）。

<button id="myButton">Click me</button>
<script>
    document.getElementById("myButton").addEventListener("click", function() {
        alert("Button clicked!");
    });
</script>

这段代码会在按钮被点击时显示一个警告框。

7. 异步编程

JavaScript支持异步编程，可以使用回调函数、Promise和async/await来处理异步操作。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched");
        }, 1000);
    });
}

fetchData().then(data => {
    console.log(data); // Data fetched
});

更多!!!

变量和数据类型

变量声明
  • var：函数作用域或全局作用域。
  • let：块级作用域，不允许重复声明。
  • const：块级作用域，用于声明常量，一旦赋值不能修改。
数据类型
  • 数字（Number）
  • 字符串（String）
  • 布尔值（Boolean）
  • 空值（null）
  • 未定义（undefined）
  • 对象（Object）
  • 数组（Array）
  • 函数（Function）

基本运算符

  • 算术运算符：+, -, *, /, %
  • 赋值运算符：=, +=, -=, *=, /=, %=
  • 比较运算符：==, ===, !=, !==
  • 逻辑运算符：&&, ||, !

第2部分：控制结构

条件语句

  • if...else：基本的条件执行。
  • switch：多条件分支选择。

循环

  • for：适合已知次数的循环。
  • while：适合未知次数的循环。
  • do...while：至少执行一次的循环。

第3部分：函数

函数定义

函数是执行特定任务的代码块，可以带有参数和返回值。

function welcome(message) {
    console.log(message);
}

welcome("Welcome to JavaScript!");
箭头函数

ES6引入的箭头函数提供了一种更简洁的函数写法。

const sayHello = (name) => {
    console.log(`Hello, ${name}!`);
};

sayHello("Alice");

第4部分：对象和数组

对象

对象是属性的集合，属性可以是基本数据类型或函数（方法）。

let user = {
    name: "Bob",
    age: 25,
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

user.greet(); // Hello, my name is Bob

数组

数组是有序的数据集合，可以包含任何类型的元素。

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]

第5部分：事件和DOM操作

JavaScript可以通过事件监听器响应用户行为，如点击、输入等。

<button id="clickMe">Click Me</button>
<script>
    document.getElementById("clickMe").addEventListener("click", function() {
        alert("Button was clicked!");
    });
</script>

DOM操作

通过JavaScript，可以动态地修改页面内容、样式和结构。

let heading = document.createElement("h1");
heading.textContent = "Hello, World!";
document.body.appendChild(heading);

第6部分：异步编程

JavaScript的异步编程模型使得可以不阻塞主线程地执行长时间运行的任务。

Promise

Promise是对异步操作最终完成或失败的抽象。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data received");
        }, 1000);
    });
}

fetchData().then(data => {
    console.log(data); // Data received
});

Async/Await

async和await使得异步代码的写法更接近同步代码。

async function fetchDataAsync() {
    try {
        let data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data", error);
    }
}

fetchDataAsync();

当然，我们可以继续深入探讨JavaScript的一些高级特性和实用技巧，以帮助初学者更全面地了解这门语言。

第7部分：高级数据类型和模式

Map和Set

Map和Set是ES6中新增的集合类型。

  • Map保存键值对，而且键可以是任何类型。
  • Set保存唯一的值，无论是什么类型。
let map = new Map();
map.set("key", "value");
console.log(map.get("key")); // "value"

let set = new Set();
set.add(1).add("unique").add({}));
console.log(set.size); // 3

WeakMap和WeakSet

WeakMap和WeakSet也是ES6中新增的集合类型，它们存储对对象的弱引用。

  • WeakMap只能通过对象作为键。
  • WeakSet只能存储对象。

它们适合用于缓存或内存管理，因为它们的对象键可以被垃圾回收。

第8部分：原型和继承

JavaScript是一种基于原型的语言，每个对象都有一个原型。

  • 原型链：对象属性和方法的继承链。
  • Object.create()：创建一个新对象，使用现有的对象来提供新对象的__proto__。
let animal = {
    speak() {
        console.log("Animal speaks");
    }
};

let dog = Object.create(animal);
dog.speak(); // Animal speaks

类（ES6+）

虽然JavaScript没有传统意义上的类，但ES6引入了类语法糖，使得基于原型的继承更加清晰。

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        return this.name + " makes a noise";
    }
}

class Dog extends Animal {
    speak() {
        return super.speak().replace("makes a noise", "barks");
    }
}

let myDog = new Dog("Buddy");
console.log(myDog.speak()); // Buddy barks

第9部分：模块

ES6模块允许我们将代码组织成可重用的单元。

// mathFunctions.js
export function add(x, y) {
    return x + y;
}

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

第10部分：错误处理

JavaScript提供了try...catch语句来处理可能发生的错误。

try {
    let result = null;
    result.doSomething(); // 这将抛出一个错误
} catch (error) {
    console.error("An error occurred:", error);
}

第11部分：JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。

let user = { name: "Alice", age: 25 };
let jsonText = JSON.stringify(user);
console.log(jsonText); // '{"name":"Alice","age":25}'

let parsedUser = JSON.parse(jsonText);
console.log(parsedUser.name); // Alice

第12部分：性能优化

  • 避免长时间运行的循环和复杂的计算。
  • 使用Web Workers进行后台线程计算。
  • 利用浏览器的缓存机制。
  • 减少DOM操作和重绘/重排。

第13部分：现代开发工具

  • 使用构建工具，如Webpack、Rollup或Parcel。
  • 利用ESLint等代码质量工具。
  • 使用Babel转换ES6+代码到ES5，以兼容老旧浏览器。
  • 利用Source Maps进行代码调试。

结语

JavaScript是一个不断发展的语言，拥有庞大的生态系统和社区。通过本篇文章，你已经掌握了JavaScript的基础和一些高级特性。继续深入学习，实践项目，参与社区，你将成为一名出色的JavaScript开发者。

进一步学习资源

学前端的坤坤bond
关注
  • 15
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript基础入门教程
06-24
本资源是chm文档，便于阅读 本文档适合于稍微有编程语言基础、想了解学习javascript的初学者，内有十余个诸如弹窗，状态栏走马灯效果，显示时间等实用的例子
Html+Css+Javascript从入门到精通.pdf
09-27
Html+Css+Javascript从入门到精通.pdfHtml+Css+Javascript从入门到精通.pdf
JavaScript 基础入门
YUELEI118的博客
04-26 2182
视频 学习笔记 JavaScript JavaScript是一门脚本语言 脚本语言和非脚本语言的区别： 程序的目标文件可以用记事本打开的就是脚本语言，JAVA的目标程序是Class文件，用记事本打不开 包含三大块 DOM编程： DOM是指对HTML中的节点进行操作。例如：div span .class #id 对网页的内容进行增删改的过程 BOM编程 对浏览器的操作，例如：后退，刷新，地址栏等 ECMAScript JavaScript的核心语法 总结：DOM和BOM的关系
HTML5+CSS3+JavaScript从入门到精通【文末送书】
最新发布
一键难忘的博客
05-23 7300
第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；全书共计有205个应用实例，141个编程训练，81个综合练习，1个项目案例，为初学者打造“学习+训练”的强化实战学习环境。读者对象：初学编程的自学者，编程爱好者，大中专院校的老师和学生，相关培训机构的老师和学员，进行毕业设计的学生，初、中级程序开发人员，程序测试及维护人员，参加实习的“菜鸟”程序员。
JavaScript整合版——后端程序员学js，只读一文直接零基础入门，大学生期末考试不挂科宝典。
m0_59985125的博客
06-20 2353
后端学前端，一文足以入门。
html5 css3 javascript从入门到精通,HTML5+CSS3+JavaScript从入门到精通（微课精编版）
weixin_42309785的博客
06-20 1540
HTML5+CSS3+JavaScript从入门到精通(微课精编版)语音编辑锁定讨论上传视频《HTML5+CSS3+JavaScript从入门到精通(微课精编版)》是2018年8月清华大学出版社出版的图书，作者是前端科技。书名HTML5+CSS3+JavaScript从入门到精通(微课精编版)作者前端科技ISBN9787302502203定价79.80元出版社清华大学出版社...
【大学生期末大作业】HTML+CSS+JavaScript — 模仿博客网站设计（Web）
好好读书
03-25 7830
JavaScript课程期末作业，👨‍🎓学生HTML动态网页基础水平制作，页面排版干净简洁。模仿博客设计风格，精简优化，使用 HTML+CSS+JavaScript 页面布局设计,大学生网页设计作业源码Web，画面精明，排版整洁，内容丰富，主题鲜明，适合初学者、大学生、期末综合作业实践等学习使用, 实例全面，有助于同学的学习，本文将详细介绍如何从头开始设计个人网站并将其转换为代码的过程来实践设计，思路+过程+代码。一直走在路上🏔。
JavaScript入门经典(第4版)
weixin_30881367的博客
07-07 486
循序渐进精细讲解所有JavaScript知识点 指导您构建建出神入化的完美Web应用程序 JavaScript入门经典(第4版) 基本信息 原书名： Beginning JavaScript 原出版社： Wrox 作者： (美)Paul Wilton Jeremy McPeak [作译者介绍] 译者： 张敏 高宇辉 王东亚 出版社：清华大学出版社 ...
JavaScript基本入门教程
脚踏实地，慢慢来
08-19 4363
JavaScript基本入门 一、JavaScript语法详解 1.JavaScript的组成 ECMAScript(核心)：规定了JS的语法和基本对象 DOM文档对象模型：处理网页内容的方法和接口，D是指标记型文档HTML BOM浏览器对象模型：与浏览器交互的方法和接口 2.JavaScript的引入方式 1）内部脚本 使用JavaScript
适合普通大学生的前端开发学习路线
热门推荐
帅地
04-12 4万+
大家好，我是帅地。 假如你没有明确的目标，或许可以按照我说的学习路线来学习一波，我写的每一份学习路线，不会很全面，因为我认为，东西列的太多，反而不利于新手的学习，所以我列举的，都是比较必要的知识，当你把这些知识学了的时候，我相信你不需要别人的学习路线，也能知道自己接下来需要学啥了。 虽然帅地的技术栈是后端开发，不过后端和前端显然是一对的，还是经常要和前端打交道，所以在之前也学习过不少前端的知识，下面总结的这套前端学习路线，是我参考了别人大量的学习经历 + 自己的思考 + 咨询前端大佬后提取出来的，可能不会像
【前端开发】JavaScript入门与实战
lsj960922的博客
05-27 169
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与...
Web大学生网页作业成品~美食餐饮网站设计与实现(HTML+CSS+JavaScript)
qq_365392777
08-09 1万+
HTML期末大作业~ 美食餐饮学生网页设计作业 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计~Web大学生网页成品 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列...
JavaScript从入门到精通（第4版）（示例源码+习题答案）.7z
07-14
"JavaScript从入门到精通（第4版）"是一本旨在帮助初学者掌握这门语言的教材，通过详细的示例源码和习题答案，让学习者能够逐步深入理解JavaScript的核心概念和实际应用。 1. **基础语法**：JavaScript的基础包括...
JavaScript入门到精通课程PPT
06-21
《JavaScript入门到精通》第二版，出自清华大学出版社，是一本深受初学者和进阶者欢迎的教材。本课程PPT旨在系统地教授JavaScript的核心概念、语法特性以及实际应用，帮助学习者从零基础逐步提升到精通。 1. **基础...
基于JavaScript开发的大学英语教材的单词默写器源码.zip
12-15
基于JavaScript开发的大学英语教材的单词默写器源码.zip基于JavaScript开发的大学英语教材的单词默写器源码.zip基于JavaScript开发的大学英语教材的单词默写器源码.zip基于JavaScript开发的大学英语教材的单词默写器...
如何学习Javascript入门指导
12-01
谈不上经验，都是一些教训。...　论条件，咱是文科生，大学专业工商管理，和计算机毛关系都没；有人说英语，读了四年大学，很遗憾，咱还四级没混过；就咱这条件都学得乐呵呵的，您还等啥。 　当然学习JS也是
大学生期末WEB考查课作品设计HTML+CSS
12-28
大学生通过这样的项目可以实践理论知识，提升动手能力，理解Web开发的基本流程，以及如何将静态设计转化为可交互的网页。同时，他们还会接触到版本控制工具（如Git），学习如何管理和协同开发代码。 在HTML中，学生...
JAVASCRIPT从入门到精通
09-01
2008清华大学出版社 孙强JAVASCRIPT从入门到精通 电子书.pdf
基于Vue+JavaScript的哈尔滨师范大学教务处教室平台源码.zip
01-11
基于Vue+JavaScript的哈尔滨师范大学教务处教室平台源码.zip基于Vue+JavaScript的哈尔滨师范大学教务处教室平台源码.zip基于Vue+JavaScript的哈尔滨师范大学教务处教室平台源码.zip基于Vue+JavaScript的哈尔滨师范...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值