函数及事件

127 阅读4分钟

函数:是一个工具,被封装好可以重复执行的一段代码块

函数分为: 系统函数:已经封装一段代码,需要的时候调用

函数的声明:

方式一:

function fn(){
document.write"你好")
}

方式二


var test=function(){
console.log1)}
test()

函数的参数:

形参:形式参数 不需要var 遵循变量的命名规则 不需要声明形参的数据类型(js是一门弱类型语言) 当没有传实参时,默认值是undefined,不会报错

实参:实际参数,在调用的时候传入的数据,可以是任何

形参个数和实参个体数不一致的情况下: 当实体参数>形参个数 多余的实参会被丢弃 当实参个数=形参个数 正常使用

当实参个数不确定时,需要用到类数组对象

arguments (用于实参个数不确定时)

arguments[0] 获取对应的位置实参,通过下标获取 arguments.length 实参个数,也就是类数组长度 下标起始位为0 ,结束位为arguments.length-1 一般不用,因为参数在传递的过程中没有形参名称 通常在使用有参数时,都喜欢参数的使用是有确定含义的**

封装一个三行四列表格

function fn(){
var str="<table>"
for(var i=1;i<=3;i++){
str+="</tr>"

for(var j=1;j<4;j++){
str+="<td>1-1</td>"
}
str+="</tr>"
}
str+="</table>"
document.write(str)
}
fn()

fn()

写一个逢七过的函数

function fn(){
forvar i=1;i<=100;i++){
var gw =i%10
var sw=parseInt(i/10)%10
//判断是否满足条件
 if(gw==n||sw==n||i%10==0){
 document.write"过</br>"else{
 document.wrhite(i+"</br>")
 }
}

fn(7

作用域 :变量的作用范围

全局变量

  • 作用范围为整个程序的执行范围
  • 在函数外部定义的变量就是全局变量
  • 在函数体内部不使用var 定义的也是全局变量

局部变量

  • 作用范围是某个函数体内部
  • 在函数体内部通过var 关键字定义的变量或形参,都是局部变量
  • 当局部变量与全局变量重名时,在函数体内部局部变量优于全局变量

return 返回值 返回函数执行后的结果,在函数的调用位置 结束函数的执行 ,遇到return后,即使后面还有别的js语句,也不会执行 交回函数的执行权

练习

image.png

堆栈概念

是一种数据结构,指的是数据存取的方式,当定义一个变量是,内存会开辟一个空间

  • 栈:先进后出
  • 队列:先进先出
  • 堆:一堆,没有顺序

执行环境执行栈:程序初始化代码时,先进入全局环境,接着函数的每一次调用都会创建一个新的执行环境 压入栈中,直到函数结束,才将执行权返回上一个环境栈

变量生命周期:

  • 全局变量:页面在浏览器中打开到浏览器关闭页面,浏览器中关闭页面则全局变量的生命周期才结束
  • 局部变量:只在函数执行的过程中存在,函数结束,局部变量的生命周期结束

作用域链:内存环境访问外层环境中的变量和函数,所形参的链式结构,而外层环境是访问不了内层环境的变量和函数的

递归

函数自己调用自己,本质就是循环 构造递归的条件: 1,有规律 2,有出口 等比例列: 1 2 4 8 16 32 ...n

js语法和编译:

  • 1:语法分析,检查是否有语法错误

  • 2:预解析,在执行之间进行变量和函数的作用域提升

  • 变量的默认值是 undefined

  • 函数的默认值是 函数体本身

  • 在提升时,只提升到当前作用域的顶部

  • 当变量名和函数名重名时,只保留函数

  • 申明变量没有var ,就不会进行提升 报错

  • 3:解释执行

事件的简单理解:

  • 用户行为事件:
  • onclick 单击事件
  • ondblclick 双击事件
  • onfocus 获取光标事件
  • onblur 失去光标事件
  • window.onload 页面加载完成后 才执行js
  • onmousedown 鼠标按下

  • onmouseup 鼠标抬起

  • onmouseover 鼠标移入

  • onmouseout 鼠标移除

  • 【注】鼠标在父元素和子元素之间互相移入移除也会触发

  • onmouseenter 鼠标移入
  • onmouseleave 鼠标移出
  • 【注】鼠标再父元素和子元素之间互相移入移除 不会触发

  • onmousemove 鼠标移动