尚硅谷 一 JS简介

一 JS简介

1.1 JS起源

在这里插入图片描述

Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。ECMA-262 是正式的 JavaScript 标准。这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)。ECMA-262 的开发始于 1996 年，在 1997 年 7 月，ECMA 会员大会采纳了它的首个版本。这个标准由 ECMA 组织发展和维护。JavaScript 的正式名称是 “ECMAScript”。JavaScript的组成包含ECMAScript、DOM、BOM。JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和动画特效等,JS有 如下特点

  • 脚本语言

    • JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。

  • 基于对象

    • JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。

  • 弱类型

    • JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。

  • 事件驱动

    • JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。

  • 跨平台性

    • JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

1.2 JS 组成部分

在这里插入图片描述

ECMA 及版本变化

  • 是一种由欧洲计算机制造商协会（ECMA）通过ECMA-262标准化的脚本程序语言,ECMAScript描述了语法、类型、语句、关键字、保留字、运算符和对象。它就是定义了脚本语言的所有属性、方法和对象。

  • ECMA-262第1版本质上跟网景的JavaScript 1.1相同，删除了浏览器特定代码和少量细微的修改.ECMA-262要求支持Unicode标准（以支持多语言）且对象要与平台无关

  • ECMA-262第2版只是做了一些编校工作，主要是为了严格符合ISO/IEC-16262的要求，并没有增减或改变任何特性。

  • ECMA-262第3版第一次真正对ECMAScript进行更新，更新了字符串处理、错误定义和数值输出，增加了对正则表达式、新的控制语句、try/catch异常处理的支持。

  • ECMA-262第4版是对这门语言的一次彻底修订。开发者开始修订ECMAScript以满足全球Web开发日益增长的需求。 第4版包括强类型变量、新语句和数据结构、真正的类和经典的继承，以及操作数据的新手段。

  • ECMA-262第5版是ECMA-262第3版的小幅改进，于2009年12月3日正式发布。第5版致力于厘清第3版存在的歧义，也增加了新功能。新功能包括原生的解析和序列化JSON数据的JSON对象、方便继承和高级属性定义的方法、新的增强ECMAScript引擎解释和执行代码能力的严格模式。

  • ECMA-262第6版俗称ES6、ES2015或ES Harmony（和谐版），于2015年6月发布。**这一版包含了大概这个规范有史以来最重要的一批增强特性。**ES6正式支持了类、模块、迭代器、生成器、箭头函数、期约、反射、代理和众多新的数据类型。但是并不是所有的浏览器都全面支持了ES6,很多情况下我们需要将ES6的语法通过工具转换成5以后运行（Vue3支持版本）

  • ECMA-262第7版也称为ES7或ES2016，于2016年6月发布。这次修订只包含少量语法层面的增强，如Array.prototype.includes和指数操作符。

  • ECMA-262第8版也称为ES8、ES2017，完成于2017年6月。这一版主要增加了异步函数（async/await）、SharedArrayBuffer及Atomics API、Object.values()/Object.entries()/Object.getOwnProperty- Descriptors()和字符串填充方法，另外明确支持对象字面量最后的逗号。

  • ECMA-262第9版也称为ES9、ES2018，发布于2018年6月。这次修订包括异步迭代、剩余和扩展属性、一组新的正则表达式特性、Promise finally()以及模板字面量修订。

  • ECMA-262第10版也称为ES10、ES2019，发布于2019年6月。这次修订增加了Array.prototype.flat()/flatMap()、String.prototype.trimStart()/trimEnd()、Object.fromEntries()方法以及Symbol.prototype.description属性，明确定义了Function.prototype.toString()的返回值并固定了Array.prototype.sort()的顺序。另外，这次修订解决了与JSON字符串兼容的问题，并定义了catch子句的可选绑定。

  • ECMA-262第11版，也成为ES11、ES2020，发布于2020年6月。这次修订增加了String 的 matchAll 方法、动态导入语句 import()、import.meta、export * as ns from ‘module’、Promise.allSettled、GlobalThis、Nullish coalescing Operator、Optional Chaining以及一种新的数据类型BigInt，在此之后JavaScript正式迎来第8位数据类型。

BOM编程

  • BOM是Browser Object Model的简写，即浏览器对象模型。

  • BOM有一系列对象组成，是访问、控制、修改浏览器的属性和方法

  • BOM没有统一的标准(每种客户端都可以自定标准)。

  • BOM编程是将浏览器窗口的各个组成部分抽象成各个对象,通过各个对象的API操作组件行为的一种编程

  • BOM编程的对象结构如下

    • window 顶级对象,代表整个浏览器窗口
      • location对象 window对象的属性之一,代表浏览器的地址栏
      • history对象 window对象的属性之一,代表浏览器的访问历史
      • screen对象 window对象的属性之一,代表屏幕
      • navigator对象 window对象的属性之一,代表浏览器软件本身
      • document对象 window对象的属性之一,代表浏览器窗口目前解析的html文档

DOM编程

  • 简单来说:DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.
  • document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。
  • 根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。

在这里插入图片描述
上面的代码生成的树如下

在这里插入图片描述
DOM编程其实就是用window对象的document属性的相关API完成对页面元素的控制的编程

在这里插入图片描述

1.3 JS的引入方式

内部脚本方式引入

  • 说明

    • 在页面中,通过一对script标签引入JS代码
    • script代码放置位置具备一定的随意性,一般放在head标签中居多

  • 代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>小标题</title><style>/* 通过选择器确定样式的作用范围 */.btn1 {display: block;width: 150px; height: 40px; background-color: rgb(245, 241, 129); color: rgb(238, 31, 31);border: 3px solid rgb(238, 23, 66);font-size: 22px;font-family: '隶书';line-height: 30px;border-radius: 5px;}</style><script>function suprise(){alert("Hello,我是惊喜")}</script></head><body><button class="btn1" onclick="suprise()">点我有惊喜</button></body>
</html>

效果

在这里插入图片描述

外部脚本方式引入

  • 说明
    • 内部脚本仅能在当前页面上使用,代码复用度不高
    • 可以将脚本放在独立的js文件中,通过script标签引入外部脚本文件
    • 一对script标签要么用于定义内部脚本,要么用于引入外部js文件,不能混用
    • 一个html文档中,可以有多个script标签
  • 抽取脚本代码到独立的js文件中

在这里插入图片描述

在html文件中,通过script标签引入外部脚本文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>小标题</title><style>/* 通过选择器确定样式的作用范围 */.btn1 {display: block;width: 150px; height: 40px; background-color: rgb(245, 241, 129); color: rgb(238, 31, 31);border: 3px solid rgb(238, 23, 66);font-size: 22px;font-family: '隶书';line-height: 30px;border-radius: 5px;}</style><script src="js/button.js" type="text/javascript"></script></head><body><button class="btn1" onclick="suprise()">点我有惊喜</button></body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vue3+vue-router+vite 实现动态路由

vue3+vue-router+vite 实现动态路由

文章中出现的代码是演示版本&#xff0c;仅供参考&#xff0c;实际的业务需求会更加复杂 什么是动态路由 什么场景会用到动态路由 举一个最常见的例子&#xff0c;比如说我们要开发一个后台管理系统&#xff0c;一般来说后台管理系统都会分角色登录&#xff0c;这个时候也就涉…
阅读更多...
第4章 课程发布：模块需求分析，课程预览（模板引擎 静态页面），课程审核，课程发布（分布式事务，页面静态化：熔断降级），课程搜索（es索引）

第4章 课程发布：模块需求分析，课程预览（模板引擎 静态页面），课程审核，课程发布（分布式事务，页面静态化：熔断降级），课程搜索（es索引）

1 模块需求分析 1.1 模块介绍 课程信息编辑完毕即可发布课程&#xff0c;发布课程相当于一个确认操作&#xff0c;课程发布后学习者在网站可以搜索到课程&#xff0c;然后查看课程的详细信息&#xff0c;进一步选课、支付、在线学习。 下边是课程编辑与发布的整体流程&#…
阅读更多...
一.2.（1）双极型晶体三极管的结构、工作原理、特性曲线及主要参数

一.2.（1）双极型晶体三极管的结构、工作原理、特性曲线及主要参数

1.双极型晶体三极管的结构 学会区分P管和N管&#xff0c;会绘制符号 2.工作原理 无论是PNP 还是NPN&#xff0c;本质上放大时&#xff0c;都是发射结正偏&#xff0c;集电极反偏。&#xff08;可以简单理解为pn为二极管&#xff0c;每个三极管都有两个二极管&#xff09; 其中电…
阅读更多...
pcl::visualization::PCLVisualizer保存当前点云显示的视角，下次启动时加载（踩坑）

pcl::visualization::PCLVisualizer保存当前点云显示的视角，下次启动时加载（踩坑）

1. PCLVisualizer显示点云时视角保存需求 看似一个很简单的需求，就是们在界面显示点云后，人为操作鼠标（旋转，平移，缩放）后使得点云显示的视角与比例刚好符合实际需求。 那么，不由得就会想把这个调节好后的视角保存下来，当下次程序启动或者使用过程中，直接让点云显示…
阅读更多...
前端面试题22（js中sort常见的用法）

前端面试题22（js中sort常见的用法）

JavaScript 的 sort() 方法是数组的一个非常强大的功能&#xff0c;用于对数组的元素进行排序。这个方法直接修改原数组&#xff0c;并返回排序后的数组。sort() 的默认行为是将数组元素转换为字符串&#xff0c;然后按照字符串的 Unicode 字典顺序进行排序。这意味着如果你试图…
阅读更多...
什么是JDBC

什么是JDBC

JDBC&#xff08;Java Database Connectivity&#xff09;是Java语言用于连接和操作数据库的一个标准API。它提供了一种统一的方法来访问不同的数据库系统&#xff0c;使得Java程序能够与数据库进行交互&#xff0c;执行SQL语句&#xff0c;并处理查询结果。 JDBC由一组Java类…
阅读更多...
Linux内存管理--系列文章柒——硬件架构

Linux内存管理--系列文章柒——硬件架构

一、引子 之前文章讲解的是系统的虚拟内存&#xff0c;本章讲述这些硬件的架构和系统怎样统一管理这些硬件的。 二、物理内存模型 物理内存模型描述了计算机系统中的物理内存如何由操作系统组织和管理。它定义了物理内存如何划分为单元&#xff0c;如何寻址这些单元以及如何…
阅读更多...
powershell美化工具Oh My Posh安装教程

powershell美化工具Oh My Posh安装教程

1. 安装Oh My Posh 进入Oh My Posh官网&#xff0c;可根据不同平台进行下载 windows下可以直接在微软商店下载 2. 安装Nerd Fonts字体 进入Nerd Fonts官网&#xff0c;选择自己喜欢的字体下载解压后&#xff0c;全选所有文件&#xff0c;右键选择安装即可&#xff08;忽略LICEN…
阅读更多...
WordPress回复评论自动添加@评论者

WordPress回复评论自动添加@评论者

久以前有朋友反应&#xff0c;回复了却没有接到通知&#xff01;今天小编分享一款关于WordPress回复评论自动添加评论者的代码&#xff0c;以后大家留言的时候&#xff0c;只有被回复就会自动你了哟&#xff0c;在这里也感谢大家的支持 教程开始将一下代码添加到当前模板函数 (…
阅读更多...
Spring如何解决循环依赖问题

Spring如何解决循环依赖问题

在 Spring 框架中，循环依赖问题（Circular Dependency）是指多个 Bean 之间存在互相依赖的情况。Spring 容器通过一些机制来解决循环依赖问题，以确保应用程序的正常启动和运行。 1. 什么是循环依赖？ 循环依赖是指两个或多个 Bean 之间存在互相依赖的关系。例如，Bean A 依…
阅读更多...
Qt调用Matlab(一)

Qt调用Matlab(一)

目录 1 概述2 创建Qt工程2.1 增加Matlab支持3 调用Matlab3.1 widget.h3.2 widget.cpp4 运行4.1 配置4.2 运行1 概述 MATLAB是MathWorks公司出品的商业数学软件，用于数据分析、无线通信、深度学习、图像处理与计算机视觉、信号处理、量化金融与风险管理、机器人，控制系统等领域…
阅读更多...
【matlab】分类回归——智能优化算法极限学习机

【matlab】分类回归——智能优化算法极限学习机

目录 引言 基本原理 主要特点 应用领域 发展趋势 智能优化算法——蜣螂优化算法&#xff08;DBO&#xff09; 算法原理 算法特点 应用前景 代码实现 ELM训练函数——elmtrain 函数 ELM预测函数——elmpredict 函数 适应度函数 主函数 引言 极限学习机&#xff08;…
阅读更多...
ARM_Linux驱动开发——字符设备驱动开发(上)

ARM_Linux驱动开发——字符设备驱动开发(上)

目录 一、Linux驱动开发思维 二、Linux驱动开发分类 三、“ ARM_Linux驱动开发——字符设备驱动开发 ” 字符设备驱动简介 前言 在分享Linux驱动开发之前&#xff0c;我想带大家首先回顾一下裸机驱动开发和Linux驱动开发的区别。 1、运行环境和操作系统&#xff1a; 裸机驱…
阅读更多...
CI脚本的python基础

CI脚本的python基础

CI脚本的python基础 基础python语法getopt.getopt(args, shortopts, longopts[])requests.requestjson.loads&#xff08;&#xff09;os.popensplit的用法os.path.existshutil.rmtree以及shutil家族shutil.make_archivetime.strftime计算Python zfill&#xff08;width&#x…
阅读更多...
Spring Cloud Gateway报sun.misc.Unsafe.park(Native Method)

Spring Cloud Gateway报sun.misc.Unsafe.park(Native Method)

项目引入spring cloud gateway的jar报&#xff0c;启动的时候报&#xff1a; [2024-07-05 10:10:16.162][main][ERROR][org.springframework.boot.web.embedded.tomcat.TomcatStarter][61]:Error starting Tomcat context. Exception: org.springframework.beans.factory.Bean…
阅读更多...
Apache Seata 高可用部署实践

Apache Seata 高可用部署实践

本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 Apache Seata 高可用部署实践 Seata 高可用部署实践 使用配置中心和数据库来实现 Seata 的高…
阅读更多...
使用Spring Boot和自定义缓存注解优化应用性能

使用Spring Boot和自定义缓存注解优化应用性能

在现代应用开发中&#xff0c;缓存是提高系统性能和响应速度的关键技术之一。Spring Boot提供了强大的缓存支持&#xff0c;但有时我们需要更灵活的缓存控制。本文将介绍如何使用Spring Boot和自定义缓存注解来优化应用性能。 1. 为什么需要自定义缓存注解&#xff1f; Sprin…
阅读更多...
AI算力革命：GPU租赁与算力市场的未来趋势

AI算力革命：GPU租赁与算力市场的未来趋势

在数字化和智能化的时代背景下&#xff0c;人工智能&#xff08;AI&#xff09;的快速发展已成为全球科技领域的焦点。AI算力作为支撑其发展的关键因素&#xff0c;正以前所未有的速度改变着我们的生活和工作方式。其中&#xff0c;GPU租赁模式的兴起&#xff0c;不仅解决了AI算…
阅读更多...
IT学习之路：深耕技能，拥抱变化

IT学习之路：深耕技能，拥抱变化

高考&#xff0c;作为人生的重要转折点之一&#xff0c;为无数学子开启了通往梦想与未来的大门。对于众多选择投身IT行业的青年而言&#xff0c;这段旅程既是挑战也是机遇。IT行业以其快速的发展速度、广泛的应用领域和无限的创新潜力&#xff0c;成为了许多年轻人实现自我价值…
阅读更多...
瀑布模型、渐增式开发、原型化开发、统一过程模型（RUP）都是软件开发生命周期中的重要模型和方法，他们的原理及他们的应用场景有哪些

瀑布模型、渐增式开发、原型化开发、统一过程模型（RUP）都是软件开发生命周期中的重要模型和方法，他们的原理及他们的应用场景有哪些

软件开发生命周期中的不同模型和方法各有其独特的原理和应用场景。本文将详细分析瀑布模型、渐增式开发、原型化开发以及统一过程模型&#xff08;RUP&#xff09;的原理及其适用的应用场景。 瀑布模型 原理 瀑布模型是一种线性顺序的软件开发方法&#xff0c;其名称源于其流…
阅读更多...
最新文章

Copyright @ 2022~2023