• JS函数与BOM


    [函数的声明及调用]
    1、函数声明的格式:
    function 函数名(参数1,参数2,....){
    //函数体
    return结果;
    }
    函数名(参数1的值,参数2的值,....)

    >>>函数的调用格式
    直接调用:函数名(参数1的值,参数2的值,....)
    事件调用:事件名="函数名()";

    2、函数声明的几点强调:

    ①函数名的声明,必须符合小驼峰法则(首字母小写,之后每个单词字母大写)

    ②参数列表,可以有参数,也可以无参数。分别称为有参函数和无参函数。

    ③声明函数时的参数列表,称为“形参列表”(变量的名);
    调用函数时的参数列表,称为“实参列表”(变量的值);
    函数中,实际有效的值取决于实参的赋值,未被赋值的形参,将为Undefined;

    ④函数如果需要返回值,可用return返回结果。
    调用函数时,使用var 变量名=函数名();的方式,接受返回结果。
    如果函数没有返回值,则接受的结果为Undefined;

    ⑤函数中变量的作用域:
    在函数中,使用var声明的变量,默认为函数局部变量,只在函数内容使用;
    不用var声明的变量,默认为全局变量,(函数中的全局变量,必须在函数电泳后才能使用)
    函数的形参列表,为函数局部变量,只在函数内部使用;

    ⑥函数声明与函数调用,没有先后之分。即,调用语句可在声明语句之前。

    [匿名函数的声明及调用]【重点】

    1、声明一个匿名函数,直接赋给某个事件
    window.onload=function(){}

    2、使用函数表达式声明匿名函数:
    声明函数表达式:var func=function(){}
    调用函数表达式:func();
    >>>使用匿名函数表达式时,调用语句,必须在声明语句之后,否则报错(对比常规函数声明与调用区别)

    3、使用自执行函数声明并直接调用匿名函数:
    !function(参数1){}(参数1的值) //使用任意运算符开头,一般使用【!】
    (function(){}()) //使用()将匿名函数及之后的括号包裹
    (function(){})() //使用()只将匿名函数表达式包裹
    特点:
    ①结构清晰,开头加!,结尾加()。不容易乱,推荐使用;
    ②可以表明匿名函数与之后的()为一个整体,推荐使用;
    ③无法表明匿名函数与之后的()为一个整体,不推荐使用;

     JS中代码的运行顺序

    console.log(abc);
    var abc=10;
    function funcN(){}
    funcN();

    JS中代码运行,会先进行检查、装载,即变量声明、函数等操作;
    然后再进行执行阶段(变量赋值等属于执行阶段)
    函数的声明属于装载阶段,函数的调用属于执行阶段,所以,函数的调用语句写在函数声明语句之前,没有任何关系。
    上述代码执行流程:
    ----检查装载----
    var num;
    function funcN()
    ----执行阶段----
    console.log(abc);
    abc=10;
    funcN();

    [函数内部属性]
    【Arguments对象
    1、作用:用于保存调用函数时的,所赋值的实参列表。
    >>>当我们调用函数,并使用实参赋值时,实际上参数已经保存到arguments数组中,
    即使没有形参,也可以使用arguments[n]的形式调用参数

    2、arguments数组的个数,取决于实参列表,与形参无关;(顺序从0开始)
    但,当第N个位置的形参、实参、arguments都存在时,形参与arguments是同步。
    (即在函数中修改其中一个的值,另一个也会同步)

    3、arguments.callee是arguments的重要属性,用于返回arguments所在函数的引用;
    arguments.callee()可以调用自身函数执行;
    在函数内部调用自身的写法,叫做递归,所以arguments.callee()是递归调用时常用的方式;

    【this】
    指向函数调用语句所在作用域,即谁调用函数,this指向谁;

     [BOM]

    [screen对象]:
    console.log(screen.width);//屏幕宽度
    console.log(screen.height);//屏幕高度
    console.log(screen.availWidth);//可用宽度
    console.log(screen.availHeight);//可用高度=屏幕高度—底部任务栏


    [location对象]:

    完整的url路径
    协议://主机名(IP地址):端口号/文件路径 ?传递参数(name1=value1 & name2=value)#锚点

    console.log(location);
    console.log(location.href);//完整路径
    console.log(location.protocol);//路径协议 http: https: ftp: file: mailto:
    console.log(location.pathname);//文件路径部分 /开始
    console.log(location.port);//端口号
    console.log(location.search);//从?开始往后的部分
    console.log(location.hostname);//主机名(IP地址)
    console.log(location.host);//主机名+端口号
    console.log(location.hash);//#开始的锚点

    function locationAssign(){
    //加载新的文档。加载以后,可以回退。
    location.assign("http://www.baidu.com");
    }

    function locationReplace(){
    //使用新的文档,替换新的文档。替换以后,不能回退。
    location.replace("http://www.baidu.com");
    }

    function locationReload(){
    //重新加载当前页面
    //reload(true):从服务器重新加载文档
    //reload():在本地刷新当前页面
    location.reload(true);
    }


    [history]:
    1、history.length:浏览历史列表的个数;
    2、history.forward();前进倒前一个页面
    3、history.back();后退到后一个页面
    4、history.go(0);跳转到历史网页列表的任意位置
    位置标志:当前页面为0;前一个页面为1;后一个页面为-1;


    [Navigator对象]

    console.log(navigator.appName);//产品名称
    console.log(navigator.appVersion);//产品版本号
    console.log(navigator.userAgent);//用户代理信息
    console.log(navigator.platform);//系统平台


    navigator.plugins:返回一个数组,检测浏览器安装的所有插件
    >>>主要属性:
    description:插件的描述信息
    filename:插件在本地磁盘的文件名
    length:插件个数
    name:插件名


    navigator.mimeTypes:浏览器插件,所支持的文件类型
    >>>主要属性:
    description:MIME类型描述
    enabledPlugin:支持此类型的浏览器插件
    suffixes:此类型可能的后缀名
    type:MIME类型的写法,例如:image/x-iocon text/css

    window对象的常用方法【重点】
    >>>window对象中的所有方法,均可以省略前面的window.,比如close();

    1、prompt:弹窗接收用户输入;
    2、alert:弹窗警告
    3、confirm:带有确认/取消按钮的提示框;
    4、close:关闭当前浏览器选项;
    5、open:重新打开一个窗口,传入数据:URL/窗口名称/窗口特征
    6、setTimeout:设置延时执行,只会执行一次
    7、setInterval:设置定时器,循环每N毫秒执行一次
    两个参数:需要执行的function/毫秒数(用逗号分隔)
    8、clearTimeout:清除延时
    9、clearInterval:清除定时器
    传入参数:调用setInterval时返回一个ID,通过变量接收ID,传入clearInterval。

  • 相关阅读:
    第10组 团队展示
    第一次结对编程作业
    13.Vue.js 组件
    12.Vue.js 表单
    11.Vue.js-事件处理器
    10.Vue.js 样式绑定
    9.Vue.js 监听属性
    8.Vue.js-计算属性
    7.循环语句
    6.Vue.js-条件与循环
  • 原文地址:https://www.cnblogs.com/Lv2017/p/6720417.html
Copyright © 2020-2023  润新知