函数和BOM编程（JS）

柔光的暖阳◎ 2024-03-25 16:47 70阅读 0赞

### 一、JavaScript函数 ###

#### 1、概述 ####

函数可以把代码封装起来，可以重复条用，完成特定的代码，JavaScript调用function关键字定义，例：

function h(){
        }

#### 2、常见函数 ####

##### 1）eval 函数 #####

`ecal`用于计算一个字符串，并用作代码运行

eval("1+1");//返回4

##### 2）parseInt 函数 #####

`parseInt（变量名）`从字符串提取整数；如果字符串第一个不是数字，返回null，遇到非数字停止提取。

##### 3）parseFloat 函数 #####

`parseFloat（变量名）`从字符串提取小数；如果字符串第一个不是数字，返回null，遇到非数字停止提取。

##### 4）inNaN 函数 #####

`isNaN`将一个数据类型自动转换为**Number** 如果是NaN就返回**true**，如果不是的就是**false**；如果是一个**数字**就得到**false**。

#### 3、自定义函数 ####

##### 1）声明函数 #####

function 函数名（）{
        
    代码，函数体
    }
    //调用
    函数名（）；

##### 2）函数参数 #####

function 函数名（参数1，参数2....）{
        }
    //调用
    函数名（参数1，参数2....）;

##### 3)return 返回值 #####

> 函数执行完毕后，只完成里面的代码，我么如果要函数产生的值，就要用到返回值。

`return`会终止函数并返回一个值，返回最后一个值；如果没有return 则会返回`undefined`

function 函数名（）{
        
    return 123;
    }

##### 4） 不定参数传递 #####

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()`

##### 5)函数中调用函数 #####

function test1(){
        
        console.log('test1');
    }
    
    function test2(){
        
        test();
        console.log('test2');
    }
    
    test2();

##### 6) 匿名函数 #####

function(){
        }

**调用匿名函数：**  
用小括号的方法实现函数的自调用，注意，这种调用方法只能调用一次

(function(){
        
        console.log('hello');
    })();

还可以将匿名函数赋值给一个变量，当给这个变量加上() 的时候，就相当于调用了这个函数

f = function (x, y) {
        
        return x + y;
    };
    fn(1, 2);

##### 7）把函数当参数 #####

var f1 = function () {
        
        return 100;
    };
    var f2 = function (fun) {
        
        console.log(f1());
    };
    f2(f1);

##### 8) 函数的调用方式 #####

*  直接调用

function a(){
        }
    a();

*  函数内调用函数方式

function a(){
        }
    function b(){
        
        a();
    }

*  事件属性调用

function a(){
        }
    <button onclick = "a();">点击</button>

*  匿名函数通过变量调用

var sb = function(){
        }
    console.log(sb);

##### 9）内置函数对象 #####

var a= new Function('num1', 'num2', 'return num1 + num2');
    a(1,2)

### 二、BOM编程 ###

#### 1、BOM介绍 ####

> BOM（Browser Object Model）即**浏览器对象模型**，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

#### 2、BOM的构成 ####

> BOM 比 DOM 更大，它包含 DOM。

`window` 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；  
`document` 对象，文档对象；  
`location` 对象，浏览器当前URL信息；  
`navigator` 对象，浏览器本身信息；  
`screen` 对象，客户端屏幕信息；  
`history` 对象，浏览器访问历史信息；

#### 3、window ####

**window 对象是浏览器的顶级对象**它具有双重角色。

它是 JS 访问浏览器窗口的一个接口。

它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

> 在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。

##### 1）窗口加载事件 #####

> 在javascript的执行机制中，代码的执行是按照从上往下的顺序执行的，所以如果我们要给一个按钮添加点击事件，只能先设置按钮，然后获得按钮在进行操作

<body>
        <button>点击</button>
        <script>
            var button = document.querySelector('button');
            button.onclick = function(){
          
                alert('您刚点击了一下！')
            }
        </script>
    </body>

> 如果我们想要把绑定的点击事件放置到页面前面，很明显是无法操作的。那应该怎么办呢？这个时候就可以通过我们的窗口加载事件来完成。

`window.onload` 就是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

window.onload = function(){
        }
    //或者 
    window.addEventListener("load",function(){
        });

##### 2） open()和close() #####

###### open() ######

**`open()` 方法可以查找一个已经存在或者新建的浏览器窗口。**

window.open([URL], [窗口名称], [参数字符串])

参数说明：  
**URL**：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。  
**窗口名称**：可选参数，被打开窗口的名称。  
（1）该名称由字母、数字和下划线字符组成。  
（2）“\_top”、“\_blank”、"\_self"具有特殊意义的名称。  
\_blank：在新窗口显示目标网页  
\_self：在当前窗口显示目标网页  
\_top：框架网页中在上部窗口中显示目标网页  
（3）相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。  
（4）name 不能包含有空格。  
**参数字符串**：可选参数，设置窗口参数，各参数用逗号隔开。

###### close() ######

> `close`关闭窗口

window.close();//关闭本窗口
    <窗口对象>.close();//关闭指定窗口

##### 3）定时器 #####

*  setTimeout
 *  setInterval
 *  clearInterval
 *  clearTimeout

###### （1）setTimeout() 定时器 ######

window.setTimeout(调用函数 [,延迟的毫秒数]);
    //1-window 可以省略
    //2-这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名（）’三种形式
    //3-延迟的毫秒数省略默认为 0，如果写必须是毫秒
    //4-因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

###### （2） 停止 setTimeout() 定时器 ######

window.clearTimeout(timeoutID)// 取消了先前通过调用 setTimeout() 建立的定时器，里面的参数就是定时器的标识符

###### （3）setInterval() 定时器 ######

window.setInterval(回调函数 ,间隔毫秒数);// 重复调用一个函数，每个这个时间，就去调用一次回调函数

###### （4） 停止 setInterval() 定时器 ######

window.clearInterval(intervalID)// 取消了先前调用 setInterval() 建立的定时器，里面的参数就是定时器标识符

#### 4 location ####

> window 对象给我们提供了一个 location 属性用于获取或设置窗体 URL，并且可以用于解析 URL因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象

##### 1） location 对象属性及方法 #####

`location.href`：获取或者设置整个 URL  
`location.reload()`：重新加载当前页面，相当于刷新，如果参数为 true，强制刷新

#### 5、history ####

> 与浏览器的历史记录进行交互，该对象包含用户访问过的 URL

`back()`：可以后退  
`forward()` ： 前进功能  
`go(n)` ：前进后退功能，参数如果是1，前进1个页面，如果是-1，后退一个页面

### 三、内置对象 ###

#### 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) === 左闭右开区间

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

#### 3、字符串函数 ####

> **包装对象**  
> 字符串、数字、布尔值这三种原始类型的值，为什么会有对象调用方法？这是因为 JS 引擎会自动将原始类型的值转换为包装对象，使用之后会立即销毁。
> 
>  *  String 对象
>  *  Number 对象
>  *  Boolen 对象

##### 1）indexOf(), lastIndexOf() 查找字符位置 #####

> 和数组类似，可以将字符串也看做数组，第一个字符索引为0。  
> 返回值：  
> 查找的字符串 `searchValue` 的第一次出现的索引，如果没有找到，则返回 `-1`。

##### 2）concat() 拼接字符串 #####

> 将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。

var str1 = "a";
    var str2 = "b";
    var str3 = "c";
    var str4 = str1.concat(str2, str3);
    console.log(str4);
    
    // 输出结果
    abc

##### 3）substr() 按长度截取字符串 #####

substr(start, length);  // 从start索引位置开始，length 为取的个数，不输入 length，截取到末尾

##### 4）slice() 截取字符串 #####

slice(start, end);  // 从 start 位置开始，截取到 end 位置（不包括end）。不输入 end 默认截取到结尾

> 如果是负数索引，从 -1 开始计数

##### 5）substring() 截取字符串 #####

> `substring` 提取从 indexStart 到 indexEnd（不包括）之间的字符。slice() 用法与 substring()用法类似，

*  `slice()` 方法也可以使用在数组中，并且支持负数索引
 *  `substring()` 只可以在字符串中使用，不支持负数索引

##### 6）replace() 替换字符串 #####

> `replace()` 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

##### 7）toUpperCase(), toLowerCase() 大小写转换 #####

console.log("aBc".toUpperCase());//ABC
    console.log("Abc".toLowerCase());//abc

[上一张：JavaScript 基础入门][JavaScript]  
[下一章：DOM编程基础（JS）][DOM_JS]

[JavaScript]: https://blog.csdn.net/weixin_74383330/article/details/129850983
[DOM_JS]: https://blog.csdn.net/weixin_74383330/article/details/129484458