JavaScript函数和BOM-阿里云开发者社区

1.1概述

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

1.2 常见的系统函数

eval

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

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

parseInt

parseInt(变量名);

作用：从一个字符串提取整数

提取规则：如果字符串第一个字符不是数字，就会返回NaN,它会遇到非数字就停止提取。

parseFloat

parseFloat(变量名);

作用：从一个字符串提取小数

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

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 自定义函数

声明函数

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

例：将1~100 累加封装成函数

function sum(){
 var sum = 0;
 for(var i=1; i<=100; i++){
     sum = sum+i;
 }
 console.log(sum);
}
sum();

函数参数

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

如果调用函数的时候，实参个数大于形参，则只会以形参个数为准

如果调用函数的时候，实参个数小于形参，未使用的形参值为 undefined

return 返回值

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

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

return 会终止函数并只会返回一个值，返回的是最后一个值

如果函数没有 return 则会返回 undefined

不定参数传递

function test(){
    console.log(arguments);
}
test(1,2,3,4,5);
// 输出结果
[1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]

伪数组：

具有数组 length 属性

按照索引方式进行存储

它没有真正数组的一些方法： pop(), push()

函数中调用函数

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

匿名函数

匿名函数没有名字
function(){
    // 代码块
}
调用匿名函数：
用小括号的方法实现函数的自调用，注意，这种调用方法只能调用一次
(function(){
    console.log('hello world');
})();
还可以将匿名函数赋值给一个变量，当给这个变量加上() 的时候，就相当于调用了这个函数
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

函数的调用方式

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

内置函数对象

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 窗口加载事件

在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.onload 就可以把 JS 代码写到页面元素的上方，因为 onload是等页面内容全部加载完毕，再去执行处理函数。

window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。

如果使用 addEventListener 则没有限制。

2.4 open()和close()

open 打开窗口

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

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

2.5 定时器

setTimeout

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

setInterval

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

clearInterval

//停止 setInterval() 定时器
window.clearInterval(intervalID)
// 取消了先前调用 setInterval() 建立的定时器
注意:
1-window 可以省略
2-里面的参数就是定时器标识符

clearTimeout

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

案例

<!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 = 9; // 定义剩下的秒数
     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>

2.6 location

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

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

案例

<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.6 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);  // 向下取整 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;
}

// 原理：
0 ~ 100
Math.random() * 100  // 乘100提升范围

100~200
Math.random() * 100 + 100  // 加100提升基数

0~200
Math.random() * (300-100)

100~300
Math.random() * (300-100) + 100

3.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();

// 获得总毫秒数从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: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());

3.3 字符串对象

包装对象

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

String 对象
Number 对象
Boolen 对象

str = '123';
// 内部处理
var temp = new String('123');  // 实际上是将字符串对象化
str = temp;  // 然后将临时变量传递给str
temp = 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，有则+1
        o[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);
// 输出结果
w
3

concat() 拼接字符串

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

var str1 = "a";
var str2 = "b";
var str3 = "c";
var str4 = 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));
// 输出结果
Moz

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());
// 输出结果
ABC
abc

JavaScript函数和BOM

1.1概述

1.2 常见的系统函数

1.3 自定义函数

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

2.1 BOM基本介绍

2.2 BOM 的构成

2.3 窗口加载事件

2.4 open()和close()

2.5 定时器

案例

2.6 location

案例

2.6 history

三、内置对象

3.1 Math数学对象

3.2 Date 日期对象

toString()

3.3 字符串对象

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

charAt() 按索引返回字符串

concat() 拼接字符串

substr() 按长度截取字符串

slice() 截取字符串

substring() 截取字符串

replace() 替换字符串

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

看到这就点个小关注叭

感谢大家！！！

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JavaScript函数和BOM

1.1概述

1.2 常见的系统函数

1.3 自定义函数

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

2.1 BOM基本介绍

2.2 BOM 的构成

2.3 窗口加载事件

2.4 open()和close()

2.5 定时器

案例

2.6 location

案例

2.6 history

三、内置对象

3.1 Math数学对象

3.2 Date 日期对象

toString()

3.3 字符串对象

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

charAt() 按索引返回字符串

concat() 拼接字符串

substr() 按长度截取字符串

slice() 截取字符串

substring() 截取字符串

replace() 替换字符串

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

看到这就点个小关注叭

感谢大家！！！

热门文章

最新文章

相关课程

相关电子书

相关实验场景