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

一、函数

1.1概念：

将代码封装成一个方法，方便调用，可以重复使用并且完成指定的功能。
一个JavaScript函数用关键字function定义，后面接()和{}。
函数分类：系统函数和自定义函数。

1.2 常见的系统函数：

eval （是全局对象的一个函数属性）
parseInt （解析一个字符串并返回一个整数）
parseFloat （解析一个字符串并返回一个浮点数）
isNaN （函数用来确定一个值是否为NaN 。）

1.2.1 eval

作用:

在JavaScript中用于计算一个字符串，并将其作为脚本代码执行

用法

//用法示例:
  eval(String)
//案例演示：
  eval("x=200;y=200;document.write(x*y)")//结果放回200;

注：

如果你间接的使用，比如通过一个引用来调用它，而不是直接的调用。从 ECMAScript 5 起，它工作在全局作用域下，而不是局部作用域中。这就意味着，例如，下面的代码的作用声明创建一个全局函数，并且中的这些代码在执行期间不能在被调用的作用域中访问局部变量。

案例：

function test() {
  var x = 2, y = 4;
  console.log(eval('x + y'));  // 直接调用，使用本地作用域，结果是 6
  var geval = eval; // 等价于在全局作用域调用
  console.log(geval('x + y')); // 间接调用，使用全局作用域，throws ReferenceError 因为`x`未定义
  (0, eval)('x + y'); // 另一个间接调用的例子
}

建议：

eval()是一个危险的函数，它使用与调用者相同的权限执行代码。如果你用运行的字符串代码被恶意方（不怀好意的人）修改，您最终可能会在您的网页/扩展程序的权限下，在用户计算机上运行恶意代码。更重要的是，第三方代码可以看到某一个被调用时的作用域，这也有可能导致一些不同方式的攻击。相似的 Function 就不容易被攻击。

eval()通常比其他替代方法更慢，因为它必须调用 JS 解释器，而许多其他结构则可被现代 JS 引擎进行优化。

1.2.2 parseInt：

作用：

从字符串中提取整数

提取规则：

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

用法：

//用法一：
var a="1238525";
console.log(parseInt(a))//返回1238525
//用法二：
//pasrInt(String,radix);
//案例：
pasrInt("123",5)//将“123”看作5进制数，返回十进制数38=>1*5^2+2*5^1+3*5^0=38

注：

用法二的注意事项：

如果输入的以或（一个 0，后面是小写或大写的 X）开头，那么 radix 被假定为 16，字符串的其余部分被当做十六进制数去解析。string 0x 0X
如果输入的以 ""（0）开头，被假定为（八进制）或（十进制）。具体选择哪一个 radix 取决于实现。ECMAScript 5 澄清了应该使用 10 （十进制），但不是所有的浏览器都支持。因此，在使用 parseInt 时，一定要指定一个 radix。string 0 radix 8 10
如果输入的以任何其他值开头，是 (十进制)。string radix 10

1.2.3 parseFloat:

作用:

从字符串中提取小数。

提取规则：

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

3. 用法：

parseFloat(String)
//示例：
parseFloat("  3.25  ")//返回3.25
parseFloat("  314e-2  ")//返回3.14

注意事项：

如果在解析过程中遇到了正号（）、负号（ U+002D 连字符减号）、数字（-）、小数点（）、或者科学记数法中的指数（e 或 E）以外的字符，则它会忽略该字符以及之后的所有字符，返回当前已经解析到的浮点数。
第二个小数点的出现也会使解析停止（在这之前的字符都会被解析）。
参数首位和末位的空白符会被忽略。
如果参数字符串的第一个字符不能被解析成为数字，则返回NaN。

1.2.4 isNaN:

返回值：

非数字：true ; 数字：false

作用：

先将一个变量获取数据内容的数据类型自动转换成Number类型，如果是NaN则返回true,如果是一个数字则返回false。

用法：

//利用到输出语句结合使用
// alert()  console.log()  document.write()
//示例：
document.write(isNaN(321))//返回false
document.write(isNaN("hahah"))//返回true

1.3 自定义函数:

1.3.1 声明函数：

//利用function关键字
function 函数名(){
    //语法体
}
//调用函数
函数名()
//案例：计算1-100的和
function sum(){
//定义一个变量计算总和
var sum=0;
//循环遍历1-100
   for(var i=1;i<=100;i++){
    sum+=i;
}
}
//调用sum()函数
sum();

1.3.2 带参函数：

//定义方式：
function 函数名(形参1,形参2){
   //语法体
}
//案例：
function aa(name){
  console.log(name)
}
//调用
aa("张三")//返回张三

注意：

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

1.3.3 return返回值

//用法
function a(){
console.log("狗叫")
}
//输出
console.log(a())//返回狗叫

注意事项：

return 会终止函数并只会返回一个值，返回的是最后一个值
如果函数没有 return 则会返回 undefined
如果一个函数中没有使用 return 语句，则它默认返回undefined。要想返回一个特定的值，则函数必须使用 return 语句来指定一个要返回的值。(使用new关键字调用一个构造函数除外)。

1.3.4 函数的其他用法：

//1.不定参数传递
function test(){
conslole.log(arguments)
}
test(1,2,3,4);
//输出
[1,2,3,4,callee:f,Symbol(Symbol.iterator):f]
//arguments的使用方法
arguments[0]="刘智";

注：

arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引 0 处。
arguments对象不是一个数组。它类似于，但除了 length 属性和索引元素之外没有任何属性。

//2.函数中调用函数
//示例：
function text1(){
console.log("lizhi");
}
function test2(){
text1();
console.log("lz");
}
//调用
test2();//返回lizhi 和lz

//3.匿名函数
//示例：
function(){
//代码块
}
//调用：
(function(){
console.log("hello");
})();

注：

用小括号实现调用该匿名函数，该函数只能方法只能被调用一次。

//用变量接受匿名函数，通过调用变量的方式调用函数
//示例：
var a=function(x,y){
console.log(x+y);
}
console(a(3,5));//返回8

注：

通过变量的方式接受匿名函数，可以多次调用变量从而实现多次调用匿名函数、

//4.将函数作为函数参数
//定义格式：
function 函数1(){
return 100;
}
function 函数2(fun){
console.log(fun);
}
函数2(函数1());//返回函数1的返回值

//5.事件调用函数
//示例：
function a(){}
<button onclick="a();">点击</button>

//6. 内置函数对象
//用法示例：
var a=new Function("num1","num2","return num1+num2");
a(2,3);//返回5

二、BOM编程

2.1 基本介绍：

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

2.2 BOM构成：

注释：

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

2.3 window对象：

2.3.1 概念：

window 对象是浏览器的顶级对象，它具有双重角色。
它是 JS 访问浏览器窗口的一个接口。
它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

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

2.3.2 窗口加载事件：

//运用演示：
window.onload=function(){}
//或者
window.addEvenListener("load",function(){});

注意事项：

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload是等页面内容全部加载完毕，再去执行处理函数。
window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。
如果使用 addEventListener 则没有限制。

2.3.3 open()和close():

2.3.3.1 open()：

作用：查找一个存在或者新建一个的浏览器窗口。

用法：

window.open([url],[窗口名称]，[参数字符])
//参数说明：
//ulr:(可选参数)，url为要显示的网站网址或者是路径；如果该参数为空则新建的窗口不会显示任何东西。
//窗口名称：(可选参数)，该参数为打开窗口的名称。
//[参数字符串]：
//"_top"：在网页中的上部窗口显示目标网页。
//"_blank":在新窗口显示网页。
//"_self":在当前窗口显示网页。

注：

相同name的网页只能创建一个，要创建多个窗口name必须不能重复。
name不能包含空格。
其他参数：

2.3.3.2 close():

作用：关闭指定的窗口和网页。

用法：

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

2.3.4 定时器：

2.3.4.1 setTimeout()定时器：

作用：全局的 setTimeout（） 方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。

用法：

//格式1：
window.setTimeout(调用函数，[延迟的时间毫秒])
//格式2：
var timeoutID = scope.setTimeout(code[, 延迟的毫秒时间]);
//注：
//code
//这是一个可选语法，你可以使用字符串而不是function ，在毫秒之后编译和执行字符串

注意事项：

window可以省略。
这个调用函数可以直接写，或者写函数名或者采取字符串“函数名”三种形式。
延迟的毫秒时间省略的话自动默认为0，如果填写的话必须是以毫秒为单位。
计时器设置的过多的话，通常会给定时器设置一个标识符用于控制定时器的开启和关闭。

2.3.4.2 停止setTimeout()定时器

作用：关闭setTimeout()定时器。

用法：

//格式：
window.clearTimeout(timeoutID);
//注：
//timeoutID：带表定时器setTimeout的标识符。

注意事项：

window可省略。
里面的参数就是定时器的标识符。

2.3.4.3 setInterval()定时器：

作用：Window 和 Worker 接口提供的 setInterval（） 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。

用法：

//格式1：
window.setInterval(回调函数,[,延迟毫秒值])；
//格式2：
var timeoutID = scope.setInterval(code[, 延迟的毫秒时间]);
//注：
//code
//这是一个可选语法，你可以使用字符串而不是function ，在毫秒之后编译和执行字符串

注意事项：

window可以省略掉。
这个调用函数可以直接写，或者写函数名或者采取字符串“函数名”三种形式。
延迟的毫秒时间省略的话自动默认为0，如果填写的话必须是以毫秒为单位。
计时器设置的过多的话，通常会给定时器设置一个标识符用于控制定时器的开启和关闭。
和 setTimeout（）共享同一个 ID 池，并且和 clearTimeout（）在技术上是可互换使用的。但是，我们应该匹配使用和，以避免代码杂乱无章，并增强代码的可维护性。

2.4 location:

2.4.1 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>

注：location中还有其他的对象属性和方法，如下图所示：

可前往MDN网页中了解其用法

2.5 history：

2.5.1 作用：

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

2.5.2 对象方法及作用：

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

三、内置对象

3.1 Math数学对象：

//区多个值的最大数
console.log(Math.max(1,2,3,45))//返回45
//区多个值的最小数
console.log(Math.max(1,2,3,45))//返回1
//向下取整
Math.floor(3.4)//返回3
//向上取整
Math.ceil(3.4)//返回4
//四舍五入
Math.round(3.5)//返回4
//绝对值
Math.abs(-3)//返回3
//开2次方
Math.pow(10,2)//返回100
//开平方
Math.sqrt(100)//返回10
//生产[0,1)的随机小数
Math。random();

3.2 Date日期对象：

3.2.1 概念：

是一个构造函数，使用时需要用new来创建对象。

3.2.2 方法及使用：

//获取系统时间
var date =new Date();
console.log(date);
//获取当前的年份
date.getFullyear()；
//获取当前月份
date.getMonth();
//获取当前日子（当前月份的第几天）
date.getDate();
//获取星期几
date.getDay();
//获取当前时间的小时
date.getHours();
//获取当前的分钟数
date.getMinutes();
//获取毫秒值
date.getSeconds();
// 获得总毫秒数从1970年1月1日（时间戳）
date.valueOf();
date.getTime();  
// H5 浏览器可以直接用 date 中的方法获取时间戳
var now = Date.now()
// 不支持 HTML5 的浏览器可以使用下面的方式获得时间戳
var now = +new Date()

3.3 字符串对象：

3.3.1 类型：

String对象
Number对象
Boolean对象

3.3.2 方法即使用：

//ndexOf(), lastIndexOf() 查找字符位置
// str.indexOf('要查找的字符', [起始的位置])
var str = '白日依山尽';
console.log(str.indexOf('山'));
console.log(str.lastIndexOf('山'));
//charAt() 按索引返回字符串
var str = 'andy';
str.charAt(3);  // 返回index位置的字符
str.charCodeAt(3);  // 返回 index 位置的 ASCII 码
str[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));
//slice() 截取字符串
slice(start, end);  
// 从 start 位置开始，截取到 end 位置（不包括end）。不输入 end 默认截取到结尾
var anyString = "Mozilla";
console.log(anyString.slice(1, 4));

特别注意：substring() 截取字符串

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

//replace() 替换字符串
stringObject.replace(regexp/substr,replacement);

注：

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

JavaScript 02 BOM编程和函数

一、函数

1.1概念：

1.2 常见的系统函数：

1.2.1 eval

1.2.2 parseInt：

1.2.3 parseFloat:

3. 用法：

1.2.4 isNaN:

1.3 自定义函数:

1.3.1 声明函数：

1.3.2 带参函数：

1.3.3 return返回值

1.3.4 函数的其他用法：

二、BOM编程

2.1 基本介绍：

2.2 BOM构成：

2.3 window对象：

2.3.1 概念：

2.3.2 窗口加载事件：

2.3.3 open()和close():

2.3.3.1 open()：

2.3.3.2 close():

2.3.4 定时器：

2.3.4.1 setTimeout()定时器：

2.3.4.2 停止setTimeout()定时器

2.3.4.3 setInterval()定时器：

2.4 location:

2.4.1 location对象属性及方法：

2.5 history：

2.5.1 作用：

2.5.2 对象方法及作用：

三、内置对象

3.1 Math数学对象：

3.2 Date日期对象：

3.2.1 概念：

3.2.2 方法及使用：

3.3 字符串对象：

3.3.1 类型：

3.3.2 方法即使用：

热门文章

最新文章

相关课程

相关电子书

相关实验场景