一 JS引入
1.1理解静态网页技术
- HTML：超文本标记语言 显示内容
- CSS：层叠样式表 美化页面
- JavaScript：页面动态交互和特效
DHTML=HTML+CSS+JavaScript 动态HTML（Dynamic HTML，简称DHTML） 只是动态效果，不是动态数据
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的组成包含ECMAScript、DOM、BOM。JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和动画特效等 
ECMAScript
是一种由欧洲计算机制造商协会（ECMA）通过ECMA-262标准化的脚本程序语言,简单点说，ECMAScript描述了语法、类型、语句、关键字、保留字、运算符和对象。它就是定义了脚本语言的所有属性、方法和对象。
DOM
把整个页面规划成由节点层构成的文档，它不与浏览器、平台、语言相关，为web开发者提供一个标准可以访问站点中的数据、脚本和表现层对象.DOM编程可以实现网页内容校验和动态变化的效果
BOM
是浏览器的一种特性，它可以对浏览器窗口进行访问和操作，例如移动、关闭窗口，调整窗口的大小，支持cookie等。BOM编程可以实现动态控制浏览器本身行为的效果
1.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脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。
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用于在网页上添加动态效果
1.4 JS的引入方式
内嵌式引入
| <!DOCTYPE html> |
|---|
缺点:
1我们定义的JS代码只能在当前一个网页中使用,代码复用度低,可维护性低
2 JS代码和HTML代码混合在一个文件中,可阅读性差
链接式引入
将JS代码放入外部JS文件中,通过script标签引入
在网页上引入JS 文件
| <!DOCTYPE html> |
|---|
优点:
代码复用度高,更易于维护代码
注意事项:
1在一个页面上可以同时引入多个JS文件
2每个JS文件的引入都要使用一个独立的script标签
3内嵌式和链接式的引入不能使用同一标签
本节作业:
1JS有什么特点?和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还支持复合数据类型Object，复合数据类型包括对象和数组两种。
| <!DOCTYPE html> |
|---|
2.2 JS中的运算符
JS中运算符号大部分和java中的运算符一样,我们在这里分析一下特殊的运算符号
关于/%
JS中,数字类型都是number,除法的结果中如果没有小数位,直接就是一个整数,如有小数位,才是浮点数
JS中如果出现除零,那么结果是 infinity,而不是报错
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中的流程控制
分支结构包括ifelse switch case
循环结构包括 while dowhile for
需求:给定月份输出季节
ifelse结构实现
switch case结构实现
需求:循环求和 1-100
while结构实现
do-while结构实现
练习for循环 打印99乘法表
注意：for-each循环和Java差别很大 数组的使用后续会讲该循环
2.4 JS中函数的使用
什么是JS的函数:
类似于java中的方法,JS中也可以定义一些函数,java中的方法签名包含访问修饰符,返回值类型,方法名,参数列表,异常列表,但是JS中定义函数的语法相对简单很多,主要以function作为函数关键字,具备函数名和参数列表,但是没有访问修饰符也没有返回值类型关键字和异常列表
自定义函数的三种语法
| function 函数名(参数1,参数2，… ) { JavaScript代码; } var 函数名 = function (参数1,参数2，… ) { JavaScript代码; } var 函数名=new Function(‘代码’) |
|---|
函数的声明方式
函数的参数
函数的返回值
本节作业:
1 == 和 === 的区别
2 + 在处理数字相加 和文字,boolean类型数据相加策略
3 / % 使用的使用应该注意什么?
- JS中如何什么函数? 函数的参数如何传递? 函数的计算结果如何返回? 可以举例说明
三 JS中数组的使用
类似于java的数组,JS中也有数组的使用,但是JS中的数组用法更加灵活,长度和数据类型的控制都不严格,而且有很多便于操作的API,其实,JS中的数组和java中的集合更加相似.
3.1 数组创建的方法
3.2 数组的元素和长度
3.3 数组的遍历
for 循环和foreach循环实现数组的遍历
3.4 数组的常用方法
本节作业:
1 对比JAVA中的数组和JS中的数组的区别?
- JS中的数组有哪些常用方法
四 JS中的对象
4.1 JS中的常用对象
JS基于对象的脚本语言 ,有类和对象,但是没有封装,继承,多态,Java script 中有一些浏览器直接识别并使用的对象,常见的对象有 String对象,Math对象,Number对象,Date对象等等.
String和java中的String很类似,的常用方法
| 方法 | 描述 |
|---|---|
| charAt() | 返回在指定位置的字符。 |
| charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 |
| concat() | 连接两个或更多字符串，并返回新的字符串。 |
| fromCharCode() | 将 Unicode 编码转为字符。 |
| indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置。 |
| includes() | 查找字符串中是否包含指定的子字符串。 |
| lastIndexOf() | 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。 |
| match() | 查找找到一个或多个正则表达式的匹配。 |
| repeat() | 复制字符串指定次数，并将它们连接在一起返回。 |
| replace() | 在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串。 |
| search() | 查找与正则表达式相匹配的值。 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分。 |
| split() | 把字符串分割为字符串数组。 |
| startsWith() | 查看字符串是否以指定的子字符串开头。 |
| substr() | 从起始索引号提取字符串中指定数目的字符。 |
| substring() | 提取字符串中两个指定的索引号之间的字符。 |
| toLowerCase() | 把字符串转换为小写。 |
| toUpperCase() | 把字符串转换为大写。 |
| trim() | 去除字符串两边的空白 |
| toLocaleLowerCase() | 根据本地主机的语言环境把字符串转换为小写。 |
| toLocaleUpperCase() | 根据本地主机的语言环境把字符串转换为大写。 |
| valueOf() | 返回某个字符串对象的原始值。 |
| toString() | 返回一个字符串。 |
| /String类/ var str=”asdfqwaerzxcav”; // 根据索引获取指定位置上的字符 console.info(str.charAt(3)); // 拼接生成一个新的字符串 var str2=str.concat(“jjjjj”) console.info(str) console.info(str2) // 在字符串中找指定的字符/字符串 返回索引 console.info(str.indexOf(“qw”)) // 根据指定字符 将字符串拆分成一个字符串数组 var strs=str.split(“a”); console.info(strs) // 截取字符串 从哪里开始,截取多少个 console.info(str.substr(3,5)); // 截取字符串 从哪里开始,到哪里结束,包头不包尾 console.info(str.substring(3,5)); |
|---|
Number的常用属性和方法
| 属性 | 描述 |
|---|---|
| Number.MAX_VALUE | 最大值 |
| Number.MIN_VALUE | 最小值 |
| Number.NaN | 非数字 |
| Number.NEGATIVE_INFINITY | 负无穷，在溢出时返回 |
| Number.POSITIVE_INFINITY | 正无穷，在溢出时返回 |
| Number.EPSILON | 表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别 |
| Number.MIN_SAFE_INTEGER | 最小安全整数。 |
| Number.MAX_SAFE_INTEGER | 最大安全整数。 |
| 方法 | 描述 |
|---|---|
| Number.parseFloat() | 将字符串转换成浮点数，和全局方法 parseFloat() 作用一致。 |
| Number.parseInt() | 将字符串转换成整型数字，和全局方法 parseInt() 作用一致。 |
| Number.isFinite() | 判断传递的参数是否为有限数字。 |
| Number.isInteger() | 判断传递的参数是否为整数。 |
| Number.isNaN() | 判断传递的参数是否为 isNaN()。 |
| Number.isSafeInteger() | 判断传递的参数是否为安全整数。 |
| toExponential() | 返回一个数字的指数形式的字符串，如：1.23e+2 |
| toFixed() | 返回指定小数位数的表示形式。 var a=123; b=a.toFixed(2); // b=”123.00” |
| toPrecision() | 返回一个指定精度的数字。如下例子中，a=123 中，3会由于精度限制消失: var a=123; b=a.toPrecision(2); // b=”1.2e+2” |
Date对象
Math对象
若有收获，就点个赞吧
0 人点赞
