javascript函数和BoM编程

简介: 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
目录
相关文章
|
1天前
|
JavaScript 前端开发
javascript箭头函数
javascript箭头函数
|
1天前
|
JavaScript 前端开发
javascript中的函数
javascript中的函数
|
1天前
|
JavaScript 小程序
微信小程序 wxml 中使用 js函数
微信小程序 wxml 中使用 js函数
5 0
|
1天前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1天前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
1天前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
1天前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式
|
1天前
|
存储 JavaScript 前端开发
编程笔记 html5&css&js 075 Javascript 常量和变量
编程笔记 html5&css&js 075 Javascript 常量和变量
|
1天前
|
JavaScript 前端开发 程序员
编程笔记 html5&css&js 074 Javascript 运算符
编程笔记 html5&css&js 074 Javascript 运算符
|
1天前
|
JavaScript 前端开发 Java
编程笔记 html5&css&js 073 JavaScript Object数据类型
编程笔记 html5&css&js 073 JavaScript Object数据类型

相关产品

  • 云迁移中心