【Java 进阶篇】JavaScript 介绍及其发展史

news2024/11/19 6:22:59

在这里插入图片描述

JavaScript是一门广泛应用于Web开发的编程语言。它是一种高级的、解释性的脚本语言,主要用于改善用户与Web页面的互动体验。本篇博客将为你详细介绍JavaScript的基础知识、历史背景和它在Web开发中的重要作用。我们还将讨论JavaScript的发展史,从它的起源一直到现在的现代JavaScript。

什么是 JavaScript

JavaScript,通常简称JS,是一种用于构建交互式网页的脚本语言。它最初是由网景公司(Netscape)开发,因此在刚开始的时候被称为"LiveScript"。后来,为了搭上当时非常流行的Java的热度,更名为"JavaScript"。但需要注意的是,JavaScript与Java没有直接关系,它们是两种完全不同的编程语言。

JavaScript的主要用途包括:

  • 网页互动:JavaScript可以让你的网页更具互动性。你可以创建弹出窗口、表单验证、图像滑动等各种效果,以增强用户体验。

  • 动态内容:你可以使用JavaScript来动态更改网页上的内容,而不必重新加载整个页面。这对于创建单页应用程序(SPA)非常有用。

  • 数据请求:JavaScript可以与服务器进行通信,从服务器获取数据并将其呈现在网页上。这通常使用AJAX(Asynchronous JavaScript and XML)来实现。

  • 浏览器控制:你可以使用JavaScript来控制浏览器的各个方面,如添加和删除HTML元素,更改样式和处理浏览器事件。

JavaScript 的发展史

为了更好地理解JavaScript,让我们回顾一下它的发展史。JavaScript的历史可以大致分为以下几个阶段:

1. 起源阶段

  • 1995年: JavaScript的历史始于Netscape公司的布兰登·艾克(Brendan Eich)开发的原型。它最初被称为"LiveScript",后来更名为JavaScript。

  • 1996年: 微软推出了IE 3.0,它包括了一个名为JScript的JavaScript版本。这引发了浏览器战争,导致了各种JavaScript实现的不一致性。

  • 1997年: 为了推动JavaScript标准化,Netscape提交了JavaScript语言规范给ECMA International(一个标准制定组织),这就是为什么我们经常听到"ECMAScript"这个名词。

2. 增强和扩展

  • ES3(ECMAScript 3): 1999年,ECMAScript 3发布。它是JavaScript语言的重要版本,为其提供了一些新功能,如正则表达式和更多的控制语句。

  • DOM(Document Object Model): 1998年,W3C(World Wide Web Consortium)发布了DOM标准,它允许JavaScript与HTML文档进行交互。这为动态网页开发打开了大门。

  • ES5: 2009年,ECMAScript 5发布。它引入了一些重要的新功能,如"strict mode"(严格模式)和JSON支持。

3. 现代 JavaScript

  • ES6(ECMAScript 2015): 2015年,ECMAScript 6发布,也被称为ES2015。这是一个重要的版本,引入了许多新的语言特性,如箭头函数、类、模块、Promise等。ES6使JavaScript更强大、更易读、更易维护。

  • ES7(ECMAScript 2016): 2016年,ECMAScript 7发布,引入了Array.prototype.includes方法,该方法用于检查数组是否包含某个特定元素。

  • ES8(ECMAScript 2017): 2017年,ECMAScript 8发布,引入了async/await语法糖,使异步编程更加容易理解和维护。

  • ES9(ECMAScript 2018): 2018年,ECMAScript 9发布,引入了诸如spreadrest操作符、Promise.finally等新特性,以及正则表达式相关的改进。

  • ES10(ECMAScript 2019): 2019年,ECMAScript 10发布,引入了Array.prototype.flatArray.prototype.flatMap等新方法,以及Object.fromEntries方法。

  • ES11(ECMAScript 2020): 2020年,ECMAScript 11发布,引入了nullish coalescingoptional chaining等操作符,以处理变量未定义或为空的情况。

  • ES12(ECMAScript 2021): 2021年,ECMAScript 12发布,引入了String.prototype.replaceAllPromise.anyLogical Assignment Operators等新特性,以及更多的语法改进。

4. JavaScript 的应用

JavaScript已经发展成为一种跨平台的语言,不仅用于前端开发,还用于后端开发。以下是JavaScript在不同领域的应用:

  • 前端开发: JavaScript是构建交互式Web页面的关键语言,它可以与HTML和CSS结合使用,创建动态网页。

  • 后端开发: Node.js是一种JavaScript运行环境,使JavaScript可以用于服务器端开发。它已成为创建高性能Web应用的流行选择。

  • 移动开发: 使用JavaScript框架(如React Native、Ionic和NativeScript),开发人员可以构建跨平台移动应用程序,而不必编写多个不同平台的代码。

  • 游戏开发: 有许多JavaScript游戏引擎,如Phaser和Babylon.js,可以用于创建2D和3D游戏。

  • 桌面应用程序: 使用Electron,你可以使用JavaScript、HTML和CSS构建跨平台的桌面应用程序。

JavaScript 示例

下面是一个简单的JavaScript示例,演示如何在HTML中使用JavaScript来创建一个点击按钮:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript示例</title>
</head>
<body>
  <h1>欢迎来到JavaScript示例</h1>
  <p>点击下面的按钮查看提示信息:</p>
  <button id="myButton">点击我</button>
  <p id="message"></p>

  <script>
    // 获取按钮元素
    var button = document.getElementById("myButton");
    // 为按钮添加点击事件监听器
    button.addEventListener("click", function() {
      // 获取消息元素
      var message = document.getElementById("message");
      // 更改消息文本
      message.textContent = "你点击了按钮!";
    });
  </script>
</body>
</html>

在这个示例中,我们使用JavaScript获取HTML元素,添加事件监听器,并在按钮被点击时更改页面上的文本。

结语

JavaScript是Web开发的关键技术之一,它经历了多个版本和重大改进,使开发者能够构建更强大、更动态的Web应用程序。它不仅限于前端开发,还在后端、移动开发、游戏开发等领域有着广泛的应用。如果你想深入学习JavaScript,不仅可以从基础语法开始,还可以探索其各种框架和库,如React、Angular、Vue等,以提高你的Web开发技能。祝你学习愉快,掌握JavaScript的奇妙之处!

作者信息

作者 : 繁依Fanyi
CSDN: https://techfanyi.blog.csdn.net
掘金:https://juejin.cn/user/4154386571867191

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1081831.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

9. 一个SpringBoot项目运行

新手如何运行一个SpringBoot项目 1.SpringBoot项目运行 新创建的SpringBoot项目如何运行 2.启动lombok注解 点击该按钮&#xff0c;启动lombok注解支持 3.展示说明

进阶JAVA篇-Object类与Objects类、包装类的常用API(一)

目录 API 1.0 API概念 2.0 Object类的常用API 2.1 Object 中的 tostring() 方法 表示返回对象的字符串表达形式 2.2 Object 中的 equals(Object o) 方法 &#xff0c;判断两个对象的是否相等 2.2.1深入了解如何重写Object 中的 equals(Object o) 方法 2.2.2 对重写Object 中的…

html css实战之学成在线项目

html css实战之学成在线项目 项目链接&#xff1a;https://download.csdn.net/download/weixin_39451323/88416213 效果图&#xff1a;

4年测试经验,面试却突破不了20K,真是太卷了····

先说一个插曲&#xff1a;上个月我有同学在深圳被裁员了&#xff0c;和我一样都是软件测试&#xff0c;不过他是平安外包&#xff0c;所以整个组都撤了&#xff0c;他工资和我差不多都是14K。 现在IT互联网已经比较寒冬&#xff0c;特别是软件测试&#xff0c;裁员先裁测试&am…

【技术追踪】SAM(Segment Anything Model)代码解析与结构绘制之Prompt Encoder

论文&#xff1a;Segment Anything   代码&#xff1a;https://github.com/facebookresearch/segment-anything 上一篇&#xff1a;【技术追踪】SAM&#xff08;Segment Anything Model&#xff09;代码解析与结构绘制之Image Encoder 本篇示例依然采用上一篇的狗狗图像运行代…

深度学习笔记之优化算法(八)Adam算法的简单认识

深度学习笔记之优化算法——Adam算法的简单认识 引言回顾&#xff1a;基于Nesterov动量的RMSProp算法Adam算法的简单认识一阶矩、二阶矩修正偏差的功能Adam的算法过程描述Adam示例代码 引言 上一节介绍了基于 Nesterov \text{Nesterov} Nesterov动量与 RMSProp \text{RMSProp}…

文字与视频结合效果

效果展示 CSS 知识点 mix-blend-mode 属性的运用 实现整体页面布局 <section class"sec"><video autoplay muted loop><source src"./video.mp4" type"video/mp4" /></video><h2>Run</h2><!-- 用于切…

【Java 进阶篇】JavaScript 与 HTML 的结合方式

JavaScript是一种广泛应用于Web开发中的脚本语言&#xff0c;它与HTML&#xff08;Hypertext Markup Language&#xff09;结合使用&#xff0c;使开发人员能够创建交互式和动态的网页。在这篇博客中&#xff0c;我们将深入探讨JavaScript与HTML的结合方式&#xff0c;包括如何…

Web知识:markupsafe.escape() 函数的作用

1、markupsafe.escape() 函数是 MarkupSafe 库中的一个函数&#xff0c;它的作用是对字符串进行 HTML 转义&#xff0c;以防止在 HTML 文档中引起意外的解析结果或安全漏洞。 2、在 Web 开发中&#xff0c;如果用户提供的数据直接插入到 HTML 页面中&#xff0c;而没有经过转义…

SpringBoot调用存储过程(入参,返参)(亲测有效!!!)

存储过程和函数是有区别的&#xff01;&#xff01;&#xff01; 创建函数&#xff0c;只是演示&#xff0c;以下函数不完整&#xff01;&#xff01;&#xff01;(只是看P_xxx参数) CREATE OR REPLACE PROCEDURE SP_TICKET_CHECKE_ONLINE_TEST (p_transcode IN OUT VA…

Java反射获取抽象类方法属性问题讲解

Java反射获取抽象类方法属性问题讲解 结论一、案例准备二、测试方法&#xff1a;使用反射获取抽象类私有方法和私有属性具体操作&#xff08;获取私有方法&#xff09;具体操作&#xff08;获取私有属性&#xff09; 结论 Java 通过反射可以获得抽象类的任何修饰符&#xff08…

Vue2 Watch的语法

Watch语法 一、监听普通数据类型&#xff08;1&#xff09;把要监听的msg值看作方法名&#xff0c;来进行监听。&#xff08;2&#xff09;把要监听的msg值看作对象&#xff0c;利用hanler方法来进行监听 二、监听对象&#xff1a;&#xff08;1&#xff09;监听对象需要用到深…

LeetCode【300】最长递增子序列

题目&#xff1a; 思路&#xff1a; 通常来说&#xff0c;子序列不要求连续&#xff0c;而子数组或子字符串必须连续&#xff1b;对于子序列问题&#xff0c;第一种动态规划方法是&#xff0c;定义 dp 数组&#xff0c;其中 dp[i] 表示以 i 结尾的子序列的性质。在处理好每个…

1808_ChibiOS基本的架构介绍

全部学习汇总&#xff1a; GreyZhang/g_ChibiOS: I found a new RTOS called ChibiOS and it seems interesting! (github.com) 简单看了一下ChibiOS的架构介绍&#xff0c;感觉这种OS以及组件非常适合快速构建一个应用。这里做一个简单的资料整理。。 1. 不同于其他的OS&#…

TCP/IP(九)TCP的连接管理(六)TIME_WAIT状态探究

一 TIME_WAIT探究 要明确TIME_WAIT状态在tcp四次挥手的阶段 ① 为什么 TIME_WAIT 等待的时间是 2MSL? 背景&#xff1a; 客户端在收到服务端第三次FIN挥手后,就会进入TIME_WAIT 状态,开启时长为2MSL的定时器1、MSL 是 Maximum Segment Lifetime 报文最大生存时间2、2MSL…

4.(vue3.x+vite)style动态绑定的方式

前端技术社区总目录(订阅之前请先查看该博客) 效果浏览 代码如下: <template><div><div :style="{

改造Vue-admin-template登录

这是是将Vue-admin-template改为登录自己的&#xff0c;拿自己的数据&#xff0c;原作者是gitee花裤衩或者github devServer: {proxy: {/dev-api: {target: http://localhost:8035,changeOrigin: true,pathRewrite: {^/dev-api: }}} }, main.js如下 import Vue from vueimpor…

VMware虚拟机安装Linux教程(图文超详细)

1.安装VMware 官方正版VMware下载地址 https://www.vmware.com/ 双击安装 以上就是VMware在安装时的每一步操作&#xff0c;基本上就是点击 "下一步" 一直进行安装。 2.安装Linux VMware虚拟机安装完毕之后&#xff0c;我们就可以打开VMware&#xff0c;并在上面来…

validator库的使用详解

TOC 基本使用 前言 在做API开发时&#xff0c;需要对请求参数的校验&#xff0c;防止用户的恶意请求。例如日期格式&#xff0c;用户年龄&#xff0c;性别等必须是正常的值&#xff0c;不能随意设置。以前会使用大量的if判断参数的值是否符合规范&#xff0c;现在可以使用val…

电脑如何查看是否支持虚拟化及如何开启虚拟化

什么是虚拟化? Intel Virtualization Technology就是以前众所周知的“Vanderpool”技术&#xff08;简称VT&#xff0c;中文译为虚拟化技术&#xff09;&#xff0c;这种技术可以让一个CPU工作起来就像多个CPU并行运行&#xff0c;从而使得在一部电脑内同时运行多个操作系统成…