JavaScript预备知识

公众号iOS逆向

发布于 2022-08-22 13:11:28

5130

发布于 2022-08-22 13:11:28

文章被收录于专栏：iOS逆向与安全

前言

一个有具体功能的完整网页，一般由3部分组成：

HTML（内容和结构）：HyperText Markup Language，超文本标记语言。用来结构化网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
css（样式）：Cascading Style Sheets层叠样式表是一种样式规则语言，允许我们精确地设计HTML的样式，例如设置背景颜色和字体，在多个列中布局内容。
JavaScript(交互效果) ：JavaScript 是一种符合ECMAScript规范的脚本编程语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画。

脚本语言是为了缩短传统编程语言从编写-编译-运行这个过程而开发的一种简单类型语言。

I 预备知识

1.1 术语：解释（interpret）和编译 (compile)

编译原理 : https://blog.csdn.net/z929118967/article/details/123778003在解释型语言中，代码自上而下运行，且实时返回运行结果。

js代码由浏览器执行前，不需要将其转化为其他形式,代码将直接以文本格式（text form）被接收和处理。

编译型语言需要先将代码转化（编译）成另一种形式才能运行。

C++,Objective C都是编译语言，必须先通过编译器生成机器码,然后才能由计算机运行。

Objective-C与swift都采用Clang作为编译器前端，编译器前端主要进行语法分析，语义分析，生成中间代码，在这个过程中，会进行类型检查，如果发现错误或者警告会标注出来在哪一行。

编译器后端会进行机器无关的代码优化，生成机器语言，并且进行机器相关的代码优化，根据不同的系统架构生成不同的机器码。

在这里插入图片描述

1.2 语言特点

JavaScript 是轻量级解释型语言。

浏览器接受到 JavaScript 代码，并以代码自身的文本格式运行它。技术上，几乎所有 JavaScript 转换器都运用了一种叫做即时编译（just-in-time compiling）的技术；当 JavaScript 源代码被执行时，它会被编译成二进制的格式，使代码运行速度更快。尽管如此，JavaScript 仍然是一门解释型语言，因为编译过程发生在代码运行中，而非之前。 JavaScript能被浏览器进行解释，是一种解释性语言。受浏览器的影响,在不同的浏览器可能表现的效果不一样，存在浏览器差异。

与大多数编程语言不同，JavaScript 没有输入或输出的概念。它是一个在宿主环境（host environment）下运行的脚本语言，任何与外界沟通的机制都是由宿主环境提供的。

浏览器是最常见的宿主环境，但Node.js 的服务器端环境中也包含 JavaScript 解释器，所以JavaScript 也可用作服务器端语言。

JavaScript的语法来源于 Java 和 C，所以这两种语言的许多语法特性同样适用于 JavaScript。
JavaScript 是一种“动态类型语言”（弱类型数据语言），这意味着不需要指定变量将包含什么数据类型,如果你声明一个变量并给它一个带引号的值，浏览器就会知道它是一个字符串：

let myString = 'Hello';
//提供了一个函数typeof用于检测数据属于哪个类型
//1.typeof 变量名
//2.typeof（变量名）
typeof myString;

JavaScript 通过原型链而不是类来支持面向对象编程 ,JavaScript 同样支持函数式编程。

函数也可以被保存在变量中，并且像其他对象一样被传递。


document.querySelector('html').onclick = function() {
    alert('别戳我，我怕疼。');
}

document.querySelector('html').addEventListener('click', () => {
  alert('别戳我，我怕疼。');
});

//Longhand
function add(num1, num2) {
   return num1 + num2;
}
//Shorthand 箭头函数
const add = (num1, num2) => num1 + num2;
//`匿名函数`: 因为它没有名字，匿名函数还有另一种我们称之为`箭头函数`的写法，箭头函数使用` () => `代替 `function ()`：

函数式编程思想：把操作尽量写成一系列嵌套的函数或者方法调用。函数式编程特点：每个方法必须有返回值（本身对象）,把函数或者Block当做参数,block参数（需要操作的值）block返回值（操作结果） iOS小技能：链式编程在iOS开发中的应用https://blog.csdn.net/z929118967/article/details/75219317

1.3 JavaScript的使用场所

使用场所：任何的HTML页面、所有的动态页面,通过 DOM API动态修改 HTML 和 CSS 来更新用户界面（user interface）。

没有动态更新内容的网页叫做“静态”页面，所显示的内容不会改变。

前端验证,通过验证提高数据的完整性以及安全性。

<input type="submit" value="确定" class="guessSubmit">

const guessSubmit = document.querySelector('.guessSubmit');
guessSubmit.addEventListener('click', checkGuess);
function checkGuess() {
//...
}

操纵html元素，响应用户的各种操作,提高用户体验性。

<input type="text" id="guessField" class="guessField">

const guessField = document.querySelector('.guessField');
  guessField.focus();//让光标在页面加载完毕时自动放置于 <input> 输入框内，这意味着玩家可以马上开始第一次猜测，而无需点击输入框。提高了可用性,为使用户能投入游戏提供一个良好的视觉线。

ajax核心技术之一

ajax: 在浏览器中运行的js脚本，通过http请求异步地访问服务器组件，服务器组件返回xml文件或者json格式的数据，js接收后通过解析xml或json来局部刷新页面，提高用户体验。

获取浏览器的一些相关信息

1.4 脚本调用策略

HTML 元素是按其在页面中出现的次序调用的，如果用 JavaScript 来管理页面上的元素（更精确的说法是使用 文档对象模型 DOM），若 JavaScript 加载于欲操作的 HTML 元素之前，则代码将出错。

内部 JavaScript的解决方案

//监听浏览器的 "DOMContentLoaded" 事件，即 HTML 文档体加载、解释完毕事件
//可能会带来显著的性能损耗
document.addEventListener("DOMContentLoaded", function() {
//  . . .
});

外部JavaScript的解决方案（推荐）

async 属性可以解决调用顺序问题,它告知浏览器在遇到<script>元素时不要中断后续 HTML 内容的加载。不依赖于本页面的其它任何脚本时，async 是最理想的选择。

<script src="script.js" async></script>

defer 属性，脚本将按照在页面中出现的顺序加载和运行：

<!--添加 defer 属性的脚本将按照在页面中出现的顺序加载-->
<script defer src="js/vendor/jquery.js"></script>

<script defer src="js/script2.js"></script>

<script defer src="js/script3.js"></script>

脚本调用策略小结：

如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。
如果脚本需要等待页面解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。

II 应用程序接口（Application Programming Interfaces）

在这里插入图片描述

第三方 API 并没有默认嵌入浏览器中，一般要从网上取得它们的代码和信息，比如地图 API 可以在网站嵌入定制的地图。
浏览器 API 内建于 web 浏览器中，它们可以将数据从周边计算机环境中筛选出来，还可以做实用的复杂工作,比如DOM API。

文档对象模型 API（Document Object Model Application Programming Interfaces ）能通过创建、移除和修改 HTML，为页面动态应用新样式等手段来操作 HTML 和 CSS。
地_理位置 API（Geolocation API）获取地_理信息。
画布（Canvas）和 WebGL API 可以创建生动的 2D 和 3D 图像。
HTMLMediaElement 和 WebRTC 等影音类 API 。

2.1 BOM(Browser Object Model,浏览器对象模型)

整个浏览器窗口是一个顶层window对象

函数 alert() 警告框 prompt() 对话框 confirm() 确认框 window.open("URL"); setTimeout();超时之后调用目标函数 clearTimeout();超时之后清除目标函数 focus() 获得焦点setInterval(,) （以毫秒计）调用执行函数/表达式 setInterval(code,millisec[,"lang"])clearInterval() 取消对 code 的周期性执行,由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

//setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
//setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
window.setInterval(function() {}, 18000)//18S

前端小技能：利用action-type按钮事件实现批量删除 https://blog.csdn.net/z929118967/article/details/123222483

浏览器对象 Navigator对象
属性：appName、 appVersion 、 History 历史记录对象
函数：go(url);
地址栏对象 Location

属性：href 通过改变地址栏访问目标地址

文档对象 Document

2.2 DOM(Document Object Model,文档对象模型)

由W3C定义的一组规范一组API 用来操作HTML对象

直接获得标签对象

1） document.getElementById("id属性值") 通过ID来获得对应的标签对象

    <iframe id="ifr" width=400 height=500></iframe>

        document.getElementById("ifr").src = url[j];

2） document.getElementsByTagName("标签名称") 根据标签名称来获得一组标签，返回数组对象 3） document.getElementsByName("name属性值");根据name属性值来获得一组标签，返回数组对象

间接获得标签对象

1） 父标签.childNodes 获得当前标签的所有孩子节点，返回数组对象 2） 父标签.firstChild 获得第一个孩子节点 3） 父标签.lastChild 获得最后一个孩子节点 4） 标签.nextSibling 获得下一个兄弟节点 5） 标签.previousSibling 获得前一个兄弟节点

创建节点对象

1） document.createElement("标签名称") 创建一个对应的标签对象 2） document.createTextNode("文本值"); 创建一个文本节点对象

操作标签

1） 父标签.appendChild(子节点); 将一个标签追加到父标签当中 2） 父标签.removeChild(子节点); 删除子节点 3） 父标签.insertBefore(newElement,targetElement); 在目标元素之前插入一个新元素 4） 父标签.replaceChild(newElement,oldElement); 用新元素替换掉旧的元素

其他操作

1）标签.style.样式属性 = 属性值; h1.style.backgroundColor = "red";2） 标签.innerHTML 获得或者设置元素的标签体 3） 文本节点.nodeValue 获得文本节点值 4） 标签.parentNode 获得父节点 5) this 表示当前标签对象