目录
1.6.4 停止 setInterval() 定时器window.clearInterval(intervalID)
indexOf(), lastIndexOf() 查找字符位置
slice() 截取字符串
toUpperCase(), toLowerCase() 大小写转换
一、 函 数 概 述
- 函数可以把代码封装起来,并且可以重复调用,完成特定功能的代码块
- 一个 JavaScript 函数用
function
关键字定义,后面跟着函数名和圆括号。 - 函数:系统函数和自定义函数
1.常见的函数
- eval
- parseInt
- parseFloat
- isNaN
1.1 eval
-
javascript中eval函数的作用是用于计算一个字符串,并将其作为脚本代码执行。
eval(string);
eval("x=10;y=20;document.write(x*y)")//返回200
document.write(eval("2+2"))//返回4
var x=10
document.write(eval(x+17))//返回27
1.2 parseInt
parseInt(变量名);
-
作用
:从一个字符串提取整数 -
提取规则
:如果字符串第一个字符不是数字,就会返回NaN,它会遇到非数字就停止提取。
1.3 parseFloat
parseFloat(变量名);
-
作用
:从一个字符串提取小数 -
提取规则
:如果字符串第一个字符不是数字,就会返回NaN,它如果遇到除第一个以外的非数字就会停止提取。
1.4 isNaN
-
如果是NaN就返回true,如果不是的就是false
-
作用
:先将一个变量的数据类型自动的转换为Number 如果是NaN就会得到true,如果是一个数字就得到false。
2. 自定义函数
2.1 声明函数
// 声明函数
function 函数名(){
// 函数内部代码,又称为函数体
}
// 调用函数
函数名();
-
案例:将1-100累加封装成函数
function sum(){
var sum = 0;
for(var i=1; i<=100; i++){
sum = sum+i;
}
console.log(sum);
}
sum();
2.2 函数参数
function 函数名(形参1, 形参2){
// 函数体
}
函数名(实参1, 实参2);
函数调用参数实例:
function cook(arg){
console.log(arg);
}
cook('鸡你太美');
-
如果调用函数的时候,实参个数大于形参,则只会以形参个数为准
-
如果调用函数的时候,实参个数小于形参,未使用的形参值为 undefined
2.3 return 返回值
- 函数执行完毕后,只完成里边的代码,如果我们想要获取到函数运行中产生的数据,就需要用到返回值。
function getResult(){
return '晚上来CSGO';
}
console.log(getResult());
- return 会终止函数并只会返回一个值,返回的是最后一个值
- 如果函数没有 return 则会返回 undefined
2.4 不定参数传递
function test(){
console.log(arguments);
}
test('小','飞','侠','来','咯');
输出结果为:
-
Arguments(5) 0: "小" 1: "飞" 2: "侠" 3: "来" 4: "咯" callee: ƒ test() length: 5 Symbol(Symbol.iterator): ƒ values() [[Prototype]]: Object
伪数组:
-
具有数组 length 属性
-
按照索引方式进行存储
-
它没有真正数组的一些方法: pop(), push()
2.5 函数中调用函数
function test1(){
console.log('test1');
}
function test2(){
test();
console.log('test2');
}
test2();
匿名函数:匿名函数没有名字
function(){
// 代码块
}
调用匿名函数:用小括号的方法实现函数的自调用,注意,这种调用方法只能调用一次
(function(){
console.log('花姑凉');
})();
还可以将匿名函数赋值给一个变量,当给这个变量加上() 的时候,就相当于调用了这个函数
fn = function (x, y) {
return x + y;
};
console.log(fn(5, 5));
2.6 将函数当做参数
var f1 = function () {
return '爱你一万年';
};
var f2 = function (fun) {
console.log(f1());
};
f2(f1);
// 输出结果
爱你一万年
2.7 函数的调用方式
- 直接调用方式
- 函数内调用函数方式
- 事件属性调用
- 匿名函数通过变量调用
//直接调用方式
function a(){}
a();//函数内调用函数方式
function a(){}
function b(){
a();
}//事件属性调用
function a(){}
<button onclick = "a();">点击</button>//匿名函数通过变量调用
var sb = function(){
}
console.log(sb);
2.8 内置函数对象
var calSum3 = new Function('num1', 'num2', 'return num1 + num2');
var a= calSum3(1,2);
console.log(a); // 输出结果为 3 ;
二、B O M 编 程
1.1 BOM基本介绍
-
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
-
BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
-
BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。
1.2 BOM 的构成
BOM 比 DOM 更大,它包含 DOM。
-
window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性;
-
document 对象,文档对象;
-
location 对象,浏览器当前URL信息;
-
navigator 对象,浏览器本身信息;
-
screen 对象,客户端屏幕信息;
-
history 对象,浏览器访问历史信息;
1.3 window
- window 对象是浏览器的顶级对象,它具有双重角色。
- 它是 JS 访问浏览器窗口的一个接口。
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
1.4 窗口加载事件
在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 则没有限制。
1.5 open()和close()
- open() 方法可以查找一个已经存在或者新建的浏览器窗口。
window.open([URL], [窗口名称], [参数字符串])
/*
参数说明:
1.URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
2.窗口名称:可选参数,被打开窗口的名称。
(1)该名称由字母、数字和下划线字符组成。
(2)"_top"、"_blank"、"_self"具有特殊意义的名称。
_blank:在新窗口显示目标网页
_self:在当前窗口显示目标网页
_top:框架网页中在上部窗口中显示目标网页
(3)相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
(4)name 不能包含有空格。
参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。
*/
-
close()关闭窗口
window.close();//关闭本窗口
<窗口对象>.close();//关闭指定窗口
<script type="text/javascript">
var mywin=window.open('http://www.baidu.com'); //将新打的窗口对象,存储在变量mywin中
mywin.close();
</script>
1.6 定时器
-
setTimeout
-
setInterval
-
clearInterval
-
clearTimeout
1.6.1 setTimeout() 定时器
window.setTimeout(调用函数 [,延迟的毫秒数]);
1-window 可以省略
2-延迟的毫秒数省略默认为 0,如果写必须是毫秒
3-因为定时器可能有很多,所以我们经常给定时器赋值一个标识符4-这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名()’三种形式
1.6.2 停止 setTimeout() 定时器
window.clearTimeout(timeoutID)
1-window 可以省略
2-里面的参数就是定时器的标识符
1.6.3 setInterval() 定时器
window.setInterval(回调函数 [,间隔毫秒数]);
1-window 可以省略
2-这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名()’三种形式
3-.间隔的毫秒数省略默认是 0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数
4-因为定时器可能有很多,所以我们经常给定时器赋值一个标识符
5-第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次
1.6.4 停止 setInterval() 定时器window.clearInterval(intervalID)
1-window 可以省略
2-里面的参数就是定时器标识符
1.7 location 和 history
-
window 对象给我们提供了一个 location 属性用于获取或设置窗体 URL,并且可以用于解析 URL因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象
location对象属性和方法 | 返回值 |
---|---|
location.href | 获取或者设置整个 URL |
location.reload() | 重新加载当前页面,相当于刷新,如果参数为 true,强制刷新 |
-
与浏览器的历史记录进行交互,该对象包含用户访问过的 URL
history对象方法 | 作用 |
---|---|
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();// 获得总毫秒数从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"); // 字符串方式传入年-月-日
3.字符串对象
包装对象
- String 对象
- Number 对象
- Boolen 对象
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));
}
concat() 拼接字符串
将一个或多个字符串与原字符串连接合并,形成一个新的字符串并返回。
var str1 = "小";
var str2 = "飞";
var str3 = "棍";
var str4 = str1.concat(str2, str3);
console.log(str4);// 输出结果
小飞棍
substr() 按长度截取字符串
substr(start, length); // 从start索引位置开始,length 为取的个数,不输入 length,截取到末尾
var anyString = "大大滴花姑凉";
console.log(anyString.substr(3,6));// 输出结果为:
花姑凉
slice() 截取字符串
slice(start, end); // 从 start 位置开始,截取到 end 位置(不包括end)。不输入 end 默认截取到结尾
var str= "大大滴花姑凉";
console.log(str.slice(3, 6));// 输出结果
花姑凉
substring() 截取字符串
substring 提取从 indexStart 到 indexEnd(不包括)之间的字符。slice() 用法与 substring() 用法类似。
-
slice() 方法也可以使用在数组中,并且支持负数索引
-
substring() 只可以在字符串中使用,不支持负数索引
var str= "小飞棍来咯";
console.log(str.substring(-2,3));// 输出结果
小飞棍
- 如果
indexStart
等于indexEnd
,substring
返回一个空字符串。 - 如果省略
indexEnd
,substring
提取字符一直到字符串末尾。 - 如果任一参数小于 0 或为 NaN,则被当作 0。
- 如果任一参数大于
stringName.length
,则被当作stringName.length
。 - 如果
indexStart
大于indexEnd
,则substring
的执行效果就像两个参数调换了一样。
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