JS--函数和windows对象

卷不动的程序员

于 2024-07-03 14:07:58 发布

阅读量597

点赞数 12

分类专栏： javascript 文章标签： javascript windows 开发语言

本文链接：https://blog.csdn.net/qq_49018210/article/details/140150672

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、function函数

JavaScript中的函数和java中的方法是一样的，都是用来完成特定功能的代码段，可以被多次调用，提高了代码的复用性
使用更加简单：不用定义属于某个类，直接使用
js不支持方法的重载
函数其实也是JavaScript中的一种对象，可以像普通变量一样使用，js在调用函数时，直接通过方法名来调用

二、函数的分类

系统函数，也叫内置函数

//parseInt("")：把字符串转化为整数
document.write(parseInt("123") + "<br>");//123
document.write(parseInt("12.6") + "<br>");//12，无四舍五入
document.write(parseInt("12a6") + "<br>");//12
document.write(parseInt("a126") + "<br>");//NaN，not a number，它本身不是数字，和任何数字都不相等
document.write((NaN == NaN) + "<br>");//false

//parseFloat("")：把字符串转换为小数
document.write(parseFloat("123.5") + "<br>");//123.5
document.write(parseFloat("123") + "<br>"); //123
document.write(parseFloat("12.3.5") + "<br>"); //12.3
document.write(parseFloat("12a3.5") + "<br>"); //12
document.write(parseFloat("a123.5") + "<br>"); ///NaN

//isNaN()：is not a number，判断参数是否是"非数字"，非数字为true，数字为false
document.write(isNaN("123.5") + "<br>");//false
document.write(isNaN("a123.5") + "<br>");//true
document.write(isNaN("12a3.5") + "<br>");//true
document.write(isNaN(123.5) + "<br>");//false

//将其他类型转化为字符串
let num = 10;
document.write(num + "" + "<br>");//10
document.write(String(num + "<br>"));//10
let num2;
document.write(String(num2) + "<br>");//undefined
document.write(num.toString() + "<br>");//10
document.write(num2.toString() + "<br>");//报错，null和undefined类型不可以使用toString

自定义函数function

无参函数

//无参函数
点击按钮，弹出prompt弹出框，输入要输出的hello的变数
let num
function showHello() {
    for (let i = 0; i < num; i++) {
        document.write("hello ")
    }
}
function getNum() {
    num = prompt("你想输出几次hello);
    //直接通过函数名调用
    showHello();
}

有参函数

//有参函数
点击按钮，弹出prompt弹出框，输入要输出的hello的变数
function showHello(num) {
    for (let i = 0; i < num; i++) {
        document.write("hello ")
    }
}
function getNum() {
    let num = prompt("你想输出几次hello");
    //直接通过函数名调用
    showHello(num);
}

定义：

function 函数名(形参名1，形参名2，...) {
    函数体；
    return xx;
}

调用：
- 函数的调用一般和表单元素的事件一起使用
```
<input type="button" value="按钮" οnclick="getNum()">
```
- 在函数中调用另一个函数，直接通过函数名调用即可
注意：JavaScript中的函数就是一个对象，函数名可以直接视为指向函数的名称
建议使用显示转换

匿名函数

//求两个数的较大值
let max = function(a, b) {
    if(a > b) {
        return a
    } else {
        return b
    }
}
alert("较大值是：" + max(10,20))

定义：

let 变量名 = function(形参列表){
    函数体;
    return;
}

调用：变量名(参数列表)

JavaScript的默认添加分号机制对return有影响
- 如果return处的值和return换行，结果为undefined，return后的代码将被忽略，所以请注意，不要把值和return换行
- 函数一定是有返回值的，只是分为两种情况，一种是你自己return出的，二是没有return的，这时返回值是undefined
```
//求两个数的较大值
let max = function(a, b) {
    if(a > b) {
        document.write(a)
    } else {
        document.write(b)
    }
}
//调用
alert(max(10,20))
```

三、js中变量的作用域

局部变量：js函数中定义的变量，只在声明它的{}内生效
全局变量：定义在函数外面的变量，在整个script标签中都生效

var声明变量存在的问题

存在变量提升问题（变量值不提升）
变量的作用域主要和函数的作用域有关，其他块定义是没有作用域的，比如if/for

//alert(aaaa)  //报错 aaaa is not defined
//1.变量提升
/*alert(num);//报错
var num
alert(num)
//转换为以下代码
var num
alert(num)
num = 10
alert(num)*/

//2.只有函数的大括号能限制作用域，if/for的大括号都限制不住

四、自定义对象

//定义对象的第一种方式
let student = {
    id: 1,
    name: "张三",//属性
    sex: "男",
    run: function () {//方法
        alert(student.name + "跑的快")
    }
}
//调用
alert(student.name)//调用属性
student.run()//调用方法

//创建对象的第二种方式
let emp = new Object();//定义了一个空对象，相当于：let emp = {}
emp.empno = 2;//给对象添加属性
emp.ename = "刘备";
emp.eat = function () {
    alert("吃得多")
}
//调用
alert(emp.empno + emp.ename);
emp.eat();

五、内置对象

window对象，代表当前浏览器窗口，JavaScript默认的对象，所以在使用这个对象的属性和方法时，可以不写对象名

常用属性

document文档对象
- 代表当前html文档，实际html文档中的每个标签都是一个js对象
- document.write()

screen：封装了屏幕的相关信息，供读取

function getScreenMsg() {
    let myWidth = screen.width;
    let myHeight = screen.height;
    document.write("当前屏幕的宽是：" + myWidth + "高是：" + myHeight)
}
<body οnlοad="getScreenMsg()">

history:封装历史访问记录

back()：后退
forward()：前进

go(n)：n为正整数表示前进，n为负数表示后退

<input type="button" value="点击我打开第二个页面" onclick="openTwo()">
<input type="button" value="前进" onclick="history.forward()">
<input type="button" value="前进到第三个页面" onclick="history.go(2)">
alert(location.href);
//location.reload();
function openTwo() {
    window.open("two.html","_blank", "height=300,width=400,left=100,top=100")
}

location：封装当前url信息，用于获取或改变当前浏览的网址
- location.href = "url"：在当前页面打开一个新的页面，会写入历史访问记录(history)
- localtion.replace("url")：用新页面的url替换当前url，不保留历史访问记录
- location.reload()：重新加载页面（刷新）
```
<button οnclick="location.href = 'http://www.baidu.com'">href</button>
<button οnclick="location.replace( 'http://www.baidu.com')">replace</button>
```

常用方法

alert()
confirm()
prompt()
open()：打开一个页面
- ```
window.open("two.html","_blank", "height=300,width=400,left=100,top=100")
```
- window.open("url","打开方式","其他属性")
  - 打开方式：_blank：在空白页打开，默认的；_self：在当前窗口打开
close()：关闭页面

setTimeOut("要访问的url或函数",时间(毫秒))：在设置的事件后执行某函数

var a = setTimeout(window.open("http://www.baidu.com"),2000)
clearTimeout(a)//清除已设置的setTimeOut对象

setInterval("要访问的url或函数",时间(毫秒))：按照时间间隔循环执行某函数

let num = 0;
let a;
function numAdd() {
    num += 1;
    document.write(num);
    if (num == 20) {
        clearInterval(num);//当num为20时，清除setInterval对象
    }
}
a = setInterval(numAdd,1000);// a = setInterval("numAdd()",1000);也可

常用事件
- onclick：鼠标单击事件
- ondbclick：鼠标双击事件
- onblur：失去光标(失去焦点)
- onfocus：获得光标(获得焦点)
- onload：加载完成
- onchange：内容改变
- onmouseover：鼠标移动到某元素上
- onmouseout：
- onmousein
- onmouse
- onkeydown：按下键盘
- onkeyup：松开键盘

六、Date

//获取系统当前时间，实现钟表功能
function getTime() {
    let today = new Date();
    let year = today.getFullYear();//获取年份
    let month = today.getMonth()+ 1;//获取月份，值为0-11
    if (month <= 9) {
        month = "0" + month;
    }
    let date = today.getDate();//获取日期
    let hours = today.getHours();//获取小时
    if (hours <= 9) {
        hours = "0" + hours;
    }
    let minutes = today.getMinutes();//获取分钟
    if (minutes <= 9) {
        minutes = "0" + minutes;
    }
    let seconds = today.getSeconds();//获取秒钟
    if (seconds <= 9) {
        seconds = "0" + seconds;
    }
    let week = today.getDay();//值为0-6，表示周天到周六
    switch (week) {
        case 0:week = "日";break;
        case 1:week = "一";break;
        case 2:week = "二";break;
        case 3:week = "三";break;
        case 4:week = "四";break;
        case 5:week = "五";break;
        case 6:week = "六";break
    }
    let time = year + "-" + month + "-" + date + ""
        + hours + ":" + minutes + ":" + seconds + " "
        + "星期" + week;
    document.getElementById("showTime").innerHTML = time;
}
setInterval(getTime,1000);//每一秒执行一次

卷不动的程序员

关注

12
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JS--函数和windows对象

/定义对象的第一种方式id: 1,name: "张三",//属性sex: "男",run: function () {//方法alert(student.name + "跑的快")//调用alert(student.name)//调用属性student.run()//调用方法//创建对象的第二种方式//定义了一个空对象，相当于：let emp = {}//给对象添加属性emp.ename = "刘备";alert("吃得多")//调用emp.eat();
复制链接

扫一扫