JavaScript系列之程序调试/函数/事件/操作BOM对象

最新推荐文章于 2024-04-12 16:19:54 发布

DOGIOOH

最新推荐文章于 2024-04-12 16:19:54 发布

阅读量169

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yinyanyao1747/article/details/94404950

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript系列之程序调试/函数/事件/操作BOM对象

01 程序调试

JavaScript的代码可以在网页中直接调试，方法步骤如下：

打开网页—>右键点击检查—>sources—>打断点—>刷新网页—>开始调试

Chrome开发人员工具提供多种调试方式：

停止断点调试
单步调试
跳出当前函数
移除断点

除了使用开发人员工具外，还可以通过alert()方法逐步调试。

02 函数

函数的概念

类似于Java中的方法，是完成特定任务的代码语句块。当代码出现有规律的重复的时候，就需要将代码抽象成函数，函数本身只需要写一次，但是可以多次调用。JavaScript的函数不但是“头等公民”，而且可以像变量一样使用，具有非常强大的抽象能力。

JavaScript中函数的使用很简单，不需要定义属于某个类，可以直接使用。

函数的分类

函数可以分为系统函数和自定义函数
- 常用的系统函数有：
  - parseInt(“字符串”);//将字符串转换为整型数字
  - parseFloat(“字符串”);//将字符串转换为浮点型数字
  - isNaN();//用于检查其参数是否是数字

定义函数的方式

//定义函数的方式(一)
function method(参数){
    //方法体；
    //return；可有可无
}
//定义函数的方式(二)
var 变量名 = function (参数) {
    //方法体；
    //return；可有可无
};

//注意事项：两种定义完全等价，第二种方式按照完整语法需要在函数体末尾加一个;，表示赋值语句结束。

调用函数

调用函数时按顺序传入参数即可。

function_name(parameter1,parameter2...);

//注意事项：JavaScript允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题，即使函数内部并不需要这些参数；传入的参数比定义的少也不会报错，会返回NaN。

变量作用域
- 如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量。
- 如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。
- JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行。
- JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。
- 不在任何函数内定义的变量就具有全局作用域。
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body onload="second( )">

<script>
    var i=20;//全局变量
    function first( ){
        var i=5;
        for(var j=0;j<i;j++){
            document.write("&nbsp;&nbsp;&nbsp;&nbsp;"+j);
        }
    }
    function second( ){
        var t=prompt("输入一个数", "")
        //second()中使用全局变量i=20
        if(t>i)
            document.write(t);
        else
            document.write(i);
        first( );
    }
</script>
</body>
</html>
```
变量提升机制

JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部，但是JavaScript引擎仅仅自动提升了变量的声明，但不会提升对变量的赋值。如果在变量赋值语句前调用了该变量，那么该变量执行时为undefined类型。因此我们在函数内部定义变量时，要在函数内部首先声明所有变量。

03 事件

在HTML标签中可以添加事件，可以给事件赋值，触发事件后调用函数或方法如：

<input name="btn" type="button" value="button_name" onclick="method( )" />

常用事件大致有以下几类：
- onload 一个页面或一幅图像完成加载
- onlick 鼠标单击某个对象
- onmouseover 鼠标指导移到某元素上
- onkeydown 某个键盘按键被按下
- onchange 域的内容被改变

04 操作BOM对象

BOM:浏览器对象模型 ( Browser Object Model )
- BOM提供了独立于内容的 , 可以与浏览器窗口进行互动的对象结构。
- window是整个BOM的核心，window对象不但充当全局作用域，而且表示浏览器窗口。
  
  window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。
- BOM可实现的功能：
  - 弹出新的浏览器窗口
  - 移动 , 关闭浏览器窗口以及调整窗口的大小
  - 页面的前进 , 后退
    … …

Window对象

常用属性：

history 有关客户访问过的URL的信息

//history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。

//注意：这个对象属于历史遗留对象，就目前而言，任何情况，都不应该使用history这个对象。

location 有关当前 URL 的信息

//可以通过location.href获取一个完整的URL

//要获得URL各个部分的值，可以通过以下方法
location.protocol; // 协议
location.host; // 主机地址
location.port; // 端口号
location.pathname; // 路径名称
location.search;
location.hash;

//要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。

常用方法:

prompt( );//显示可提示用户输入的对话框,两个参数，输入对话框，用来提示用户输入一些信息，单
击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值。常用于收集用户关于特定问题而反馈的信息。
alert( );//显示带有一个提示信息和一个确定按钮的警示框，一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
confirm( );//显示一个带有提示信息、确定和取消按钮的对话框。一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用。
close( );//关闭浏览器窗口
open( );//打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( );//在指定的毫秒数后调用函数或计算表达式
setInterval( );//按照指定的周期（以毫秒计）来调用函数或表达式

Document对象
- 常用属性：
  - referrer 返回载入当前文档的URL。可以通过document.referrer返回由哪个链接跳转至当前页面的。
  - URL 返回当前文档的URL
- 常用方法：
```
getElementById()；//返回对拥有指定id的第一个对象的引用
getElementsByName() ；//返回带有指定名称的对象的集合
getElementsByTagName()；//返回带有指定标签名的对象的集合
write()；//向文档写文本、HTML表达式或JavaScript代码
```
- 动态改变层/标签中的内容
  - 我们可以通过document提供的get相关的方法获取到某节点或某一组节点，并动态修改该节点中的内容。
```
document.getElementById("id_name").innerHTML="替换后的文内容";
```

Date对象：

在JavaScript中，Date对象用来表示日期和时间。

//获取系统当前时间
var now = new Date();
document.write(now); // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
document.write(now.getFullYear()); // 年份
document.write(now.getMonth()); // 月份，注意月份范围是0~11
document.write(now.getDate()); // 日, 表示几号
document.write(now.getDay()); // 星期, 表示星期几
document.write(now.getHours()); // 时, 24小时制
document.write(now.getMinutes()); // 分钟
document.write(now.getSeconds()); //  秒
document.write(now.getMilliseconds()); // 毫秒数
document.write(now.getTime()); // 以number形式表示的时间戳

案例：在网页中实现制作时钟特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #time{
            font-family: 微软雅黑;
            font-size: 50px;
        }
    </style>
</head>
<body>

<div id="time"></div>

<input type="button" value="start" οnclick="startTime()">
<input type="button" value="stop" οnclick="stopTime()">

<script>
    var myTime;
    function clock() {
        //获得系统当前时间
        var now = new Date();
        console.log(now);

        var hh =  now.getHours();
        var mm = now.getMinutes();
        var ss = now.getSeconds();

        document.getElementById("time").innerHTML ="现在时间为:" + hh + ":" + mm + ":" + ss;
    }

    function startTime() {
        myTime = setInterval("clock()",1000);
    }

    function stopTime() {
        clearInterval(myTime);//清楚setInterval()返回的ID值，即取消setInterval的执行
    }



</script>
</body>
</html>

Math对象

常用方法：

ceil();//对数进行上舍入 如Math.ceil(25.5);返回26
floor();//对数进行下舍入 如Math.floor(25.5);返回25
round();//把数四舍五入为最接近的数
random();//返回0~1之间的随机数 包含0不包含1

示例：实现返回的整数范围为1~100

var num = Math.floor(Math.random()*99+1)// random获得的包含0不包含1的随机数

DOGIOOH

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript系列之程序调试/函数/事件/操作BOM对象

JavaScript系列之程序调试/函数/事件/操作BOM对象01 程序调试JavaScript的代码可以在网页中直接调试，方法步骤如下：打开网页—>右键点击检查—>sources—>打断点—>刷新网页—>开始调试Chrome开发人员工具提供多种调试方式：停止断点调试单步调试跳出当前函数移除断点除了使用开发人员工具外，还可以通过alert...
复制链接

扫一扫