JS逆向爬虫语法初阶
dy：a_b,xhs:x-s等有需要联系。
v：a2247429407
【1】JavaScript初识
JavaScript 是一种用于在客户端（即用户的浏览器）上运行的编程语言。它是一种脚本语言，可以直接嵌入到 HTML 页面中，并由浏览器解释和执行。
在客户端环境中，JavaScript 可以与用户交互，操作和修改网页的内容、结构和样式。它可以用于处理用户输入、响应事件、进行表单验证、创建动态效果等。JavaScript 还可以通过浏览器提供的 API 访问浏览器功能，例如操作 DOM（文档对象模型）、发送网络请求、处理本地存储等。
需要注意的是，JavaScript 也可以在服务器端运行，例如使用 Node.js 环境。在服务器端，JavaScript 可以用于构建网络应用、处理后端逻辑等。但在这种情况下，它并不是典型的“客户端语言”，而是作为一种通用的脚本语言使用。
demo服务端：
from flask import Flask, render_template, jsonify
import datetime
app = Flask(__name__, template_folder="templates", static_folder='static')
@app.get("/index")
def index():
timer = datetime.datetime.now().strftime("%Y-%m-%d:%X")
return render_template("index.html", **{"timer": timer})
@app.get("/books")
def get_books():
# 数据库获取书籍
books = ["聊斋志异", "金瓶梅", "国色天香", "剪灯新话"]
return jsonify(books)
app.run()demo客户端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: rebeccapurple;
}
</style>
</head>
<body>
<h3>Hello Alex!</h3>
<p>当前时间：{{timer}}</p>
<p class="books">四大名著</p>
<p class="books_box"></p>
<script>
var dom = document.getElementsByTagName("h3")[0]
dom.onclick = function () {
this.style.color = "green"
}
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
$(".books").click(function () {
$.ajax({
url: "http://127.0.0.1:5000/books",
success: function (res) {
console.log("响应数据:", res);
$(".books_box").append(res.join("，"))
}
})
})
</script>
</body>
</html>【2】基本语法
// JS代码导入方式：
// 1 直接编写
/*
<script>
console.log('hello yuan')
</script>
*/
// 2 导入文件
// <script src="hello.js"></script>
// 单行注释
/*
这是
多行
注释
*/
// 语句分隔符 ; 表示一行代码的结束【3】变量与数据类型
// (1) 声明变量
var x; // 声明一个变量叫x, x没有值. 此时打印x的内容是undefined(没有被定义)
// 对x进行打印看看效果.
// 在控制台记录xxxx => python中的print()
// 查看打印的内容在F12 -> Console -> 可以看到打印的内容
console.log(x);
// (2) 基本数据类型：number string bool
var x = 3.1415; // 声明变量x, 并且给x一个初始值. 123
console.log(typeof x); // 可以查看数据类型. 但是只能看基础数据类型.
var x = "hello yuan";
console.log(typeof x); // string 字符串
var x1 = true;
var x2 = false; // 布尔值. python里面是大写的. js里面是小写.
console.log(typeof x1); // boolean 布尔. python简化成bool
// (3) 高级数据类型： 数组[] 对象{}
var x = [1,2,3]; // 数组. => python的列表.
console.log(typeof x); // 类型叫object
var x = {name:"yuan",age:22}; // 对象 => python的字典.
console.log(typeof x); // 也是object
// (4) 两个特殊值: undefined null
var x; // undefined
console.log(typeof x); // undefined类型... 不占用内存空间的
var x = null; // 空.... 是python的None, 要使用堆内存的....
console.log(typeof x); // object类型
// 一次性可以声明多个变量
var name="yuan", age=20, job="lecturer";
var a, b, c=3, d, e = 5; // 从左到右,声明5个变量, 其中, c=3, e=5类型转换：
// 在js中. 所有的数据和字符串相加. 结果都是字符串拼接.(重点)
var a = 123;
var b = "我爱你";
console.log(a + b);
console.log(1+1); // 2
var a = "123"; // 字符串
// 字符串转化成整数
// parse 转换
// Int 整数
a = parseInt(a);
console.log(a + 3); // 126 数学上的加法. 证明转化成功了.
var a = 123; // 转化成字符串
var b = a.toString(); // 把数字, 转化成字符串
console.log(b + 3); //"1233"
// 一般的程序员不用toString()的.
var a = 123;
var b = a + ""; // 在逆向的过程中. 这种写法是最多的.
console.log(b+333); // "123333" 字符串
var a = 123;
// 数字的toString()可以指定进制
var b = a.toString(16);
console.log(b);
var m = '7b'; // 眼睛看着是字符串. 但是我们知道它应该是一个十六进制的字符串.
// 字符串, 转化成 整数 parseInt
var n = parseInt(m, 16);
console.log(n)【4】运算符
// （1） 科学运算符
+ - * / %
// （2）比较运算符
> < <= >= === !==
// （3） 赋值运算符
+= -= *= /= ++
// 在单独使用a++和++a是没有区别的. 都是让a自增1
var b = a ++; // 先赋值, 后运算...
console.log(a); // 11
console.log(b); // 10
var b = ++ a; // 先计算, 后赋值
console.log(a);
console.log(b);
// （4）逻辑运算符： Python中的and, or, not
// &&, 并且, 左右两端必须同时为真, 结果才能是真..
// ||, 或者, 左右两端, 有一个是真, 结果就是真
// !, 非/不, 非真即假, 非假既真.
console.log(1 > 2 || 3 < 5);
console.log(1 > 2 && 3 < 5);
console.log(!true);
console.log(!false);
// x() && y()
// 该逻辑叫短路...如果前面的表达式已经得到结果了. 后面就不运行了. 相同的逻辑还有||
// 如果x()返回真. 则运行y()
// 如果x()返回假, 则不运行y(). 直接结束判断了.
// （5）逗号运算符
a = 1,2,3,4
b = (1,"yuan",true)
// （6）三目运算：条件? 成立: 不成立
// 案例1
var a = 100;
var b = 20;
var c = a > b ? a: b;
console.log(c);
// 案例2:终极一练
let a = 10;
let b = 20;
let c = 5;
let d = 17;
let e;
let m;
e = (e = a > 3 ? b : c, m = e < b++ ? c-- : a = 3 > b % d ? 27: 37, m++);
// e = a > 3 ? b : c; // e = 20
// b = 21 , m 和 a都是37
// m = e < b++ ? c-- : a = 3 > b % d ? 27: 37;
// e = m++; // e 37 m 38 a 37【5】流程控制语句
分支语句
// 分支语句
if(条件){
// 条件为true时,执行的代码
}else{
// 条件为false时,执行的代码
}
switch(条件){
case 结果1:
// 满足条件执行的结果是结果1时,执行这里的代码..
break;
case 结果2:
// 满足条件执行的结果是结果2时,执行这里的代码..
break;
...
default:
// 条件和上述所有结果都不相等时,则执行这里的代码
}
// （1）双分支
var age = 23
if (age > 18) {
console.log("播放成人电影！")
} else {
console.log("播放未成年电影")
}
// （2）多分支
var score = 45;
if (score >= 90) {
console.log("A");
} else if (score >= 80) {
console.log("B");
} else if (score >= 70) {
console.log("C");
} else if (score >= 60) {
console.log("D");
} else {
console.log("E");
}
// （3）switch多分支
var week = 3;
switch(week){
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3: // 某一个case匹配成功. 那么后面的case就不判断了, 直接被执行.
console.log("星期三");
break;
case 4:
console.log("星期四");
break;
case 5:
console.log("星期五");
break;
case 6:
console.log("星期六");
break;
case 7:
console.log("星期天");
break;
default:
console.log("啥也不是!");
break;
}循环语句
/*
// 循环语句
while(循环的条件){
// 循环条件为true的时候,会执行这里的代码
}
// 循环三要素
for(1.声明循环的开始; 2.条件; 4.循环的计数){
// 3. 循环条件为true的时候,会执行这里的代码
}
* 1. 首先, 会执行语句1, 通常会在语句1里完成对循环变量的初始化
* 2. 然后, 判断表达式2计算的结果是否是真, 如果是真, 则执行循环体, 如果是假, 结束循环
* 3. 执行完循环体后. 执行表达式3，然后回到第二步...
*/
// while 循环
var a = 0; // 1. 初始变量
while (a < 100) { // 2. 条件判断
console.log("我爱你"); // 业务需求...循环内容...
a++; // 3. 步进语句
}
for(var i = 0; i < 10; i++){
console.log(i);
}
【6】字符串对象
// js的字符串对象
var s = "Hello Yuan "
console.log(s.toUpperCase())
console.log(s.toLowerCase())
console.log(s.slice(0, 5))
console.log(s.split(" ")) // ["Hello","Yuan"]
console.log(s.length)
console.log(s.trim(" ").length)
console.log(s.trimEnd(" ").length)
console.log(s.indexOf("Yuan"))
console.log(s.replace("Yuan","Rain"))
console.log(s.startsWith("Hel"))【7】数组
// 注意, 前端js里面的数组. 相当于python的列表, java的List
// 创建数组的方法;
// 1. 直接赋值一个数组
var arr1 = [11,22,33];
console.log(arr1);
// new表示创建对象. 理解成分配内存.
var arr2 = new Array(); // var arr2 = []
// 1. push 在数组的末尾添加数据...
// 2. pop 在数组的末尾删除数据
var arr = [11,22,33,44];
arr.push(55);
var item = arr.pop();
console.log(item);
// 1 unshift 在数组的首位添加数据... 2 shift 删除数组的首位数据
var arr = [11,22,33];
arr.unshift(0); // 在数组的前面插入数据
// console.log(arr);
var item = arr.shift();
console.log(item);
console.log(arr);
var arr = ["a","b","c"];
arr.splice(1,1);
arr.splice(1,0,"b")
arr.splice(1,1,"B")
arr.reverse();
// slice(开始下标,结束下标) 切片,开区间
arr.slice(1,3)
var arr = ["北京","深圳","广州"];
console.log(arr.join(",")); // 把数组转化成字符串
// 循环和遍历
// key 0 1 2 3 4 5
var arr = ["朱元璋", "朱允炆", "朱棣", "朱高炽", "朱高煦", "朱瞻基"];
// 三要素for循环
for(var i = 0; i < arr.length; i++){
console.log(arr[i]);
}
// for-in
for(var x in arr){ // 此时拿到的是数组的索引(key)
console.log(x);
}
// for-of
for (var x of arr){ // 此时拿到的是数组的元素(value)
console.log(x);
}
// arr中的每一个元素执行里面传递进去的函数
// 回调函数的参数是 元素和索引
console.log(ret);
// 高阶函数 map filter【8】对象
var obj = {
"name": "yuan",
age: 18,
girl_friend: {
name: "高圆圆",
age: 28
}
}
// 当他是python的字典, 无缝衔接的. `[]` 也可以翻译成`的`
console.log(obj['girl_friend']['name']);
// 当他是对象... 对象.属性 `.`可以翻译成`的`
console.log(obj.name)
console.log(obj.girl_friend.name)
// 它俩可以混着来.
var w = "girl_friend"
console.log(obj[w].name);
console.log(obj.girl_friend['name']);
// js的对象在使用的时候. 既可以通过`[]`来获取属性的值. 也可以通过`.`来获取属性的值
// 区别: []里面必须放字符串.
// .后面放的必须是属性名(不可以是字符串)
console.log(obj.girl_friend.name); // 68
// 如果想要对代码进行伪装,混淆. 就不能用`.`
console.log(obj['girl_friend']['name']); // 高圆圆
console.log(obj.girl_friend.name); // 高圆圆
var obj = {};
obj.name = "alvin"; // 对象.属性 = 值. 可以给对象增加新的属性(设置一个新的属性)
obj['age'] = 28;
console.log(obj);序列化和反序列化：
| 方法 | 描述 |
|---|---|
JSON.stringify(obj) | 把obj对象转换成json格式字符串，会移除对象方法 |
JSON.parse(str) | 把符合json语法的字符串转换成js对象 |
【9】其它常用对象
// Math对象 Date类
var now=new Date();
console.log(now.toLocaleString( ));
// console.log(Math.random());
console.log( Math.round(Math.random() * 10 ));下一期：1.2、JS函数
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
