JavaScript之BOM编程&&事件编程

最新推荐文章于 2024-05-26 19:11:04 发布
最新推荐文章于 2024-05-26 19:11:04 发布
阅读量371 收藏
点赞数
分类专栏： JAVAWEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39128354/article/details/79065022
版权

**Bom：浏览器对象模型

浏览器在加载HTML文件时，JavaScript引擎会把浏览器的各个部分的信息封装到对象中，浏览器
会分为以下几个对象
窗口：     windows对象
地址栏：        location对象
历史记录栏：  history对象
屏幕          screen对象

通过JavaScript引擎提供给这个四个对象来操作浏览器，就是Bom编程

**有哪些对象？

    navigator.appName
    documnet.write(navigator.appName);

***screen 获取屏幕的大小

    availHeight 
    availWidth      是排除了任务栏之后的高度和宽度

    document.write(screen.width);
    document.write(screen.height);

**location 请求URL地址

    对象表示的一个窗口中的地址栏
    href属性
    代表的是地址栏的URL， 可以获取和设置URL，URL表示统一资源定位符
    ***获取到请求的URL地址
        -document.write(location.href);
    ***设置URL地址
        通过修改location对象的href属性来实现页面得跳转
        -页面上安置一个按钮，按钮上绑定一个事件，当我们点击这个按钮，页面就可以跳转到另外一个页面
    -location.href="hello.html";
***<input type="button" value="anniu" onclick="href();"/>
    -鼠标点击事件 onclick=JS的方法";
    reload()方法：表示刷新当前页面
    window.location.reload();

**history: 请求的URL的历史记录

    forward()：前进到下一页
    back()： 回到上一页
    go() 跳转到某页（正整数 前进  负整数  后退）
    -创建三个页面
        1.a.html 写一个超链接到 b.html
        2. b.html 写一个超链接到 c.html
        3.c.html
    -到访问的上一个页面
        history.back();
        或 history.go(-1);
    -到访问的下一个页面
        history.go(1);
        history.forward();

widow(重点* 代表的是一个窗口

    *窗口对象
    *顶层对象（所有的bom对象都是在widow里面操作的）
    **方法
        widow.alert();
            因为Window对象使用非常频繁，所以当频繁调用is中的window的对象的方法时，可以省略不写
            **简写alert( )；页面弹出一个框，显示内容
        -confirm() 确定提示框 
            /*
            返回值就是用户的操作
                true：点击确定
                false：点击确定          
            */
            **var flag=widow.confirm("显示的内容");

        -prompt() 输入对话框
            -widow.prompt（“在框上显示的内容","输入框里面的默认值")；
        var    flag=widow.rrompt()  点击确定  或是取消          
        -open(); 在一个窗口打开一个页面，打开一个新的窗口
            /*
            参数一：打开的页面
            参数二：打开方式， _self:本窗口  _blank新窗口(默认）  
            参数三：设置窗口的参数：比如窗口的大小，是否显示任务栏     
            */
            window.open("0.1html","_self","width=“10px;height=20;toolbar=0");
            **open("打开新窗口的地址URL", " ","窗口特征，比如窗口的宽度和高度");
            -创建一个按钮，点击这个按钮，打开一个新窗口
            -widow。open("hello.html"," "," width=200;height=100");
        -close(); 关闭窗口（浏览器兼容器比较差）
            清楚任务
            参数一：需要清除的任务ID
            -widow.close();
        -做定时器
        /*
        定时器：每隔n毫秒调用指定的任务（函数)
        参数一：指定任务
        参数二 ：毫秒数        
        */
        var testID；
        **setInterval("JS代码",毫秒数);  1秒=1000毫秒

            -表示每三秒，执行一次alert房啊
            testID= widow。setInterval("alert('123');"3000);

        **setTimeoout("Js代码“，毫秒数)
            -表示在毫秒数之后执行，但是只会执行一次
            widow.setTimeout("alert('abc');",4000 );
        **clearInterval() 方法可取消由 setInterval() 设置的 timeout。
                var id=widow。setInterval("alert('123');"3000);
                clearInterval(id);
        **clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
                var id=widow.setTimeout("alert('abc');",4000 );
                clearTimeout(id);

2.事件编程

        javase的时间编程
        GUI编程事件的三个要素

        事件源： 按钮JButton ，JFrame
        事件：KeyEvent, WindowEvent        
        监听器：KeyListener  WindowListener

        GUI编程具体步骤
            1）创建事件源
            2）编写监听器
            3）在事件源上注册监听器

    JavaScript时间编程的三要素
        1）事件源： HTML标签
        2）事件： click  Dblclick mouseover
        3.）监听器（函数）

        监视器（函数）
        <script type="text/javascript">
            function test(){
                alert("");              
            }

        </script>

        事件源
        <input type="button" value="按钮"  onclick="test()"/> 注册监听器（函数）

        JavaScript事件分类一些常用的
            span：放些简单的文字
            fontcolor给字符串添加颜色

            点击相关：
                单击： onclick
                双击:  ondblclick

            焦点相关的
                聚焦：     onfocus
                失去焦点：onblur

            选项相关的：
                改变选项：onchange

            和鼠标相关的
                鼠标经过 onmouseover
                鼠标移除 onmouseout

            页面的加载相关的
                页面加载： onload
                这个事件在加载完整个标签后再触发，通常用在body标签中，所以在
                加载完body全部内容后就出发该方法

相关代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件编程</title>
    <!-- 点击相关：
                    单击： onclick
                    双击:  ondblclick

                焦点相关的
                    聚焦：     onfocus
                    失去焦点：onblur

                选项相关的：
                    改变选项：onchange

                和鼠标相关的
                    鼠标经过 onmouseover
                    鼠标移除 onmouseout

                页面的加载相关的
                    页面加载： onload
                    这个事件在加载完整个标签后再触发，通常用在body标签中，所以在
                    加载完body全部内容后就出发该方法 -->
        <style type="text/css">
            div{
                width: 50px;
                height: 50px;
                background: #00ccdd;
            }
        </style>
        <script type="text/javascript">

            function testOnclick(){
                alert("点击显示内容");
            }
            function testDblclick(){
                alert("双击显示内容");
            }
            function testFocus(){
                var userName=document.getElementById("userName");
                userName.value="";

            }
            function testBlur(){
                //获取用户输入内容
                var username=document.getElementById("userName").value;
                var userNameTip=document.getElementById("userNameTip");
                //检查内容是否存在
                //内容显示到span中
                if(username=="eric"){
                    userNameTip.innerHTML="用户名已存在..请更改！！！".fontcolor("red");//给字符串家颜色
                }
                else{
                    userNameTip.innerHTML="恭喜你，可以正常使用".fontcolor("green");
                }
            }

            function  testChange(){
                //获取选中内容
                var jiguan=document.getElementById("jiguan").value;

                alert(jiguan);
                var city=document.getElementById("city");
                //每次清空city的值
                city.innerHTML="";

                if (jiguan=="广东") {
                    //把一些option选项放到城市的select中
                    var arr=["广州","珠海","深圳"];
                    for(var i=0;i<arr.length;i++){
                    city.innerHTML+="<option value='"+arr[i]+"'>"+arr[i]+"</option>";

                    }
                }
                if (jiguan=="广西") {
                    //把一些option选项放到城市的select中
                    var arr=["柳州","桂林","南宁"];
                    for(var i=0;i<arr.length;i++){
                    city.innerHTML+="<option value='"+arr[i]+"'>"+arr[i]+"</option>";

                    }
                }
                if (jiguan=="湖南") {
                    //把一些option选项放到城市的select中
                    var arr=["长沙","湘潭","郴州"];
                    for(var i=0;i<arr.length;i++){
                    city.innerHTML+="<option value='"+arr[i]+"'>"+arr[i]+"</option>";

                    }
                }

            }
            function testOnmouseOver(){
                alert("鼠标已经过");

            }
            function testOnmousrOut(){
                alert("鼠标已经离开");
            }
            function testOnLoad(){
                var date=new Date();
                var dateTip=date.toLocaleString().fontcolor("bule");
                var timeTip=document.getElementById("timeTip");
                timeTip.innerHTML=dateTip;

            }
            window.setInterval("testOnLoad()",1000);
        </script>

</head>
<body onload="testOnLoad()">
    <input type="button" value="单击"  onclick="testOnclick()" />
    <input type="button" value="双击" ondblclick="testDblclick()"/>
    <hr/>
    输入用户名:<input type="text" value="4~16数字或字母"  onfocus="testFocus()" id="userName"  onblur="testBlur()" />
    <span id="userNameTip"></span>
    <hr/>
    请输入籍贯:
    <select onchange="testChange()"  id="jiguan">
        <option value="广东">广东</option>
        <option value="广西">广西</option>
        <option value="湖南">湖南</option>
    </select>
    城市
    <select id="city">
    </select>
    <hr/>
    <div onmouseover="testOnmouseOver()" onmouseout="testOnmousrOut()">

    </div>
    <span id="timeTip"></span>
</body>
</html>
自在强
关注
专栏目录
用JS完成图片在窗体中的弹碰效果
bandenger的博客
05-26 705
一、由于是动态效果这里就不展示效果图了，先来简介编程思路：1、图片需要移动移动方式：将图片设置为绝对定位，通过改变绝对定位的位置来达到图片移动的效果（当然，这只是一种思路，读者可自行选择其它方式）移动方法：需要使用setInterval（）;；间隔计时器来控制速度和移动效果2、碰撞需要获取自身电脑的屏幕宽度，碰撞其实就是边界的检测，如果检测到在边界则改变移动方向，3、图片的移动方向图片移动只有八个...
JavaScript快速入门 函数&BOM编程
KYA_ZXY的博客
05-14 328
一、JavaScript函数 1.1 概述： 函数可以把代码封装起来，并且可以重复调用，完成特定功能的代码。 1.2 函数分类 1.2.1 系统函数 eval(<表达式>)：将其中的参数字符串作为一个javascript表示式进行执行并返回结果。 parseInt("字符串")：将字符串转换为整...
BOM编程
程序员蒋老湿的博客
11-09 1871
1.1.BOM编程基础 全称 Browser Object Model，浏览器对象模型。 JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。 为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。 1.2.BOM对象： 1.3.window 对象 Window 对象是 Ja
javascript bom 编程
极客on之路
06-27 767
 javascript bom  dom 编程
javascript：BOM编程
qq_51476492的博客
03-17 669
BOM编程中，window对象是顶级对象，代表浏览器窗口。 一、window有open和close方法，可以开启和关闭窗口。 例如，点击按钮打开新窗口： open函数可以有两个参数，除第一个参数为网址外，第二个参数值可以为’_self’（当前窗口打开）,’_blank’（开启新窗口）,’_parent’（父窗口）,’_top’（顶级窗口）。 close()方法用于关闭当前窗口： 二、alert()弹出消息框和conform()弹出确认框 1.alert() 2.confirm() 确认框有两个按
JavaScript-BOM编程
boilll的博客
01-27 118
JavaScript-BOM编程
详解Javascript事件驱动编程
10-23
JavaScript事件驱动编程非常依赖于浏览器的DOM（Document Object Model）和BOM（Browser Object Model），因此开发者需要对这两者有深入的理解。随着现代前端框架的发展，例如React、Vue和Angular等，事件处理在这些...
BOM编程详解
Veer_c的博客
01-12 8512
BOM编程： BOM是（Broswer Object Model） 浏览器对象模型编程。在网页被加载后，js引擎会将我们的浏览器的各个部分封装成对象，我们通过操作这些不同的对象，来实现一些效果，这就叫BOM编程。 window对象方法： setInterval() 每经过指定毫秒值后就会执行指定的代码。一调用此方法就会返回指定任务的ID。 clearInterval() 根据任...
JavaScript语言编程规范.docx
03-05
JavaScript语言编程规范旨在确保开发团队遵循一致的代码风格，提高代码质量、可读性和可维护性。这份规范涵盖了多个方面，包括文件组织、编码格式、排版规则、命名规范等。 1. **文件组织** - JavaScript代码应当...
前端开发基础入门教程 JavaScript语言编程基础教程 第3章 客户端JavaScript 共38页.pptx
最新发布
06-08
### 前端开发基础入门教程：JavaScript语言编程基础教程 第3章 客户端JavaScript #### 学习目标 1. **理解JavaScript在Web环境下的应用方式**。 2. **掌握如何通过JavaScript脚本化浏览器窗口**。 3. **熟悉全局...
JavaScript BOM编程
weixin_62270300的博客
03-01 436
目录 一、DOM和BOM的区别 1.BOM 2.DOM 二、如何在JS中获取HTML元素 1.document.getElementById() : 通过标签中的id属性 2.document.getElementsByTagName() : 通过标签名 3.document.getElementsByClassName() : 通过标签中的class属性 三、元素的显示和隐藏 控制元素的显示（style） visibility属性的值 display属性的值 opacity ..
JavaScript之BOM编程
qq_39095899的博客
04-03 231
BOM编程 什么是BOM? Brower Object Model(浏览器对象模型，)关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是BOM编程 BOM和DOM的区别与联系？ BOM的顶级对象是：window DOM的顶级对象是：document 实际上BOM是包括DOM的！ 1、BOM编程中，window对象是顶级对象，代表浏览器窗口 2、window有open和...
JavaScript/BOM编程
fan__lee的博客
10-24 213
文章目录弹出消息框和确认框历史记录/前进、后退设置地址栏上的URL总结 有哪些方法可以通过服务器往浏览器发请求窗口问题 1、在BOM编程中，window对象是顶级对象，代表浏览器窗口。 2、window有open和close方法，可以开启窗口和关闭窗口。 如： <body> <script type="text/javascript"> </script> <!-- open('url','参数')：
JavaScript 函数、BOM编程
dislido的博客
08-03 263
基本语法定义函数// 无参函数 function showName() { alert('name'); }// 有参函数 function showName2(name) { alert(name); }调用函数直接调用showName();和HTML元素事件绑定<button onclick="showName()">show</button> <button onclick="show
JS BOM编程
h15574980318的博客
05-26 437
1. Window对象：作为BOM的核心对象，Window对象表示浏览器窗口，并提供了许多与窗口交互的方法和属性。通过Location对象，开发者可以获取和操作URL的各个部分，如通过location.href属性获取当前页面的URL，通过location.search属性获取查询字符串等。BOM提供了与浏览器窗口交互的一组对象，通过这些对象，开发者可以控制浏览器的各种行为和窗口的各个方面。通过Navigator对象，开发者可以获取到用户的浏览器类型和版本信息，从而针对不同的浏览器进行兼容性处理。
JavaScript高级编程详解
"《JavaScript高级编程》是一本详细介绍JavaScript编程技术的书籍，涵盖了从基础到高级的各种主题，包括JavaScript语法、HTML集成、DOM操作、对象和数据类型、事件处理、浏览器对象模型(BOM)以及JavaScript的扩展...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值