JavaScript函数和BOM

简介: JavaScript函数和BOM

一、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());


目录
相关文章
|
26天前
|
JavaScript 前端开发
获取JavaScript时间戳函数的5种方法
获取JavaScript时间戳函数的5种方法
18 0
|
26天前
|
JavaScript
在js中如何将数组传递到函数呢?
在js中如何将数组传递到函数呢?
|
28天前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
11 0
|
22天前
|
JavaScript
js惰性函数
js惰性函数
9 0
|
22天前
|
自然语言处理 JavaScript 前端开发
超越函数界限:探索JavaScript函数的无限可能
JavaScript中的函数是一种重要的编程概念,它允许我们封装可重用的代码块,并在需要时进行调用。本文将深入介绍JavaScript函数的各个方面,包括函数定义和调用、参数和返回值、作用域和闭包、高阶函数以及常见的函数应用场景。
|
24天前
|
前端开发 JavaScript Java
前端(JavaScript)------函数与对象
前端(JavaScript)------函数与对象
47 0
|
25天前
|
JavaScript 前端开发
什么是 JavaScript 的匿名自执行函数
什么是 JavaScript 的匿名自执行函数
17 0
|
26天前
|
JavaScript 前端开发
js定义函数的三种方式
js定义函数的三种方式
7 0
|
28天前
|
前端开发 JavaScript 开发者
深入探讨JavaScript函数(二)
深入探讨JavaScript函数
35 2
|
28天前
|
JavaScript 前端开发
深入探讨JavaScript函数(一)
深入探讨JavaScript函数
38 0

相关产品

  • 云迁移中心