【前端灵魂脚本语言JavaScript①】——JS引入方式

news2025/7/13 19:57:50

在这里插入图片描述

🐚 作者: 阿伟
💂 个人主页: Flyme awei

🐋 希望大家多多支持😘一起进步呀!

💬 文章对你有帮助👉关注✨点赞👍收藏📂

JavaScript引入

在这里插入图片描述

文章目录

  • JavaScript引入
    • 一、JS介绍
    • 二、JS特点
    • 三、JS 和Java的区别
    • 四、HTML和CSS和JS这之间的关系
    • 五、JS的引入方式
      • 1.内嵌式
      • 2链接式

一、JS介绍

在这里插入图片描述

  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的组成包含ECMAScriptDOMBOM

JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和动画特效等。
在这里插入图片描述
ECMAScript

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

DOM

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

BOM

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

也有人这么说:
ECMAScript可以理解为JS的基础语法部分

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

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

二、JS特点

JS特点

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用于在网页上添加动态效果

在这里插入图片描述怎么样,形象吗,小伙伴。

五、JS的引入方式

1.内嵌式

内嵌式引入方式:

1.在head标签中,用一对script标签,嵌入js代码

2.type属性可以不写

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

在这里插入图片描述

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

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

2链接式

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js引入方式2</title>
		<!--链接式引入外部js文件
			1.提高代码复用度
			2.降低代码的维护难度
			3.一个页面可以同时引入多个不同的js文件
			4.script标签中一旦引入外部结束文件,就不能在中间定义内嵌代码
		-->
		<script type="text/javascript" src="js/myjs.js"></script>
		<script type="text/javascript" src="js/myjs2.js"></script>
		<script>
			function fun3() {
				alert("js引入方式")
			}
		</script>
	</head>
	<body>
		<input type="button" value="点我呀" onclick="fun1()"/>
		<input type="button" value="点我呀2" onclick="fun2()"/>
		<input type="button" value="点我呀3" onclick="fun3()"/>
	</body>
</html>

优点:

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

注意事项:

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

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

3内嵌式和链接式的引入不能使用同一标签
在这里插入图片描述
注:部分素材来源于网络,如有侵权请联系博主删除。

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

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

相关文章

PTA第六章作业详解

&#x1f680;write in front&#x1f680; &#x1f4dd;个人主页&#xff1a;认真写博客的夏目浅石. &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd; &#x1f4e3;系列专栏&#xff1a;夏目的作业 &#x1f4ac;总结&#xff1a;希望你看完之后&am…

vue+uniapp瀑布流布局多种实现方式

文章目录前言一、实现原理二、代码实现1.方式1&#xff08;图片高度累加比较法&#xff09;2.方式2&#xff08;父元素高度比较法&#xff09;三.uniapp实现代码实现四、多列实现代码实现前言 瀑布流布局是网页设计常见的一种布局&#xff0c;一般用于图片多列展示。列宽固定&…

Vue3:状态管理-Store(Vuex,Pinia)

什么是状态管理 理论上来说&#xff0c;每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了 它是一个独立的单元&#xff0c;由以下几个部分组成 状态&#xff1a;驱动整个应用的数据源&#xff1b;视图&#xff1a;对状态的一种声明式映射&#xff1b;交互&#xff1a…

写给20、21级学生的话

写给20、21级学生的话前言一、关于招聘变招生&#xff0c;你怎么看&#xff1f;二、对于即将实习/已经实习的学生&#xff0c;你有什么建议&#xff1f;1.学习方面2.提升方面三、思想成年真的很重要前言 最近&#xff0c;有一些同学遇到的实习问题&#xff0c;我统一回复下&…

Vue2通知提醒框(Notification)

项目相关依赖版本信息 可自定义设置以下属性&#xff1a; 自动关闭的延时时长&#xff08;duration&#xff09;&#xff0c;单位ms&#xff0c;默认4500ms消息从顶部弹出时&#xff0c;距离顶部的位置&#xff08;top&#xff09;&#xff0c;单位像素px&#xff0c;默认24p…

HTML常用快捷键都在这了 看完之后效率暴涨

是这么回事; 我今天上网页课的时候&#xff0c;发现好多同学在敲标签的时候敲得很慢&#xff0c;我再仔细一看&#xff0c;好家伙&#xff0c;他们的标签竟然都是一个一个的敲出来的&#xff01; 那效率能高吗&#xff1f; 这是当时让敲的代码&#xff0c;很简单&#xff0c;对…

css实现元素居中的5种方法

目录 1.最简单的方法 2.利用定位 3.定位配合css3位移 4.弹性盒模型 5.网格布局Grid 相信大家在面试的时候也会经常碰到css实现元素居中的方法&#xff0c;下面我介绍5中方法给大家&#xff0c;欢迎大家评论区交流 需求&#xff1a; 给定两个元素&#xff0c;这两个元素是…

vue项目设置打包后的静态文件访问路径

vue项目设置打包后的静态文件访问路径 **啰嗦一下&#xff1a;**相同域名下可能会存在两份相关或不相关的代码&#xff0c;需要通过切换文件夹路径进入不同项目时&#xff0c;需要在项目打包输出代码时设置静态文件的访问路径&#xff08;vue、react都要&#xff09;。这种方式…

架构之软件负载均衡LVS、Nginx、Haproxy、Keepalived

目前市面上最常见的负载均衡技术方案主要有三种&#xff1a; 基于DNS负载均衡&#xff0c; DNS负载均衡主要适用于的场景是多地集群的方式&#xff0c;也就是可能北京有一个数据中心&#xff0c;在其中部署了一整套的集群提供服务&#xff0c;在上海有一个数据中心&#xff0c…

图片的美白与美化

博主简介 博主是一名大二学生&#xff0c;主攻人工智能研究。感谢让我们在CSDN相遇&#xff0c;博主致力于在这里分享关于人工智能&#xff0c;c&#xff0c;Python&#xff0c;爬虫等方面知识的分享。 如果有需要的小伙伴可以关注博主&#xff0c;博主会继续更新的&#xff0c…

Error: Can‘t find Python executable “python“, you can set the PYTHON env variable.解决办法

&#x1f626;电脑磕坏了 最近把公司给的mac屏幕给磕坏了&#xff0c;换成自己的macbookpro&#xff0c;本来想用时间机器做个无缝衔接&#xff0c;结果发现不能用了&#xff0c;跟客服沟通被告知macos版本在11以上不支持时间机器系统迁移&#xff0c;只能使用迁移助理做数据备…

HTML实现简单的贪吃蛇小游戏(附完整源码)

基于HTML5技术的贪吃蛇小游戏的设计与实现 项目简介&#xff1a; 贪吃蛇作为我们儿时经典的游戏之一&#xff0c;它是一款单机而又好玩的小游戏。今天&#xff0c;就让我们用html5技术实现一个简单的贪吃蛇小游戏&#xff01; 项目核心技术&#xff1a; html5的canvasJS技术 …

Typora如何设置字体的颜色

作者&#xff1a;虚坏叔叔 博客&#xff1a;https://xuhss.com 早餐店不会开到晚上&#xff0c;想吃的人早就来了&#xff01;&#x1f604; Typora如何设置字体的颜色 Typora没有直接设置字体颜色的功能&#xff0c;不能像word一样&#xff0c;选中字体直接设置想要的颜色。 …

uniapp使用高德地图

uniapp使用高德地图 1、项目前准备 1.1、首先你需要去申请一个属于自己的高德地图key&#xff0c;怎么申请暂不多说需要的去官网看 1.2、链接: 高德地图申请key直通车&#xff0c;点击前往。 有一个uniapp项目。 2、页面创建引入 新建一个uniapp的空白页 使用web-view 渲染…

Postman下载与安装操作步骤【超详细】

&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是超梦梦梦梦&#xff0c;很高兴认识大家~&#x1f357;关注➕点赞➕评论➕收藏 &#x1f604;&#x1f64f;博主水平有限&#xff0c;如有错误&#xff0c;欢迎各位大佬纠正 Postman下载与安装&#x1…

vue的指令和插值总结

文章目录一、安装vue二、Vue模板案例步骤三、基础模板&#xff08;记住&#xff09;四、vue的指令和插值1、{{}}&#xff1a;插值表达式的语法2、v-text&#xff1a;填充纯文本内容&#xff08;data中的值&#xff09;3、v-html&#xff1a;填充html&#xff08;data中的值&…

蓝桥杯刷题第九天

题目描述本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。素数就是不能再进行等分的整数。比如7&#xff0c;11。而 9 不是素数&#xff0c;因为它可以平分为 3 等份。一般认为最小的素数是2&#xff0c;接着是 3&#xff0c;5&…

el-upload 超详细-(附件,图片,多类型文件)玩转上传upload--new FormData()

代码&#xff08;我的项目代码&#xff1a;注解在下面&#xff09;代码复制直接用&#xff0c;可以实现所有文件上传&#xff0c;更改接口即可&#xff08;如需详细注解&#xff0c;学习&#xff0c;下面的详解完全够用&#xff0c;从0到学会这一片加官方文档就够了&#xff09…

Electron 分享(入门,安装,打包)

Electron Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架 安装 在使用 Electron 进行开发之前&#xff0c;需要安装Node.js&#xff0c;可以在终端输入以下命令输出了 Node.js 和 npm 的版本信息&#xff1a; node -v npm -v没有安装的话&#xff0c…

css 100vw、100vh出现滚动条怎么解决

要搞清楚这个问题首先要知道这两个单位&#xff08;vw、vh&#xff09;是什么意思。vw&#xff08;vh&#xff09;是相对于浏览器的视口宽度&#xff08;高度&#xff09;的&#xff0c;100vh等于浏览器的视口宽度&#xff0c;设置vw和vh会在视口发生变化时重新计算宽度和高度。…