尚硅谷 一 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.mfbz.cn/a/779598.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

DDR的拓扑与仿真

DDR的拓扑与仿真

T型拓扑 vs Fly-by 由于T型拓扑在地址、命令和时钟都是同时到达每个DDR芯片&#xff0c;所以同步的切换噪声会叠加在一起&#xff0c;DDR越多这个信号上叠加的噪声越大&#xff0c;T型拓扑的优点是地址、命令和时钟都是同时到达&#xff0c;所以不需要做写均衡Write leveling。…
阅读更多...
pandas中 groupby分组详解 1

pandas中 groupby分组详解 1

引言 在一个使用 pandas 做数据分析的项目过程中&#xff0c;再次深刻理解了一下 pandas 中使用 groupby 进行分组的一些细节问题&#xff0c;以及对想要做的操作如何实现&#xff0c;在此记录&#xff1b; 问题 1&#xff1a;groupby 分组查看分组结果&#xff0c;以及重设分…
阅读更多...
【C++】map和set详解

【C++】map和set详解

目录 1. 关联式容器 2. 键值对pair 3. 树形结构的关联式容器 4. set 4.1 set的介绍 4.2 set的构造 4.3 set的迭代器 4.4 set的容量 4.5 set的常用函数 5. multiset 6. map 6.1 map的介绍 6.2 map的构造 6.3 map的迭代器 6.4 map的容量 6.5 map的operator[] 6.6…
阅读更多...
Drools开源业务规则引擎（三）- 事件模型（Event Model）

Drools开源业务规则引擎（三）- 事件模型（Event Model）

文章目录 Drools开源业务规则引擎&#xff08;三&#xff09;- 事件模型&#xff08;Event Model&#xff09;1.org.kie.api.event2.RuleRuntimeEventManager3.RuleRuntimeEventListener接口说明示例规则文件规则执行日志输出 4.AgentaEventListener接口说明示例监听器实现类My…
阅读更多...
rk3588 Android HDMI IN热插拔解决

rk3588 Android HDMI IN热插拔解决

一、前言 1、公司在使用 别的厂商的板卡遇到一个问题&#xff0c;开机我们的app自启就会闪退&#xff0c;后来定位发现是camera 的open出错了&#xff0c;这个问题的出现是因为没有插HDMI IN输入的问题导致的,所以需要对HDMI IN的热插拔进行检测&#xff0c;后面我把这个问题也…
阅读更多...
SystemUIService启动-Android13

SystemUIService启动-Android13

SystemUIService启动-Android13 1、SystemUIService启动2、其他SystemUI services启动2.1 Dagger依赖注入2.2 Recents为例 1、SystemUIService启动 SystemUI启动&#xff0c;及其SystemUIService启动 <!-- SystemUi service component --><string name"config_s…
阅读更多...
短信验证码实现

短信验证码实现

一、设置AccessKey 创建用户并配置使用权限&#xff0c;使我们拥有调用 aliyunAPI 的权限&#xff0c;之后会生成 AccessKeyID 和 AccessKey密码&#xff0c;后面我们会使用到。需要注意的是 AccessKeyID 和 AccessKey密码生成后我们需要将他保存起来&#xff0c;否则后期无法查…
阅读更多...
关键词搜索商品API的工作原理是什么？

关键词搜索商品API的工作原理是什么？

关键词搜索商品API的工作原理基于复杂的数据处理和检索机制&#xff0c;通过爬虫抓取、数据预处理、数据索引等流程。 在网上购物成为日常生活的一部分&#xff0c;关键词搜索商品API成为了电子商务平台不可或缺的功能。通过这种API&#xff0c;消费者可以轻松地通过输入关键字…
阅读更多...
用网络编程完成windows和linux跨平台之间的通信（服务器）

用网络编程完成windows和linux跨平台之间的通信（服务器）

服务器代码逻辑&#xff1a; 服务器功能 创建 Socket&#xff1a; 服务器首先创建一个 Socket 对象&#xff0c;用于进行网络通信。通常使用 socket() 函数创建。 绑定&#xff08;Bind&#xff09;&#xff1a; 服务器将 Socket 绑定到一个特定的 IP 地址和端口号上。这是通过…
阅读更多...
【每日一练】python三目运算符的用法

【每日一练】python三目运算符的用法

""" 三目运算符与基础运算的对比 """ a 1 b 2#1.基础if运算判断写法&#xff1a; if a > b:print("基础判断输出&#xff1a;a大于b") else:print("基础判断输出&#xff1a; a不大于b")#2.三目运算法判断&#xff1a;…
阅读更多...
Android C++系列：Linux Socket编程（三）CS模型示例

Android C++系列：Linux Socket编程（三）CS模型示例

1. TCP通信 下图是基于TCP协议的客户端/服务器程序的一般流程: 服务器调用socket()、bind()、listen()完成初始化后，调用accept()阻塞等待，处于 监听端口的状态，客户端调用socket()初始化后，调用connect()发出SYN段并阻塞等待服 务器应答，服务器应答一个SYN-ACK段，客户…
阅读更多...
全网最适合入门的面向对象编程教程：10 类和对象的Python实现-类的继承和里氏替换原则，Python模拟主机和传感器自定义类

全网最适合入门的面向对象编程教程：10 类和对象的Python实现-类的继承和里氏替换原则，Python模拟主机和传感器自定义类

全网最适合入门的面向对象编程教程&#xff1a;10 类和对象的 Python 实现-类的继承和里氏替换原则&#xff0c;Python 模拟主机和传感器自定义类 摘要&#xff1a; 本文主要介绍了类的继承的基本概念和里氏替换原则&#xff0c;以模拟传感器数据串口输出-上位机串口接收为例…
阅读更多...
力扣hot100-普通数组

力扣hot100-普通数组

文章目录 题目&#xff1a;最大子数组和方法1 动态规划方法2 题目&#xff1a;合并区间题解 题目&#xff1a;轮转数组方法1-使用额外的数组方法2-三次反转数组 题目&#xff1a;除自身以外数组的乘积方法1-用到了除法方法2-前后缀乘积法 题目&#xff1a;最大子数组和 原题链…
阅读更多...
Mysql5.7并发插入死锁问题

Mysql5.7并发插入死锁问题

死锁的产生条件 互斥、请求和保持、不可剥夺、循环等待 MySQL锁类型 死锁复现 环境&#xff1a;Mysql 5.7版本&#xff0c;Innodb引擎&#xff0c;可重复度隔离级别 并发场景下使用duplicate key update插入或更新数据可能会造成死锁&#xff0c;下面就产生死锁的条件进行模…
阅读更多...
【扩散模型】LCM LoRA:一个通用的Stable Diffusion加速模块

【扩散模型】LCM LoRA:一个通用的Stable Diffusion加速模块

潜在一致性模型&#xff1a;[2310.04378] Latent Consistency Models: Synthesizing High-Resolution Images with Few-Step Inference (arxiv.org) 原文&#xff1a;Paper page - Latent Consistency Models: Synthesizing High-Resolution Images with Few-Step Inference (…
阅读更多...
Java常见面试题汇总带答案

Java常见面试题汇总带答案

本文分为十九个模块，分别是： Java 基础、容器、多线程、反射、对象拷贝、Java Web 、异常、网 络、设计模式、Spring/Spring MVC、Spring Boot/Spring Cloud、Hibernate、MyBatis、RabbitMQ、 Kafka、Zookeeper、MySQL、Redis、JVM 等等… JDK 和 JRE 有什么区别？ JDK：Jav…
阅读更多...
《基于 defineProperty 实现前端运行时变量检测》

《基于 defineProperty 实现前端运行时变量检测》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; 近期刚转战 CSDN&#xff0c;会严格把控文章质量&#xff0c;绝不滥竽充数&#xff0c;欢迎多多交流~ &am…
阅读更多...
Threejs环境、透视相机、坐标系、光源

Threejs环境、透视相机、坐标系、光源

文章目录 如何引入threejsnpm方式script方式script module方式 基本流程与坐标摄像机Geometry(几何体)和Material(材质)光源 如何引入threejs 对于很多刚刚上手threejs的朋友&#xff0c;可能第一步引入threejs就出问题了&#xff0c; 明明已经导入了&#xff0c;就是这样问题…
阅读更多...
scala基础

scala基础

scala基础&#xff1a; hello world: 写scala可运行文件的注意事项1、如果一个scala文件要运行&#xff0c;class要改成object2、如果是class&#xff0c;就仅单纯代表一个类&#xff0c;如果是object代表的是单例对象3、scala语法中&#xff0c;一句话结束不需要加分号4、scal…
阅读更多...
Linux——进程间通信一(共享内存、管道、systrem V)

Linux——进程间通信一(共享内存、管道、systrem V)

一、进程间通信介绍 1.1、进程间通信的概念和意义 进程间通信(IPC interprocess communication)是一组编程接口&#xff0c;让不同进程之间相互传递、交换信息(让不同的进程看到同一份资源) 数据传输:一个进程需要将它的数据发送给另外一个进程 资源共享:多个进程之间共享同样…
阅读更多...
最新文章

Copyright @ 2022~2023