javascript 函数
一、javascript函数
1.1 概述
- 函数可以把代码封装起来，并且可以重复调用，完成特定功能的代码块
- 一个 JavaScript 函数用
function关键字定义，后面跟着函数名和圆括号。
<script> // 声明函数 function 函数名(){ // 函数内部代码，又称为函数体 } // 调用函数 函数名(); </script>
- 函数：系统函数和自定义函数
1.2 常见的系统函数
- eval
- parseInt
- parseFloat
- isNaN
1.2.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.2 parseInt
parseInt(变量名);
作用：从一个字符串提取整数提取规则：如果字符串第一个字符不是数字，就会返回NaN,它会遇到非数字就停止提取。
1.2.3 parseFloat
parseFloat(变量名);
作用：从一个字符串提取小数提取规则：如果字符串第一个字符不是数字，就会返回NaN,它如果遇到除第一个以外的非数字就会停止提取。
1.2.1 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基本编程
二、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() 等。
点击跳转： JavaScript初学者基础入门
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.onload 就可以把 JS 代码写到页面元素的上方，因为 onload是等页面内容全部加载完毕，再去执行处理函数。
- window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload 为准。
- 如果使用 addEventListener 则没有限制。
2.3.2 open()和close()
open()
- 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.baidu.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()关闭窗口
window.close();//关闭本窗口 <窗口对象>.close();//关闭指定窗口
<script type="text/javascript"> var mywin=window.open('http://www.baidu.com'); //将新打的窗口对象，存储在变量mywin中 mywin.close(); </script>
