【前端灵魂脚本语言JavaScript①】——JS引入方式_前端引入js-程序员宅基地

技术标签: Web前端  # JavaScript基础  前端  javascript  开发语言  

在这里插入图片描述

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

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

文章对你有帮助关注点赞收藏

JavaScript引入

在这里插入图片描述

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_68744965/article/details/125743169

智能推荐

input type=file accept中限制文件类型pdf、doc、docx、 jpg、 png、xls 、xlsx等格式_type="file" accept-程序员宅基地

文章浏览阅读1.2w次。accept="application/msexcel,application/msword,application/pdf,image/jpeg,image/png,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.word..._type="file" accept

TDA4程序刷写方案_ccs中tda4工程文件-程序员宅基地

文章浏览阅读4.2k次,点赞4次,收藏27次。TDA4是适用于 ADAS 和自动驾驶汽车的TDA4VM Jacinto 处理器,它的程序刷写是嵌入式软件开发过程中必须的一个任务,本文主要介绍它的刷写方案。_ccs中tda4工程文件

关于cfile fopen fopen_s 在windows vista win7 win8 win 10系统盘目录创建文件失败解决方案-- fopen 创建文件失败_cfile 创建文件失败-程序员宅基地

文章浏览阅读3.7k次,点赞3次,收藏3次。由于windows vista win7 win8 win 10 添加了UAC权限,所以会导致 在系统盘下 创建文件失败。返回拒绝访问错误。解决办法如下:UAC是微软为了提高Windows的安全性,自Windows Vista开始引入的新安全机制。传统的NT内核系统依靠access token来做权限处理,access token由当前用户所在的用户组的权限决定_cfile 创建文件失败

产品经理漫谈-程序员宅基地

文章浏览阅读55次。本文分析了互联网、软件的产品经理与传统行业的产品经理有什么异同。 文章从“产品经理”一词的来源说起,之后转到互联网、软件行业巨头的“产品经理”招聘广告,从中发现了这个职位的内涵变化。那么,新兴行业的产品经理在概念上究竟有什么发展?为什么会有这些发展?结果导致产品经理的职责、技能要求有哪些不同?文章的后半部分,分析并提出了造成差异的 5 大因素: 第一, 市场阶段不同,成熟市场与新兴市场。 ..._漫谈产品经理云

计算机丢失MSVCR100.dll文件的解决办法_file:///e:/5.4.0.1/msvcr100.dll%20%e6%b2%a1%e6%9c%-程序员宅基地

文章浏览阅读2.1k次。@计算机丢失MSVCR100.dll文件的解决办法网上常见的两种:1、下载360安全卫士,进行人工修复–—>失败2、下载msvcr.100文件放入X:\Windows\system32 或者X:\Windows\system32\syswow64文件夹中3、然后cmd(用管理员身份运行)win+R键,在弹出的框里面输入“regsvr32 msvcr100.dll,但是也会弹出错误的信息—>电脑提示找不到入口点DllRegisterServer4、为了解决3的问题,去cmd里面输入reg_file:///e:/5.4.0.1/msvcr100.dll%20%e6%b2%a1%e6%9c%89%e8%a2%ab%e6%8c%87%e5%ae

OpenGL ES纹理贴图-程序员宅基地

文章浏览阅读333次。转载自:http://seya.iteye.com/blog/532525OpenGL可以把纹理映射到指定的图形的表面上。简单一点的,就是给平面映射纹理,比如一个四边形,一个长方体的6个面,都可以指定位图作为纹理映射到各个面上。关于将一个位图作为纹理映射到某个或者多个面上,可以学习Jeff Molofee的OpenGL系列教程。对于指定的多个纹理,要根据自己的需要映射到不同的面上,需要..._opengl es surface 贴图

随便推点

【第三方对接】使用 永中Office 实现在线 Office 整合到 Spring 项目_永中office npapi插件-程序员宅基地

文章浏览阅读2.7k次。文章目录1、永中 Office 实现在线 Office(1)永中 Office 介绍(2)项目需求对比(3)基本整合过程(4)调用逻辑图(5)实际使用案例1、永中 Office 实现在线 Office(1)永中 Office 介绍永中Office官网,相比于PageOffice,个人觉得从使用方面来说,永中Office好用一点,永中Office对于开发者来说,有两个选择,一个是在线版webOffice功能较少(对于我这种需求对文档内容细节把控的来说,不考虑了),另一个是NP插件版,这个版本是和永中技术_永中office npapi插件

solaris 10(sunos 5.10)上安装java-程序员宅基地

文章浏览阅读849次。从官网下载64位的jdk:Solaris SPARC 64-bit92.9 MBjdk-8u45-solaris-sparcv9.tar.gz 下载后上传到主机上,执行命令: gzip -dc jdk-8u45-solaris-sparcv9.tar.gz | tar xf - 解压完成后目录为: jdk1.8.0_45 修改当前用户下...._solaris 5.10

MFC GDI绘图基础_mfc 设置视口 原点 大小-程序员宅基地

文章浏览阅读474次。一.关于GDI的基本概念什么是GDI?Windows绘图的实质就是利用Windows提供的图形设备接口GDI(Graphics Device Interface)将图形绘制在显示器上。在Windows操作系统中,动态链接库C:/WINDOWS/system32/gdi32.dll(GDI Client DLL)中定义了GDI函数,实现与设备无关的包括屏幕上输出像素、在打印机上输出硬拷贝..._mfc 设置视口 原点 大小

Delphi XE不生成__history目录_delphi history-程序员宅基地

文章浏览阅读1.9k次。In Tools - Options - Editor Options you can un-tick 'Create Backup Files' and or change the number for 'File Backup Limit' further down the page._delphi history

北大信科推免之旅_四非软微-程序员宅基地

文章浏览阅读7.8k次,点赞26次,收藏67次。晨光熹微已是,经历一路绿皮火车颠簸,从燕园古典琼楼玉宇再到农家田园的热浪滚滚;点下国家系统北大学硕拟录取通知确认按钮的那刻,心中万千思绪涌来,百感交集;将近三个月的保研之旅终于画上了个句号,回首这段时间的经历仍是觉得忐忑不已,如梦如幻。突然想将这一段宝贵铭心的经历记录。只要以后的自己还能够想起这段记忆或者学弟学妹看到这篇经验帖的时候能有所收获,那么一切都是值得。本人情况_四非软微

10 篇 经 典 美 文 欣 赏-程序员宅基地

文章浏览阅读71次。境由心造 一个人的处境是苦是乐常是主观的。 有人安于某种生活,有人不能。因此能安于自已目前处境的不妨就如此生活下去,不能的只好努力另找出路。你无法断言哪里才是成功的,也无法肯定当自已到达了某一点之后,会不会快乐。有些人永远不会感到满足,他的快乐只建立在不断地追求与争取的过程之中,因此他的目标不断地向远处推移。这种人的快乐可能少,但成就可能大。 ..._美文欣赏系列