晓舟报告学习笔记——BOM

最新推荐文章于 2024-09-07 13:38:28 发布
最新推荐文章于 2024-09-07 13:38:28 发布
阅读量250 收藏
点赞数
分类专栏： JS基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43573285/article/details/119763086
版权

文章目录

BOM

一、概述

《javaScript高级程序设计》这本书讲过: javaScript = ECMAScript + DOM + BOM。

  • DOM:文档对象模型(document对象)

  • BOM：浏览器对象模型

二、Window对象(全局对象)

windows对象是全局对象，所有在浏览器可以直接使用的方法都是window对象的方法，其中document对象和alert()方法就是window的属性,使用时window.document和window.alert() 一般可省略window。

1 计时器方法(之前写过，不赘述）

2 弹出框方法

猜数字的实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>BOM</title>

</head>

<body>

    <script>

​    // alert("hello from other side");

​    // let str = prompt("请输入你的名字：");

​    // console.log(str); 可以在终端进行显示

​    // let result = confirm("确定是否删除此条记录");

​    // console.log(result); //点击确定的时候是true 取消的时候是false

​    



​    //实现猜数字的功能

​    let target = Math.floor(Math.random() * 100 + 1);

​    //递归函数：在函数体内调用自己



​    function gussNumber(){

​      let number = prompt("请输入你猜的数字:");

​      if(number == target){

​        alert("恭喜你！你猜对了！");

​      }else if(number > target){

​        alert("大于目标结果。");

​        gussNumber();//自己调用自己，递归函数



​      }else{

​        alert("小于目标结果。");

​        gussNumber();  //没有猜对，继续猜数

​      }

​    }

​    gussNumber();  //调用测试

  </script>

  

</body>

</html>

三、location对象

  1. location.href - 属性返回当前页面的URL - “https://www.baidu.com”
  2. location.hostname - 主机的域名 - “wwww.baidu.com”
  3. location.pathname - 当前页面的路径和文件名 “/s”
  4. location.port - 端口 - “8080”
  5. loaction.protocol - 协议 - “https:”
    在这里插入图片描述

四、navigator对象

navigator.userAgent 检查当前设备，并在控制台输出

navigator.userAgent 
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 Edg/92.0.902.73"

五 screen对象

包含有关用户屏幕的信息

六 history对象

包含浏览器的历史

打怪进阶选手安好
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础笔记
hyhlsy的博客
07-28 210
这段时间在看b站晓舟报告的《JavaScript基础教程》，学到了一些基础的语法与应用，下一阶段的目标是去尝试完成一些含有三大件的小模块。 函数总结 函数声明 一次声明，可多次调用 函数声明的提升 函数的声明可以在使用的后面 匿名函数 匿名函数通常作为参数 setInterval(funcion(){ console.log("hello") },1000) 函数表达式 const fun=function(n,m){ return n+m; } let res=fun(10,20); 函数表
晓舟报告学习笔记——事件绑定、事件委托以及事件类型
qq_43573285的博客
08-17 390
文章目录事件绑定一、绑定事件二、事件冒泡与事件捕获阻止事件冒泡代码示例取消事件默认行为代码示例事件委托事件类型1 鼠标事件2 键盘事件3 触屏事件 事件绑定 一、绑定事件 1 element.onEventType = function(){ } //内联形式 2 addEventListener("eventType",function{ })//外联形式 区别： 两种方法都能实现相同的效果，能成功的为按钮绑定了点击事件，但区别是使用addEventLitener可以无限制的为元素绑定事件，而
Node基础（晓舟报告笔记）
fly_ship的博客
07-29 216
node可以看成是一种js运行的环境。 Koa是一个基于Node的web服务器开发框架，需要cnpm安装。 const Koa = require("koa"); const app = new Koa(); app.listen(3000,() => { console.log("server is running") }); 这里引入的Koa是一个构造函数，通过new关键字可以创建一个koa应用。然后通过app的listen方法设置监听端口，运行这个程序就可以移动一个koa服务器了。
晓舟报告学习笔记——DOM文档对象模型（图片切换，样式设置等）
qq_43573285的博客
08-17 348
文章目录DOM文档对象模型节点类型元素节点属性节点文本节点网页效果document对象1 获取节点完整代码document.getElementByIddocument.getElementsByClassNameelement.innerHTMLdocument.querySelectordocument.querySelectorAll2 事件类型3 设置样式element.style.colorelement.style.backgroundColor4 设置属性element.src完整代码效果图
Vue路由（晓舟报告笔记）
fly_ship的博客
08-10 128
vue create xxx 不要选默认的那个，选人工，然后下面选上router，然后一路回车 <router-link to="/">Home</router-link> 相当于<a> 这些路径存在router文件夹下的index.js中 点击/about就会跳到component组件 => views下的About组件 点击rout-link标签会用to属性跳转到相应url，然后找到这个url对应的组件，从views下显示出来 小组件放在componen
晓舟报告学习笔记——原始类型与引用类型
qq_43573285的博客
08-17 157
文章目录原始类型与引用类型前提原始类型（或叫值类型）引用类型对象一 赋值的区别代码示例：二 比较的区别三 传参的区别原始类型和引用类型的类型检测1 原始类型检测:typeof(值)2 引用类型检测： 值 instanceof 类型练习（数组存储学生列表）第一次代码结果不符合代码结果（最后一次的覆盖前几次的输入结果）问题及原因解决方法1每次重新输入的时候，把student{}重新初始化解决方法2创建class类，用类初始化对象，则每次初始化是不一样的 原始类型与引用类型 前提 JavaScript有六种数据
Python学习笔记——运算符
12-10
Python学习笔记——运算符 运算符: 赋值运算符 算术运算符 关系运算符 逻辑运算符 位运算
RRT学习笔记——记录
04-12
RRT学习笔记——记录
C++基础学习笔记————网课
08-18
个人网课学习笔记
晓舟报告学习笔记——JS基础-异步编程
qq_43573285的博客
08-17 197
文章目录异步编程一、同步与异步一般的renturn返回只能实现同步复习回调函数二 实现异步的方法1 用回调函数版的getData获取数据2 promise3 promise版的getData4、async函数await有等待的过程 异步编程 一、同步与异步 异步： 可以多条任务线去执行程序，一条任务卡顿不影响其他任务。 一般的renturn返回只能实现同步 <script> //ajax 与服务器通信，异步获取数据 //异步获取数据的方法
nunjucks基础1（晓舟报告笔记）
fly_ship的博客
07-29 289
通过Koa创建了一个web服务器，并可以根据用户请求路径的不同响应不同的页面，但是每一个页面的内容都是通过字符串的方式给送给浏览器的，这样的开发方式并不友好，我们更希望直接发送html页面。 模板引擎可以解决这个问题，通过模板引擎，可以直接设置响应的html页面，并且可以把后台数据绑定到模板中，然后发送给客户端。 const Koa = require("koa"); const nunjucks = require("nunjucks"); const views = require("koa-vie
26天学通前端开发（配资料）
weixin_34323858的博客
10-11 289
26天学通前端开发（配资料） 前言 好的学习方法可以事半功倍，好的学习路径可以指明前进方向。这篇文章不仅要写学习路径，还要写学习方法，还要发资料，干货满满，准备接招。 网上有很多前端的学习路径文章，大多是知识点罗列为主或是资料的汇总，数据量让新人望而却步。今天我们虽然也有大量的知识点，但是整体以特定目标引导学习，让学习梯度更加平滑。 文章用下面七个目标引导学习，只要依次完成，就可以踏进前端开发的大...
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 498
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 891
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1373
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
Module “console“ has been externalized for browser compatibility.
最新发布
Alvin的博客
09-07 68
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
Nginx部署前端Vue项目
不会代码的小林
09-03 1318
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 738
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
Oracle数据库学习笔记——韩顺平老师讲解
"韩顺平老师Oracle听课笔记.pdf" ...这份笔记是学习和复习Oracle数据库管理，特别是sql*plus操作的一个宝贵资料，适合初学者和有一定经验的DBA参考。通过理解和掌握这些内容，能够更好地管理和操作Oracle数据库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值