【JS逆向课件:第十八课:JS操作2】

4.12、BOM对象(了解)

BOM:Broswer object model,即浏览器提供我们开发者在javascript用于操作浏览器的对象。

4.12.1、window对象

  • 窗口方法
// BOM  Browser object model 浏览器对象模型// js中最大的一个对象.整个浏览器窗口出现的所有东西都是window对象的内容.
console.log( window );// alert()  弹出一个警告框
window.alert("hello");//confirm  弹出一个确认框,点击确认,返回true, 点击取消,返回false
var ret = confirm("您确认要删除当前文件么?");
console.log( ret  );// 弹出一个消息输入框,当点击确认以后,则返回可以接收到用户在输入框填写的内容.如果点击取消,则返回null
var ret = prompt("请输入一个内容","默认值");
console.log( raet );// close() 关闭当前浏览器窗口
window.close();//打开一个新的浏览器窗口
window.open("http://www.baidu.com","_blank","width=800px,height=500px,left=200px,top=200px");

4.12.2、location ( 地址栏)对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button onclick="func1()">查看Location对象</button>
<button onclick="func2()">跳转到百度</button>
<button onclick="func3()">F5刷新页面</button>
<script>function func1(){console.log( location );}// 地址栏对象控制和操作地址栏// 所谓的地址就是当前页面所在地址// 地址结构:// 协议://域名:端口/路径/文件名?查询字符串#锚点console.log( `协议=>${location.protocol}` );console.log( `域名=>${location.port}` );console.log( `域名=>${location.hostname}` );console.log( `域名:端口=>${location.host}` );console.log( `路径=>${location.pathname}` );console.log( `查询字符串=>${location.search}` );console.log( `锚点=>${location.hash}` );console.log(`完整的地址信息=>${location.href}`);function func2(){// location.href="http://www.baidu.com"; // 页面跳转location.assign("http://www.baidu.com"); // 页面跳转}function func3(){location.reload(); // 刷新页面}
</script>
</body>
</html>

4.12.3、history对象:

代表当前窗口的浏览历史记录,可以通过history操作浏览器的前进和后退。例如:

// 向前进一步(相当于点击浏览器的“前进”按钮)
history.forward();// 向后退一步(相当于点击浏览器的“后退”按钮)
history.back();

4.12.4、navigator对象:

提供了浏览器的相关信息,例如浏览器类型和版本、操作系统、语言等。例如:

// 获取浏览器名称和版本信息
var browserName = navigator.appName;
var browserVersion = navigator.appVersion;
console.log(browserName + " " + browserVersion);// 获取操作系统类型
var osName = navigator.platform;
console.log(osName);// 获取语言设置
var language = navigator.language;
console.log(language);

4.13、DOM对象(了解)

DOM document Object Model 文档对象模型

// 整个html文档,会保存一个文档对象document
// console.log( document ); // 获取当前文档的对象

4.13.1、查找标签

  • 直接查找标签
document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")
//返回dom对象,就是标签对象或者数组
  • CSS选择器查找
document.querySelector("css选择器")  //根据css选择符来获取查找到的第一个元素,返回标签对象(dom对象)
document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="i1">DIV1</div><div class="c1">DIV</div>
<div class="c1">DIV</div>
<div class="c1">DIV</div><div class="outer"><div class="c1">item</div>
</div><div class="c2"><div class="c3"><ul class="c4"><li class="c5" id="i2">111</li><li>222</li><li>333</li></ul></div>
</div><script>// 直接查找var ele = document.getElementById("i1");  // ele就是一个dom对象console.log(ele);var eles = document.getElementsByClassName("c1"); // eles是一个数组 [dom1,dom2,...]console.log(eles);var eles2 = document.getElementsByTagName("div"); // eles2是一个数组 [dom1,dom2,...]console.log(eles2);//定位outer下的c1对应的标签var outer = document.getElementsByClassName("outer")[0];var te = outer.getElementsByClassName("c1");console.log(te);// css选择器//层级定位(空格可以表示一个或多个层级)var dom = document.querySelector(".c2 .c3 .c5");console.log(":::",dom);//层级定位var doms = document.querySelectorAll("ul li");console.log(":::",doms);</script></body>
</html>

4.13.2、绑定事件

  • 静态绑定 :直接把事件写在标签元素中
<div id="div" onclick="foo()">click</div><script>function foo(){           console.log("foo函数");   }
</script>
  • 动态绑定:在js中通过代码获取元素对象,然后给这个对象进行后续绑定
<p id="i1">试一试!</p><script>var ele=document.getElementById("i1");ele.onclick=function(){console.log("ok");};</script>

一个元素本身可以绑定多个不同的事件, 但是如果多次绑定同一个事件,则后面的事件代码会覆盖前面的事件代码

  • 在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。

    • 单独使用 this,则它指向全局(Global)对象。在浏览器中,window 就是该全局对象为

    • var x = this;
      
    • 在函数中(作为函数的返回值),函数的所属者/调用者默认绑定到 this 上。

    • function myFunction() {return this;
      }
      
    • 对象方法中的this就是对象本身

    • var person = {firstName  : "John",lastName   : "Doe",id         : 5566,myFunction : function() {return this;}
      };
      
    • 事件中的this就是接收事件的 HTML 标签

    • <button onclick="this.style.display='none'">
      点我后我就消失了
      </button>
      

4.14 进阶操作(重点)

  • ES6新特性

    • ES6是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。
  • 变量提升

    • 查看以下代码, 是否可以被运行

    • function fn(){console.log(name);var name = '大马猴';
      }
      fn()
      
    • 发现问题了么. 这么写代码, 在其他语言里. 绝对是不允许的. 但是在js里. 不但允许, 还能执行. 为什么呢? 因为在js执行的时候. 它会首先检测你的代码. 发现在代码中会有name使用. OK. 运行时就会变成这样的逻辑:

    • function fn(){var name;console.log(name);name = '大马猴';
      }
      fn();
      
    • 看到了么. 实际运行的时候和我们写代码的顺序可能会不一样…这种把变量提前到代码块第一部分运行的逻辑被称为变量提升. 这在其他语言里是绝对没有的. 并且也不是什么好事情. 正常的逻辑不应该是这样的. 那么怎么办? 在新的ES6中. 就明确了, 这样使用变量是不完善的. es6提出. 用let来声明变量. 就不会出现该问题了.

    • function fn(){console.log(name);  // 直接报错, let变量不可以变量提升.let name = '大马猴'; 
      }
      fn()
      
      • 用let声明变量是新版本javascript提倡的一种声明变量的方案
    • let还有哪些作用呢?

    • function fn(){var name = "周杰伦";var name = "王力宏";console.log(name);
      }
      fn()
      
    • 显然一个变量被声明了两次. 这样也是不合理的. var本意是声明变量. 同一个东西. 被声明两次. 所以ES6规定. let声明的变量. 在同一个作用域内. 只能声明一次.

    • function fn(){let name = "周杰伦";console.log(name);let name = "王力宏";console.log(name);
      }
      fn()
      
    • 注意, 报错是发生在代码检查阶段. 所以. 上述代码根本就执行不了. 在同一个作用域内. let声明的变量只能声明一次. 其他使用上和var没有差别.

  • eval函数

    • eval本身在js里面正常情况下使用的并不多. 但是很多网站会利用eval的特性来完成反爬操作. 我们来看看eval是个什么鬼?

    • 从功能上讲, eval非常简单. 它可以动态的把字符串当成js代码进行运行.

    • s = "console.log('我爱你')";
      eval(s);
      
    • 也就是说. eval里面传递的应该是即将要执行的代码(字符串). 那么在页面中如果看到了eval加密该如何是好? 其实只要记住了一个事儿. 它里面不论多复杂. 一定是个字符串.

    • 比如:

    • eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('0.1(\'我爱你\')',62,2,'console|log'.split('|'),0,{}))
      
      • 这一坨看起来, 肯定很不爽. 怎么变成我们看着很舒服的样子呢? 记住. eval()里面是字符串. 记住~!!

      • 那我想看看这个字符串长什么样? 就把eval()里面的东西拷贝出来. 执行一下. 最终一定会得到一个字符串. 要不然eval()执行不了的. 对不…于是就有了下面的操作.

      • 在这里插入图片描述

      • http://tools.jb51.net/password/evalencode, 在赠送你一个在线JS处理eval的网站. 大多数的eval加密. 都可以搞定了.

      • 在这里插入图片描述

  • 内置对象:window

    • window对象是一个很神奇的东西. 你可以把这东西理解成javascript全局的内置对象. 如果我们默认不用任何东西访问一个标识符. 那么默认认为是在用window对象.

    • window.mm = "爱你" //定义了一个全局变量
      console.log(mm); 
      
    • 综上, 我们可以得出一个结论. 全局变量可以用window.xxx来表示.

    • ok. 接下来. 注意看了. 我要搞事情了

      • 想要在函数外部调用该函数内部定义的一个内置函数,不可使用返回值的机制,如何实现?
    • (function(){let chi = function(){console.log("我是吃")}window.w_chi = chi //全局变量chi
      })();
      //如何调用
      w_chi() //chi()//换一种写法. 你还认识么?
      (function(w){let chi = function(){console.log("我是吃")}w.chi = chi
      })(window);
      chi()
      

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/876153.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

十大排序的稳定性和时间复杂度

十大排序算法的稳定性和时间复杂度是数据结构和算法中的重要内容。 以下是对这些算法的稳定性和时间复杂度的详细分析&#xff1a; 稳定性 稳定性指的是排序算法在排序过程中是否能够保持相等元素的原始相对顺序。根据这个定义&#xff0c;我们可以将排序算法分为稳定排序和…

大数据|使用Apache Spark 删除指定表中的指定分区数据

文章目录 概述方法 1: 使用 Spark SQL 语句方法 2: 使用 DataFrame API方法 3: 使用 Hadoop 文件系统 API方法 4: 使用 Delta Lake使用注意事项常见相关问题及处理结论 概述 Apache Spark 是一个强大的分布式数据处理引擎&#xff0c;支持多种数据处理模式。在处理大型数据集时…

C#中的异步编程:如何有效地使用async和await关键字以提高应用程序的性能和响应性

在C#中&#xff0c;异步编程是一种处理并发操作和提高应用程序性能的重要技术。使用async和await关键字可以简化异步编程&#xff0c;并提供更清晰和可读的代码。 以下是一些有效使用async和await关键字的方法&#xff0c;以提高应用程序性能和响应性&#xff1a; 使用异步方…

【OCPP】ocpp1.6协议第5.7章节Get Composite Schedule的介绍及翻译

目录 5.7 获取组合计划Get Composite Schedule-概述 1. 目的 2. 消息类型 3. 消息格式 GetCompositeSchedule.req GetCompositeSchedule.conf 4. 使用场景 5.7 获取组合计划Get Composite Schedule-原文译文 5.7 获取组合计划Get Composite Schedule-概述 在OCPP 1.6协议中,第…

C++笔记---缺省参数和函数重载

1. 缺省参数 1.1 定义 缺省参数是声明或定义函数时为函数的参数指定一个缺省值&#xff08;默认值&#xff09;。在调用该函数时&#xff0c;如果没有指定实参 则采用该形参的缺省值&#xff0c;否则使用指定的实参&#xff0c;缺省参数分为全缺省和半缺省参数。 void Func(…

XML 和 SimpleXML 入门教程

XML 和 SimpleXML 入门教程 XML&#xff08;可扩展标记语言&#xff09;是一种用于存储和传输数据的标记语言。它是一种自我描述的语言&#xff0c;允许用户定义自己的标签来表示数据。SimpleXML 是 PHP 中的一个扩展&#xff0c;用于解析和操作 XML 数据。本文将介绍 XML 和 …

CSDN中各种公式编辑格式记录

在CSDN博客平台码公式可太难记格式了。CSDN支持Markdown语法&#xff0c;并集成了MathJax库来渲染LaTeX公式&#xff0c;做个笔记给自己时时翻翻吧。 1. 插入行内公式 行内公式是指嵌入在文本行中的公式&#xff0c;它不会独占一行。在CSDN中使用$符号来包围LaTeX公式代码&am…

docker 安装单机版redis

把这三个放上去 修改成自己的 按照自己需求来 照图片做 vim redis.conf vim startRedis.sh mv startRedis.sh deployRedis.sh sh deployRedis.sh docker run --privilegedtrue \ --name dev.redis --restartalways \ --network dev-net \ -v ./config/redis.conf:/etc/r…

《昇思25天学习打卡营第三十三天|7月26号》

昇思25天学习打卡营 在昇思25天学习打卡营的第33天7月26号&#xff0c;我深入学习了Python编程。通过课程的系统学习和实践编程项目&#xff0c;我逐渐掌握了Python语言的基本语法和核心概念。 特别是在函数定义和数据结构的应用上&#xff0c;我学习到了一些新的东西。以为平…

鸿蒙华为登录(以及导航页面跳转)

//登录华为登录界面以及跳转 //切记一定要写路径&#xff0c;不写路径&#xff0c;容易报错&#xff0c;还有一定要记得导一下包&#xff08;Arouter&#xff09; //接下来是鸿蒙界面导航跳转 //进行跳转 TabContent组件不支持设置通用宽度属性&#xff0c;其宽度默认撑满Tab…

RedHat9 | Ansible 处理任务失败

环境版本说明 RedHat9 [Red Hat Enterprise Linux release 9.0]Ansible [core 2.13.3]Python [3.9.10]jinja [3.1.2] 1. 忽略任务失败 Ansible评估各任务的返回代码&#xff0c;从而确定任务是成功还是失败通常而言&#xff0c;当任务失败时&#xff0c;Ansible将立即在该主…

【SpringBoot】Web开发之URL映射

RequestMapping("/getDataById/{id}") public String getDataById(PathVariable("id") Long id){ return "getDataById:"id; }46 如果URL中的参数名称与方法中的参数名称一致&#xff0c;则可以简化为&#xff1a; RequestMapping("/get…

C++从入门到起飞之——友元内部类匿名对象 全方位剖析!

&#x1f308;个人主页&#xff1a;秋风起&#xff0c;再归来~&#x1f525;系列专栏&#xff1a;C从入门到起飞 &#x1f516;克心守己&#xff0c;律己则安 目录 1、友元 2、内部类 3. 匿名对象 4、完结散花 1、友元 • 友元提供了⼀种突破类访问限定符封装的…

自定义prometheus监控获取nginx_upstream指标

1、前言 上篇文章介绍了nginx通过nginx_upstream_check_module模块实现后端健康检查&#xff0c;这篇介绍一下如何自定义prometheus监控获取nginx的upstream指标来实时监控nginx。 2、nginx_upstream_status状态 支持以下三种方式查看nginx_upstream的状态 /status?formatht…

数据结构-C语言-排序(4)

代码位置&#xff1a; test-c-2024: 对C语言习题代码的练习 (gitee.com) 一、前言&#xff1a; 1.1-排序定义&#xff1a; 排序就是将一组杂乱无章的数据按照一定的规律&#xff08;升序或降序&#xff09;组织起来。(注&#xff1a;我们这里的排序采用的都为升序) 1.2-排…

Git拉取国外远程嵌套代码

背景&#xff1a;拉取远程国外服务器的代码有时很有必要&#xff0c;一是代码较新&#xff0c;可以避免很多Bug和安全漏洞&#xff1b;二是使用技术较新&#xff0c;能够与国外享受同等技术和技术服务&#xff1b;还能跳过版本依赖问题&#xff0c;避免很多版本依赖和繁琐的编译…

Artix7系列FPGA实现SDI视频编解码+图像缩放+多路视频拼接,基于GTP高速接口,提供4套工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本博已有的FPGA图像缩放方案本博已有的已有的FPGA视频拼接叠加融合方案本方案的无缩放应用本方案在Xilinx--Kintex系列FPGA上的应用本方案在Xilinx--Zynq系列FPGA上的应用 3、详细设计方案设计原理框图S…

JavaScript(17)——事件监听

什么是事件&#xff1f; 事件是在编程时系统内发生的动作或发生的事情&#xff0c;比如用户在网页上单击一个按钮 什么是事件监听&#xff1f; 就是让程序检测是否有事件产生&#xff0c;一旦有事件触发&#xff0c;就立刻调用一个函数做出响应&#xff0c;也称为绑定事件或…

【Javascript】前端面试基础2【每日学习并更新10】

模块化开发是怎样做的&#xff1f; 立即执行函数&#xff0c;不暴露私有成员 异步加载JS的方式有哪些 那些操作会造成内存泄漏 是什么&#xff1a;内存泄漏指任何对象在您不再拥有或需要它之后仍然存在造成内存泄漏&#xff1a; setTimeout的第一个参数使用字符串而非函数的…

C#初级——结构体

结构体 结构体是值类型的数据结构&#xff0c;用于组织和存储相关数据&#xff0c;可以存储各种数据类型的相关数据。 结构体定义 struct 结构体名 { 访问类型 数据类型 数据名1; 访问类型 数据类型 数据名2; …… } struct Vector2{public int row;public …