JavaScript预备知识

公众号iOS逆向
1,151 阅读8分钟

本文正在参加「金石计划」

前言

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

  1. HTML（内容和结构）： HyperText Markup Language，超文本标记语言。用来结构化网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。

  2. css（样式）： Cascading Style Sheets层叠样式表是一种样式规则语言，允许我们精确地设计HTML的样式，例如设置背景颜色和字体，在多个列中布局内容。

  3. 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 语言特点

  1. JavaScript 是轻量级解释型语言。

浏览器接受到 JavaScript 代码，并以代码自身的文本格式运行它。

技术上，几乎所有 JavaScript 转换器都运用了一种叫做即时编译（just-in-time compiling）的技术；当 JavaScript 源代码被执行时，它会被编译成二进制的格式，使代码运行速度更快。尽管如此，JavaScript 仍然是一门解释型语言，因为编译过程发生在代码运行中，而非之前。

JavaScript能被浏览器进行解释，是一种解释性语言。受浏览器的影响,在不同的浏览器可能表现的效果不一样，存在浏览器差异。

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

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

  1. JavaScript的语法来源于 Java 和 C，所以这两种语言的许多语法特性同样适用于 JavaScript。
  2. JavaScript 是一种“动态类型语言”（弱类型数据语言），这意味着不需要指定变量将包含什么数据类型,如果你声明一个变量并给它一个带引号的值，浏览器就会知道它是一个字符串：
let myString = 'Hello';
//提供了一个函数typeof用于检测数据属于哪个类型
//1.typeof 变量名
//2.typeof（变量名）
typeof myString;
  1. 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开发中的应用blog.csdn.net/z929118967/…

1.3 JavaScript的使用场所

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

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

  1. 前端验证,通过验证提高数据的完整性以及安全性。
<input type="submit" value="确定" class="guessSubmit">


const guessSubmit = document.querySelector('.guessSubmit');
guessSubmit.addEventListener('click', checkGuess);
function checkGuess() {
//...
}
  1. 操纵html元素，响应用户的各种操作,提高用户体验性。
<input type="text" id="guessField" class="guessField">


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

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

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

1.4 脚本调用策略

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

  1. 内部 JavaScript的解决方案
//监听浏览器的 "DOMContentLoaded" 事件，即 HTML 文档体加载、解释完毕事件
//可能会带来显著的性能损耗
document.addEventListener("DOMContentLoaded", function() {
//  . . .
});
  1. 外部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）

在这里插入图片描述

  1. 第三方 API 并没有默认嵌入浏览器中，一般要从网上取得它们的代码和信息，比如地图 API 可以在网站嵌入定制的地图。

  2. 浏览器 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对象

  1. 函数 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

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

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

  1. 文档对象 Document

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

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

  1. 直接获得标签对象

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. 间接获得标签对象

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

  1. 创建节点对象

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

  1. 操作标签

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

  1. 其他操作

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

see also

公众号：iOS逆向

demo: https://codepen.io/zhangkn/pen/BaLyerq?editors=1111

avatar
文章
阅读
粉丝