WEB安全JavaScript基础

0x001 JavaScript 简介

JavaScript 是目前 web 开发中不可缺少的脚本语言，js 不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行 JavaScript 代码。诞生于 1995 年，当时的主要目的是验证表单的数据是否合法。JavaScript 本来应该叫Livescript，但是在发布前夕，想搭上当时超热的 java 顺风车，临时把名字改为了 JavaScript。（也就是说 js 跟 java 没有关系，当时只是想借助 java 的名气）。

javaScript 被用来改进设计、验证表单、检测浏览器、创建 cookies，等等。JavaScript
是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比如：Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome 和 Opera等。

常用于修改 HTML 及 CSS 代码 和验证表单

0x002 JavaScript 语句

1.在编程语言中，这些编程指令被称为语句。

JavaScript 程序就是一系列的编程语句。

注释：在 HTML 中，JavaScript 程序由 web 浏览器执行。

2.JavaScript 语句由以下构成：

值、运算符、表达式、关键词和注释。

3.用分号（;）分隔 JavaScript 语句。

JavaScript 语句标识符

JavaScript 语句通常以一个 语句标识符为开始，并执行该语句。

语句标识符是保留关键字不能作为变量名使用。

下表列出了 JavaScript 语句标识符 (关键字) ：

语句 描述
break 用于跳出循环。
catch 语句块，在 try 语句块执行出错时执行 catch 语句块。
continue 跳过循环中的一个迭代。
do ... while 执行一个语句块，在条件语句为 true 时继续执行该语句块。
for 在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function 定义一个函数
if ... else 用于基于不同的条件来执行不同的动作。
return 退出函数
switch 用于基于不同的条件来执行不同的动作。
throw 抛出（生成）错误 。
try 实现错误处理，与 catch 一同使用。
var 声明一个变量。
while 当条件语句为 true 时，执行语句块。

0x003 JavaScript 注释

单行注释： // 注释语句 快捷键 ctrl+/
多行注释： /* 注释语句 */ 快捷键 ctrl+shift+/

注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！

0x004 JavaScript 变量

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript 语句和 JavaScript 变量都对大小写敏感。
JavaScript 单双引号没区别

0x005 JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

数据类型图解

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

1.JavaScript 数字

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

以 0 开头 默认使用 8 进制来表示我的这个数字

以 0x 开头 默认使用 16 进制来表述我的这个数字

如果以-开头 默认以负数

如果我带有 e：以科学计数法来解析我的这个数字

parseInt(..) 将某值转换成数字，不成功则 NaN

parseFloat(..) 将某值转换成浮点数，不成功则 NaN

特殊值：

NaN，非数字。可使用 isNaN(num) 来判断。

Infinity，无穷大。可使用 isFinite(num) 来判断。

2.JavaScript 字符串

字符串是存储字符（比如 "Bill Gates"）的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号：

var carname="Volvo XC60";
var carname='Volvo XC60';

字符串是存储字符的变量，用来表示文本的数据类型，程序中的字符串是包含单引号/双引号的，由单引号来界定我双引号中包含的字符串

  • obj.length 长度
  • obj.trim() 移除空白
  • obj.trimLeft()
  • obj.trimRight)
  • obj.charAt(n) 返回字符串中的第 n 个字符
  • obj.concat(value, ...) 拼接
  • obj.indexOf(substring,start) 子序列位置
  • obj.lastIndexOf(substring,start) 子序列位置
  • obj.substring(from, to) 根据索引获取子序列
  • obj.slice(start, end) 切片
  • obj.toLowerCase() 大写
  • obj.toUpperCase() 小写
  • obj.split(delimiter, limit) 分割
  • obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g 无效)
  • obj.match(regexp) 全局搜索，如果正则中有 g 表示找到全部，否则只找到第一个。
  • obj.replace(regexp, replacement) 替换，正则中有 g 则替换所有，否则只替换第一个匹配项

replacement 可以是字符串，也可以是函数。如果它是字符串，那么每个匹配都将由字符串替换。但是 replacement 中的 $ 字符具有特定的含义。如下表所示，它说明从模式匹配得到的字符串将用于替换。

字符 替换文本
$1、$2、...、$99 与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。
$& 与 regexp 相匹配的子串。
$` 位于匹配子串左侧的文本。
$' 位于匹配子串右侧的文本。
$$ 直接量符号。

3.JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false。一般是用在流程控制语句中，字符串和数字类型都是无穷多个。这两个个值一般用于说明某个事物是真或者假。

var x=true;
var y=false;

js 一般用布尔类型来比较所得到的结果

布尔类型仅包含真假，

  • == 比较值相等
  • != 不等于
  • === 比较值和类型相等
  • !=== 不等于
  • || 或
  • && 且

4.JavaScript 判断

var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};
  • alert(typeof a) ------------> string
  • alert(typeof b) ------------> number
  • alert(typeof c) ------------> object
  • alert(typeof d) ------------> object
  • alert(typeof e) ------------> function
  • alert(typeof f) ------------> function

5.Undefined 和 Null

关键字 null 是一个特殊的值，它表示变量为空值，用来定义空的或者是不存在的引用。

如果试图去引用一个没有定义的值，就会返回一个 null。

可以通过将变量的值设置为 null 来清空变量。

cars=null;
person=null;

Undefined 这个值表示变量不含有值。

注意：null 并不等于"" 或者 0

！null 和 undefined 区别：

null 它表示一个变量被赋予一个空值，而 undefined 是表示变量还没有被赋值。

6.JavaScript 数组

  1. 数组内可以存放任意数据类型的数据（本质上它也是对象）
  2. 数组元素不赋值的情况下 值为 undefined
  3. 如果数组打印的时候，元素不赋值""
  4. 访问数组范围之外的元素，不会出现越界的问题，undefined
  5. 定义数组大小，照样可以添加更多元素
6.1 定义数组的方法
  1. var arr=[]//定义一个空数组
  2. var arr=[10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"]]//定义的同时赋值
  3. var arr=new Array();//定义一个空数组
  4. var arr = new Array(10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"])//定义的同时赋值
  5. var arr=new Array(10)//定义一个长度为 10 的数组
6.2 数组的操作
  • obj.length 数组的大小
  • obj.push(ele) 尾部追加元素
  • obj.pop() 尾部获取一个元素
  • obj.unshift(ele) 头部插入元素
  • obj.shift() 头部移除元素
  • obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
  • obj.splice(n,0,val) 指定位置插入元素
  • obj.splice(n,1,val) 指定位置替换元素
  • obj.splice(n,1) 指定位置删除元素
  • obj.slice( ) 切片
  • obj.reverse( ) 反转
  • obj.join(sep) 将数组元素连接起来以构建一个字符串
  • obj.concat(val,..) 连接数组
  • obj.sort( ) 对数组元素进行排序

0x006 JavaScript 对象

JavaScript 是一种基于原型的语言，它没类的声明语句，比如 C++或 Java 中用的。这有时会对习惯使用有类申明语句语言的程序员产生困扰。相反，JavaScript 可用方法作类。定义一个类跟定义一个函数一样简单。在下面的例子中，我们定义了一个新类 Person。

第一种方法：

function Person(name) {
    //构造函数里面的方法和属性
    this._name = name;
    this.getName = function () {
        console.log(this._name);
    };
    this.setName = function (name) {
        this._name = name;
    };
}

var p = new Person("张三");
p.getName(); // 张三
p.setName("李四");
p.getName(); // 李四

对于上述代码需要注意：
Person 充当的构造函数
this 代指对象
创建对象时需要使用 new

第二种方法：

// 定义类 class Person {
    //类的构造函数，实例化的时候执行，new 的时候执行
    constructor(name) {
        this._name = name;
    }
    getName() {
        console.log(this._name);
    }
    setName(name) {
        this._name = name
    }
}

let p = new Preson('张三')
p.getName(); // 张三
p.setName('李四');
p.getName(); // 李四

0x007 JavaScript 函数

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
    // 执行代码
}

普通函数：

function func(arg){
    return arg+1;
}

var result = func(1);
console.log(result); var result = func(1);
console.log(result);

匿名函数：

没有名字的函数称为匿名函数

setInterval(function(){
    console.log(123);
},500)

自执行函数：

创建函数并且自动执行

(function(arg){
    console.log(arg);
})(1);

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

0x008 JavaScript 作用域

JavaScript 局部作用域

变量在函数内声明，变量为局部变量，具有局部作用域。

局部变量：只能在函数内部访问。

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

JavaScript 全局变量

变量在函数外定义，即为全局变量。

全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

以下实例中 carName 在函数内，但是为全局变量。

// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

0x009 JavaScript 运算符

1.JavaScript 算术运算符

+(加法)、-(减法)、*(乘法)、/(除法)、%(取模/余数)、++(自增)、--(自减)

字符串拼接使用 " + "

2.JavaScript 比较运算符

<、>、、!=、<=、>=
=== 全等于：将数值以及数据类型一并比较
!不全等于：将数值以及数据类型一并比较

3.JavaScript 赋值运算符

  • =
  • +=
  • -=
  • *=
  • /=
  • %=
  • a=a+2;-->a+=2
  • a=a-2;-->a-=2
  • a=a2;-->a=2
  • a=a/2;-->a/=2
  • a=a%2;-->a%=2

4.JavaScript 逻辑运算符

  • && 全真为真
  • || 一个为真就是真
  • ！ 取反

5.JavaScript 三元运算符

表达式 1?表达式 2:表达式 3

当我的表达式 1 成立时 执行表达式 2 否则执行表达式 3

var max = 2>1?'>':'<';
console.log(max);

0x010 JavaScript 流程控制语句

1.if 语句

只有当指定条件为 true 时，该语句才会执行代码。

if (condition)
{
    当条件为 true 时执行的代码
}

请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！

2.if...else 语句

使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

if (time<20)
{
    x="Good day";
}
else
{
    x="Good evening";
}

3.if...else if...else 语句

使用 if....else if...else 语句来选择多个代码块之一来执行。

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

4.switch 语句

请使用 switch 语句来选择要执行的多个代码块之一。

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

5.for 循环

for (var i=0;i<cars.length;i++)
{ 
    document.write(cars[i] + "<br>");
}

6.For...In 循环

var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

7.while 循环

while 循环会在指定条件为真时循环执行代码块。

while (条件)
{
    需要执行的代码
}

8.do...while 循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

do
{
    需要执行的代码
}
while (条件);

0x011 JavaScript 保留关键字

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

关键字

  • 标记的关键字是 ECMAScript5 中新添加的。

0x012 JavaScript 字典

字典 是一种以键-值对形式存储数据的数据结构

var dict = {'k1':"moonsec",'k2':'moon','age':18};
输出字典元素
for(var item in dict){
    console.log(dict[item]);
}

获取指定元素

dict['age'] 获取 key 为 age 的元素

赋值

dict['age']=10

删除元素

delete dict['one'];
delete dict.age;

0x013 JavaScript 转义

  • decodeURI( ) URl 中未转义的字符
  • ecodeURIComponent( ) URI 组件中的未转义字符
  • ecodeURI( ) URI 中的转义字符
  • ecodeURIComponent( ) 转义 URI 组件中的字符
  • escape( ) 对字符串转义
  • unescape( ) 给转义字符串解码
  • URIError 由 URl 的编码和解码方法抛出

0x014 JavaScript 时间

Date 对象

var myDate = new Date();
  • myDate.getYear(); //获取当前年份(2 位)
  • myDate.getFullYear(); //获取完整的年份(4 位,1970-????)
  • myDate.getMonth(); //获取当前月份(0-11,0 代表 1 月) 所以获取当前月份是
  • myDate.getMonth()+1;
  • myDate.getDate(); //获取当前日(1-31)
  • myDate.getDay(); //获取当前星期 X(0-6,0 代表星期天)
  • myDate.getTime(); //获取当前时间(从 1970.1.1 开始的毫秒数)
  • myDate.getHours(); //获取当前小时数(0-23)
  • myDate.getMinutes(); //获取当前分钟数(0-59)
  • myDate.getSeconds(); //获取当前秒数(0-59)
  • myDate.getMilliseconds(); //获取当前毫秒数(0-999)
  • myDate.toLocaleDateString(); //获取当前日期
  • var mytime = myDate.toLocaleTimeString(); //获取当前时间
  • myDate.toLocaleString( ); //获取日期与时间

加一天

var dateTime = new Date(); 
dateTime=dateTime.setDate(dateTime.getDate()+1);
dateTime=new Date(dateTime);
dateTime=dateTime.setDate(dateTime.getDate()+1);

0x015 JavaScript 原型

我们所创建的每一个函数，解析器都会向函数中添加一个属性 prototype , 这个属性对应着一个对象，这个对象就是我们所谓的原型对象。如果函数作为普通函数调用时 prototype 没有任何作用。

当函数以构造函数调用时，它所创建的对象中都会有一个隐含的的属性，指向该构造函数的原型，我们可以通过__proto__来访问该属性

我们可以将对象中公有的内容，统一设置到原型对象中

function Persion(username,age){
}
//console.log(Persion.prototype);

var p = new Persion();
console.log(p.__proto__ == Persion.prototype);
定义原型变量和原型变量
function Persion(username,age){
}
//console.log(Persion.prototype);

Persion.prototype.a = '女';
Persion.prototype.Sayname=function(){
    return Persion.name;
}

var p1 = new Persion('moonsec');
var p2 = new Persion();
alert(p1.Sayname());

0x016 JavaScript 操作 DOM

1.DOM简介

DOM（document object model）文档对象模型，是针对 HTML 和 XML 的一个 API（应用程序接口）。DOM给我们描述了一个具有层次化特点的节点树，允许开发人员增删改查页面的某些部分。

DOM树

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

2.DOM 查找元素

document 获取节点的基本方法
document.getElementById('id'); //通过 id 来获取元素,返回指定的唯一元素。
document.getElementsByName("name"); //通过 name 来获取元素，返回name='name'的集合。
document.getElementsByClassName("classname") //用 classname 来获取元素，返回的是一个 class="classname"的集合(不兼容 IE8 及以下)。
document.getElementsByTagName('div'); //用元素的标签获取元素，返回所有标签=“div”的集合。

2.1 查找

直接查找

var obj = document.getElementById('id');

间接查找

innerText 仅文本

innerHTML 全内容

value

input value 获取当前的值

select 获取选中的 value 的值

document.getElementById('s1').selectedIndex=1

Textarea 获取 value 的值

2.2操作

样式操作

className 列出样式 字符串

classList 列出样式 返回数组

classList.add 增加样式

classList.remove 删除样式

<div class='c1 c2' styple='font-size:16px'></div>
obj.style.fontSize='16px';

属性操作

获取属性

getAttribute()
增加设置一个属性

添加属性

setAttribute('xxx','alexe')

删除属性

removeAttribute(value)

创建标签 并添加到 html 中

第一种方式 字符串方式

insertAdjacentHTML()
    <input type="button" value="+" onclick="add();"/>
    <div id="div1">
        <p><input type="text"/></p>
    </div>
<script>
    function add(){
        var tag="<p><input type='text'></p>"
        document.getElementById('div1').insertAdjacentHTML('beforeEnd',tag);
    }
</script>
</body>

有四种值可用：

  • beforeBegin: 插入到标签开始前
  • afterBegin:插入到标签开始标记之后
  • beforeEnd:插入到标签结束标记前
  • afterEnd:插入到标签结束标记后

第二种方式 对象的方式

document.createElement
    <input type="button" value="+" onclick="add2();"/>
    <div id="div1">
        <p><input type="text"/></p>
    </div>
<script>
    function add(){
        var tag="<p><input type='text'></p>"
        document.getElementById('div1').insertAdjacentHTML('beforeEnd',tag);
    }
    function add2(){
        var tag =document.createElement('input');
        tag.setAttribute('type','text');
        tag.style.color='red';
        var p =document.createElement('p');
        p.appendChild(tag)
        document.getElementById('div1').appendChild(p);
    }
</script>appendChild 在节点后面增加一个子节点

提交表单

任何标签都可以通过 dom 提交

getElementById('id').submit()
    <form id='f1' action="https://www.moonsec.com/">
        <input type="submit" value="提交" />
        <input type="button" value="botton" onclick="Sub();" />
        <a onclick="Sub();">提交</a>
    </form>
<script>
    function Sub(){
        document.getElementById('f1').submit();
    }
</script>

其他

  • console.log 终端输出
  • alert 弹出框
  • confirm 确认框 标题 true false

url 和刷新

  • location.href 获取 url
  • location.href ='url' 重定向
  • location.reload() 重新加载

定时器

setInterval()
clearInterval()

<input id="i1" type="text" />
<input type="button" value="停止" onclick="stop();">
<script>
    function setTime(){
        var tag = new Date();
        document.getElementById('i1').value=tag;
    }
    var obj=setInterval('setTime()','500');
    function stop(){
        clearInterval(obj);
    }

只执行一次

setTimeout()
clearTimeout()

<div id="status"></div>
<input type="button" value="删除" onclick="Delele();">
<script>
    function Delele(){
        document.getElementById('status').innerText="已删除";
        setTimeout(function(){
            document.getElementById('status').innerText="";
        },5000)
    }
</script>

事件

绑定事件两种方式

直接标签绑定 直接标签绑定

onclick=''

先获取 dom 对象，然后进行绑定

document.getElementById('xxx').onclick()

0x017 JavaScript 序列化和反序列化

Json 与字符串的转换

把对象转为字符串

JSON.stringify()

把字符串转为数组

newli = JSON.parse()

序列化 即 js 中的 Object 转化为字符串

使用 toJSONString

var last=obj.toJSONString(); //将 JSON 对象转化为 JSON 字符

使用 stringify

var last=JSON.stringify(obj); //将 JSON 对象转化为 JSON 字符

反序列化 即 js 中 JSON 字符串转化为 Object

0x018 其他教程

菜鸟教程
JavaScript参考手册(附带实验环境)

posted @ 2022-11-17 21:17  Cx330Lm  阅读(47)  评论(0)  编辑  收藏  举报