当前位置: 首页 > news >正文

前端JavaScript(一)---基本介绍

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

 

ECMAScript

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

DOM

把整个页面规划成由节点层构成的文档,它不与浏览器、平台、语言相关,为web开发者提供一个标准可以访问站点中的数据、脚本和表现层对象.DOM编程可以实现网页内容校验和动态变化的效果/

BOM

是浏览器的一种特性,它可以对浏览器窗口进行访问和操作,例如移动、关闭窗口,调整窗口的大小,支持cookie等。BOM编程可以实现动态控制浏览器本身行为的效果。

ECMAScript可以理解为JS的基础语法部分

DOM可以简单理解为,使用document对象操作文档内容的编程

BOM可以理解为,使用window对象操作浏览器行为的编程

Javascript特点

JS是运行在浏览器上的一种脚本语言
1.脚本语言 

脚本语言是一种简单的程序,规模小,不需要编译,运行快,是由一些ASCII字符构成,可以使用任何一种文本编辑器编写。脚本语言是指在web浏览器内有解释器解释执行的编程语言,每次运行程序的时候,解释器会把程序代码翻译成可执行的格式。一些程序语言(如C、C++、Java等)都必须经过编译,将源代码编译成二进制的可执行文件之后才能运行,而脚本语言不需要事先编译,只要有一个与其相适应的解释器就可以执行。

2.基于对象的语言  

面向对象有三大特点(封装,继承,多态)缺一不可。通常"基于对象"是使用对象,但是无法利用现有的对象模板产生新的对象类型,也就是说"基于对象"没有继承的特点。没有了继承的概念也就无从谈论"多态"

3.事件驱动:

在网页中执行了某种操作的动作,被称为"事件"(Event),比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。

4.简单性

变量类型是采用弱类型,并未使用严格的数据类型。var a,b,c;  a=123;  b="abc"; a=b; 


5.安全性

JavaScript不能访问本地的硬盘,不能将数据存入到服务器上,不能对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互

6.跨平台性

JavaScript依赖于浏览器本身,与操作平台无关, 只要计算机安装了支持JavaScript的浏览器(装有JavaScript解释器),JavaScript程序就可以正确执行。

缺点

各种浏览器支持JavaScript的程度是不一样的,支持和不完全支持JavaScript的 浏览器在浏览同一个带有JavaScript脚本的网页时,效果会有一定的差距,有时甚至会显示不出来。

JS 和java的区别

区别1:公司不同,前身不同

JavaScript是Netscape公司的产品,是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言,它的前身是Live Script;Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发; Java的前身是Oak语言。

区别2:基于对象和面向对象

JavaScript是脚本语言,是一种基于对象的语言。本身提供了非常丰富的内部对象供设计人员使用,但不支持继承和多态。Java是面向对象的,是一种真正的面向对象的语言,支持封装、继承和多态。

区别3:变量类型强弱不同

Java采用强类型变量检查,即所有变量在编译之前必须声明为某一指定类型。如: int  x=1234;JavaScript中是弱类型变量。统一采用var声明,可赋各种数据类型值。


区别4: 运行的位置不同

Java运行与服务器端的,大型编程语言, JS运行于客户端(浏览器)一种小规模脚本语言

HTML和CSS和JS这之间的关系

HTML和CSS和JS都是前端的主要技术,三者各有分工.HTML可以用于制作网页的主体结构,CSS用于给网页做美化,JS用于在网页上添加动态效果。

 

JavaScript的引入方式

1、内嵌入式引入

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!--内嵌式引入方式1在head标签中,用一对script标签,嵌入JS代码2type属性可以省略不写--><script type="text/javascript">/*定义一个函数(方法)*/function fun1(){/*弹窗提示一点信息 */alert("你好")}</script></head><body><input type="button" value="点我呀" onclick="fun1()" /></body>
</html>

缺点:
1我们定义的JS代码只能在当前一个网页中使用,代码复用度低,可维护性低

2 JS代码和HTML代码混合在一个文件中,可阅读性差

2、 链接式引入

将JS代码放入外部JS文件中,通过script标签引入

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--链接式 引入外部JS文件提高的代码复用度  降低了代码维护的难度1 一个页面可以同时引入多个不同的JS文件2 script标签一点用于引入外部JS文件,就不能在中间定义内嵌式代码3 一个页面上可以用多个script标签  位置也不是非得放到head标签中不可4src属性可以指向一个网络路径,就是第三种引入方式--><script type="text/javascript" src="js/myjs.js"></script><script type="text/javascript" src="js/myjs2.js"></script><!--<script type="text/javascript" src="URL网络路径"></script></head><body><input type="button" value="点我呀" onclick="fun1()" /><input type="button" value="点我呀2" onclick="fun2()" /><input type="button" value="点我呀3" onclick="fun3()" /><script >function fun3(){alert("总能见到你")}</script></body>
</html>

优点:

代码复用度高,更易于维护代码

注意事项:

1在一个页面上可以同时引入多个JS文件

2每个JS文件的引入都要使用一个独立的script标签

3内嵌式和链接式的引入不能使用同一标签

总结:

JavaScript是一种灵活、动态的客户端脚本语言,主要用于增加网页的交互性和动态效果。它依赖于浏览器的支持,能够与HTML和CSS协同工作,提供丰富的用户体验。尽管有一些局限性(如跨浏览器兼容性问题),JavaScript仍然是前端开发中不可或缺的核心技术之一。

相关文章:

前端JavaScript(一)---基本介绍

Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言&#xff0c;主要目的是为了解决服务器端语言&#xff0c;比如Perl&#xff0c;遗留的速度问题&#xff0c;为客户提供更流畅的浏览效果。当时服务端需要对…...

文本处理之sed

1、概述 sed是文本编辑器&#xff0c;作用是对文本的内容进行增删改查。 和vim不一样&#xff0c;sed是按行进行处理。 sed一次处理一行内容&#xff0c;处理完一行之后紧接着处理下一行&#xff0c;一直到文件的末尾 模式空间&#xff1a;临时储存&#xff0c;修改的结果临…...

uniapp在App端定义全局弹窗,当打开关闭弹窗会触发onShow、onHide生命周期怎么解决?

在uniapp(App端)中实现自定义弹框&#xff0c;可以通过创建一个透明页面来实现。点击进入当前页面时&#xff0c;页面背景会变透明&#xff0c;用户可以根据自己的需求进行自定义&#xff0c;最终效果类似于弹框。 遇到问题&#xff1a;当打开弹窗(进入弹窗页面)就会触发当前页…...

计算机网络 实验七 NAT配置实验

一、实验目的 通过本实验理解网络地址转换的原理和技术&#xff0c;掌握扩展NAT/NAPT设计、配置和测试。 二、实验原理 NAT配置实验的原理主要基于网络地址转换&#xff08;NAT&#xff09;技术&#xff0c;该技术用于将内部私有网络地址转换为外部公有网络地址&#xff0c;从…...

数据结构——排序算法第二幕(交换排序:冒泡排序、快速排序(三种版本) 归并排序:归并排序(分治))超详细!!!!

文章目录 前言一、交换排序1.1 冒泡排序1.2 快速排序1.2.1 hoare版本 快排1.2.2 挖坑法 快排1.2.3 lomuto前后指针 快排 二、归并排序总结 前言 继上篇学习了排序的前面两个部分:直接插入排序和选择排序 今天我们来学习排序中常用的交换排序以及非常稳定的归并排序 快排可是有多…...

【kafka04】消息队列与微服务之Kafka 图形工具

Kafka 在 ZooKeeper 里面的存储结构 topic 结构 /brokers/topics/[topic] partition结构 /brokers/topics/[topic]/partitions/[partitionId]/state broker信息 /brokers/ids/[o...N] 控制器 /controller 存储center controller中央控制器所在kafka broker的信息 消费者 /c…...

剖析前后端 API 接口参数设计:JSON 数据结构化全攻略

在当今软件开发领域&#xff0c;前后端分离架构已成为主流趋势。而 API 接口作为前后端之间数据交互的桥梁&#xff0c;其设计的合理性对系统的可维护性和扩展性起着至关重要的作用。JSON&#xff08;JavaScript Object Notation&#xff09;作为一种轻量级的数据交换格式&…...

vue3 多种方式接受props,定义ref,reactive

定义props 1 第一种 interface AddType { dialogStudyVisible: boolean; } const props defineProps<AddType>(); 第二种 // const props defineProps({ // dialogStudyVisible:{ // type:Boolean, // default:false // } // }) 第三种 // const …...

逻辑处理器核心指纹修改

navigator.hardwareConcurrency的属性,可以用来获取CPU的逻辑处理器核心数。 1、navigator.hardwareConcurrency接口定义&#xff1a; third_party\blink\renderer\core\frame\navigator_concurrent_hardware.idl // https://html.spec.whatwg.org/C/#navigator.hardwarecon…...

如何制作项目网页

一、背景 许多论文里经常会有这样一句话Supplementary material can be found at https://hri-eu.github.io/Lami/&#xff0c;这个就是将论文中的内容或者补充视频放到一个网页上&#xff0c;以更好的展示他们的工作。因此&#xff0c;这里介绍下如何使用前人提供的模板制作我…...

mongodb/redis/neo4j 如何自己打造一个 web 数据库可视化客户端?

随笔 从千万粉丝“何同学”抄袭开源项目说起&#xff0c;为何纯技术死路一条&#xff1f; 数据源的统一与拆分 监控报警系统的指标、规则与执行闭环 我们的系统应该配置哪些监控报警项&#xff1f; 监控报警系统如何实现自监控? java 老矣&#xff0c;尚能饭否&#xff…...

1、正则表达式

grep匹配 grep用来过滤文本内容&#xff0c;以匹配要查询的结果。 grep root /etc/passwd&#xff1a;匹配包含root的行 -m 数字&#xff1a;匹配几次后停止 -v&#xff1a;取反-i&#xff1a;忽略字符的大小写&#xff0c;默认的&#xff0c;可以不加-n&#xff1a…...

Airsim安装问题:This project was made with a different version of the Unreal Engine.

本文记录如何在 Ubuntu 18.04 系统中配置 AirSim 和 Unreal Engine 4.27&#xff0c;并成功打开默认的 Blocks 环境项目。 环境说明 系统&#xff1a;Ubuntu 18.04Unreal Engine 版本&#xff1a;4.27AirSim&#xff1a;主分支文件路径&#xff1a; Unreal Engine&#xff1a…...

java八股-分布式服务的接口幂等性如何设计?

文章目录 接口幂等token Redis分布式锁 原文视频链接&#xff1a;讲解的流程特别清晰&#xff0c;易懂&#xff0c;收获巨大 【新版Java面试专题视频教程&#xff0c;java八股文面试全套真题深度详解&#xff08;含大厂高频面试真题&#xff09;】 https://www.bilibili.com/…...

vscode python code runner执行乱码

打开vscode code runner插件配置&#xff0c;如图所示&#xff1a; 然后在setting.json修改运行python的默认命令&#xff1a; 将原来 替换成 "python":"set PYTHONIOENCODINGutf8 && python", 参考&#xff1a;Vscode——python环境输出中文乱…...

Java中的继承详解

在Java编程中&#xff0c;继承&#xff08;Inheritance&#xff09;是一种面向对象编程&#xff08;OOP&#xff09;的核心概念&#xff0c;它允许一个类&#xff08;称为子类或派生类&#xff09;继承另一个类&#xff08;称为父类或基类&#xff09;的属性和方法。通过继承&a…...

kafka进阶_2.存储消息

文章目录 一、存储消息介绍二、副本同步2.1、数据一致性2.2、HW在副本之间的传递 如果想了解kafka基础架构和生产者架构可以参考 kafka基础和 Kafka进阶_1.生产消息。 一、存储消息介绍 数据已经由生产者Producer发送给Kafka集群&#xff0c;当Kafka接收到数据后&#xff0c…...

如何启用本机GPU硬件加速猿大师播放器网页同时播放多路RTSP H.265 1080P高清摄像头RTSP视频流?

目前市面上主流播放RTSP视频流的方式是用服务器转码方案&#xff0c;这种方案的好处是兼容性更强&#xff0c;可以用于不同的平台&#xff0c;比如&#xff1a;Windows、Linux或者手机端&#xff0c;但是缺点也很明显&#xff1a;延迟高、播放高清或者同时播放多路视频视频容易…...

如何更好地设计SaaS系统架构

SaaS&#xff08;Software as a Service&#xff09;架构设计的核心目标是满足多租户需求、支持弹性扩展和高性能&#xff0c;同时保持低成本和高可靠性。一个成功的SaaS系统需要兼顾技术架构、资源利用、用户体验和商业目标。本文从以下几个方面探讨如何更好地设计SaaS系统架构…...

表征对齐在训练DiT模型中的重要性

Diffusion Models专栏文章汇总&#xff1a;入门与实战 前言&#xff1a;训练过DiT模型的读者们肯定有所体会&#xff0c;相比于UNet模型训练难度大了很多&#xff0c;模型不仅很难收敛&#xff0c;而且非常容易训崩&#xff0c;其中一个很重要的原因是没有进行表征对齐&#xf…...

Qt中CMakeLists.txt解释大全

‌Qt从Qt5.15版本开始正式推荐使用CMake进行项目管理‌。 在Qt 5.15之前&#xff0c;虽然可以使用CMake进行构建&#xff0c;但Qt官方更推荐使用qmake。 然而&#xff0c;从Qt5.15开始&#xff0c;Qt官方正式推荐使用CMake作为主要的构建系统&#xff0c;并在Qt 6中进一步加强了…...

【在 PyTorch 中使用 tqdm 显示训练进度条,并解决常见错误TypeError: ‘module‘ object is not callable】

在 PyTorch 中使用 tqdm 显示训练进度条&#xff0c;并解决常见错误TypeError: module object is not callable 在进行深度学习模型训练时&#xff0c;尤其是在处理大规模数据时&#xff0c;实时了解训练过程中的进展是非常重要的。为了实现这一点&#xff0c;我们可以使用 tq…...

数据结构-堆的实现和应用

目录 1.堆的概念 2.堆的构建 3.堆的实现 4.堆的功能实现 4.1堆的初始化 4.2堆的销毁 4.3堆的插入 4.3.1向上调整 4.4堆的删除 4.4.1向下调整法 ​编辑4.5取堆顶 5. 向上调整法和向下调整法比较 6.堆的应用 6.1TOP-K问题 6.2TOP-K思路 6.2.1用前n个数据来建堆 6.…...

数据分析的尽头是web APP?

数据分析的尽头是web APP&#xff1f; 在做了一些数据分析的项目&#xff0c;也制作了一些数据分析相关的web APP之后&#xff0c;总结自己的一些想法和大家分享。 1.web APP是呈现数据分析结果的另外一种形式。 数据分析常见的结果是数据分析报告&#xff0c;可以是PPT或者…...

YOLO系列论文综述(从YOLOv1到YOLOv11)【第3篇:YOLOv1——YOLO的开山之作】

YOLOv1 1 摘要2 YOLO: You Only Look Once2.1 如何工作2.2 网络架构2.3 训练2.4 优缺点 YOLO系列博文&#xff1a; 【第1篇&#xff1a;概述物体检测算法发展史、YOLO应用领域、评价指标和NMS】【第2篇&#xff1a;YOLO系列论文、代码和主要优缺点汇总】 ——————————…...

容器和它的隔离机制

什么是容器和它的隔离机制&#xff1f; 容器 是一种轻量化的虚拟化技术&#xff0c;它允许多个应用程序共享同一个操作系统&#xff08;OS&#xff09;内核&#xff0c;同时为每个应用程序提供自己的运行环境。容器通过利用 Linux 的内核功能&#xff08;如 Namespaces 和 Cgr…...

【数据结构与算法】排序算法总结:冒泡 / 快排 / 直接插入 / 希尔 / 简单选择 / 堆排序 / 归并排序

1 排序 1.1 冒泡 内排序的交换排序类别 1.1.1 普通实现 public class BubbleSort {/*** 基本的 冒泡排序*/public static void bubbleSort(int[] srcArray) {int i,j; // 用于存放数组下标int temp 0; // 用于交换数值时临时存放值for(i0;i<srcArray.length-1;i){// j …...

Windows Serv 2019 虚拟机 安装Oracle19c,图文详情(超详细)

1、下载安装文件 Oracle官网下载直链&#xff1a;https://www.oracle.com/database/technologies/oracle-database-software-downloads.html#db_ee 夸克网盘下载&#xff1a;https://pan.quark.cn/s/1460a663ee83 2、新建 Windows Server 2019 虚拟机 &#xff08;超详细&a…...

数字孪生开发之 Three.js 插件资源库(2)

在当今数字化快速发展的时代&#xff0c;数字孪生技术正逐渐成为各个领域的关键技术之一。它通过创建物理实体的虚拟副本&#xff0c;实现对实体的实时监测、模拟和优化&#xff0c;为企业和组织带来了诸多好处&#xff0c;如提高生产效率、降低成本、改进产品质量等。然而&…...

小米C++ 面试题及参考答案下(120道面试题覆盖各种类型八股文)

指针和引用的区别?怎么实现的? 指针和引用有以下一些主要区别。 从概念上来说,指针是一个变量,它存储的是另一个变量的地址。可以通过指针来间接访问所指向的变量。例如,我们定义一个整型指针int *p;,它可以指向一个整型变量的内存地址。而引用是一个别名,它必须在定义的…...

报名网站如何做/中国腾讯和联通

phpredis是php的一个扩展&#xff0c;效率是相当高有链表排序功能&#xff0c;对创建内存级的模块业务关系很有用;以下是redis官方提供的命令使用技巧:下载地址如下&#xff1a;https://github.com/owlient/phpredis&#xff08;支持redis 2.0.4&#xff09;Redis::__construct…...

微信网站建设报价/seo静态页源码

设 计 总 说 明 现在社会随着计算机技术迅速发展与技术的逐渐成熟&#xff0c;信息技术已经使人们的生活发生深刻的变化。生活中的各种服务系统也使人们在生活中的联系日常销售活动方式发生了很大的变化&#xff0c;让效率较低的手工操作成为过去&#xff0c;而换成信息化自动化…...

合肥模板网站建设费用/如何在各大网站发布信息

////TITLE:// 环境变量和选择性代码编译//AUTHOR:// norains//DATE:// Moday 17-November-2008//Environment:// NONE// 其实这篇文章的完整标题应该是&#xff1a;《PLATFORM BUILDER中的环境变量设置和选择性代码编译》&#xff0c;只是这样似乎有点冗长了。:…...

敦煌做网站 条件/已备案域名30元

React Hooks+Laravel 前端博客实战 阐述用create-next-app快速创建项目建立博客首页按需加载 Ant Design配置文件 blog\package.json阐述 我们先完成博客的前端界面的制作,主要完成的功能就是用户的访问,文章列表和文章详情页面。 因为Blog的前台需要SEO操作,所以我们一定…...

怎么编写自己的网站/太原seo排名优化公司

前言什么是Mysql&#xff1f;你真的知道吗&#xff1f;MySQL官方对索引的定义为&#xff1a;索引(Index)是帮助MySQL高效获取数据的数据结构。数据库查询是数据库的最主要功能之一&#xff0c;我们都希望查询数据的速度能尽可能的快&#xff0c;因此数据库系统的设计者会从查询…...

什么网站做软件任务挣钱/seo培训公司

一、拦截器与过滤器 在讲Spring boot之前&#xff0c;我们先了解一下过滤器和拦截器。这两者在功能方面很类似&#xff0c;但是在具体技术实现方面&#xff0c;差距还是比较大的。在分析两者的区别之前&#xff0c;我们先理解一下AOP的概念&#xff0c;AOP不是一种具体的技术&…...