通过javascript把标签换色_JavaEE之JavaScript第一课

1923dea9350a358a1a8283b5faf3340f.png

【JavaScript】

JS引入

1.1 JS介绍

d6c6d9c1051f8284744449dc4866ea44.png

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

6e20c335217e7ef151397250276646e4.png

ECMAScript

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

DOM

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

BOM

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

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

HTML和CSS和JS这之间的关系

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

119d44019631112b46cb907522abf7b1.png

1.3 JS的引入方式

内嵌式引入

<!DOCTYPE html>

缺点:

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

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

链接式引入

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

df9f2cbca8d833bf84f6ecedc18c86e8.png

在网页上引入JS 文件

<!DOCTYPE html>

优点:

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

注意事项:

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

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

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

本节作业:

  1. JS有什么特点?和JAVA有什么区别?

2. JS如何在HTML上引入?应该注意什么?


JS的数据类型和运算符

2.1 JS中的数据类型

1数值型:

number整数和浮点数统称为数值。例如85或3.1415926等。

2字符串型:

String由0个,1个或多个字符组成的序列。在JavaScript中,用双引号或单引号括起来表示,如"您好"、'学习JavaScript' 等。

3逻辑(布尔)型:

boolean用true或false来表示。

4空(null)值:

表示没有值,用于定义空的或不存在的引用。要注意,空值不等同于空字符串""或0。

5未定义(undefined)值:

它也是一个保留字。表示变量虽然已经声明,但却没有赋值。

6除了以上五种基本的数据类型之外,JavaScript还支持复合数据类型,复合数据类型包括对象和数组两种。

< !DOCTYPE html > 
 

2.2 JS中的运算符

JS中运算符号大部分和java中的运算符一样,我们在这里分析一下特殊的运算符号

b1e37325dd491659f29ccbe06e1637e5.png

关于/%

JS中,数字类型都是number,除法的结果中如果没有小数位,直接就是一个整数,如有小数位,才是浮点数

66839ab84b9e9eab72cb1d455c36d431.png

JS中如果出现除零,那么结果是 infinity,而不是报错

7e059b8ef17683df0f5caade30094a6e.png

JS取余数运算对于浮点数仍然有效,如果和0取余数,结果是NaN(not a number)

alert(10/3)
alert(3/0)
alert(5.3%3.1)
alert(5.3%0)

关于+

+ 同时也是连接运算符,看两端的变量类型,如果都是number 那么就是算数中的加法 如果有字符串,那么就是连接符号,如果是布尔类型和number相加,那么会将true转化为1 将false 转化为0。

<

关于== 等值符

先比较类型,如果类型一致,再比较内容,如果类型不一致,会强制转换为number再比较内容

<

关于=== 等同符

数据类型不同 直接返回false 如果类型相同 才会比较内容

<

总结:

1 关于+

如果是数字和boolean 相加 会默认将boolean转换成数字 true 为1 false 为0

2 关于等值判断:==

先判断类型,类型一致则直接比较内容,如果类型不一致,则先使用Number转换为一致的类型后再比较内容

3关于等同判断:===

先判断类型,类型不一致则直接false,类型一致则继续比较内容,内容一致则true,不一致则false。

4 关于/ %

JS中,数字类型都是number,除法的结果中如果没有小数位,直接就是一个整数,如有小数位,才是浮点数, JS中如果出现除零,那么结果是 infinity,而不是报错,JS取余数运算对于浮点数仍然有效,如果和0取余数,结果是NaN(not a number)

2.3 JS中的流程控制

分支结构包括if else switch case

循环结构包括 while dowhile for foreach

需求1:给定月份输出季节

if else结构实现

<

switch case结构实现

<

需求2:循环求和 1-100

while结构实现

<

do-while结构实现

<

for循环结构实现

<

练习for循环 打印99乘法表

<

注意:for-each循环和Java差别很大

2.4 JS中函数的使用

什么是JS的函数:

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

自定义函数的三种语法:

function 

函数的声明方式:

<

函数的参数:

<

函数的返回值:

<

本节作业:

1 == 和 === 的区别

2 + 在处理数字相加 和文字,boolean类型数据相加策略

3 / % 使用的使用应该注意什么?

2 JS中如何什么函数? 函数的参数如何传递? 函数的计算结果如何返回? 可以举例说明


JS中数组的使用

类似于java的数组,JS中也有数组的使用,但是JS中的数组用法更加灵活,长度和数据类型的控制都不严格,而且有很多便于操作的API,其实,JS中的数组和java中的集合更加相似.

3.1 数组创建的方法

<

3.2 数组的元素和长度

<

3.3 数组的遍历

for 循环和foreach循环实现数组的遍历

<

3.4 数组的常用方法

<

3.5 JS中的常用对象

JS基于对象的脚本语言 ,有类和对象,但是没有封装,继承,多态,Java script 中有一些浏览器直接识别并使用的对象,常见的对象有 String对象,Math对象,Number对象,Date对象等等.

String和java中的String很类似,的常用方法

d57b6ad7ca8b4d1f43c9aed40ca84d68.png

b482ba019518cd8abd70a3d7b36340d7.png
/*String类*/
	

Number的常用属性和方法

e364edad303f34d6b7368d152e18076d.png

9e9e1d7e922c100c1ca31b45f23dc58e.png

746b419515019a8b30ad13236723e6c8.png

Date对象

01ce15d2191755f2fb65cf6beea7be0a.png
<

Math对象

00a78d0cebe1688513808b10ce1a4a6c.png
<

本节作业:

1 对比JAVA中的数组和JS中的数组的区别?

2 JS中的数组有哪些常用方法?

3 JS有哪些常用对象?这些常用对象有哪些API?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值