JS中的函数和BOM
文档注释:开头两个*。写在函数上方,在调用函数时,
可以看到文档中的描述信息;
function aaa(){
}
【函数的声明及调用】
1、函数的声明格式:
function 函数名(参数1,参数2,..){
// 函数体代码
return 返回值;
}
函数的调用:
① 直接调用:函数名(参数1的值,参数2的值,..);
② 事件调用:在HTML标签中,使用事件名="函数名()"
<button onclick="saySth('hhh','red')">点击按钮,打印内容</button>
2、函数的注意事项:
① 函数名,必须要符合小驼峰法则!!(首字母小写,之后每个单词首字母大写)
② 函数名后面的()中,可以有参数,也可以没有参数。分别称为有参函数和无参函数;
③ 声明函数时的参数列表,称为形参列表,形式参数。(变量的名字)
function saySth(str,color){}
调用函数时的参数列表,称为实参列表,实际参数。(变量的赋值)
saySth("呵呵呵呵","blue");
④ 函数的形参列表个数,与实参列表个数,没有实际关联关系。
函数参数的个数,取决于实参列表。
如果实参列表的个数<形参列表,则未赋值的形参,将为Undefined。
⑤ 函数可以有返回值,使用return返回结果;
调用函数时,可以使用一个变量接收函数的返回结果。
如果函数没有返回值,则接收的结果为undefined;
function func(){
return "haha";
}
var num = func(); // num = "haha";
⑥ 函数中变量的作用域:
在函数中,使用var声明的变量,为局部变量,只能在函数内部访问;
不用var声明的变量,为全局变量,在函数外面也能访问;
函数的形参列表,默认为函数的局部变量,只能在函数内部使用。
>>>>JS中没有块级作用域的概念!!!只有函数作用域和全局作用域。
⑦ 函数的声明与函数的调用,没有先后之分。 即,可以在声明函数前,调用函数。
func();// 声明func之前调用也是可以的。
function func(){};
[匿名函数的声明使用]
1、声明一个匿名函数,直接赋值给某一个事件;
window.onload=function(){}
2、使用匿名函数表达式。将匿名函数赋值给一个变量。
声明:var func = function(){}
调用:func();
注意:使用匿名函数表达式时,函数的调用语句,必须
放在函数声明语句之后!!!!(与普通函数区别!!!)
3、自执行函数:
① !function(){}(); // 可以使用多种运算符开头,但一般用!
!function(形参列表){}(实参列表);
② (function(){}()); // 使用()将函数及函数后的括号包裹
③ (function(){})(){}; // 使用()值包裹函数部分;
三种写法的特点:
① 使用!开头,结构清晰,不容易混乱,推荐使用;
② 能够表明匿名函数与调用的()为一个整体,官方推荐使用;
③ 无法表明函数与之后的()的整体性,不推荐使用;
[函数的内部属性]
1、Auguments对象
① 作用:用于储存调用函数时的所有实参。
当我们调用函数并用实参赋值时,实际上参数列表
已经保存到arguments数组中,可以在函数中,
使用argument[n]的形式调用。n从0开始。
② arguments数组的个数,取决于实参列表,与形参无关。
但是,一旦第N个位置的形参、实参、arguments都存在时,
形参将与arguments绑定,同步变化。(即在函数中修改形参的值,
arguments也会改变,反之亦成立。)
③ arguments.callee 是arguments的重要属性。表示
arguments所在函数的引用地址:
在函数里面,可以使用arguments.callee()调用函数本身。
在函数内部,调用函数自身的写法,叫做递归。
递归分为两部分:递和归。以递归调用语句为界限,可以将函数分为
上下两部分。
递:当函数执行上半部分,遇到自身的调用语句时,继续进入内层函数,
再执行上半部分。直到执行完最内层函数。
归:当最内层函数执行完以后,再从最内层函数开始,逐渐执行
函数的下半部分。
当最外层函数执行时,遇到自身的调用语句,会进入内层函数执行,
而外层函数的后半部分暂不执行,直到最内层函数执行完以后,再逐步向外执行。
[JS代码的执行顺序问题]
JS代码在运行时,会分为两大部分,检查装载和执行阶段
检查装载阶段:会先检测代码的语法错误,进行变量、函数的声明;
执行阶段:变量的赋值、函数的调用等,都属于执行阶段。
以下列代码为例:
consoloe.log(num); // Undefined
var num = 10;
func1(); // 函数可以正常执行
function func1(){}
func2(); // 函数不能执行,打印func2时显示Undefined;
var func2 = function(){}
原因:上述代码的执行顺序为:
------------检查装载阶段-------------
var num;
function func1(){}
var func2;
-------------执行阶段---------------
consoloe.log(num);
num = 10;
func1();
func2();
func2 = function;
Screen对象
console.log(screen.width); // 屏幕宽度
console.log(screen.height); // 屏幕高度
console.log(screen.availWidth); // 可用宽度
console.log(screen.availHeight); // 可用高度=屏幕高度-底部工具栏
location对象
取到浏览器的URL地址信息;
完整的URL路径;
协议名://主机名(IP地址):端口号/文件所在路径?传递参数
(name1=value1&&name2=value2)#锚点
例如:
http://127.0.0.1:8080/wenjianjia/index.html?name=jredu#top
console.log(location.href); // 返回当前完整路径
console.log(location.protocol); // 返回协议名
console.log(location.host); // 返回主机名+端口号
console.log(location.hostname); // 返回主机名
console.log(location.port); // 返回端口号
console.log(location.pathname); // 返回文件路径
console.log(location.search); // 返回?开头的参数列表
console.log(location.hash); // 返回#开头的锚点*/
// 使用JS跳转页面
window.location = "http://www.baidu.com";*/
其他使用location提供的方法跳转页面的方式
location.assign("http://www.baidu.com");
location.replace("http://www.baidu.com");*/
function assign(){
// 加载新的文档,加载以后,可以回退。
location.assign("http://www.baidu.com");
}
function replace(){
// 使用新文档替换当前文档。替换以后,不能回退。
location.replace("http://www.baidu.com");
}
function reload(){
重新加载当前文档。刷新页面
reload():在本地刷新当前页面,相当于F5
reload(true);强制刷新,从服务器端重新加载页面,相当于Ctrl+F5
location.reload();
}
history 浏览历史
console.log(history);
console.log(history.length); // 浏览历史列表的个数
function back(){
history.back(); // 后退按钮
}
function forward(){
history.forward(); // 前进按钮
}
function go(){*/
跳转到浏览历史的任意一个页面;
0表示当前页面,-1表示后一个页面(back),1表示前一个页面(forward)
history.go(1);
}
navigator 了解即可
包含浏览器的各种系统信息。
//console.log(navigator);
检测浏览器安装的各种插件。
//console.log(navigator.plugins);
// 判断有没有插件
if(navigator.plugins[2].name == "Native Client"){
alert("有");
}else{
alert("没有");
}
// 寻找所有插件
for(var i=0; i<navigator.plugins.length;i++
alert(navigator.plugins[i].name);
}
Window对象的常用方法:
>>> 在window对象中的所有方法和属性,均可以省略window关键字。
window.alert(); --> alert(); √
1、alert():弹出一个警告提示框;
2、prompt():弹窗接收用户的输入;
3、confirm():弹出一个带有"确定""取消"按钮的对话框,点击
按钮返回true或false。
4、close():关闭当前浏览器窗口。在个别浏览器中,只能关闭在
当前脚本新打开的页面(使用超链接、window.open()等方式打开的页面)
5、open():打开一个新窗口。
参数一:新窗口的地址;
参数二:新窗口的名字,并没有卵用;
参数三:新窗口的各种属性设置,"属性1=值1,属性2=值2,属性3=值3"
6、setTimeout:设置延时执行,只会执行一次;
setIntervar:设置定时器,每隔n毫秒执行一次。
接收两个参数,需要执行的function、毫秒数;
7、clearTimeout:清除延时器;
clearIntervar:清除定时器;
使用方法:设置延时器或定时器时,可以使用变量接收定时器ID;
var id = setInterval;
调用clearInterval时,将id传入,即可清除对应的定时器;
clearInterval(id)
JS中的函数和BOM的更多相关文章
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- JS中的函数、BOM和DOM操作
一.JS中的函数 [关于注释] /** [文档注释]:开头两个*.写在函数上方,在调用函数时可以看到文档上方的描述信息. */ // 单行注释 /* 多行注释 */ 1.函数的声明及调用 (1) ...
- html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结
Day27 html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...
- JS中的函数,Array对象,for-in语句,with语句,自定义对象,Prototype
一)函数 A)JS中的函数的定义格式: function add(a,b) { var sum = a+b; document.write("两个数的和是:" + sum); // ...
- js中的函数,Date对象,Math对象和数组对象
函数就是完成某个功能的一组语句,js中的函数由关键字 function + 函数名 + 一组参数定义;函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织结构更多清晰. ...
- js中getByClass()函数
js中getByClass()函数进化史 对于js来说,我想每一个刚接触它的人都应该会抱怨:为什么没有一个通过class来获取元素的方法.尽管现在高版本的浏览器已经支持getElementsByCla ...
- node.js 中回调函数callback(转载),说的很清楚,看一遍就理解了
最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs.express 的代码就会看得一塌糊涂.比如: 复制代码 代码如下: app.use(fu ...
- 前端之js中的函数
函数 函数就是重复执行的代码片. 函数定义与执行 <script type="text/javascript"> // 函数定义 function ...
- JS中的函数节流throttle详解和优化
JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...
随机推荐
- zookeeper+dubbo简单使用
首先下载zookeeper,直接百度官网下载即可! 下载完之后,把cfg配置文件改名为zoo.cfg,如下: 在bin目录下启动zkServer即可! 项目结构: 简单讲解:首先dubbo是一个mav ...
- python3网络编程之socket
文章内容: socket介绍 socket参数介绍 流程描述 socket对象内建方法 基本socket实例 通过socket实现简单ssh并实现接收大数据 socket介绍 socket又称&quo ...
- spring boot 整合mybatis + swagger2
之前使用springMVC+spring+mybatis,总是被一些繁琐的xml配置,有时候如果配置出错,还要检查各种xml配置,偶然接触到了spring boot 后发现搭建一个web项目真的是1分 ...
- python的__init__几种方法总结
参考 __init__() 这个方法一般用于初始化一个类 但是 当实例化一个类的时候, __init__并不是第一个被调用的, 第一个被调用的是__new__ #!/usr/bin/env pytho ...
- Ubuntu超好用软件:markdown编辑器
Ubuntu上好用的markdown编辑器:typora 安装教程: sudo add-apt-repository ppa:hzwhuang/ss-qt5 sudo apt-get update s ...
- FastDFS安装和配置,整合Nginx-1.13.3
目录: 一:下载FastDFS 二:安装FastDFS 三:配置 四:整合Nginx和FastDFS FastDFS is an open source high performance distr ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第四节--仓储,服务,服务接口及依赖注入
在ABP框架中,仓储,服务,这块算是最为重要一块之一了.ABP框架提供了创建和组装模块的基础,一个模块能够依赖于另一个模块,一个程序集可看成一个模块, 一个模块可以通过一个类来定义这个模块,而给定义这 ...
- python机器学习实战(四)
python机器学习实战(三) 版权声明:本文为博主原创文章,转载请指明转载地址 www.cnblogs.com/fydeblog/p/7364317.html 前言 这篇notebook是关于机器学 ...
- 扩展Python模块系列(二)----一个简单的例子
本节使用一个简单的例子引出Python C/C++ API的详细使用方法.针对的是CPython的解释器. 目标:创建一个Python内建模块test,提供一个功能函数distance, 计算空间中两 ...
- Java入门——(3)面对对象(下)
关键词: 类的继承.final关键字.多态.接口.异常.包.访问控制 一.类的继承 1.类的继承是指在一个现有类的基础上去构建一个新的类,构建出来的新类被称作子类,现有类被称作父类,子类 ...