javascript函数和BoM编程-阿里云开发者社区

一,Javascript函数

1.1概述

函数可以把代码封装起来，并且可以重复调用，完成特定功能的代码块
一个 JavaScript 函数用function关键字定义，后面跟着函数名和圆括号。
函数：系统函数和自定义函数

1.2常见的系统函数

eval
parseInt
parseFloat
isNaN

1.2.1 eval

javascript中eval函数的作用时用于计算一个字符串，并将其作为脚本代码执行。

eval(String)eval("x=10;y=20;document.write(x*y)")//返回200document.write(eval("2+2"))//返回4var x =10document.write(eval(x+17))//返回27

1.2.2 parselnt

parselnt(变量名)：

作用：从一个字符串提取小数
提取规则：如果字符串第一个字符不是数字，就会返回NaN,它如果遇到除第一个以外的非数字就会停止提取。

1.2.3 parseFloat

parseFloat (变量名)

作用：从一个字符串提取小数
提取规则：如果字符串第一个字符不是数字，就会返回NaN,它如果遇到除第一个以外的非数字就会停止提取。

1.2.4 isNaN

如果是NaN就返回true，如果不是的就是false
作用：先将一个变量的数据类型自动的转换为Number 如果是NaN就会得到true，如果是一个数字就得到false。

document.write(isNaN(5-2)); //返回false
document.write(isNaN(0)); //返回false
document.write(isNaN("Hello")); //返回true

1.3 自定义函数

1.3.1 声明函数

// 声明函数
function 函数名(){
    // 函数内部代码，又称为函数体
}
// 调用函数
函数名();

例：将1~100 累加封装成函数function sum(){var sum = 0;for(var i=1; i<=100; i++){sum = sum+i;}console.log(sum);}sum();

1.3.2函数参数

function 函数名(形参1, 形参2){// 函数体}函数名(实参1, 实参2);

函数调用参数实例：

function cook(arg){console.log(arg);}cook('炒米饭');如果调用函数的时候，实参个数大于形参，则只会以形参个数为准如果调用函数的时候，实参个数小于形参，未使用的形参值为 undefined

1.3.3 return 返回值

函数执行完毕后，只完成里边的代码，如果我们想要获取到函数运行中产生的数据，就需要用到返回值。

function getResult(){return 666;}console.log(getResult());

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

1.3.4 不定参数传递

function test(){console.log(arguments);}test(1,2,3,4,5);
// 输出结果[1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]伪数组：具有数组 length 属性按照索引方式进行存储它没有真正数组的一些方法： pop(), push()

1.3.5函数中调用函数

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

1.3.6匿名函数

匿名函数没有名字

function(){// 代码块}

调用匿名函数：

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

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

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

fn = function (x, y) {return x + y;};console.log(fn(1, 2));

1.3.7 将函数当做参数

var f1 = function () {return 100;};var f2 = function (fun) {console.log(f1());};f2(f1);
// 输出结果100

1.3.8 函数的调用方式

直接调用方式
函数内调用函数方式
事件属性调用
匿名函数通过变量调用

//直接调用方式function a(){}a();
//函数内调用函数方式function a(){}function b(){a();}
//事件属性调用function a(){}<button onclick = "a();">点击</button>
//匿名函数通过变量调用var sb = function(){
}console.log(sb);

1.3.9 内置函数对象

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

二、BOM编程

2.1 BOM基本介绍

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

2.2 BOM 的构成

BOM 比 DOM 更大，它包含 DOM。

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

2.3 window

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

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

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

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

2.3.1 窗口加载事件

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

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

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

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

就调用的处理函数。

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

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

//例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()关闭窗口

close()close()关闭窗口

<script type="text/javascript">
   var mywin=window.open('http://www.baidu.com'); //将新打的窗口对象，存储在变量mywin中
   mywin.close();
</script>

2.3.3 定时器

setTimeout
setInterval
clearInterval
clearTimeout

2.3.3.1setTimeout() 定时器

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

2.3.3.2 停止 setTimeout() 定时器

window.clearTimeout(timeoutID)
// 取消了先前通过调用 setTimeout() 建立的定时器注意：1-window 可以省略2-里面的参数就是定时器的标识符

<script>
    setTimeout(function() {
        console.log('时间到了');
    }, 2000);
    function callback() {
        console.log('爆炸了');
    }
    var timer1 = setTimeout(callback, 3000);
    var timer2 = setTimeout(callback, 5000);
    // setTimeout('callback()', 3000); // 我们不提倡这个写法
</script>

2.3.3.3 setInterval() 定时器

window.setInterval(回调函数 [,间隔毫秒数]);
// 重复调用一个函数，每个这个时间，就去调用一次回调函数
注意：
1-window 可以省略
2-这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名（）’三种形式
3-.间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
4-因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
5-第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次

2.3.3.4 停止 setInterval() 定时器

window.clearInterval(intervalID)// 取消了先前调用 setInterval() 建立的定时器注意:1-window 可以省略2-里面的参数就是定时器标识符 案例：发送短信验证按钮60秒等待效果<!DOCTYPE html><htmllang="en">
<head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head>
<body>手机号码： <inputtype="number"><button>发送</button><script>// 按钮点击之后，会禁用 disabled 为true// 同时按钮里面的内容会变化，注意 button 里面的内容通过 innerHTML修改// 里面秒数是有变化的，因此需要用到定时器// 定义一个变量，在定时器里面，不断递减// 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态varbtn=document.querySelector('button');vartime=3; // 定义剩下的秒数btn.addEventListener('click', function() {btn.disabled=true;vartimer=setInterval(function() {if (time==0) {// 清除定时器和复原按钮clearInterval(timer);btn.disabled=false;btn.innerHTML='发送';} else {btn.innerHTML='还剩下'+time+'秒';time--;}}, 1000);})</script></body>
</html>

2.4 location

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

2.4.1 location 对象属性及方法

location对象属性和方法	返回值
location.href	获取或者设置整个url
location.reload()	重新加载当前页面，相当与刷新，如果参数为true,强制刷新

2.4.2 案例

<div>5秒后会自动跳转页面</div><script>var time = 5;var div = document.querySelector('div');setInterval(function() {if (time == 0) {location.href = '#';} else {div.innerText = time + '秒后会自动跳转页面'time--;}
}, 1000)</script>

2.5 history

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

history对象方法	作用
back()	可以后退
forward()	前进功能
go(n)	前进后退功能，参数如果是1，前进1个页面，如果是-1，后退一个页面

三、内置对象

内置对象是 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); // 向下取整 3Math.ceil(3.4); // 向上取整 4Math.round(1.1); // 四舍五入Math.abs(-3); // 取绝对值 3Math.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;}
// 原理：0 ~ 100Math.random() * 100 // 乘100提升范围
100~200Math.random() * 100 + 100 // 加100提升基数
0~200Math.random() * (300-100)
100~300Math.random() * (300-100) + 100

3.2 Date 日期对象

Date 是一个构造函数，需要使用 new 来创建对象var date = new Date();console.log(date); // Wed Apr 21 2021 19:34:46 GMT+0800date.getFullYear(); // 返回当前年份date.getMonth(); // 返回的月份小1月date.getDate(); // 返回几号date.getDay(); // 返回周几，周一是1，周日是0date.getHours();date.getMinutes();date.getSeconds();
// 获得总毫秒数从1970年1月1日（时间戳）date.valueOf();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"); // 字符串方式传入年-月-日

转成字符串

toString()

例：将时间对象整理为 "2020-04-15 11:47:30"的格式

// 2020-04-21 20:01:01function 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());

3.3 字符串对象

包装对象

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

String 对象
Number 对象
Boolen 对象

str = '123';
// 内部处理var temp = new String('123'); // 实际上是将字符串对象化str = temp; // 然后将临时变量传递给strtemp = null; // 销毁临时变量str.length(); // 这时候 str 已经是对象了，可以调用方法

字符串不可变

str = '1';str = '2';

看似 str 变量从1变成了2，其实并不是 str 的变量改变，而是系统在内存中又开辟了一个空间存放数值2，然后将 str 的地址引向数据，但是原数据1还是存放在内存当中的。

indexOf(), lastIndexOf() 查找字符位置

和数组类似，可以将字符串也看做数组，第一个字符索引为0。

返回值：

查找的字符串 searchValue 的第一次出现的索引，如果没有找到，则返回 -1。

// str.indexOf('要查找的字符', [起始的位置])var str = '白日依山尽';console.log(str.indexOf('山'));console.log(str.lastIndexOf('山'));

例：求某个字符出现的次数和位置

var str = "adfajiwerasdfjklweasdfawer";var index = str.indexOf("a");var num = 0;while (index != -1) {console.log(index);num++;index = str.indexOf("a", index + 1);}console.log(num);

charAt() 按索引返回字符串

var str = 'andy';str.charAt(3); // 返回index位置的字符str.charCodeAt(3); // 返回 index 位置的 ASCII 码str[3]; // 获取指定位置处字符

例：遍历字符串中字符

var str = "andy";for (var i = 0; i < str.length; i++) {console.log(str.charAt(i));}

例：统计字符串中出现次数最多的字符

var str = "tqwerasdfwerqiuyasdfggyweasdf";var o = {};for (var i = 0; i < str.length; i++) {var chars = str.charAt(i); // 通过 charAt() 获取字符串每个字符if (o[chars]) {// 判断如果没有该字符属性，则初始化1，有则+1o[chars]++;} else {o[chars] = 1;}}
var max = 0;var max_str = "";for (var k in o) {// k 是键名// o[k] 是值if (o[k] > max) {max = o[k];max_str = k;}}console.log(max_str);console.log(max);
// 输出结果w3

concat() 拼接字符串

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

varstr1="a";varstr2="b";varstr3="c";varstr4=str1.concat(str2, str3);console.log(str4);

// 输出结果

abc

substr() 按长度截取字符串

语法：

substr(start, length); // 从start索引位置开始，length 为取的个数，不输入 length，截取到末尾var anyString = "Mozilla";console.log(anyString.substr(1,4));
// 输出结果ozil

slice() 截取字符串

语法：

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

var anyString = "Mozilla";
console.log(anyString.slice(1, 4));
// 输出结果
ozi

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

substring() 截取字符串

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

slice() 方法也可以使用在数组中，并且支持负数索引
substring() 只可以在字符串中使用，不支持负数索引
如果 indexStart 等于 indexEnd，substring 返回一个空字符串。
如果省略 indexEnd，substring 提取字符一直到字符串末尾。
如果任一参数小于 0 或为 NaN，则被当作 0。
如果任一参数大于 stringName.length，则被当作 stringName.length。
如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样。

语法：

str.substring(indexStart[, indexEnd])var anyString = "Mozilla";console.log(anyString.substring(-2,3));
// 输出结果MozstringObject.replace(regexp/substr,replacement)

replace() 替换字符串

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

语法：

stringObject.replace(regexp/substr,replacement)

字符串替换只替换第一个匹配项目
批量替换需要使用正则

列

var anyString = "Hello World";console.log(anyString.replace("World", "Javascript"));
// 输出Hello Javascript

toUpperCase(), toLowerCase() 大小写转换

console.log("aBc".toUpperCase());console.log("Abc".toLowerCase());
// 输出结果ABCabc

javascript函数和BoM编程