Javascript 入门-for Pentest

js基础(for pentest) 真的很基础。

JS for pentest

tag 放置位置

内嵌式

理论上js可以写在任何第一个地方 但是一般写在head标签里或者body标签里

1<script type="application/javascript"> 
2alert("内嵌式");
3</script>
1<script>alert("内嵌式");</script>

外链式

首先新建一个文件类型为.js的文件,然后在该文件中写js语句,通过script标签对引入到html页面中。 指定关键字延迟加载js:defer

1<script src="js文件路径地址"/>⭐️
2//defer
3<script defer src="js文件路径地址"/>⭐️

行内式

直接书写在标签身上,是一个简写的事件,所以又称之为事件属性。 onclick单击事件

1<input type="button" value="点我呀!" onclick="alert('暗月渗透测试培训');">
2<button onclick="alert('恭喜你,加入暗月渗透测试培训');">点我呀!</button>

内嵌式和外链式的区别

  1. 内嵌式:将js代码直接写在html页面中,当页面加载时,js代码也会被加载,执行,所以内嵌式的js代码会阻塞页面的加载,影响页面的性能。

  2. 外链式:将js代码写在单独的js文件中,通过script标签引入到html页面中,当页面加载时,js代码不会被加载,执行,只有当页面加载完成后,js代码才会被加载,执行,所以外链式的js代码不会阻塞页面的加载,不会影响页面的性能。

数据类型

Number、String、Boolean、Null、Undefined、Object、Symbol

1var num = 1;
2var str = 'hello';
3var bool = true;
4var nul = null;
5var und = undefined;
6var obj = {name:'zhangsan',age:18};
7var sym = Symbol();

Number

1var num = 1;
2var num = 1.1;
3var num = 1e2; //100
4var num = 1e-2; //0.01
5var num = 0xff; //255 - 16进制 ⭐️
6var num = 0b1111; //15 - 2进制
7var num = 0o17; //15 - 8进制 ⭐️
8var num = infinity; //无穷大
1parseInt(..)    //将某值转换成数字,不成功则NaN⭐️
2parseFloat(..) //将某值转换成浮点数,不成功则NaN
3isNaN(..) //判断某值是否为NaN
4isFinite(..) //判断某值是否为有限数

String

1var str = 'hello';
2var str = "hello";
3var str = `hello`; 
4var words = 'hello' + 'world'; //helloworld
5var words = 'hello' + 1; //hello1
 1words = "hello world";
 2words.length //11
 3words[0] //h
 4words.At(0) //h
 5
 6words.indexOf('wor') //6 搜索字符串中是否包含某个字符串,如果包含则返回第一个字符的索引,否则返回-1
 7words.search('o') ⭐️//4 搜索字符串中是否包含某个字符串,如果包含则返回第一个字符的索引,否则返回-1
 8words[6] //w
 9words.charAt(6) //w
10
11words.slice(0,5) //hello 0-5⭐️
12words.slice(6) //world 6-end⭐️
13
14words = "   hello world   ";
15words.trim()        //   hello world   
16words.trimLeft()    //hello world
17words.trimRight()   //   hello world
18
19words.toUpperCase() //   HELLO WORLD
20words.toLowerCase() //   hello world
21words.split(' ')    //["hello", "world"]⭐️ string to list
22words.split('')     //["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
23words.replace('hello','hi') //   hi world
24words.replace(/hello/g,'hi') //   hi world
25
26words= "hello world";
27words.substr(0,5) //hello

Boolean

1var bool = true;
2var bool = false;
1==   比较值相等
2!=   不等于
3===  比较值和类型相等 ⭐️
4!==  不等于
5||   或
6&&   且
11 == '1'
2true
31 === '1'
4false

判断类型

typeof

1var num = 1;
2typeof num //number

数据结构

list、dict

1list = [1,2,3,4,5]
2dict = {'name':'zhangsan','age':18}

数组

1var arr = [1,2,3,4,5];
2var arr=new Array();
  • push():将一个或多个元素添加到数组末尾,并返回修改后的数组。
  • pop():删除并返回数组的最后一个元素。
  • shift():删除并返回数组的第一个元素。
  • unshift():将一个或多个元素添加到数组的开头,并返回新的长度。
  • slice(start, count):返回一个新数组,包含从起始位置到结束位置(不包括结束位置)的所有元素。
  • splice(start, deleteCount, item1, item2, …):从指定位置开始修改数组,可以删除元素、插入新元素或替换现有元素,并返回一个包含被删除元素的数组。
  • concat(…arrays):连接两个或多个数组(返回新数组)。
  • reverse():反转数组中元素的顺序(操作源数组)。
  • sort():对数组中的元素进行排序。
  • indexOf(searchElement, fromIndex):返回指定元素在数组中第一次出现的位置。
  • lastIndexOf(searchElement, fromIndex):返回指定元素在数组中最后一次出现的位置。

slice() 方法返回一个新的数组,包含从原始数组中指定起始位置到结束位置(不包括结束位置)的所有元素。它接受两个参数:

起始位置(可选):从哪个位置开始提取元素。如果省略,则默认从索引 0 开始。 结束位置(可选):在哪个位置结束提取元素。如果省略,则默认提取到数组末尾。


splice() 可以删除或者替换,它可以用来修改数组。它接受三个参数:

  • 起始位置(必需):从哪个位置开始修改数组。
  • 删除数量(可选):要删除多少个元素。如果省略,则从起始位置开始删除剩余的所有元素。
  • 插入的元素(可选):要插入到数组中的新元素。

splice() 方法将修改原始数组并返回一个包含被删除元素的数组,如果没有元素被删除则返回一个空数组。

数组遍历

1var arr = [1,2,3,4,5];
2for(var i=0;i<arr.length;i++){
3    console.log(arr[i]);
4}
5
6for(i in arr){
7    console.log(arr[i]);
8}

函数

1function fn(){
2    console.log('hello world');
3}
4fn();

参数

1var x = myFunction(7, 8);        // 调用函数,返回值被赋值给 x
2function myFunction(a, b) {
3    return a * b;                // 函数返回 a 和 b 的乘积
4}

匿名函数

1var x = function(a, b) {return a * b};

自执行函数 (创建函数并且自动执行)

1(function(arg){
2    console.log('hello world' + arg);
3})('AAAA');
4
5//output hello worldAAAA

字典

1var dict = {'name':'zhangsan','age':18};
2dict['name'] //zhangsan
3dict.name //zhangsan

遍历字典

1for(k in dict){
2    console.log(k,dict[k])}

序列化json

1var dict = {'name':'zhangsan','age':18};
2var str = JSON.stringify(dict); //序列化成json字符串
3var dict2 = JSON.parse(str); //反序列化成json对象

转义url编码

1decodeURI( )            URl转译不转义URI组件
2decodeURIComponent( )   URI转译转义URI组件如://等
3encodeURI( )            
4encodeURIComponent( )   
5escape( )               转译转义URI组件如等
6unescape( )             给转义字符串解码
7URIError                由URl的编码和解码方法抛出

escape()unescape() 函数是最古老的字符编解码函数。它们用于将非 ASCII 字符转换为 ASCII 字符,并且在大多数情况下已经被废弃了;因为它们无法正确地处理某些字符,特别是 Unicode 字符。

encodeURI()decodeURI() 函数用于对 URI 进行编码和解码。URI 是指统一资源标识符,例如网址。URI 中有保留字符(例如斜杠、冒号、问号等)不会进行编码

encodeURIComponent() decodeURIComponent() 函数与 encodeURI()decodeURI() 函数类似,但它们会对更多的字符进行编码。比如,斜杠。

eval

这个函数在严格模式已经被禁用。

eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。

1eval("alert('xss')"); 

Date

 1var date = new Date();
 2date.getFullYear(); //获取年份 ,如2018
 3date.getMonth(); //获取月份,如1
 4date.getDate(); //获取日期,如13
 5date.getDay(); //获取星期几,如1
 6date.getHours(); //获取小时,13
 7date.getMinutes(); //获取分钟,如40
 8date.getSeconds(); //获取秒,如19
 9date.getMilliseconds(); //获取毫秒,如1
10date.getTime(); //获取时间戳,如1678696819975

增加时间

1var date = new Date();
2date.setHours(date.getHours()+1); //增加1小时

js中没有类的概念,只有对象的概念,所以js中的类只是一个函数而已,只是这个函数的作用是用来创建对象的。

1function Person(name,age){
2    this.name = name;
3    this.age = age;
4    this.say = function(){
5        console.log('hello world');
6    }
7}

创建对象

1var p = new Person('zhangsan',18);
2p.say();

js 目前支持了class关键字,但是它只是一个语法糖,本质上还是一个函数,所以它的继承和原型链还是和之前一样的。

它的函数不需要加function关键字;

 1class Person {
 2    constructor(name, age) {
 3        this.name = name;
 4        this.age = age;
 5    }
 6    say() {
 7        console.log("Hello");
 8    }
 9    setname(name) {
10        this.name = name;
11    }
12    getname() {
13        return this.name;
14    }
15}

原型

JavaScript是一种基于原型的面向对象语言。在JavaScript中,每个对象都有一个指向另一个对象的原型。原型是一个包含共享属性和方法的对象,它充当对象之间的模板或蓝图。如果一个对象需要访问另一个对象的属性或方法,它会沿着原型链向上查找,直到找到该属性或方法为止。

除了共享属性和方法,原型对象还可以用于实现继承。在 JavaScript 中,你可以使用 Object.create() 方法创建一个新对象,并将其原型设置为另一个对象。这种方式创建的对象继承了原型对象的所有属性和方法。

例如,假设你有一个名为 Animal 的对象,它具有一些通用的属性和方法(如 eat()sleep())。现在,你想创建一个 Cat 对象,该对象既拥有 Animal 对象的所有属性和方法,又具有自己的一些特定属性和方法。你可以通过以下方式实现:

 1var Animal = {
 2    eat() {
 3        console.log('动物正在进食')
 4    },
 5    sleep() {
 6        console.log('动物正在睡觉')
 7    }
 8}
 9
10// 创建一个 Cat 对象,并将其原型设置为 Animal 对象
11var cat = Object.create(Animal)
12// 在 Cat 对象上定义自己的属性和方法
13cat.meow = function () {
14    console.log('喵喵喵')
15}

以上代码中,我们先定义了一个 Animal 对象,该对象具有 eat()sleep() 方法。然后,我们使用 Object.create() 方法创建了一个新的 Cat 对象,并将其原型设置为 Animal 对象。最后,我们在 Cat 对象上定义了一个 meow() 方法,使其具有自己的行为。

通过这种原型链的方式,我们可以很容易地实现面向对象编程的核心概念:封装、继承和多态。


笔记记了是一回事, 脑子记住是另一回事, 但是我感觉脑子记不住,主要是我不常用


Javascript 入门-DOM
如何一键安装和更新pip包