Javascript的简单介绍,只作为个人笔记,不作为知识参考,如果想要学习,请找其他文章

1、简介

Javascript(简称js)是一种由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是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和动画特效等

2、主要构成

一般程序员只需要了解三个模块就可以了
在这里插入图片描述

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

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

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

3、 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脚本的网页时,效果会有一定的差距,有时甚至会显示不出来。

4、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声明,可赋各种数据类型值

5、JS的引入方式

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6、算数运算符

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7、JS中的流程控制

分支结构包括ifelse switch case

循环结构包括 while dowhile for

需求:给定月份输出季节
ifelse结构实现

<script>
	var i =5;
	if(i == 12 || i== 1 || i==2){
		alert("大约在冬季")
	}else if(i>=3 && i <=5){
		alert("春暖花开,草原上... ...")
	}else if(i>=6 && i <=8){
		alert("夏季来临,烧烤啤酒 ... ...")
	}else if(i>=9 && i <=11){
		alert("秋天到了,草原收获春天的... ...")
	}else{
		alert("草原上没有这月份")
	}
</script>

switch case结构实现

<script>
	var i =5;
	switch(i){
		case 1:
		case 2:
		case 12:
			alert("大约在冬季")
			break;
		case 3:
		case 4:
		case 5:
			alert("大约在春季")
			break;
		case 6:
		case 7:
		case 8:
			alert("大约在夏季")
			break;
		case 9:
		case 10:
		case 11:
			alert("大约在秋季")
			break;
		default:
			alert("无此月份")
	}
</script>

需求:循环求和 1-100
while结构实现

<script>
	var sum =0;
	var i =1;
	while(i<=100){
		sum+=i;
		i++;
	}
	alert(sum)
</script>

do-while结构实现

<script>
	var sum =0;
	var i =1;
	do{
		sum+=i;
		i++;
	}while(i<=100);
	alert(sum)
</script>

练习for循环 打印99乘法表

<script>
	//document.write 向页面增加内容
	for(var i =1;i<=9;i++){
		for(var j =1;j<=i;j++){
			document.write(j+"*"+i+"="+i*j+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")
		}
		document.write("<br/>")
	}
</script>

8、JS中函数的使用

什么是JS的函数:

类似于java中的方法,JS中也可以定义一些函数,java中的方法签名包含访问修饰符,返回值类型,方法名,参数列表,异常列表,但是JS中定义函数的语法相对简单很多,主要以function作为函数关键字,具备函数名和参数列表,但是没有访问修饰符也没有返回值类型关键字和异常列表

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

9、数组的定义和使用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
数组中的常用方法
在这里插入图片描述
在这里插入图片描述

10、JS中的对象

JS中的常用对象

JS基于对象的脚本语言 ,有类和对象,但是没有封装,继承,多态,Java script 中有一些浏览器直接识别并使用的对象,常见的对象有 String对象,Math对象,Number对象,Date对象等等.
String和java中的String很类似,的常用方法有
在这里插入图片描述
在这里插入图片描述

Number的常用属性和方法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Date对象

在这里插入图片描述

Math对象

在这里插入图片描述

11、事件

什么是事件
事件是可以被 JavaScript 侦测到的行为
事件也是满足某些条件就可以触发指定的函数

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数

事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行

在这里插入图片描述
比如我们可以通过点击某个按钮,或者弹窗,什么的,就可以动态调取

可以用事件方式进行调用
在这里插入图片描述
刚刚属于单机事件

下面的是双击事件
在这里插入图片描述

常用事件演示

在这里插入图片描述

按键事件

在这里插入图片描述

事件使用

在这里插入图片描述

表单事件:

在这里插入图片描述

页面加载事件

在这里插入图片描述

12、认识BOM和DOM

什么是BOM

BOM是Browser Object Model的简写,即浏览器对象模型。
BOM有一系列对象组成,是访问、控制、修改浏览器的属性的方法
BOM没有统一的标准(每种客户端都可以自定标准)。
BOM的顶层是window对象

什么是DOM

DOM是Document Object Model的简写,即文档对象模型。
DOM用于XHTML、XML文档的应用程序接口(API)。
DOM提供一种结构化的文档描述方式,从而使HTML内容使用结构化的方式显示。
DOM由一系列对象组成,是访问、检索、修改XHTML文档内容与结构的标准方法。
DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。
DOM的顶层是document对象

DOM和BOM的关系

DOM也是归BOM管的
BOM编程就是把整个浏览器抽象成一个对象(window),这个对象中有很多的属性和方法,访问这些属性或者调用这些方法就可以控制浏览器作出…行为
DOM编程就是把浏览器当前页面对应的文档抽象成一个对象(document),这个对象中有很多关于操作文档的一些属性和方法,访问这些属性和方法的时候,我们就可以通过代码动态控制页面上显示的内容
BOM 是为了操作浏览器出现的 API,window 是其根对象。
DOM 是为了操作文档出现的 API,document 是其根对象

window对象及常用方法

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

open和close方法

在这里插入图片描述
在这里插入图片描述

BOM中的其他常见对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

DOM编程学习,概念引入

什么是DOM编程

简单来说:DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.

什么是document

document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在。

document对象如何获取

document对象是window对象的一个成员属性,通过window.document来访问,当然也可以直接使用document,根据HTML代码结构特点,document对象本身是一种树形结构的文档对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

操作属性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

编码不易 如有帮助到您 请支持一下 多谢

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DNCS高级工程师

你的创作是我打赏的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值