JavaScript 基础笔记
- 1. 初识 javascript
- 1.1 JavaScript 简介
- 1.2 JavaScript 特点
- 1.3 JavaScript 的作用
- 1.4 JavaScript 的组成
- 1.4.1 ECMAScript
- 1.4.2 DOM
- 1.4.3 BOM
- 1.5 JavaScript 的使用场景
- 2. JavaScript 基本语法入门
- 2.1 JS 书写样式
- 2.1.1 行内式
- 2.1.2 页内式
- 2.1.3 外链式
- 2.2 JS 输入输出
- 2.2.1 弹出警告框
- 2.2.2 弹出输入框
- 2.2.3 弹出提示框
- 2.2.4 写入HTML文档
- 2.2.5 写入控制台
- 2.3 JS 注释
- 2.4 JS 变量
- 2.4.1 JavaScript 关键字
- 2.4.2 JavaScript 变量
- 2.4.3 JavaScript 常量
- 2.5 JS 数据类型
- 2.5.1 typeof 操作符
- 2.5.2 Undefined 类型
- 2.5.3 Null 类型
- 2.5.4 Boolean 类型
- 2.5.5 Number 类型
- 2.5.6 String 类型
- 2.5.7 Object 类型
- 2.6 JS 数据类型转换
- 2.6.1 转换为 Boolean 类型
- 2.6.2 转换为 Number 类型
- 2.6.3 转换为 String 类型
- 2.7 JS 语法规范
- 2.7.1 JavaScript 分号
- 2.7.2 JavaScript 空白字符
- 2.7.3 JavaScript 大小写敏感
- 2.7.4 JavaScript 标识符
- 3. JavaScript 基本语法
- 3.1 运算符
- 3.1.1 进制表示
- 3.1.2 算术运算符
- 3.1.3 赋值运算符
- 3.1.4 比较运算符
- 3.1.5 逻辑运算符
- 3.1.6 类型运算符
- 3.1.7 运算符优先级
- 3.2 表达式
- 3.2.1 简单表达式
- 3.2.1.1 算术表达式
- 3.2.1.2 逻辑表达式
- 3.2.1.3 三目表达式
- 3.2.2 复杂表达式
- 3.2.2.1 简单表达式的组合
- 3.2.2.2 表达式的运算优先顺序
- 3.3 JS 流程控制
- 3.3.1 顺序结构
- 3.3.2 选择结构
- 3.3.2.1 if 语句
- 3.3.2.2 switch 语句
- 3.3.3 循环结构
- 3.3.3.1 for 循坏
- 3.3.3.2 while 循环
- 3.3.4 程序的继续与终止
- 3.3.4.1 break 语句
- 3.3.4.2 continue 语句
- 3.4 JS 流程控制练习
- 3.4.1 成绩统计
- 3.4.2 打印三角形
- 3.4.3 九九乘法表
- 4. JS 函数概念
- 4.1 函数的定义
- 4.1.1 函数结构
- 4.1.2 函数名
- 4.1.3 参数(形参)
- 4.2 函数的调用
- 4.3 函数的返回值
- 4.4 函数的拆分
- 4.5 函数声明方式
- 4.5.1 函数声明方式
- 4.5.2 函数表达式声明方式
- 4.5.3 函数直接声明和函数表达式声明的区别
- 4.5.4 Function 构造函数
- 5. JS 函数基础
- 5.1 内置函数
- 5.1.1 常规函数
- 5.1.2 数组函数
- 5.1.3 日期函数
- 5.1.4 数学函数(Math)
- 5.1.5 字符串函数
- 5.2 自定义函数
- 5.3 匿名函数
- 5.4 变量作用域
- 5.4.1 作用域问题
- 5.4.2 全局变量
- 5.4.3 局部变量
- 5.4.4 变量作用域注意点
- 5.4.5 作用域链相关
- 5.5 变量提升
- 5.5.1 变量提升概念
- 5.5.2 函数提升
- 6. JS 数组基础概念
- 6.1 数组简介
- 6.1.1 基本定义
- 6.1.2 创建数组
- 6.1.3 数组的赋值
- 6.1.4 数组元素的获取
- 6.2 数组长度
- 7. 数组常用方法
- 7.1 数组元素的插入
- 7.1.1 `push()`
- 7.1.2 `unshift()`
- 7.2 数组元素的删除
- 7.2.1 `pop()`
- 7.2.2 `shift()`
- 7.3 数组元素的拼接
- 7.3.1 `concat()`
- 7.4 数组元素的分隔
- 7.4.1 `join()`
- 7.5 数组元素的排序
- 7.5.1 `sort()`
- 7.5.2 `reverse()`
- 7.6 数组元素的选取
- 7.6.1 `slice(begin,end)`
- 7.7 数组元素的返回值
- 7.7.1 `toString()`
- 7.7.2 `toLocaleString()`
- 7.7.3 `toUTCString()`
- 7.7.4 `toSource()`
- 7.7.5 `valueOf()`
- 7.8 数组的查找
- 7.8.1 `indexOf(value, index)`
- 7.8.2 `lastIndexOf(value, index)`
- 7.9 数组的遍历
- 7.9.1 `forEach()`
- 7.10 splice() 方法
- 8. 数组高级API
- 8.1 Math 对象
- 8.1.1 Math 最值
- 8.1.2 Math 数值取整
- 8.1.3 Math 绝对值
- 8.1.4 Math 随机数
- 8.1.5 Math 平方根
- 8.1.6 Math 幂运算
- 8.2 map()
- 8.3 filter()
- 8.4 every()
- 8.5 some()
- 8.6 数组方法练习
- 8.6.1 数组去重
- 8.6.2 猜数字
- 8.6.3 排队取号
- 8.6.4 抽奖系统
- 9. 字符串概念
- 9.1 字符串定义
- 10. 字符串操作
- 10.1 获取字符串
- 10.1.1 直接索引字符串
- 10.1.2 `charAt()`
- 10.1.3 `charCodeAt()`
- 10.1.4 数组下标 和 charAt() 方式的不同
- 10.2 获取字符串的位置
- 10.2.1 `indexOf()`
- 10.2.2 `lastIndexOf()`
- 10.3 字符串的连接
- 10.3.1 `concat()`
- 10.3.2 `+`
- 10.4 字符串的分隔
- 10.4.1 `split()`
- 10.5 字符串的截取
- 10.5.1 `substr()`
- 10.5.2 `substring()`
- 10.5.3 `slice()`
- 10.6 字符串的大小写
- 10.6.1 toLowerCase()
- 10.6.2 toUpperCase()
- 10.7 字符串的内容查找
- 10.7.1 `match()`
- 10.8 字符串的位置查找
- 10.8.1 `search()`
- 10.8.2 `indexOf()`
- 10.8.3 `lastIndexOf()`
- 10.9 字符串的替换
- 10.9.1 `replace()`
- 10.10 字符串练习
- 11. 日期对象
- 11.1 日期的使用场景
- 11.2 基本概念
- 11.2.1 时区
- 11.2.2 时间戳
- 11.3 日期对象的定义与使用
- 11.3.1 new Date()
- 11.4 获取日期
- 11.4.1 `getFullYear()`
- 11.4.2 `getMonth()`
- 11.4.3 `getDate()`
- 11.4.4 `getHours()`
- 11.4.5 `getMinutes()`
- 11.4.6 `getMilliseconds()`
- 11.4.7 `getDay()`
- 11.5 设置时间
- 11.5.1 `setFullYear`
- 11.5.2 `setMonth()`
- 11.5.3 `setDate()`
- 11.5.4 `setHours()`
- 11.5.5 `setMinutes()`
- 11.5.6. `setSeconds()`
- 11.6 日期对象练习
- 11.6.1 计算时间差
- 12. arguments 对象
- 12.1 函数调用
- 12.2 arguments 对象
- 12.3 arguments 对象实例
- 12.4 arguments 应用
- 13. JavaScript 事件
- 13.1 事件处理机制
- 13.1.1 什么是事件
- 13.1.2 事件处理机制模型
- 13.1.3 事件的绑定
- 13.2 鼠标事件
- 13.2.1 鼠标点击事件
- 13.2.2 鼠标移入移出事件
- 13.3 键盘事件
- 13.3.1 onkeydown 事件
- 13.3.2 onkeypress 事件
- 13.3.3 onkeyup 事件
- 13.4 表单事件
- 13.4.1 onchange 事件
- 13.4.2 onsubmit 事件
- 13.4.3 onfocus 事件和 onblur 事件
- 13.5. 浏览器事件
- 13.5.1 onload 事件
- 13.5.2 onresize 事件
- 14. 总结
1. 初识 javascript
1.1 JavaScript 简介
JavaScript
(缩写:JS) 是互联网上最流行的脚本语言
,是一种动态类型
、弱类型
、基于原型
的语言,内置支持
类型- JavaScript是一种脚本语言,其源代码在发往客户端运行之前
不需经过编译
,而是将文本格式的字符代码
发送给浏览器由浏览器解释运行
1.2 JavaScript 特点
-
脚本语言
- JavaScript 是一种
解释型
的脚本语言,C、C++等语言先编译后执行
,而JavaScript 是在程序的运行过程中逐行进行解释
- JavaScript 是一种
-
基于对象
- JavaScript 是一种
基于对象
的脚本语言,不仅可以创建对象
, 也能使用现有对象
内置大量现成对象
,编写少量程序可以完成目标
- JavaScript 是一种
-
简单
- JavaScript 语言中采用的是
弱类型
的变量类型,对使用的数据类型未做出严格的要求
, 设计简单紧凑
- 可以使用
任何文本编辑工具
编写 - 只需要
浏览器
就可以执行程序
- JavaScript 语言中采用的是
-
动态性
- JavaScript 是一种采用
事件驱动
的脚本语言,它不需要经过 Web 服务器
就可以对用户的输入做出响应
- JavaScript 是一种采用
-
跨平台性
- JavaScript 脚本语言
不依赖于操作系统
,仅需要浏览器
的支持
- JavaScript 脚本语言
1.3 JavaScript 的作用
- 实现 Web 页面客户端的
动态效果
- JavaScript 可以
输出字符、数字、以及 HTML
动态
改变 HTML 内容,属性,样式,动态
显示或隐藏 HTML 元素,添加交互
行为验证表单数据
响应事件
1.4 JavaScript 的组成
1.4.1 ECMAScript
- JavaScript的
语法标准
- ECMA是一个组织,即
欧洲计算机制造商协会
- ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容
- JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容
1.4.2 DOM
- JavaScript
操作网页
上的元素的API
1.4.3 BOM
- JavaScript
操作浏览器
的部分功能的API
1.5 JavaScript 的使用场景
- 网页
特效
- 动态
数据处理
移动端
开发(RN,Weex)服务端
开发(Node.js)命令行
工具(Node.js)物联网与人工智能
(Ruff)游戏
开发(cocos2d-js)
2. JavaScript 基本语法入门
2.1 JS 书写样式
2.1.1 行内式
- 虽然可以写在标签的属性中,但是
结构与行为耦合
,不方便维护
,不推荐使用
// 方式一
<button onclick="alert('今天天气很好!');">今天天气?</button>
// 方式二
<a href="javascript:alert('你点疼我了!!');">点我</a>
2.1.2 页内式
<script></script>
标签中的js代码一般写在文档的尾部
- 网页是
从上至下加载
, 而js代码通常是给标签添加交互(操作元素)
- 需要
先加载HTML
- 如果执行js代码时
HTML还未被加载
, 那么js代码将无法添加交互(操作元素)
- 需要
- HTML页面中出现
<script>
标签后,就会让页面暂停等待脚本的解析和执行
- 无论当前脚本是内嵌式还是外链式,页面的下载和渲染都必须停下来
等待脚本的执行完成
才能继续 - 如果把js代码如果写在
<head>
中, 那么js代码执行完毕之前后续网页无法被加载
- 无论当前脚本是内嵌式还是外链式,页面的下载和渲染都必须停下来
// 方法一:文档尾部
<body>
......
<script type="text/javascript">
alert("今天天气很好!");
</script>
</body>
// 方法二:文档头部
<head>
<meta charset="utf-8">
<script>
console.log("hello world")
</script>
</head>
2.1.3 外链式
- 在 HTML 中从
外部引入 JavaScript
,通过调用.js
为后缀的文件来引入 - 从外部引入 JS 文件放在
body 的结尾处
,因为网页加载是从上到下加载 - 如果在 开头引入 JS 文件,有些代码不能正确执行
- 外链式的
script
代码块中不能编写js代码, 即便写了也不会执行
<script type="text/javascript" src="index.js">
alert("今天天气很好!"); // 不会被执行
</script>
- 由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件打包成为一个JS文件,以
提升网页的性能和加载速度
<script type="text/javascript" src="01-js书写格式.js"></script>
外链式优势
分离
HTML 和代码- 使 HTML 和 JavaScript 更
易于阅读和维护
- 已缓存的 JavaScript 文件可
加速页面加载
2.2 JS 输入输出
- JavaScript 没有任何
打印
或者输出
的函数 - JavaScript 可以通过
不同的方式来输出数据
2.2.1 弹出警告框
- 通过
alert()
方法输出数据。控制浏览器弹出一个警告框
alert("我是警告框。");
2.2.2 弹出输入框
- 在网页中弹出输入框,一般用于
接收用户输入的信息
prompt("请输入");
2.2.3 弹出提示框
- 在网页中弹出提示框,
显示信息
,该方法一般与if判断语句结合使用
confirm("确定要删除?");
2.2.4 写入HTML文档
- 通过
document.write()
方法来输出想要显示的内容 - 如果在文档已
完成加载后
执行document.write()
,整个 HTML 页面将被覆盖
document.write("这是输入内容,输入到HTML中")
2.2.5 写入控制台
- 通过
console.log()
将数据写入到控制台,数据只在控制台中显示
,并不显示在网页中 - 通过 console.log()方法写入到控制台中,页面是没有我们输入的这个数据
- 通常 console.log()被用来
检查错误
console.log("Hello World!");
console.warn("警告输出!");
console.error("错误输出!");
2.3 JS 注释
- JavaScript 注释可用于
提高代码的可读性
- 注释
不会被执行
,常用来调试程序
注意点
- 单行注释可以
嵌套
单行注释、多行注释 - 多行注释可以
嵌套
单行注释 - 多行注释
不能嵌套
多行注释
- 单行注释可以
1. 单行注释:以 // 开头
2. 多行注释:以 /* 开始,以 */ 结尾
2.4 JS 变量
2.4.1 JavaScript 关键字
-
JavaScript语言用于
程序控制
或者执行特定操作
的英语单词 -
它们是被JavaScript语言赋予了
特殊含义
的英文单词 -
注意点
- 关键字不能用作
变量名、函数名
- 关键字
严格区分大小写
- 关键字不能用作
-
常见关键字
break | do | instanceof | typeof |
---|---|---|---|
case | else | new | var |
catch | finally | return | void |
continue | for | switch | while |
debugger* | function | this | with |
default | if | throw | delete |
in | try |
常见保留字
- 第五版
非严格
模式
class | enum | extends | super |
---|---|---|---|
const | export | import |
- 第五版
严格
模式
implements | package | public | interface |
---|---|---|---|
private | static | let | protected |
yield |
应避免使用的单词
- 那些已经用作 JavaScript 的
内置对象或内置函数
的名称,如String
或parseInt
等 - 注意:像
goto、const、byvalue
等,他们是 JavaScript 的一部分 - 但是他们在 JavaScript 中没有定义任何特殊功能,只是为了
保持相互兼容
而已
- 那些已经用作 JavaScript 的
2.4.2 JavaScript 变量
-
变量定义
- 变量是一个
标识符
,在程序运行过程中用于保存临时数据
- 变量是用于存储信息的"
容器
" - 用
var
声明的且未赋初值
的变量,值会被设定为undefined
- 变量是一个
-
变量命名
- 必须是
字母、数字、下划线或$
组成 首字母不能是数字
- 不能使用Javascript
保留字
- 命名
区分大小写
- 必须是
-
变量的作用域
- 所有
函数之外
声明的变量,叫全局变量
,可被当前文档中任何其他代码所访问
- 在
函数内部
声明的变量,叫做局部变量
,只能在该函数内部访问
注意
- 在
函数内
声明的变量在函数外
使用会出错,引用错误
声明
变量要在使用
变量之前
,如果在使用变量之后声明变量,会返回undefined
- 变量名对
大小写敏感
,a 和 A 代表不同的两个变量
- 在
- 所有
-
使用变量
1. 声明变量
var name;
2. 给变量赋值
name = "张三"
3. 声明变量时同时赋值
var name = "张三"
2.4.3 JavaScript 常量
-
JavaScript 中的用
const
来声明定义常量 -
const
定义的常量必须初始化
,不初始化会报错 -
常量在第一次定义之后
不可再次赋值
,如果在严格模式
下运行会报错 -
注意
- 在
Firefox
和Chrome
更早期的版本,Safari 5.1.7
和Opera 12.00
,如果使用const
定义一个变量,这个变量的值仍然可以修改 IE6-10
不支持const
,但是IE11
支持
- 在
2.5 JS 数据类型
- 数据类型指的就是
字面量
的类型 - 程序在运行过程中会产生各种各样的临时数据, 为了
方便数据的运算和操作
, JavaScript对这些数据进行了分类
, 提供了丰富的数据类型
2.5.1 typeof 操作符
检测
给定变量的数据类型
- 如果这个值
未定义
:undefined
- 如果这个值是
布尔值
:boolean
- 如果这个值是
字符串
:string
- 如果这个值是
数值
:number
- 如果这个值是
对象
或null
:object
- 如果这个值是
函数
:function
- 如果这个值
var message = "哈哈哈";
console.log(typeof(message)); // string
console.log(typeof 123); // number
2.5.2 Undefined 类型
- undefined 表示"
缺少值
",就是此处应该有一个值
,但是还没有定义
典型用法
- 变量被声明了,但
没有赋值
时,就等于undefined
- 调用函数时,应该提供的
参数没有提供
,该参数等于undefined
对象没有赋值的属性
,该属性的值为undefined
函数没有返回值
时,默认返回undefined
- 变量被声明了,但
var num1;
console.log(num1); // undefined
var num2 = undefined;
console.log(num2);// undefined
function f(x){console.log(x)}
f() // undefined
var o = new Object();
o.p // undefined
var x = f();
x // undefined
2.5.3 Null 类型
- null 表示"
没有对象
",即该处不应该有值
- 从逻辑角度看,
null
值表示一个空对象指针
,而这也正是使用typeof
操作符检测null
值时会返回object
的原因 典型用法
- 作为函数的
参数
,表示该函数的参数不是对象
- 作为
对象原型链的终点
- 作为函数的
var car = null;
alert(typeof car); // object
Object.getPrototypeOf(Object.prototype) // null
Null 和 Undefined 的区别
Number
转换的值
不同,Number(null)
输出为0
,Number(undefined)
输出为NaN
Null
表示一个值被定义
了,但是这个值是空值
Undefined
表示缺少值
,即此处应该有值,但是还没有定义
2.5.4 Boolean 类型
- Boolean 型数据就是
逻辑类型
,它只能有两个值:true 或 false
- 主要用来做
逻辑判断
,true 表示真 false 表示假
var bool = true;
console.log(typeof bool); // boolean
console.log(bool);
2.5.5 Number 类型
- 在JS中所有的
数值
都是Number类型,包括整数和浮点数(小数)
var num1= 123; // 整数型
var num2= 3.14; // 浮点型
console.log(typeof num1); // number
console.log(typeof num2); // number
最大数和最小数
- 由于
内存的限制
,ECMAScript 并不能保存
世界上所有的数值
- 由于
// 最大值:Number.MAX_VALUE
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
// 最小值:Number.MIN_VALUE
console.log(Number.MIN_VALUE); // 5e-324
// 无穷大:Infinity, 如果超过了最大值就会返回该值
console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity
// 无穷小:-Infinity, 如果超过了最小值就会返回该值
console.log(typeof Infinity); // number
console.log(typeof -Infinity); // number
NaN
- 是一个
特殊的数字
,表示Not A Number
- 使用
typeof
检查一个NaN
也会返回number
- 任何涉及
NaN
的操作都会返回NaN
NaN
与任何值
都不相等
,包括NaN
本身
- 是一个
alert(NaN == NaN); // false
2.5.6 String 类型
- 在JS中字符串需要使用
引号
引起来 - 使用
双引号或单引号
都可以,但是不要混着用
- 引号
不能嵌套
,双引号不能放双引号,单引号不能放单引号
var firstName = 'mike';
console.log(typeof firstName); // string
转义字符
- 所有的
ASCII 码
都可以用“\
”加数字
(一般是8 进制
数字)来表示
- 所有的
转义字符 | ASCII 码值(十进制) | 意义 |
---|---|---|
\a | 007 | 响铃(BEL) |
\b | 008 | 退格(BS) ,将当前位置移到前一列 |
\f | 012 | 换页(FF),将当前位置移到下页开头 |
\n | 010 | 换行(LF) ,将当前位置移到下一行开头 |
\r | 013 | 回车(CR) ,将当前位置移到本行开头 |
\t | 009 | 水平制表(HT) (跳到下一个 TAB 位置) |
\v | 011 | 垂直制表(VT) |
\ | 092 | 代表一个反斜线字符’’’ |
’ | 039 | 代表一个单引号(撇号)字符 |
" | 034 | 代表一个双引号字符 |
? | 063 | 代表一个问号 |
\0 | 000 | 空字符(NULL) |
\ooo | 三位八进制 | 1 到 3 位八进制数所代表的任意字符 |
\xhh | 二位十六进制 | 1 到 2 位十六进制所代表的任意字符 |
2.5.7 Object 类型
- JavaScript 中的
所有事物都是对象
:字符串、数值、数组、函数…… - JavaScript 允许
自定义对象
,对象只是带有属性和方法
的特殊数据类型
例:直接
给属性赋值
//对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value)来定义
var person={
name:"小明",
sex:"男",
old:20
};
例:通过构造函数
来给属性赋值
function person(firstname,lastname,age,eyecolor) {
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
2.6 JS 数据类型转换
2.6.1 转换为 Boolean 类型
- 要将一个值转换为其对应的 Boolean 值,可以调用转型函数
Boolean()
数据类型 | 转换为 true 的值 | 转换为 false 的值 |
---|---|---|
Boolean | true | false |
String | 任何非空 字符串 | “” (空字符串 ) |
Number | 任何非零 数字值(包括无穷大 ) | 0 和NaN |
Object | 任何对象 | null |
Undefined | N/A | undefined |
2.6.2 转换为 Number 类型
- 转型函数
Number()
可以用于任何
数据类型
Undefined --> Number(返回 NaN)
var str1 = undefined;
var n1 = Number(str1);
console.log(n1); // NaN
==========================================
Null --> Number(返回 0)
var str1 = null;
var n1 = Number(str1);
console.log(n1); // 0
==========================================
Boolean --> Number(true 转成 1, false 转成 0)
var bool1 = true;
var n1 = Number(bool1);
console.log(n1); // 1
var bool2 = false;
var n2 = Number(bool2);
console.log(n2); // 0
==========================================
String --> Number
1.如果是`纯数字`的字符串,则直接将其转换为十进制数值(`前导的零忽略`)
var str1 = "123";
var str2 = "00011";
var res1 = Number(str1);
var res2 = Number(str2);
console.log(res1); // 123
console.log(res2); // 11
console.log(typeof res1); // number
console.log(typeof res2); // number
-----------------------------------------------------------------
2.如果字符串中有`非数字`的内容,则转换为NaN,Number()函数中无论混合字符串`是否存在有效整数`都会返回NaN
var str3 = "hello 123";
var res3 = Number(str3);
console.log(res3); // NaN
-----------------------------------------------------------------
3.如果字符串是一个`空串`或者是一个全是`空格`的字符串,则转换为0
var str4 = "";
var res4 = Number(str4);
console.log(res4); // 0
var str5 = " ";
var res5 = Number(str5);
console.log(res5); // 0
- 转型函数
parseInt()
与parseFloat()
专门用于把字符串转换成数值parseInt()/parseFloat()
可以提取字符串中的有效整数
- 如果对
非String
使用parseInt()或parseFloat(), 它会先将其转换为String
然后在操作
var num1 = parseInt("1234blue"); // 1234
var num2 = parseInt(""); // NaN
var num3 = parseInt("0xA"); // 10(十六进制)
var num4 = parseInt("22.5"); // 22
var num5 = parseInt("070"); // 56(八进制)
var num6 = parseInt("70"); // 70(十进制)
var num1 = parseFloat("1234blue"); // 1234
var num2 = parseFloat("0xA"); // 0
var num3 = parseFloat("22.5"); // 22.5
var num4 = parseFloat("22.34.5"); // 22.34
var num5 = parseFloat("0908.5"); // 908.5
parseInt()
与parseFloat()
区别parseInt()
只能提取整数parseFloat()
能提取小数parseFloat()
始终忽略前导的0
,可识别所有浮点数值格式,十六进制的字符串始终转换为0
2.6.3 转换为 String 类型
- 调用
toString()
方法- 该方法
不会影响
到原变量,它会将转换的结果返回
null
和undefined
这两个值没有toString()
方法,如果调用它们的方法,会报错
- 该方法
Number --> String
var num = 12306;
var str= num .toString();
console.log(str); // 12306
console.log(typeof str); // string
---------------------------------
Boolean --> String
var num1 = true;
var str1 = num1.toString();
console.log(str1 ); // true
console.log(typeof str1 ); // string
------------------------------------
Undefined --> String
var num2 = undefined;
var str2 = num2.toString(); // 报错
console.log(str2 );
------------------------------------
Null --> String
var num3 = null;
var str3= num3.toString(); // 报错
console.log(str3);
-------------------------------------
NaN --> String
var num4 = NaN;
var str4 = num4.toString();
console.log(str4); // NaN
console.log(typeof str4); // String
- 调用
String()
方法- 调用
String()
函数,并将被转换的数据作为参数
传递给函数 - 使用String()函数做
强制类型转换
时- 对于
Number和Boolean
实际上就是调用的toString()
方法 - 对于
null和undefined
,就不会调用toString()方法, 它会将null 直接转换为 "null"
, 将undefined 直接转换为 "undefined"
- 对于
- 调用
var a = null;
a = String(a);
b = undefined;
b = String(b);
console.log(typeof a); // string
console.log(a); // null
console.log(typeof b); // string
console.log(b); // undefined
2.7 JS 语法规范
2.7.1 JavaScript 分号
-
编写Javascript注意
语法规范
,一行代码结束后必须在代码最后加上;
- 如果不写分号,浏览器会
自动添加
,但是会消耗一些系统资源
- 此外,容易加错分号,所以在开发中分号必须要写
- 如果不写分号,浏览器会
-
JavaScript
分号作用
- 分号用于
分隔
JavaScript 语句 - 使用分号在
一行中编写多条语句
- 在 javascript 中,用分号来结束语句是
可选
的
- 分号用于
2.7.2 JavaScript 空白字符
- JavaScript
空白字符
- JavaScript 会
忽略
多个空格和换行 - 可以向脚本添加空格,以
增强可读性
- JavaScript 会
console.log
(
"Hello,JavaScript!"
);
2.7.3 JavaScript 大小写敏感
- JavaScript 对
大小写是敏感
的 - 当编写 JavaScript 语句时,请留意是否关闭大小写切换键
- 函数
getElementById
与getElementbyID
是不同的 - 变量
myVariable
与MyVariable
也是不同的
comfirm("Hello,JavaScript!"); // 正确
COMFIRM("Hello,JavaScript!"); // 错误
2.7.4 JavaScript 标识符
-
标识符格式
- 标识符中可以含有
字母、数字、_、$
- 标识符
不能以数字开头
- 标识符不能是
ES
中的关键字或保留字
- 在 JavaScript 中预定义的运算符如:
+、-、*、/、%
不可以用于定义标识符 - 标识符一般都采用
驼峰命名法
- 在JS底层保存的标识符采用的是
Unicode编码
,所以UTF-8
中所有的字符都可以作为标识符
- 标识符中可以含有
-
Smalltalk 法则
- 每个标识符可以有若干个单词左右连接而成
常量
标识符应该全部使用大写字母
来表示区别- 一般标识符应该
全部使用小写字母
以示区别 特殊常量
标识符应该以大写字母开头
以示区别函数
的标识符应该以小写字母开头
以示区别- 不要使用JavaScript 中预定义保留的
关键字
- JavaScript
严格区分大小写字母
3. JavaScript 基本语法
3.1 运算符
- 执行
变量或值
之间的运算的符号 - 通过运算符可以对
一个或多个值
进行运算,并获取运算结果 - 运算符是告诉程序执行
特定算术或逻辑操作
的符号
3.1.1 进制表示
- 在JS中可以表示
不同进制
的数字,得看浏览器支持
16进制
的数字,则需要以0x
开头8进制
的数字,则需要以0
开头2进制
的数字,则需要以0b
开头
十六进制数字
num = 0x18;
num = 0xcf;
num = 0xAacf;
八进制数字
num = 016;
二进制数字
num = 0b1010;
注意
- "010"这种字符串,有些浏览器会当成
8进制
解析,有些会当成10进制
解析 - 可以在
parseInt()
或parseFloat()
中传递一个第二个参数
,来指定数字的进制
- "010"这种字符串,有些浏览器会当成
str = "070";
str= parseInt(str,10); // 十进制
str = Number(str);
console.log(typeof str);
console.log(str);
3.1.2 算术运算符
- 算数运算符用于对数字执行
算数运算
+
的特殊用法连字符
,当数字和字符串进行相加时,按拼接字符串
的方式进行操作
运算符 | 描述 |
---|---|
+ | 加 |
- | 减 |
* | 乘 |
/ | 除 |
% | 求余数 |
++ | 自增 |
- - | 自减 |
3.1.3 赋值运算符
- 赋值运算符向 JavaScript 变量
赋值
运算符 | 例子 | 等同于 |
---|---|---|
= | x = y | x = y |
+= | x += y | x = x + y |
-= | x -= y | x = x - y |
*= | x *= y | x = x * y |
/= | x /= y | x = x / y |
%= | x %= y | x = x % y |
3.1.4 比较运算符
返回值
只会是true 或者 false
,如果成立则为 true,不然为 false
运算符 | 描述 |
---|---|
> | 大于 |
>= | 大于等于 |
< | 小于 |
<= | 小于等于 |
== | 等于 |
=== | 等值等型 |
!= | 非等于 |
!== | 不等值或不等型 |
? | 三元运算符 |
3.1.5 逻辑运算符
- 逻辑运算符用于测定
变量或值之间的逻辑
运算符 | 描述 |
---|---|
&& | 逻辑与 |
|| | 逻辑或 |
! | 逻辑非 |
3.1.6 类型运算符
运算符 | 描述 |
---|---|
typeof | 返回变量的类型 |
instanceof | 返回 true,如果对象是对象类型的实例 |
3.1.7 运算符优先级
3.2 表达式
- 表达式是由
数字、运算符、分组符号(括号)、变量和常量
等以能求得数值的有意义排列方法所得的组合
- 一个表达式会产生一个值,它可以放在
任何需要一个值
的地方
3.2.1 简单表达式
3.2.1.1 算术表达式
- 算术表达式是指由
数字和运算符号
组成的式子
var m = 5 + 3 * 4;
document.write(m);
结果:17
3.2.1.2 逻辑表达式
- 用
逻辑运算符
将关系表达式或逻辑量连接起来的有意义的式子称为逻辑表达式 - 逻辑表达式的值是一个逻辑值,即
true
或false
var m = 9 > 6;
document.write(m);
结果:true
3.2.1.3 三目表达式
- 三目表达式就是
三元运算符
构成的式子
var m = ( 3 > 2 ) ? 3 : 4;
document.write(m);
结果:3
3.2.2 复杂表达式
3.2.2.1 简单表达式的组合
- 复杂表达式是由
原始表达式和操作符(operator)组合
而成,包括属性访问表达式
、对象创建表达式
和函数表达式
3.2.2.2 表达式的运算优先顺序
- 运算优先顺序
括号→函数→乘方→乘、除→加、减→字符连接运算符→关系运算符→逻辑运算符
- 如果
同级
的运算是按从左到右
次序进行 多层括号由里向外
var x;
var m = ( x = ( 3 > 2 ) ? 9 : 2 ) * ( 3 + ( 5 - 2 ) * 4 );
alert( "m is " + m );
结果:m is 135
3.3 JS 流程控制
3.3.1 顺序结构
- 顺序结构是 JavaScript 最基本的结构,说白了就是按照
从上到下、从左到右
的顺序执行 - JavaScript 中,程序总体是按顺序结构执行的,但在顺序结构可
包含选择结构和循环结构
例:实现内容的替换
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<div id="myDIV">A DIV.</div>
<script>
document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";
</script>
</body>
结果
My Web Page
Hello World
How are you?
3.3.2 选择结构
3.3.2.1 if 语句
基本条件语句
- 只有当
指定条件为 true
时,该语句才会执行代码 - 在条件为
false
时执行其他代码 - 使用
大写字母(IF)
会生成 JavaScript 错误
- 只有当
if (condition) {
当条件为 true 时执行的代码
} else {
当条件不为 true 时执行的代码
}
多重条件语句
if (条件1) {
// JavaScript 代码
} else if (条件2) {
// JavaScript 代码
} else if (条件3) {
// JavaScript 代码
}
嵌套条件语句
if (条件1) {
if (条件) {
// JavaScript 代码
} else {
// JavaScript 代码
}
} else if (条件2) {
// JavaScript 代码
}
举例
/*
BMI计算公式:BMI =体重÷(身高*身高) 65kg,1.74m
过轻:低于18.5
正常:18.5-24.99999999
过重:25-27.9999999
肥胖:28-32
非常肥胖, 高于32
*/
//1.人机交互
var height = prompt('请输入您的身高:')
var weight = prompt('请输入您的体重:')
//2.计算BMI
var bmi = weight / (height * height)
//3.条件判断,显示不同的结论
if(bmi < 18.5){
alert('您的体重太轻了,需要加强营养!')
}else if(bmi < 25){
alert('您的体重正常,非常标准!')
}else if(bmi < 28){
alert('您的体重有点超标,需要注意!')
}else if(bmi < 32){
alert('您的体重有点肥胖了,需要减肥!')
}else{
alert('您的体重超级肥胖,珍惜生命!')
}
3.3.2.2 switch 语句
- switch 语句用于基于
不同的条件
来执行不同的动作
,但条件必须是确定的值
- 贯穿式条件分支,采用
绝对等于
判断,等值匹配
,数据类型
也要匹配 说明
- switch 必须
赋初始值
,值与每个 case 值匹配
- 满足条件则执行该 case 后的所有语句,并用
break
语句来阻止运行
下一个case,结束贯穿执行 - 如所有 case 值都
不匹配
,执行default
后的语句
- switch 必须
switch(表达式) {
case 值 1:
执行代码块 1
break;
case 值 2:
执行代码块 2
break;
...
case 值 n:
执行代码块 n
break;
default:
与 case 值 1 、 case 值 2...
}
举例
/*
根据星期几(一~日) ,输出特价菜
“一”、“二”、“三”,输出“干煸扁豆6元.”
“四”、“五”,输出“蒜茸油麦菜 4元.”
“六”、“日”,输出“口水鸡 8元.”
其他,输出“您输入的星期数不正确”
*/
var day = prompt('请输入星期数:')
switch(day){
case 1:
case 2:
case 3:alert('特价菜是扁豆!');break;
case 4:
case 5:alert('特价菜是白菜!');break;
case 6:
case 7:alert('特价菜是口水鸡!');break;
default:alert('输入的星期数不对!')
}
3.3.3 循环结构
3.3.3.1 for 循坏
- for循环语句是在创建循环时常用到的语句,
循环次数可以为零
for (初始化变量; 判断条件; 更新迭代){
循环语句
}
-
说明
初始化变量
在整个循环的最开始只执行一次
,for 循环中初始化的变量可以在for 循环之外
使用- for 循环是
先执行
初始化变量的代码,然后判断
条件是否返回 true,如果为 true 则执行循环语句,如果为 false 则不执行循环 - 执行完循环后,执行
更新迭代
的代码,然后再判断
循环条件是否为 true,如果为true再次执行循环语句,直到循环条件返回值 false - for 循环的 3 个条件都是可以
省略
的,如果没有退出循环的判断条件,就必须使用break
语句退出循环,否则就是死循环
-
举例
// 用 for 循环来输出 0 到 100 的累加值
for (var i = 0,sum=0; i<=100; i++) {
sum+=i;
}
document.write("0 到 100 的累加值是:"sum);
结果:
0到100的累加值是:5050
3.3.3.2 while 循环
- while 循环在
指定条件为真
时循环执行代码块,只要指定条件为true,循环就可一直执行
while (条件) {
需要执行的代码
}
3.3.4 程序的继续与终止
3.3.4.1 break 语句
- 之前的 switch 语句中,break 语句用于
跳出 switch()
- break 语句用于
跳出循环
举例
// 用 break 语句来跳出 for 循环
for (var i = 1; i<8; i++) {
document.write(i+"<br/>");
if(i==3){
break;
}
}
结果:
1
2
3.3.4.2 continue 语句
- continue 用于
跳过循环中的一个迭代
,continue 语句跳出循环后,会继续执行该循环之后的代码
(如果有的话) 举例
// 通过 continue 来跳过当前循环,执行下一个循环
for (var i = 1; i<=5; i++) {
if(i==3){
continue;
}
document.write(i+"<br/>");
}
结果:
1
2
4
5
总结
- 根据情况的不同,选择使用 break 还是 continue
- break 是
跳出整个循环
,不管当前循环之后还有没有代码都不再执行
- continue 是
跳出当前循环
,执行下一个循环
3.4 JS 流程控制练习
3.4.1 成绩统计
// 1. 设置变量
var sum = 0;
var max = 0;
var min = 0;
// 2. 获取课程数
var count = prompt('请输入课程数')
// 3. 循环遍历课程数
for (var i = 1; i <= count; i++) {
// 3.1 获取每门课程成绩
var mark = parseInt(prompt('请输入第'+i+'门课程成绩'))
// 3.2 判断
if (i == 1) {
max = mark
min = mark
}
if (min > mark) {
min = mark
}
if (max < mark) {
max = mark
}
sum += mark
}
alert("总分:"+ sum)
alert("平均数:" + parseInt(sum / count))
alert("最小分:" + min)
alert("最大分:"+ max)
3.4.2 打印三角形
// 1. 获取三角形行数
var n = parseInt(prompt('请输入行数'))
// 2. 判断行数
// 2.1 如果大于等于6
if (n >= 6) {
// 外层行数i循环递减
for (var i = n; i > 0; i--) {
// 内层*号递减打印
for (var j = 0; j < i; j++) {
document.write('* ')
}
document.write('<br/>')
}
} else {
// 2.2 如果小于6
// 上半部循环
// 外层行数i循环递减
for (var i = n; i > 0; i--) {
// 内层*号递减打印
for (var j = 0; j < i; j++) {
document.write('* ')
}
document.write('<br/>')
}
// 下半部循环
// 外层行数i循环递增
for (var i = 0; i <= n; i++) {
// 内层*号递增打印
for (var j = 0; j < i; j++) {
document.write('* ')
}
document.write('<br/>')
}
}
3.4.3 九九乘法表
// 获取乘数
var str1 = parseInt(prompt('请输入一个乘数'))
var str2 = parseInt(prompt('请输入另一个乘数'))
// 双层循环遍历
// 外层
for (var i = str1; i <= str2; i++) {
// 内层
for (var j = str1; j <= i; j++) {
document.write(j + '*'+ i + '=' + i*j +' ')
}
document.write("<br/>")
}
4. JS 函数概念
特点
- 封装到函数中的代码
不会立即执行
- 函数中的代码会在
函数调用
的时候执行 - 调用函数时,函数中封装的代码会按照
顺序执行
- 封装到函数中的代码
4.1 函数的定义
- 函数也是一个
对象
- 函数就是可以
重复执行的代码块
,是能完成特定功能
的一段代码 - 函数能
重复调用,简化程序
- 函数分为
系统函数
和自定义函数
4.1.1 函数结构
function
是定义函数的关键字,必不可少- 执行代码是在调用该函数的时候,所做的操作,也称为
函数体
function 函数名(参数){
执行代码
}
4.1.2 函数名
- 函数名就是函数的名字,自定义,遵循命名规则
function function_name(){
alert("Hello World!");
}
函数命名规则
- 区分
大小写
- 允许包含
字母、数字、下划线、美元符号($)
,但是第一个字符不能是数字
- 不允许使用其他字符以及
关键字和保留字
命名
- 区分
4.1.3 参数(形参)
- 函数参数是在调用函数时,向其
传递的值
,参数是可以为空
- 增强函数的
功能性
和函数的可拓展性
,便于交互
a,b是形参,占位用,函数定义时形参无值
function f(a,b){}
x, y实参,有具体的值,会把x, y复制一份给函数内部的a和b,函数内部的值是复制的新值,无法修改外部的x,y
f(x, y);
说明
- 参数既可以是
变量
也可以是常量
- 但是参数为常量就不能发挥函数的灵活性,没有太大的实际意义
- 形参与实参以
一致顺序
出现,第一个变量值是第一个被传递参数给定的值,以此类推
- 参数既可以是
注意
- 调用函数时解析器
不会检查实参的类型
, 所以开发中一般需要对参数进行类型的检查
- 函数的
实参
可以是任意的数据类型
- 调用函数时,解析器
不会检查实参的数量
,多余实参不会被赋值
, 如果实参的数量少于
形参的数量,则没有对应实参的形参将是undefined
- 调用函数时解析器
函数作为参数
1. 直接将函数名作为参数,`直接调用`
function test1(Func) {
Func();
}
function test2() {
alert("我是 test2");
}
test1(test2);
============================================
2. 定义一个调用`带参数的函数`为参数的函数
function test1(Func) {
Func(mydata);
}
function test2(data) {
alert(data);
}
test1(test2("带参数的函数,作为参数"));
============================================
3. 作为参数的函数`不再单独定义`
function test1(Func) {
Func("hello");
}
test1(function(data) {
alert(data);
});
4.2 函数的调用
- 函数的调用就是在定义一个函数之后,应该如何使用这个函数
例:不同的参数实现同样的效果
<body>
<button onclick=" myFunction('小明','男')">实参</button>
<button onclick="myFunction(Name,Sex)">已赋值变量</button>
<button onclick="myFunction(NAME,SEX)">已赋值常量</button>
</body>
<script>
var Name = "小明";
var Sex ="男";
const NAME ="小明";
const SEX = "男";
function myFunction(name,sex){
alert("name is "+name+" , "+"sex is "+sex);
}
</script>
4.3 函数的返回值
- 当一个函数被调用,通常会从函数的
开始执行到结束
- 如果想
提前结束
该函数的执行可以使用return
语句,return
语句后面的所有语句将永远不会执行
- 一般
return
用于返回结果
注意
- 如果函数没有显示使用
return
语句 ,那么函数有默认的返回值:undefined
- 如果函数使用
return
语句,那么跟再return
后面的值,就成了函数的返回值
- 如果函数使用
return
语句,但是return
后面没有任何值,那么函数的返回值也是:undefined
- 所以要么让函数始终都返回一个值,要么永远都不要返回值
- 如果函数没有显示使用
function myFunction(){
var name="小明";
return name;
name="小花";
}
4.4 函数的拆分
- 函数拆分可以
提高效率
- 函数拆分常用在
函数体代码太多
,函数中某一代码多次使用
的情况下 - 函数拆分是
视具体情况而定
的,根据具体情况、要求不同,拆分的方式也会不同
4.5 函数声明方式
4.5.1 函数声明方式
function add(num1,num2){
return num1+num2;
}
4.5.2 函数表达式声明方式
var add = function(num1,num2){
return num1+num2;
};
4.5.3 函数直接声明和函数表达式声明的区别
- JavaScript解析器首先会把
当前作用域的函数声明提前到整个作用域的最前面
// 代码没问题
console.log(f(5,6));
function f(a, b) {
return a + b;
}
// 报错
myFun(6,7);
var myFun = function (a,b){
return a + b;
}
4.5.4 Function 构造函数
- 不推荐使用, 主要用于
面向对象
时理解"函数就是对象, 函数名就是指针
"这一概念
var add = new Function('num1','num2','return num1+num2');
5. JS 函数基础
5.1 内置函数
- 内置函数,是
浏览器内核自带
的,不用引入任何函数库就可直接使用
的函数
5.1.1 常规函数
函数 | 描述 |
---|---|
alert 函数 | 显示一个警告对话框,包括一个 OK 按钮 |
confirm 函数 | 显示一个确认对话框,包括 OK、Cancel 按钮 |
escape 函数 | 将字符转换成 Unicode 码 |
eval 函数 | 计算表达式的结果 |
isNaN 函数 | 测试是(true)否(false)不是一个数字 |
parseFloat 函数 | 将字符串转换成符点数字形式 |
parseInt 函数 | 将符串转换成整数数字形式(可指定几进制) |
prompt 函数 | 显示一个输入对话框,提示等待用户输入 |
5.1.2 数组函数
函数 | 描述 |
---|---|
join 函数 | 转换并连接数组中的所有元素为一个字符串 |
length 函数 | 返回数组的长度 |
escape 函数 | 将字符转换成 Unicode 码 |
reverse 函数 | 将数组元素顺序颠倒 |
sort 函数 | 将数组元素重新排序 |
5.1.3 日期函数
函数 | 描述 |
---|---|
getDate 函数 | 返回日期的“日”部分,值为 1~31 |
getDay 函数 | 返回星期几,值为 0~6,其中 0 表示星期日,1 表示星期一,…,6 表示星期六 |
getHours 函数 | 返回日期的“小时”部分,值为 0~23 |
getMinutes 函数 | 返回日期的“分钟”部分,值为 0~59 |
getMonth 函数 | 返回日期的“月”部分,值为 0~11。其中 0 表示 1 月,…,11 表示12 月 |
getSeconds 函数 | 返回日期的“秒”部分,值为 0~59 |
getTime 函数 | 返回系统时间 |
getTimezoneOffset 函数 | 返回此地区时差(当地时间与 GMT 格林威治标准时间地区时差),单位分钟 |
getYear 函数 | 返回日期的“年”部分。返回值以 1900 年为基数 |
parse 函数 | 返回从 1970 年 1 月 1 日零时整算起的毫秒数(当地时间) |
setDate 函数 | 设定日期的“日”部分,值为 0~31 |
setHours 函数 | 设定日期的“小时”部分,值为 0~23 |
setMinutes 函数 | 设定日期的“分钟”部分,值为 0~59 |
setMonth 函数 | 设定日期的“月”部分,值为 0~11。其中 0 表示 1 月, …, 11 表示 12 月 |
setSeconds 函数 | 设定日期的“秒”部分,值为 0~59 |
setTime 函数 | 设定时间。时间数值为 1970 年 1 月 1 日零时整算起的毫秒数 |
setYear 函数 | :设定日期的“年”部分 |
toGMTString 函数 | 转换日期成为字符串,为 GMT 格林威治标准时间 |
setLocaleString 函数 | 转换日期成为字符串,为当地时间 |
UTC 函数 | 返回从 1970 年 1 月 1 日零时整算起的毫秒数,以 GMT 格林威治标准时间计算 |
5.1.4 数学函数(Math)
函数 | 描述 |
---|---|
abs 函数 | 返回一个数字的绝对值 |
acos 函数 | 返回一个数字的反余弦值,结果为 0~π弧度(radians) |
asin函数 | 返回一个数字的反正弦值,结果为-π/2~π/2 弧度 |
atan 函数 | 返回一个数字的反正切值,结果为-π/2~π/2 弧度 |
atan2 函数 | 返回一个坐标的极坐标角度值 |
ceil 函数 | 向上取整 |
cos 函数 | 返回一个数字的余弦值,结果为-1~1 |
exp 函数 | 返回 e(自然对数)的乘方值 |
floor 函数 | 向下取整 |
log 函数 | 自然对数函数,返回一个数字的自然对数(e)值 |
max函数 | 返回两个数的最大值 |
min 函数 | 返回两个数的最小值 |
pow函数 | 返回一个数字的乘方值 |
random 函数 | 返回一个 0~1 的随机数值 |
round 函数 | 返回一个数字的四舍五入值,类型是整数 |
sin 函数 | 返回一个数字的正弦值,结果为-1~1 |
sqrt 函数 | 返回一个数字的平方根值 |
tan 函数 | 返回一个数字的正切值 |
5.1.5 字符串函数
函数 | 描述 |
---|---|
anchor 函数 | 产生一个链接点(anchor)以作超级链接用 |
big 函数 | 将字体加到一号 |
blink函数 | 使字符串闪烁 |
bold 函数 | 使字体加粗 |
charAt 函数 | 返回字符串中指定的某个字符 |
fixed 函数 | 将字体设定为固定宽度字体 |
fontcolor 函数 | 设定字体颜色 |
fontsize 函数 | 设定字体大小 |
indexOf 函数 | 返回字符串中第一个查找到的下标 index,从左边开始查找 |
italics 函数 | 使字体成为斜体字 |
lastIndexOf 函数 | 返回字符串中第一个查找到的下标 index,从右边开始查找 |
length 函数 | 返回字符串的长度 |
link 函数 | 产生一个超级链接 |
small 函数 | 将字体减小一号 |
strike 函数 | 在文本的中间加一条横线。 |
sub 函数 | 显示字符串为下标字(subscript) |
substring 函数 | 返回字符串中指定的几个字符 |
sup 函数 | 显示字符串为上标字(superscript) |
toLowerCase 函数 | 将字符串转换为小写 |
toUpperCase 函数 | 将字符串转换为大写 |
5.2 自定义函数
定义函数
function 函数名(参数1,参数2,参数3,...){
// JavaScript 语句;
[return 返回值]
}
- 调用函数
- 函数的调用格式
函数名();
5.3 匿名函数
- 匿名函数,即
没有函数名
的函数 - 定义匿名函数
var showFun = function(count) {
for(var i = 0; i < count; i++){
console.log('hello world');
}
}
整个语句类似赋值语句: var showFun = 变量值
调用匿名函数
showFun(10)
作用
1. 用在`绑定事件`的时候
document.onclick = function () {
alert(1);
}
============================================
2. `定时器`
setInterval(function () {
console.log(444);
},1000);
============================================
3. `立即执行函数`
函数定义完,立即被调用,这种函数叫做立即执行函数
立即执行函数往往只会执行一次
(function(){alert("hello")})();
(function(num1, num2){
console.log("num1 = "+ num1);
console.log("num2 = "+ num2);
})(100, 101);
5.4 变量作用域
- 变量作用域是指变量
有效性的范围
,与变量定义的位置
密切相关 - 作用域是从
空间角度
来描述变量的,也可以理解为可见性
- 按作用域不同,变量分
局部
变量和全局
变量 - 在函数中
使用 var 关键字
进行显式申明的变量是作为局部
变量,而没有用 var 关键字
,使用直接赋值
方式声明的是全局
变量
5.4.1 作用域问题
块级作用域
- 在其它语言中,任何一对花括号中的语句都属于一个块,在这之中定义的所有变量在
代码块外
都是不可见
的
- 在其它语言中,任何一对花括号中的语句都属于一个块,在这之中定义的所有变量在
全局作用域
- 在代码的
任何位置
都可以访问 - script标签中
函数外定义的变量
隐式全局变量
- 在代码的
局部作用域
- 在指定的代码段
范围
中可以访问 函数内部定义的变量
局部作用域中可以访问全局变量,全局作用域中不能访问局部变量
- 在指定的代码段
5.4.2 全局变量
- 定义全局变量的方式
例1:在 js 的 function 外定义一个变量
// Sex就是全局变量
var Sex ="男";
function count(){
alert(" sex is "+Sex);
}
============================================
例2: 不使用 var,直接给变量赋值,隐式的声明了全局变量 Name
// 这里 Name,Sex 都是全局变量
Name = "小明";
var Sex ="男";
function count(){
alert("name is "+Name+" sex is "+Sex);
}
============================================
例3: 使用 window.变量名定义变量,也是全局变量
// 这里 Name,Sex,old 都是全局变量
Name = "小明";
var Sex ="男";
window.old="19";
function count(){
alert("name is "+Name+" sex is "+Sex+"old is"+old);
}
-
总结
- 全局变量保存在
静态存贮区
,程序开始运行时为其分配内存
,程序结束释放内存
- 全局变量保存在
-
优点
- 全局变量可
减少变量的个数
,减少由实际参数和形式参数的数据传递带来的时间消耗
- 函数一般是通过函数参数和返回值进行输入输出,函数内部实现
相对独立
- 全局变量可
-
缺点
- 与局部变量的动态分配、动态释放相比,
生存期比较长
- 过多的全局变量会
占用较多的内存单元
- 全局变量破坏了函数的
封装性能
- 全局变量使函数的代码
可读性降低
- 函数中如果使用全局变量,那函数体内的语句就
可绕过函数参数和返回值进行存取
,这种情况破坏了函数的独立性
,使函数对全局变量产生依赖
,同时,也降低了该函数的可移植性
- 由于多个函数都可能使用全局变量,函数执行时全局变量的值可能随时发生
变化
,对于程序的查错
和调试
都非常不利
- 与局部变量的动态分配、动态释放相比,
5.4.3 局部变量
- 局部变量:就是声明在
函数体
中的变量,并且只能在当前函数体内访问
例:声明两个局部变量
function test() {
a = 30;
var b = 20;
}
说明
- 当局部变量与全局变量
同名
的时候,全局变量会被局部变量覆盖
- 当调用一个
用了该变量
的函数(该变量在此函数中无定义
)时,函数会使用全局变量
- 当局部变量与全局变量
5.4.4 变量作用域注意点
函数内部可以访问到该函数所属的外部作用域的变量(作用域链)
不使用var声明的变量是全局变量
变量退出作用域之后会销毁,全局变量关闭网页或浏览器才会销毁
5.4.5 作用域链相关
其它语言中变量`i`只能在`for`循环内部访问
1. 局部变量
for (var i = 0; i < 10; i++) {}
console.log(i);
2. 全局变量
var name = "zx";
function f() {
name = "刘德华";
}
f();
console.log(name);
局部变量, 先在函数内部的作用域找变量`name`,如果找到则使用,如果找不到去父级作用域找`name`变量
function f() {
var name = "张三";
}
f();
console.log(name);
作用域链
var color = "yellow";
function getColor() {
var anotherColor = "red";
function swapColor() {
var tmpColor = color;
color = anotherColor;
anotherColor = tmpColor;
}
swapColor();
}
getColor();
console.log(color);
结果 red
5.5 变量提升
5.5.1 变量提升概念
- 声明的变量,会把该声明提升到所在作用域的
最顶端
- 提升的是变量声明,但
不包含赋值
function fun(){
console.log(num); // undefined
var num = 20;
}
function fun(){
var num;
console.log(num); // undefined
num = 20;
}
5.5.2 函数提升
JavaScript解析器
首先会把当前作用域的函数声明提前到整个作用域的`最前面
6. JS 数组基础概念
6.1 数组简介
6.1.1 基本定义
- 数组对象用来在
单独
的变量名中存储一系列的值
,使用方便同时方便对变量的查找(遍历)
- 数组是一种数据类型, 属于
对象
,使用关键词new
来创建数组对象- 普通对象是使用
字符串
作为属性名的 - 数组时使用
数字
来作为索引
操作元素 - 数组的
存储性能
比普通对象要好
- 普通对象是使用
var arr = new Array();
6.1.2 创建数组
1. 使用 Array 构造函数
创建一个空数组
var arr1 = new Array();
创建一个长度为30的数组
var arr2 = new Array(30);
创建一个包含2个字符串的数组
var arr3 = new Array("张三","yann");
===============================================
2. 使用数组字面量
创建一个空数组
var arr4 = [];
创建一个长度为30的数组
var arr5 = [30];
创建一个包含2个字符串的数组
var arr6 = ["张三","yann"];
6.1.3 数组的赋值
1. 可以添加`任意多`的值
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
===========================================
2. 可以使用一个`整数自变量`来控制数组的`容量`
var mycars = new Array(3);
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
var mycars = new Array("Saab","Volvo","BMW");
注意
- 数字0,1,2为数组的
索引
,用来被遍历
时使用的或者用数组字面量(直接量)
方便创建数组 - 一个数组字面量是在一对方括号中包裹着一个或多个用
逗号
隔开的表达式 - 数组中的每个值都有索引,
从 0 开始
- 数字0,1,2为数组的
var empty = [];
var cars=["Saab","Volvo","BMW"];
6.1.4 数组元素的获取
- 在 JavaScript 种获取数组某一项的值都是通过
数组元素的下标
来获取
创建一个数组,然后获取数组中的某个字符
var arr=new Array("厦门","福州","漳州","龙岩","泉州");
document.write(arr[4]); //泉州
6.2 数组长度
length
属性可设置或返回
数组中元素的数目- 数组的
length
属性总是比数组中定义的最后一个元素的下标大 1
- 设置
length
属性可改变数组的大小
- 如果设置的值比其当前值
小
,数组将被截断
,其尾部的元素将丢失
- 如果设置的值比其当前值
大
,数组将增大
,新元素被添加到数组的尾部,值为undefined
- 如果设置的值比其当前值
arrayObject.length
数组的长度 = 数组名.length;
实现如何使用 length 属性返回并设置数组的长度
var arr = new Array(3)
arr[0] = "John"
arr[1] = "Andy"
arr[2] = "Wendy"
document.write("Original length: " + arr.length)
document.write("<br />")
arr.length=5
document.write("New length: " + arr.length)
结果:
Original length: 3
New length: 5
获取数组中的元素
数组中的指定元素 = 数组名[索引值];
- 数组的索引代表的是数组中的元素在数组中的位置,
从0开始
- 如果获取数组中元素没有指定索引(元素没那么多),系统不报错,而是给定值为
undefined
7. 数组常用方法
7.1 数组元素的插入
7.1.1 push()
- 功能
- 向数组的
末尾
追加一个或多个
元素,并且返回新的长度
- 向数组的
- 格式
数组对象.push(element 1,element 2,…,element n)
举例:实现在数组的尾部添加 f-z.cn 元素
var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.push("f-z") + "<br />")
document.write(arr)
结果:
George,John,Thomas
4
George,John,Thomas,f-z.cn
7.1.2 unshift()
- 功能
直接修改
原有的数组,在数组开头
添加元素,并返回新数组的长度
- 格式
数组对象.unshift(element1,element2,…,elementn);
举例:实现在数组的头部添加 f-z.cn 元素
var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.unshift("f-z") + "<br />")
document.write(arr)
结果:
George,John,Thomas
4
f-z.cn,George,John,Thomas
7.2 数组元素的删除
7.2.1 pop()
- 功能
删除
并返回
数组中的最后一个元素的值
数组长度减 1
- 如果
数组为空
,则pop()
不改变数组,并返回undefined
值
- 格式
arrayObject.pop()
举例:实现删除数组的最后一个元素
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.pop() + "<br />")
document.write(arr)
结果:
George,John,Thomas
Thomas
George,John
7.2.2 shift()
- 功能
- 把数组的
第一个元素删除
,并返回第一个元素的值
- 如果
数组为空
,那么shift()
方法将不进行任何操作,返回undefined
- 该方法
不创建新数组
,而是直接修改
原有的arrayObject
- 把数组的
- 格式
arrayObject.shift()
举例:实现删除数组的头元素
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr)
结果:
George,John,Thomas
George
John,Thomas
7.3 数组元素的拼接
7.3.1 concat()
- 功能
concat()
方法用于连接两个或多个数组
- 先
copy
一个当前数组 - 然后将接收到的
参数
添加到这个copy数组的末尾
,最后返回新构建的数组
- 先
- 在
没有
给concat()
方法传递参数
的情况下,它只是复制当前数组并返回
- 格式
arr.concat(arrayX,arrayX,arrayX...)
举例:实现数组的链接
var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7](原数组未被修改)
7.4 数组元素的分隔
7.4.1 join()
- 功能
- 把数组中的所有元素
放入一个字符串
,元素是通过指定的分隔符
进行分隔
- 指定的分隔符是
可选项
,没有指定的话默认是逗号
- 把数组中的所有元素
- 格式:
arr.join("指定的分隔符")
举例:实现数组元素的连接成字符串
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] ="fenzhen"
document.write(arr.join()+"<br/>") //没有指定分隔符
document.write(arr.join("$")) //有指定分隔符
**结果:**
George,John,Thomas,James,fenzhen
Georg$John$Thomas$James$fenzhen
7.5 数组元素的排序
7.5.1 sort()
- 功能
- 数组在原数组上进行
排序
,不生成副本
- 如果调用该方法时
没有使用参数
,将按字母顺序
(字符编码
)对数组中的元素进行排序- 要实现这点,首先应把数组的元素都转换成
字符串
(如有必要),以便进行比较
- 要实现这点,首先应把数组的元素都转换成
- 如果想按照
其他标准
进行排序,就需要提供比较函数
- 该函数要比较
两个值
,然后返回一个用于说明这两个值的相对顺序
的数字
- 该函数要比较
- 比较函数应该具有两个参数
a 和 b
,其返回值如下:- 若
a 小于 b
,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0
的值 - 若
a 等于 b
,则返回 0
- 若
a 大于 b
,则返回一个大于 0
的值
- 若
- 数组在原数组上进行
- 语法
arrayObject.sort(sortby)
举例: 创建一个数组,并按字母顺序进行排序
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(arr.sort())
结果:
George,John,Thomas,James,Adrew,Martin
Adrew,George,James,John,Martin,Thomas
===========================================
举例: 创建一个数组,并按数字大小顺序进行排序
function sortNumber(a,b) {
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
结果
10,5,40,25,1000,1
1,5,10,25,40,1000
7.5.2 reverse()
- 功能
- 用于
颠倒
数组中元素的顺序
- 不是创建新的数组,而是
改变原来的数组
- 用于
- 语法
arrayObject.reverse()
举例: 创建一个数组,然后颠倒其元素的顺序
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.reverse())
结果:
George,John,Thomas
Thomas,John,George
7.6 数组元素的选取
7.6.1 slice(begin,end)
- 功能
- 可从已有的数组中
返回选定的元素
不会修改数组
,而是返回一个子数组
- begin
必需
的参数,规定从何处开始选取
- 如果是
负数
,那规定从数组尾部
开始算起的位置 -1 指最后一个元素
,-2 指倒数第二个元素
,以此类推
- end
- 规定
从何处结束选取
- 该参数是数组片断结束处的
数组下标
- 如果没有指定该参数,那么切分的数组包含
从开始到数组结束
的所有元素 - 如果这个参数是
负数
,那它规定的是从数组尾部
开始算起的元素
- 规定
- 可从已有的数组中
- 格式
arrayObject.slice(begin,end)
举例:实现选择数组中前四个元素
//创建数组的同时对元素赋值
var arr = new Array("Html","Css","JavaScript","jQuery","bootstrap");
document.write("所选的元素为:"+"<br/>"+arr.slice(0,4));
结果:
所选的元素为:Html,Css,JavaScript,jQuery
7.7 数组元素的返回值
7.7.1 toString()
- 功能
- 可把一个逻辑值转换为
字符串
,并返回结果
- 可把一个逻辑值转换为
- 格式
arr.toString()
var arr = new Array("html","css","javascript","jQuery","Ajax","fenzhen");
document.write(arr.toString());
结果:
html,css,javascript,jQuery,Ajax,fenzhen
join()
与tostring()
的区别join()
方法将数组中所有的元素转化为字符串
,并将这些字符串用逗号隔开
,合并
成一个字符串
作为方法的结果返回- 如果调用时给定参数
string
,就将string
作为在结果字符串中分开有各个数组元素形成的字符串的分隔符
toString()
方法返回一个包含数组中所有元素,且元素之间以逗号隔开
的字符串
,该方法在将数值作为字符串
使用时强制调用,且无须显示声明此方法的调用
7.7.2 toLocaleString()
- 功能
- 把数组转换为
本地字符串
- 把数组转换为
- 格式
arrayObject.toLocaleString()
toString() 和 toLocaleString() 的区别
toString()
- 直接返回
标准
的格式
- 直接返回
toLocaleString()
- 先判断是否指定
语言环境
(locale) - 指定的话则返回
当前语言环境下的格式设置
(options)的格式化字符串 - 没有指定语言环境(locale),则返回一个使用
默认语言环境和格式设置
(options)的格式化字符串
- 先判断是否指定
7.7.3 toUTCString()
- 功能
- toUTCString() 方法可
根据世界时 (UTC) 把 Date 对象转换为字符串
,并返回结果
- toUTCString() 方法可
- 格式
dateObject.toUTCString()
使用 toUTCString() 来把今天的日期转换为(根据 UTC)字符串
var d = new Date()
document.write (d.toUTCString())
结果
Wed, 14 Aug 2019 11:15:43 GMT
-
三者的区别
toString()
函数用于将当前对象以字符串的形式返回
,它的返回值为 String类型
toUTCString()
根据世界时 (UTC)
把 Date 对象转换为字符串toLocalString()
方法把数组转换为本地字符串
,先调用每个数组元素toLocaleString() 方法,然后使用地区特定的分隔符
把生成的字符串连接起来,形成一个字符串
-
注意
- toLocaleString 只是用来
显示结果给用户
- 最好不要在脚本中用来做基本计算,因为
返回的结果是随机器不同而不同
的
- toLocaleString 只是用来
7.7.4 toSource()
- 功能
- 返回该对象的
源代码
- 只有
Firefox
浏览器支持
该方法,IE、Safari、Chrome、Opera
等浏览器均不支持
该方法
- 返回该对象的
- 格式
object.toSource()
7.7.5 valueOf()
- 功能
- valueOf() 方法返回 Array 对象的
原始值
- valueOf() 方法返回 Array 对象的
- 格式
arr.valueOf()
7.8 数组的查找
7.8.1 indexOf(value, index)
-
功能
- indexOf() 方法可返回某个指定的字符串值在字符串中
首次出现的位置
value
,需要检索的字符串值
index
,规定在字符串中开始检索的位置
,(范围:0 ~ stringObject.length - 1
),如省略该参数,则将从字符串的首字符
开始检索- indexOf() 方法对
大小写敏感
- 如果要检索的
字符串值没有出现
,则该方法返回 -1
- 比较第一个参数与数组中的每一项时,会使用
全等操作符
- indexOf() 方法可返回某个指定的字符串值在字符串中
-
格式
stringObject.indexOf(value,index)
var arr = [2,4,6,8,8,6,4,2];
console.log(arr.indexOf(4)); // 1
console.log(arr.indexOf(4,2)); // 6
console.log(arr.indexOf("4")); // -1
7.8.2 lastIndexOf(value, index)
-
功能
- lastIndexOf() 方法可返回一个指定的字符串值
最后出现的位置
,在一个字符串中的指定位置从后向前
搜索 value
,需要检索的字符串值
index
,规定在字符串中开始检索的位置
,(范围:0 ~ stringObject.length - 1
),如省略该参数,则将从字符串的最后一个字符处
开始检索- lastIndexOf() 方法对
大小写敏感
- 如果要检索的
字符串值没有出现
,则该方法返回 -1
- lastIndexOf()方法虽然是从后往前搜索,但
返回的位置是从前开始数
的 - 比较第一个参数与数组中的每一项时,会使用
全等操作符
- lastIndexOf() 方法可返回一个指定的字符串值
-
格式
stringObject.lastIndexOf(value,index)
var arr = [2,4,6,8,8,6,1,4];
console.log(arr.lastIndexOf(4)); // 7
console.log(arr.lastIndexOf(4,4)); // 1
7.9 数组的遍历
7.9.1 forEach()
- 功能
- forEach() 方法用于
调用数组的每个元素
,并将元素传递给回调函数
- forEach() 只支持
IE8
以上的浏览器 forEach()
方法需要一个函数作为参数- 浏览器会在回调函数中传递三个参数
第一个参数
,就是当前正在遍历的元素
第二个参数
,就是当前正在遍历的元素的索引
第三个参数
,就是正在遍历的数组
- forEach() 方法用于
- 格式
arr.forEach(function(value , index , obj){
console.log(value);
});
举例 数组元素累加
var sum = 0;
var numbers = [65, 44, 12, 4];
numbers.forEach(function(value, index, obj) {
myFunction(value) // 65 109 121 125
})
function myFunction(item) {
sum += item;
console.log(sum)
}
7.10 splice() 方法
- 功能
- splice() 方法向从数组中
添加/删除
项目,然后返回被删除的项目
- 该方法会
改变原始数组
- splice() 方法可
删除从 index 处开始的零个或多个元素
,并且用参数列表中声明的一个或多个值来替换
那些被删除的元素 - 如果从 arrayObject 中删除了元素,则
返回的是含有被删除的元素的数组
- splice() 方法向从数组中
- 格式
arrayObject.splice(index,howmany,item1,.....,itemX)
参数 | 描述 |
---|---|
index | 规定添加/删除项目的位置 ,使用负数 可从数组结尾处 规定位置 |
howmany | 要删除的项目数量 。如果设置为 0,则不会删除项目 |
item1, …, itemX | 向数组添加的新项目 |
1. 创建一个新数组,并向其添加一个元素
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")
结果
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin
=============================================================================
2. 删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,1,"William")
document.write(arr)
结果
George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin
=====================================================================================
3. 删除从 index 2 ("Thomas") 开始的三个元素,并添加一个新元素 ("William") 来替代被删除的元素
r arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,3,"William")
document.write(arr)
结果
George,John,Thomas,James,Adrew,Martin
George,John,William,Martin
8. 数组高级API
8.1 Math 对象
- 功能
- Math 对象属于一个工具类,用于
执行数学任务
- 不用创建对象,
直接调用
封装好的数学运算相关的属性和方法
- Math 对象属于一个工具类,用于
- 语法
var pi_value = Math.PI;
var sqrt_value = Math.sqrt(15);
- 属性
属性 | 描述 |
---|---|
Math.E | 返回算术常量 e,即自然对数的底数(约等于 2.718) |
Math.LN2 | 返回 2 的自然对数 |
Math.LN10 | 返回 10 的自然对数 |
Math.LOG2E | 返回以 2 为底的 e 的对数(约等于 1.414) |
Math.LOG10E | 返回以 10 为底的 e 的对数(约等于0.434) |
Math.PI | 返回圆周率(PI) |
Math.SQRT2 | 返回 2 的平方根 |
Math.SQRT1_2 | 返回 1/2 的平方根 |
8.1.1 Math 最值
-
功能
min()
方法可返回指定的数字中带有最小值
的数字max()
方法可返回指定的数字中带有最大值
的数字
-
语法
Math.min(n1,n2,n3,...,nX)
Math.max(n1,n2,n3,...,nX)
8.1.2 Math 数值取整
- 功能
Math.ceil()
- 执行
向上舍入
,即它总是将数值向上舍入为最接近的整数
- 执行
Math.floor()
- 执行
向下舍入
,即它总是将数值向下舍入为最接近的整数
- 执行
Math.round()
- 执行
标准舍入
,即它总是将数值四舍五入为最接近的整数
- 执行
// 对所有介于 25 和 26(不包括 26)之间的数值,Math.ceil()始终返回 26,因为它是向上舍入
alert(Math.ceil(25.9)); //取整后为 26
alert(Math.ceil(25.5)); //取整后为 26
alert(Math.ceil(25.1)); //取整后为 26
// Math.round()方法只在数值大于等于 25.5 时返回 26;否则返回 25
alert(Math.round(25.9)); //取整后为 26
alert(Math.round(25.5)); //取整后为 26
alert(Math.round(25.1)); //取整后为 25
// Math.floor()对所有介于 25 和 26(不包括 26)之间的数值都返回 25
alert(Math.floor(25.9)); //取整后为 25
alert(Math.floor(25.5)); //取整后为 25
alert(Math.floor(25.1)); //取整后为 25
8.1.3 Math 绝对值
- 功能
Math.abs(x)
返回 x 的绝对(正)值
document.write("0 的绝对值为:",Math.abs(0),"<br>");
document.write("1 的绝对值为:",Math.abs(1),"<br>");
document.write("-1 的绝对值为:",Math.abs(-1),"<br>");
结果:
0 的绝对值为:0
1 的绝对值为:1
-1 的绝对值为:1
8.1.4 Math 随机数
- 功能
Math.random()
返回介于0(包括) 与 1(不包括)
之间的随机数
,且每次返回的结果都不一样
document.write(Math.random())
**结果:**
0.9466723923
8.1.5 Math 平方根
- 功能
Math.sqrt(x)
返回 x 的平方根
- 其中参数“x”是
必须
的,若参数小于 0
,则返回 NaN
例:返回几个数的平方根
var a=Math.sqrt(0); // 0
var b=Math.sqrt(1); // 1
var c=Math.sqrt(9); // 3
var d=Math.sqrt(0.64); // 0.8
var e=Math.sqrt(-9); // NaN
8.1.6 Math 幂运算
- 功能
Math.pow(x, y)
的返回值是x 的 y 次幂
- 如果结果是
虚数或负数
,则该方法将返回NaN
- 如果由于
指数过大而引起浮点溢出
,则该方法将返回Infinity
例:把 pow() 运用到不同的数字组合上
document.write(Math.pow(0,0) + "<br />") // 1
document.write(Math.pow(0,1) + "<br />") // 0
document.write(Math.pow(1,1) + "<br />") // 1
document.write(Math.pow(1,10) + "<br />") // 1
document.write(Math.pow(2,3) + "<br />") // 8
document.write(Math.pow(-2,3) + "<br />") // -8
document.write(Math.pow(2,4) + "<br />") // 16
document.write(Math.pow(-2,4) + "<br />") // 16
8.2 map()
- 功能
- “映射”,对数组中的每一项运行给定函数,
返回每次函数调用的结果组成的数组
- “映射”,对数组中的每一项运行给定函数,
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]
8.3 filter()
- 功能
- “过滤”功能,数组中的每一项运行给定函数,
返回满足过滤条件组成的数组
- “过滤”功能,数组中的每一项运行给定函数,
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
});
console.log(arr2); //[1, 4, 7, 8, 9, 10]
8.4 every()
- 功能
- 判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回
true
- 判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
});
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
});
console.log(arr3); // false
8.5 some()
- 功能
- 判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回
true
- 判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
});
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
});
console.log(arr3); // false
8.6 数组方法练习
8.6.1 数组去重
去除数组中重复的部分
暴力法
var arr = [12,3,3,3,4,6,3,5,6,43,8,9]
// 外层循环
for(var i = 0 ; i < arr.length-1 ; i++){
// 内层循环
for(var j = i + 1 ; j < arr.length ; j++){
if(arr[i] == arr[j]){
arr.splice(j,1)
j--
}
}
}
alert(arr)
8.6.2 猜数字
给出随机数范围,猜数字
var randomNum, guessNum, min=1, max=100, count=0;
// 1. 产生一个随机数 Math.random()
randomNum = Math.floor(100*Math.random()) + 1; // [1-100]
// 2. 不确定的次数,接受用户输入的数字 promot(),使用死循环
while (true) {
guessNum = prompt('请输入你猜的数字:('+min + '-' + max + ')');
if (isNaN(guessNum)) { // 判断是否为数字
alert('请输入数字!');
continue; // 中止循环,进入下一次循环
}
if (guessNum > max || guessNum < min) { // 判断数字范围是否合理
alert('请输入合法的数字!')
continue;
}
if(guessNum > randomNum){
max = guessNum;
}
if (guessNum < randomNum){
min = guessNum;
}
count++; // 次数加一
if (guessNum == randomNum) { // 比较判断
alert('恭喜你猜对了,一共猜了'+count+'次'); // 显示结果 alert()
break; // 结束游戏,退出死循环
}
}
8.6.3 排队取号
模拟排队取号流程
var users = [] // 创建一个空数组,存放用户
// 用户增加
function take() {
// 针对第一个用户
if ( users.length == 0 ) {
users.push(1)
} else {
// 取出当前数组中最后一个元素的值,加1作为新用户的好码
users.push(users[users.length-1] + 1)
}
alert(users)
}
// 用户减少
function invoice() {
if ( users.lenth == 0 ) {
alert('目前没有客户排队等待')
} else {
users.shift(); // 队伍中第一个出队
alert(users)
}
}
8.6.4 抽奖系统
随机抽奖,直到最后一位全部抽完
var names = ['tom', 'jack', 'mary', 'alex', 'mike']
while (names.length > 0) { // 知道最后一个人抽完
var index = Math.floor(Math.random()*names.length) // 确定抽奖人数
alert(names[index]) // 中奖人的位置
names.splice(index, 1) // 删除中奖人的位置
}
9. 字符串概念
9.1 字符串定义
- JavaScript 字符串用于
存储
和处理
文本 - 字符串可以是
插入到引号中的任何字符
(可以使用单引号或双引号
)字符串中的引号不要与字符串的引号相同
- 在字符串
添加转义字符
要使用引号
- 可以使用
索引位置
来访问字符串中的每个字符 (字符串的索引从 0 开始
)
10. 字符串操作
10.1 获取字符串
10.1.1 直接索引字符串
- 在 javascript 中,
字符串可被当做数组来处理
,所以用数组下标的方式来访问单个字符
var str="hello world";
console.log(str[0]); //输出 h
10.1.2 charAt()
- 功能
- 返回字符串中
指定下标(位置)
的字符串 index
必须是整数
(0、1、2……)
- 返回字符串中
- 格式
string.charAt(index)
var str = "HELLO WORLD";
str.charAt(0); // 返回 H
10.1.3 charCodeAt()
- 功能
- 返回字符串中指定索引的字符
unicode 编码
- 返回字符串中指定索引的字符
- 格式
string.charAt(index)
var str = "HELLO WORLD";
str.charCodeAt(0); // 返回 72
10.1.4 数组下标 和 charAt() 方式的不同
-
超出范围的返回值不同
- 使用
string[index]
的方式,对于超出字index
范围的,会返回undefined
- 使用
charAt(index)
的方式,对于超出范围的会返回一个空的字符串
- 使用
-
兼容性
问题string[index]
的方式在IE6~8
下会返回undefined
, 也就是IE6~8
不兼容此方法charAt(index)
经测试,在IE6~8
下也能够正常返回值
10.2 获取字符串的位置
10.2.1 indexOf()
- 功能
- 返回字符串中指定文本
首次出现的索引(位置)
- 返回字符串中指定文本
- 格式
string.indexOf(str)
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China"); // 17
10.2.2 lastIndexOf()
- 功能
- 返回指定文本在字符串中
最后一次
出现的索引
- 返回指定文本在字符串中
- 格式
string.lastIndexOf(str)
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China"); // 51
10.3 字符串的连接
10.3.1 concat()
- 功能
- 用于
连接两个或多个字符串
格式 - 该方法
没有改变原有字符串
,但是会返回
连接两个或多个字符串新字符串
- concat() 方法将把
所有参数转换成字符串
,然后按顺序连接到字符串 stringObject 的尾部
,并返回连接后的字符串
- 用于
- 格式
stringObject.concat(stringX,stringX,...,stringX)
举例:实现 Hello 和 world! 两段字符串的连接
function myFunction(){
var txt1 = "Hello ";
var txt2 = "world!";
var n=txt1.concat(txt2);
document.getElementById("demo").innerHTML=n;
}
结果:
Hello World!
10.3.2 +
举例:实现两个字符串的连接
var arr01 = "hello";
var arr02 = "world";
console.log(arr01 + arr02); // helloworld
10.4 字符串的分隔
10.4.1 split()
- 功能
- split() 方法用于把一个字符串
分割
成字符串数组
str参数
,从该参数指定的地方
分割 stringObjectlen参数
,该参数可指定返回的数组的最大长度
- 如果设置了该参数,返回的子串不会
多于
这个参数指定的数组 - 如果没有设置该参数,整个字符串都会被分割,
不考虑它的长度
- 如果设置了该参数,返回的子串不会
- 该数组是通过在 str
指定的边界处
将字符串 stringObject 分割成子串创建的返回的数组中的字串不包括 str 自身
- 如果把
空字符串 ("")
用作 str,那么 stringObject 中的每个字符
之间都会被分割
- split() 方法用于把一个字符串
- 格式
stringObject.split(str,len)
var str="How are you doing today?"
document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))
结果
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you
10.5 字符串的截取
10.5.1 substr()
- 功能
- substr() 方法可在字符串中
抽取从 start 下标开始的指定数目的字符
- start 为要抽取的子串的
起始下标
,必须是数值
- 如果是
负数
,那么该参数声明从字符串的尾部
开始算起的位置 -1 指字符串中最后一个字符,-2 指倒数第二个字符
,以此类推
- 如果是
- length 为子串中的字符数,必须是
数值
- 如果
省略
了该参数,那么返回从 stringObject 的开始位置到结尾的字串
- 如果
- substr() 方法可在字符串中
- 格式
stringObject.substr(start,length)
var str="Hello world!"
document.write(str.substr(3,7))
结果
lo worl
10.5.2 substring()
- 功能
- substring() 方法用于
提取字符串中介于两个指定下标之间的字符
- 返回一个
新的字符串
,其内容是从 start 处到stop-1 处的所有字符
,其长度为 stop 减 start
- 返回一个
- start 一个
非负的整数
,规定要提取的子串的第一个字符在 stringObject 中的位置
- stop 一个
非负的整数
,比要提取的子串的最后一个字符在 stringObject 中的位置多 1
- 如果
省略
该参数,那么返回的子串会一直到字符串的结尾
- 如果
- 如果参数
start 与 stop 相等
,那么该方法返回的就是一个空串
(即长度为 0的字符串
) - 如果
start 比 stop 大
,那么该方法在提取子串之前会先交换这两个参数
- substring() 方法用于
- 格式
stringObject.substring(start,stop)
举例:使用 substring() 从字符串中提取一些字符
var str="Hello world!"
document.write(str.substring(3))
结果:
lo world!
=========================================
举例:带两个参数的字符截取
var str="Hello world!"
document.write(str.substring(3,7))
结果:
lo w
10.5.3 slice()
- 功能
- slice() 方法可
提取字符串的某个部分
,并以新的字符串返回被提取的部分
- start 为要抽取的片断的
起始下标
- 如果是
负数
,则该参数规定的是从字符串的尾部
开始算起的位置 -1 指字符串的最后一个字符,-2 指倒数第二个字符
,以此类推
- 如果是
- end 为要抽取的片段的
结尾的下标
- 若
未指定此参数
,则要提取的子串包括 start 到原字符串结尾的字符串 - 如果该参数是
负数
,那么它规定的是从字符串的尾部
开始算起的位置
- 若
- slice() 方法可
- 格式
stringObject.slice(start,end)
var str="Hello happy world!"
document.write(str.slice(6))
结果
happy world!
=====================================
var str="Hellohappyworld!"
document.write(str.slice(6,11))
结果
appyw
10.6 字符串的大小写
10.6.1 toLowerCase()
- 功能
- 用于把字符串转换为
小写
- 用于把字符串转换为
- 格式
string.toLowerCase()
var str="Hello World!"
console.log(str.toLowerCase())
结果
hello world!
10.6.2 toUpperCase()
- 功能
- 用于把字符串转换为
大写
- 用于把字符串转换为
- 格式
string.toUpperCase()
将字符串中的所有字符都换成小写或将字符串中所有字符都换成大写
var txt="Hello World!";
document.write(txt.toLowerCase() + "<br>");
document.write(txt.toUpperCase());
结果:
hello world!
HELLO WORLD!
10.7 字符串的内容查找
10.7.1 match()
- 功能
- match() 方法可在字符串内
检索指定的值
,或找到一个或多个
正则表达式的匹配
- match() 方法可在字符串内
- 格式
string.match(regexp)
- 说明
-
match() 方法将检索字符串 String Object,找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志
-
如果regexp
没有标志
,那 match() 方法就只能在 stringObject 中执行一次匹配
-
如果没有找到任何匹配的文本,
match() 将返回 null
。否则,它将返回一个数组
,其中存放了与它找到的匹配文本有关的信息 -
match 也是在目标字串对象中
寻找与关键词匹配与否
的一个方法,它的强大功能在于通过关键词的规则创建可以实现复杂搜寻功能
,非常灵活
-
不建立规则前提下, match 可当作 search来使用,语法也一样,不同的是,它返回的是
关键词自身(若匹配)和 null(若不匹配)
这没有关系,如果只为了检测匹配。显然,这不是它存在于javascript 世界中的理由,它定有不同于 search 的特色,即通过规则创建完成实现通盘匹配
在 "Hello world!" 中进行不同的检索
var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))
结果
world
null
null
world!
===========================================================
使用全局匹配的正则表达式来检索字符串中的所有数字
var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g))
结果
1,2,3
10.8 字符串的位置查找
10.8.1 search()
- 功能
- search() 方法用于检索字符串中
指定的字符串
,或检索与正则表达式相匹配
的子字符串 - search 在一个字符串对象查找关键词(规范表达式,regular expression)
- 若匹配则返回关键词在目标字串中
第一次出现的位置
序列,如不匹配,返回-1
- search() 对
大小写敏感
- 若匹配则返回关键词在目标字串中
- search 方法只关心有无匹配,一旦找到匹配,就提供返回值,
立刻中断查找的执行
- 当只需要
验证有无匹配的操作
时,用 search 既简单又高效
- search() 方法用于检索字符串中
- 格式
stringObject.search(regexp)
检索 "W3School"
var str="Visit W3School!"
document.write(str.search(/W3School/))
结果
6
10.8.2 indexOf()
- 功能
- indexOf() 方法可
返回某个指定的字符串值在字符串中首次出现的位置
,如果没有找到匹配的字符串则返回 -1
- 其中 star 是可选参数, 规定在字符串中
开始检索的位置
- 它的合法取值是
0 到 stringObject.length - 1
- 如
省略
该参数,则将从字符串的首字符开始检索
- 它的合法取值是
- indexOf 是
区分大小写
- indexOf() 方法可
- 格式
string.indexOf(searchvalue,star)
在 "Hello world!" 字符串内进行不同的检索
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))
结果
0
-1
6
10.8.3 lastIndexOf()
- 功能
- lastIndexOf() 方法可返回一个指定的字符串值
最后出现的位置
,在一个字符串中的指定位置从后向前搜索
- searchvalue 规定
需检索的字符串值
- fromindex 规定在字符串中
开始检索的位置
- 它的合法取值是
0 到 stringObject.length - 1
- 如
省略
该参数,则将从字符串的最后一个字符处开始检索
- 它的合法取值是
- lastIndexOf() 方法对
大小写敏感
- 如果要检索的字符串值
没有出现
,则该方法返回 -1
- lastIndexOf() 方法可返回一个指定的字符串值
- 格式
stringObject.lastIndexOf(searchvalue,fromindex)
var str="Hello world!"
document.write(str.lastIndexOf("Hello") + "<br />")
document.write(str.lastIndexOf("World") + "<br />")
document.write(str.lastIndexOf("world"))
结果
0
-1
6
10.9 字符串的替换
10.9.1 replace()
- 功能:
- replace() 方法用于在字符串中用一些字符
替换
另一些字符,或替换
一个与正则表达式匹配的子串 - 该方法
不会改变原始字符串
- searchvalue: 规定子字符串或
要替换的
模式的 RegExp 对象- 如果该值是一个字符串,则将它作为要检索的
直接量文本
模式,而不是首先被转换
为 RegExp 对象
- 如果该值是一个字符串,则将它作为要检索的
- newvalue: 一个字符串值,规定了
替换文本或生成替换文本的函数
格式:
- replace() 方法用于在字符串中用一些字符
string.replace(searchvalue,newvalue)
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/, "W3School"))
结果
Visit W3School!
10.10 字符串练习
- 验证用户上传图片文件的格式类型,不是jpg格式时提示错误
function validJpg(inputFile){
var fileName = inputFile.value //获取上传选中的文件名
alert(fileName)
//验证"C:\fakepath\jsServer.zip",后缀名必须是jpg,否则不允许上传
var index = fileName.lastIndexOf('.') // 获取.最后一次出现的位置
var extName = fileName.substr(index+1) //获取.以后所有的字符串
if(extName.toUpperCase() == 'JPG'){ // 将字符串转换大写后比较判断
alert('图片格式正确')
}else{
alert('图片格式错误')
inputFile.value = null
}
}
11. 日期对象
11.1 日期的使用场景
- 显示
发布时间
- 在线
时钟
,日历
倒计时
定时器
11.2 基本概念
11.2.1 时区
- 时区(Time Zone)是地球上的区域使用
同一个时间定义
11.2.2 时间戳
- 时间戳,一个能表示一份数据在某个特定时间之前已经
存在的、 完整的、 可验证
的数据 - 通常是一个字符序列,
唯一
地标识某一刻的时间
11.3 日期对象的定义与使用
11.3.1 new Date()
1. 创建一个日期对象
objDate 是自定义的日期实例名称,后面是创建一个 Date 对象,Date 后面的括号里放参数
var objDate=new Date([arguments list]);
=====================================================================================
2. 参数的形式主要有以下 3 种
2.1 new Date("month dd yyyy hh:mm:ss");
hh:mm:ss 可选(不选的话就是默认的开始时间),而且前三项的顺序可随意,甚至各字段后面可以加逗号
2.2 new Date(yyyy,mth,dd,hh,mm,ss);
除了前两个字段(年、月字段)外,其余的都是可选的(不选的话就默认为开始的),不过,此处顺序最好别随意变换
2.3 new Date(ms);
参数表示的是需要创建的时间和 GMT 时间 1970 年 1 月 1 日之间相差的毫秒数
- 总结:各种函数的含义如下
函数 | 含义 |
---|---|
month | 用英文表示月份名称,从 January 到 December |
mth | 用整数表示月份,从 0(1月)到 11(12月) |
dd | 表示一个月中的第几天,从 1 到 31 |
yyyy | 四位数表示的年份 |
hh | 小时数,从 0(午夜)到 23(晚 11 点) |
mm | 分钟数,从 0 到 59 的整数 |
ss | 秒数,从 0 到 59 的整数 |
ms | 毫秒数,为大于等于 0 的整数 |
- 注意
- JavaScript 的时间是
调用用户系统的时间
,记得先将系统时间调为正确的 - 如果需要
标准时间
,需要用服务器的时间
- JavaScript 的时间是
11.4 获取日期
11.4.1 getFullYear()
- 功能
- getFullYear() 方法可
返回一个表示年份的 4 位数字
,包括世纪值在内的完整年份
,而不是两位数的缩写形式 - getFullYear() 方法以
绝对数字的形式返回年份值
- getFullYear() 和 getYear() 区别就是前者
不会出现浏览器兼容性问题
,而后者会因浏览器不同出现不同的结果
- getFullYear() 方法可
var d = new Date();
document.write(d.getFullYear());
11.4.2 getMonth()
- 功能
- getMonth() 方法可
返回表示月份的数字
- 是使用
本地时间
,而且返回值是 0(一月) 到 11(十二月) 之间
的一个整数
- getMonth() 方法可
var d = new Date();
document.write(d.getMonth());
11.4.3 getDate()
- 功能
- getDate() 方法可返回月份的某一天,返回对象所指的月份中的某一天,
使用本地时间
- 返回值是
1 ~ 31 之间的一个整数
- 返回的结果由运行该程序的
日期
有关,只要是当前的号数就是正确的
- getDate() 方法可返回月份的某一天,返回对象所指的月份中的某一天,
var d = new Date()
document.write(d.getDate())
11.4.4 getHours()
- 功能
- 返回 Date 对象的
小时 (0 ~ 23)
- 返回 Date 对象的
var d = new Date();
var n = d.getHours();
document.write(n);
11.4.5 getMinutes()
- 功能
- 依据当地时间返回时间的
分钟数
- 依据当地时间返回时间的
var d = new Date();
var n = d.getMinutes();
11.4.6 getMilliseconds()
- 功能
- 根据当地时间返回时间的
毫秒
- 根据当地时间返回时间的
var d = new Date();
var n = d.getMilliseconds();
11.4.7 getDay()
- 功能
- getDay() 方法可返回表示
星期的某一天
的数字 - 返回值是
0(周日) 到 6(周六)
之间的一个整数
- getDay() 方法可返回表示
var d=new Date();
document.write(d.getDay());
11.5 设置时间
11.5.1 setFullYear
- 功能
- setFullYear() 方法用于
设置年份
- 参数
year 是必须有
的,表示年份的四位整数,用本地时间表示
- setFullYear() 方法用于
var d = new Date();
d.setFullYear(1992);
document.write(d);
结果为:
Sun Aug 16 1992 10:02:59 GMT+0800 (中国标准时间)
11.5.2 setMonth()
- 功能
- setMonth() 方法用于
设置月份
- 参数
month 是必须的
,表示月份数值,该值介于0(一月) ~ 11(十二月)
之间
- setMonth() 方法用于
var d = new Date();
d.setMonth(0);
document.write(d);
11.5.3 setDate()
- 功能
- setDate() 方法用于
设置一个月的某一天
- 参数是必须有的,表示一个月中的一天的一个数值(
1 ~ 31
)
- setDate() 方法用于
var d = new Date();
d.setDate(15);
document.write(d);
11.5.4 setHours()
- 功能
- setHours() 方法用于设置
指定的时间
的小时字段
- 参数
hour 是必须的
,表示小时的数值
,介于0(午夜)~ 23(晚上 11点)
之间,以本地时间为准
- setHours() 方法用于设置
var d = new Date();
d.setHours(15);
document.write(d);
11.5.5 setMinutes()
- 功能
- setMinutes() 方法用于设置
指定时间的分钟
字段,同样用于设置秒数与毫秒数
- 参数
min 是必须有的
,它表示分钟的数值
,介于0 ~ 59
之间,以本地时间为准
- setMinutes() 方法用于设置
var d = new Date();
d.setMinutes(17);
document.write(d);
11.5.6. setSeconds()
- 功能
- setSeconds()方法用于设置
指定时间的秒
的字段 - 参数
sec 是必须的
,它表示秒的数值
,该值是介于0 ~ 59
之间的整数
- setSeconds()方法用于设置
var d = new Date();
d.setSeconds(17);
document.write(d);
11.6 日期对象练习
11.6.1 计算时间差
计算当前时间距离武汉赏樱花的时间
var day = new Date(); // 当前标准时间
var Wuhan = new Date('2020-01-23 10:00:00'); // 武汉赏樱花时间
var daylength = (day - Wuhan) / 1000; // 时间差(毫秒转秒)
var date = Math.floor(daylength / 3600 / 24); // 天数
var hour = Math.floor(daylength / 3600) % 24; // 小时数
var min = Math.floor(daylength / 60) % 60; // 分钟数
var second = Math.floor(daylength % 60) // 秒数
alert(date + '天' + hour + '小时' + min + '分' + second + '秒')
12. arguments 对象
12.1 函数调用
- 函数的
上下文对象 this
- 封装
实参的对象 arguments
12.2 arguments 对象
- arguments 对象实际上是所在函数的一个
内置类数组对象
- 每个函数都有一个 arguments 属性,表示函数的
实参集合
- 实参是重点,就是
执行函数时实际传入的参数的集合
- arguments 不是数组而是一个
对象
,但它和数组很相似,所以通常称为类数组对象
,以后看到类数组其实就表示 arguments - arguments 对象
不能显式的创建
,只有在函数开始时才可用
- 实参是重点,就是
- arguments 还有属性
callee
,length
和迭代器 Symbol
arguments.length 为函数实参个数
,可以用arguments[length]
显示调用参数
- arguments 对象可以
检测参数个数
,模拟函数重载
12.3 arguments 对象实例
arguments对象:可以在函数内访问所有的参数,实参
function f1(){
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}
f1(12,23,45); //12 34 45
在正常的模式下,arguments对象可以在运行的时候进行修改
function f2(a,b){
arguments[0] = 10;
arguments[1] = 20;
return a + b;
}
console.log(f2(4,6)); //30
在严格的模式下,arguments对象在运行的时候不可以修改,修改arguments对象不会影响到实际的函数参数
function f3(a,b){
'use strict'; // 'use strict' 是开启严格模式
arguments[0] = 10;
arguments[1] = 20;
return a + b;
}
console.log(f3(3,6)); //9
通过arguments对象的length属性,可以判断实参的个数
function f4(){
console.log(arguments.length);
}
f4(2,3,4,5); //4
f4(1); //1
f4(); //0
arguments是一个对象,不是数组,转换为数组可以采用 slice 和 逐一填入新数组
var arr = Array.prototype.slice.call(arguments);
console.log(typeof arr);
var arr2 = [];
for(var i = 0; i<arguments.length;i++){
arr2.push(arguments[i]);
}
console.log(typeof arr2);
arguments的callee属性可以返回对应的原函数,达到调用自身函数的效果,但是在严格模式中是不适用的
var f5 = function(){
console.log(arguments.callee===f5); //true
console.log(arguments.callee===f6); //false
}
var f6;
f5(); //返回原函数,调用自身
12.4 arguments 应用
arguments.callee为引用函数自身。我们可以借用arguments.length可以来查看实参和形参的个数是否一致
function add(a, b) {
var realLen = arguments.length;
console.log("realLen:", arguments.length);
var len = add.length;
console.log("len:", add.length);
if (realLen == len) {
console.log('实参和形参个数一致');
} else {
console.log('实参和形参个数不一致');
}
};
add(11,22,33,44,66);
借用arguments.callee来让匿名函数实现递归
var sum = function(n) {
if(n == 1) {
return 1;
} else {
return n + arguments.callee(n-1);
}
}
console.log("sum =", sum(5));
编写一个函数求传入的若干个数字(不能用数组显示传入)的和
function add() {
var len = arguments.length;
var sum = 0;
for (var i = 0; i < len; ++i) {
sum += arguments[i];
}
return sum;
};
add(11,22,33,44,66);
13. JavaScript 事件
13.1 事件处理机制
13.1.1 什么是事件
- 事件是文档或者浏览器窗口中发生的一些
特定交互方式
- JavaScript 创建动态页面,事件是可以被 JavaScript
侦测
到的行为 - 网页中的
每个元素
都可以产生某些可以触发 JavaScript 函数的事件
- JavaScript 创建动态页面,事件是可以被 JavaScript
- 事件可以
提高网页的交互性
- 事件可以是
浏览器行为
,也可以是用户行为
- 事件通常与
函数
一起使用,当事件发生时执行函数
13.1.2 事件处理机制模型
事件源对象
- 事件源对象是指与事件相关的
页面文档
以及元素对象
- 事件源对象是指与事件相关的
事件名
- 事件的名称,注意
on前缀
- 事件的名称,注意
事件处理程序
- 事件处理程序是指
事件发生时执行的函数
- 采用
具名
或匿名
函数
- 事件处理程序是指
13.1.3 事件的绑定
行内绑定
<input type="button" value="行内绑定" onclick="clickMe()">
<script>
function clickMe(){
alert('我是行内绑定的事件')
}
</script>
动态绑定
<input type="button" value="动态绑定" id="btnBind">
<script>
var btn = document.getElementById('btnBind') // 获取事件源
// 绑定事件,给事件源对象的时间名指定一个处理程序,通常使用匿名函数方式
// 同名事件会覆盖
btn.onclick = function(){
alert('我是动态绑定的事件') // 被覆盖
}
btn.onclick = function(){
alert('我是动态绑定的后续事件')
}
</script>
事件监听
<input type="button" value="事件监听" id="btnEventListener">
<script>
//事件监听,同名事件会累加
var btnEvent = document.getElementById('btnEventListener')
btnEvent.addEventListener('click',function(){
alert('我是事件监听的事件!')
})
btnEvent.addEventListener('click',function(){
alert('我是事件监听的后续事件!')
})
</script>
13.2 鼠标事件
鼠标事件
属性 | 描述 |
---|---|
onclick | 当用户点击某个对象时调用的事件句柄 |
oncontextmenu | 在用户点击鼠标右键打开上下文菜单是触发 |
ondblick | 当用户双击某个对象时调用事件句柄 |
onmousedown | 鼠标按钮被按下 |
onmouseenter | 当鼠标指针移动到元素上时触发 |
onmouseleave | 鼠标指针移出元素是触发 |
onmousemove | 鼠标被移动 |
onmouseover | 鼠标移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
onmouseup | 鼠标按键被松开 |
13.2.1 鼠标点击事件
- 常用的鼠标点击事件
onclick、onmousedown 和 onmouseup
执行顺序
是onmousedown->onmouseup->onclick
- 如果只是在元素上按了鼠标,但是不松开按键,
onclick 和 onmouseup
都不会被触发
- 如果只是在元素上按了鼠标,但是不松开按键,
为一个 div 添加鼠标点击事件、鼠标按键按下事件、鼠标按键松开事件
<div class="box" id="box"></div>
<script>
window.onload = function(){
var box = document.getElementById('box');
box.onmousedown = mousedown;
box.onclick = click;
box.onmouseup = mouseup;
function mousedown(){
this.innerHTML = this.innerHTML+"触发鼠标按下事件<br>";
}
function click(){
this.innerHTML = this.innerHTML+"触发鼠标点击事件<br><br>";
}
function mouseup(){
this.innerHTML = this.innerHTML+"触发鼠标松开事件<br>";
}
}
</script>
13.2.2 鼠标移入移出事件
- 鼠标的移入移出事件
mouseover 和 mouseout
- 这两个通常是连在一起使用的,可以通过该事件实现
放大镜效果
通过鼠标移入、移出事件向元素中添加内容
<div class="box" id="box"></div>
<script>
window.onload = function(){
var box = document.getElementById('box');
box.onmouseover = mouseover;
box.onmouseout = mouseout;
function mouseover(){
this.innerHTML = this.innerHTML+"触发鼠标移入事件<br>";
}
function mouseout(){
this.innerHTML = this.innerHTML+"触发鼠标移出事件<br><br>";
}
}
</script>
13.3 键盘事件
- 键盘事件
onkeydown、onkeypress、onkeyup
- 这三个键盘事件的执行顺序是:
onkeydown → onkeypress → onkeyup
属性 | 描述 |
---|---|
onkeydown | 某个键盘按键被按下 |
onkeypress | 某个键盘按键被按下并松开 |
onkeyup | 某个键盘事件松开 |
13.3.1 onkeydown 事件
- 在输入框中按下
任意键
,都会调用函数,函数内执行弹出警告框的代码
举例: 为一个输入框设定 onkeydown 事件
<input type="text" id="input" onkeydown="keydown()">
13.3.2 onkeypress 事件
- onkeypress 事件只在按下键盘的
任一“字符键”(如 A~Z、数字键)
时触发,单独按下“功能键”(如 F1~F12、Ctrl 键、Shift 键、Alt 键等)
不会触发
举例: 通过 onkeypress 事件弹出警告框
<input type="text" id="input" onkeypress="keypress()">
13.3.3 onkeyup 事件
- 在 JavaScript 中,
onkeyup
事件是在键盘的某个键被按下之后松开的一瞬间
触发的事件- 用onkeyup
提取value
的话,可以提取到已经输入的内容
- 如果是
onkeydown 和 onkeypress
都只会提取到按下按键之前的内容
- 用onkeyup
举例: 通过 onkeyup 事件改变元素的内容
<input type="text" id="input" onkeyup="keyup()">
13.4 表单事件
- 表单事件
属性 | 描述 |
---|---|
onblur | 元素失去焦点是触发 |
onchange | 该事件在表单元素的内容是触发(<input>,<keygen>,<select>和 <textarea> ) |
onfocus | 元素获取焦点是触发 |
onfocusin | 元素即将获取焦点是触发 |
onfocusout | 元素即将失去焦点是触发 |
oninput | 元素获取用户输入时触发 |
onresert | 表单重置是触发 |
onsearch | 用户向搜索域输入文本是触发(<input="search"> ) |
onselect | 用户选取文本时触发(<input>和<textarea> ) |
onsubmit | 表单提交时触发 |
13.4.1 onchange 事件
-
功能
- onchange 事件会在
域的内容改变
时发生 - onchange 事件也可用于
单选框与复选框改变
后触发的事件
- onchange 事件会在
-
onchange 事件的
触发步骤
- 当 input
获得焦点
的时候,系统储存当前值
- 当 input
失去焦点
的时候,判断
当前值是否和之前的储存值相同,如果不同则触发 onchange 事件(非 IE 浏览器可以通过回车
来判断) - 如果只是输入内容,并没有按回车键或者离开输入框,onchange 不会触发
- 当 input
举例: 当输入框中的内容改变时,将输入的小写字母转换成大写字母
<form>输入需要转换的字符串
<input type="text" id="input" onchange="func()">
</form>
<p>当输入框失去焦点的时候,函数被触发,小写字母转换成大写字母</p>
<script>
function func(){
var x=document.getElementById("input");
console.log(x.value);
x.value=x.value.toUpperCase();
console.log(x.value);
}
</script>
13.4.2 onsubmit 事件
功能
- onsubmit 属性只在
<form>
表单中使用 - onsubmit 事件是当表单提交时进行相关 js 操作的一个事件
- onsubmit 事件会在表单中的
确认按钮被点击时发生
- onsubmit 属性只在
注意点
- 当该事件触发的函数中
返回 false
时,表单就不会被提交 - 如果需要页面跳转的话,只需要
将返回值改为 true
就可以了,当返回值是 false 时,表单不会被提交
- 当该事件触发的函数中
语法
onsubmit="return 函数名()"
举例: 事件触发的函数返回 false,看页面会不会跳转
<form action="http://www.f-z" onsubmit="return func()">
<input type="text" >
<input type="submit" value="提交">
</form>
<script>
function func() {
alert("触发 onsubmit 事件");
return false;
}
</script>
13.4.3 onfocus 事件和 onblur 事件
功能
- onfocus 事件在对象
获得焦点
时发生 - onblur 事件刚好相反,在
对象失去焦点
时发生
- onfocus 事件在对象
- 说明
- onblur 经常用于 Javascript 验证代码,一般用于
表单输入框
- onfocus 通常用于
<input>
,<select>
, 和<a>
- onblur 经常用于 Javascript 验证代码,一般用于
举例: 当输入框获得焦点的时候改变输入框的颜色,当输入框失去焦点的时候验 证内容是否为空,并把输入框的颜色改成白色
<form>
<input id="input" type="text" onfocus="func(this)" onblur="check(this)">
</form>
<script>
function func(x) {
x.style.backgroundColor ="yellow";
}
function check(x){
x.style.backgroundColor ="#fff"
if(x.value==""){
alert("内容不能为空"); }
}
</script>
13.5. 浏览器事件
13.5.1 onload 事件
功能
- onload 事件会在
页面或图像加载完成后立即发生
- onload 通常用于
<body>
元素,在页面完全载入后(包括图片、css 文件等)执行脚本代码
- onload 事件会在
举例: 页面加载完成后弹出警告框
<body onload="func()">
<script>
function func() {
alert("页面加载完成");
}
</script>
</body>
说明: 当 body 标签中的内容加载完成后调用函数名为 func 的函数
13.5.2 onresize 事件
功能
- onresize 事件会在
窗口或框架被调整大小
时发生
- onresize 事件会在
语法
window.onresize=function(){SomeJavaScriptCode};
参数 | 描述 |
---|---|
SomeJavaScriptCode | 必需。规定该事件发生时执行的 JavaScript |
举例: 实现当浏览器被重置大小时执行 Javascript 代码
<head>
<meta charset="utf-8"> <title>分针网</title>
<script>
function myFunction(){
var w=window.outerWidth;
var h=window.outerHeight;
var txt="窗口大小: 宽度=" + w + ", 高度=" + h;
document.getElementById("demo").innerHTML=txt;
}
</script>
</head>
<body onresize="myFunction()">
<p>尝试调整浏览器的窗口</p>
<p id="demo"> </p>
<p>注意:该例子在 IE8 或更早版本下可能不工作,IE8 或更早的版本不支持 window 对象的 outerWidth/outerHeight 属性</p>
</body>
解释: 当按住鼠标该表浏览器窗口大小的时候 js 代码宽度(w)跟高度(h)会自动改变
14. 总结
- 由于之前整理的笔记内容比较无序杂乱,所以整理一下,分段发布笔记内容
更多推荐
JavaScript 基础笔记
发布评论