一、JavaScript函数
1.概述
- 函数可以把代码封装起来,并且可以重复调用,完成特定功能的代码块
- 一个 JavaScript 函数用`function`关键字定义,后面跟着函数名和圆括号。
- 函数:**系统函数**和**自定义函数**
2.常见的系统函数
- eval
- javascript中eval函数的作用是用于计算一个字符串,并将其作为脚本代码执行。 ```javascript eval(string) ``` ```javascript eval("x=10;y=20;document.write(x*y)")//返回200 document.write(eval("2+2"))//返回4 var x=10 document.write(eval(x+17))//返回27
- parseInt
```javascript
parseInt(变量名);
- **`作用`**:从一个字符串提取整数
- **`提取规则`**:如果字符串第一个字符不是数字,就会返回NaN,它会遇到非数字就停止提取。
- parseFloat
```javascript
parseFloat(变量名);
- **`作用`**:从一个字符串提取小数
- **`提取规则`**:如果字符串第一个字符不是数字,就会返回NaN,它如果遇到除第一个以外的非数字就会停止提取。
- isNaN
- 如果是NaN就返回true,如果不是的就是false - **`作用`**:先将一个变量的数据类型自动的转换为Number 如果是NaN就会得到true,如果是一个数字就得到false。 ```javascript document.write(isNaN(5-2)); //返回false document.write(isNaN(0)); //返回false document.write(isNaN("Hello")); //返回true
3.自定义函数
声明函数
```javascript
// 声明函数
function 函数名(){
// 函数内部代码,又称为函数体
}
//调用函数
> **例:将1~100 累加封装成函数**
>
> ```javascript
> function sum(){
> var sum = 0;
> for(var i=1; i<=100; i++){
> sum = sum+i;
> }
> console.log(sum);
> }
> sum();
> ```
函数参数
```javascript
function 函数名(形参1, 形参2){
// 函数体
}
函数名(实参1, 实参2);
> 函数调用参数实例:
>
> ~~~js
> function cook(arg){
> console.log(arg);
> }
> cook('炒米饭');
> - 如果调用函数的时候,实参个数大于形参,则只会以形参个数为准
> - 如果调用函数的时候,实参个数小于形参,未使用的形参值为 undefined
返回值
函数执行完毕后,只完成里边的代码,如果我们想要获取到函数运行中产生的数据,就需要用到返回值。
~~~js
function getResult(){
return 666;
}
console.log(getResult());
~~~- return 会终止函数并只会返回一个值,返回的是最后一个值
- 如果函数没有 return 则会返回 undefined
不定参数传递
```javascript
function test(){
console.log(arguments);
}
test(1,2,3,4,5);
// 输出结果
[1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
伪数组
> 1. 具有数组 length 属性
> 2. 按照索引方式进行存储
> 3. 它没有真正数组的一些方法: pop(), push()
函数中调用函数
```javascript function test1(){ console.log('test1'); } function test2(){ test(); console.log('test2'); } test2(); ```
匿名函数
匿名函数没有名字
~~~js
function(){
// 代码块
}
调用匿名函数
用小括号的方法实现函数的自调用,注意,这种调用方法只能调用一次
用小括号的方法实现函数的自调用,注意,这种调用方法只能调用一次 ~~~js (function(){ console.log('hello world'); })(); ~~~
还可以将匿名函数赋值给一个变量,当给这个变量加上() 的时候,就相当于调用了这个函数
~~~js fn = function (x, y) { return x + y; }; console.log(fn(1, 2));
将函数当作参数
``` var f1 = function () { return 100; }; var f2 = function (fun) { console.log(f1()); }; f2(f1); // 输出结果 100 ```
函数的调用方式
- 直接调用方式
- 函数内调用函数方式
- 事件属性调用
- 匿名函数通过变量调用
```javascript //直接调用方式 function a(){} a(); //函数内调用函数方式 function a(){} function b(){ a(); } //事件属性调用 function a(){} <button onclick = "a();">点击</button> //匿名函数通过变量调用 var sb = function(){ } console.log(sb);
内置函数对象
```javascript var calSum3 = new Function('num1', 'num2', 'return num1 + num2'); calSum3(1,2) ```
二、BOM编程
BOM基本介绍
- BOM(Browser Object Model)即**浏览器对象模型**,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
- BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
- BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。
BOM的构成
BOM 比 DOM 更大,它包含 DOM。
![image-20211208204304041](02.javascript.assets/701a10861405253bf70b2554b70242f3.png)
- window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性;
window 对象是浏览器的顶级对象,**它具有双重角色。
它是 JS 访问浏览器窗口的一个接口。
它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
> 在调用的时候可以省略 window,前面学习的对话框都属于 window 对象方法,如 alert()、prompt() 等。
#### 2.3.1 窗口加载事件
```html <body> <button>点击</button> <script> var btn = document.querySelector('button'); btn.onclick = function(){ alert('您刚点击了一下!') } </script> </body>
在javascript的执行机制中,代码的执行是按照从上往下的顺序执行的,所以如果我们要给一个按钮添加点击事件,只能先设置按钮,然后获得按钮在进行操作
- document 对象,文档对象;
- location 对象,浏览器当前URL信息;
- navigator 对象,浏览器本身信息;
- screen 对象,客户端屏幕信息;
- history 对象,浏览器访问历史信息;
open()和close()
- **open() 方法可以查找一个已经存在或者新建的浏览器窗口。**
```javascript
window.open([URL], [窗口名称], [参数字符串])
/*
参数说明:
1.URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
2.窗口名称:可选参数,被打开窗口的名称。
(1)该名称由字母、数字和下划线字符组成。
(2)"_top"、"_blank"、"_self"具有特殊意义的名称。
_blank:在新窗口显示目标网页
_self:在当前窗口显示目标网页
_top:框架网页中在上部窗口中显示目标网页
(3)相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
(4)name 不能包含有空格。
参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。
*/
```javascript //例1:打开http://www.baidu.com网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,有滚动条窗口: <script type="text/javascript"> window.open('http://www.baidu.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes') </script> //例2:打开http://www.baidu.com网页,将在新窗体中打开,宽为600,高为400,距屏顶100像素,屏左0像素。当点击按钮时,打开新窗口。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>window.open</title> <script type="text/javascript"> function Wopen(){ window.open('http://www.baodu.com','_blank','width=600,height=400,top=100,left=0'); } </script> </head> <body> <input name="button" type="button" onClick="Wopen()" value="点击我,打开新窗口!" / > </body> </html> ```
close()
close()关闭窗口
```
window.close();//关闭本窗口
<窗口对象>.close();//关闭指定窗口
```
```javascript <script type="text/javascript"> var mywin=window.open('http://www.baidu.com'); //将新打的窗口对象,存储在变量mywin中 mywin.close(); </script> ```
定时器
- setTimeout
- setInterval
- clearInterval
- clearTimeout
window.setTimeout(调用函数 [,延迟的毫秒数]);
// 该定时器在定时器到期后执行调用函数
注意:
1-window 可以省略
2-这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名()’三种形式
3-延迟的毫秒数省略默认为 0,如果写必须是毫秒
4-因为定时器可能有很多,所以我们经常给定时器赋值一个标识符
停止 setTimeout() 定时器
```
window.clearTimeout(timeoutID)
// 取消了先前通过调用 setTimeout() 建立的定时器
注意:
1-window 可以省略
2-里面的参数就是定时器的标识符
```javascript <script> setTimeout(function() { console.log('时间到了'); }, 2000); function callback() { console.log('爆炸了'); } var timer1 = setTimeout(callback, 3000); var timer2 = setTimeout(callback, 5000); // setTimeout('callback()', 3000); // 我们不提倡这个写法 </script>
> ```html > <!DOCTYPE html> > <html lang="en"> > > <head> > <meta charset="UTF-8"> > <meta name="viewport" content="width=device-width, initial-scale=1.0"> > <meta http-equiv="X-UA-Compatible" content="ie=edge"> > <title>Document</title> > </head> > > <body> > 手机号码: <input type="number"> <button>发送</button> > <script> > // 按钮点击之后,会禁用 disabled 为true > // 同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改 > // 里面秒数是有变化的,因此需要用到定时器 > // 定义一个变量,在定时器里面,不断递减 > // 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态 > var btn = document.querySelector('button'); > var time = 3; // 定义剩下的秒数 > btn.addEventListener('click', function() { > btn.disabled = true; > var timer = setInterval(function() { > if (time == 0) { > // 清除定时器和复原按钮 > clearInterval(timer); > btn.disabled = false; > btn.innerHTML = '发送'; > } else { > btn.innerHTML = '还剩下' + time + '秒'; > time--; > } > }, 1000); > }) > </script> > </body> > > </html> > ```
> **案例:发送短信验证按钮60秒等待效果**
三、内置对象
内置对象是 JS 内部已经做好的对象,方便用户调用
### 3.1 Math数学对象
console.log(Math.PI);
console.log(Math.max(1,2,3,45)); // 取多个值中的最大数
Math.min(1,2,3);
Math.floor(3.4); // 向下取整 3
Math.ceil(3.4); // 向上取整 4
Math.round(1.1); // 四舍五入
Math.abs(-3); // 取绝对值 3
Math.pow(10,2) // 10的2次方
Math.sqrt(100) // 开平方
Math.random(); // 生成0~1之间的随机小数 [0,1) === 左闭右开区间
// 生成一个区间的随机整数
function getRandom(min, max){ return Math.floor(Math.floor(Math.random() * (max - min +1)) + min; }
Date 日期对象
Date 是一个构造函数,需要使用 new 来创建对象
var date = new Date(); console.log(date); // Wed Apr 21 2021 19:34:46 GMT+0800 date.getFullYear(); // 返回当前年份 date.getMonth(); // 返回的月份小1月 date.getDate(); // 返回几号 date.getDay(); // 返回周几,周一是1,周日是0 date.getHours(); date.getMinutes(); date.getSeconds();
获得总毫秒数从1970年1月1日(时间戳)
1. date.valueOf(); 2. date.getTime();
H5 浏览器可以直接用 date 中的方法获取时间戳
var now = Date.now()
不支持 HTML5 的浏览器可以使用下面的方式获得时间戳
var now = +new Date()
获得指定日期对象
var date = new Date(1619005441955); // 传入时间戳 var date = new Date(2015, 4, 1); // 传入年、月、日(月份从0开始计数) var date = new Date("2020-5-10"); // 字符串方式传入年-月-日
例:将时间对象整理为 "2020-04-15 11:47:30"的格式```
// 2020-04-21 20:01:01 function time() { var now = new Date(); var year = now.getFullYear(); var month = now.getMonth(); var date = now.getDate(); var hour = now.getHours(); var min = now.getMinutes(); var sec = now.getSeconds(); // 补0仓做 month = month < 10 ? "0" + month : month; date = date < 10 ? "0" + date : date; hour = hour < 10 ? "0" + hour : hour; min = min < 10 ? "0" + min : min; sec = sec < 10 ? "0" + sec : sec; return ( "" + year + "-" + month + "-" + date + " " + hour + ":" + min + ":" + sec ); } console.log(time());