安全js前置知识整理

1.grammer

1.var

var a =1 局部变量(只有自己能拿到)或者定义为let

a=1 全局变量

var a ,b; 可声明多个变量

var a=1; a='hello'

上述知, java是一种动态类型语言,可随时更改类型。第二次赋值时,变量a已存在,所以无需在使用var命令

php/python/js 灵活的动态语言,java/c++静态语言

var x = 1; var x; x声明了两次,第二次无效

var x = 1; var x = 2; 第二次声明时进行赋值,会覆盖掉前面的值

2.变量提升

JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(hoisting)。

console.log(a);

var a=1;

上面代码首先使用console.log方法,在控制台(console)显示变量a的值。这时变量a还没有声明和赋值,所以这是一种错误的做法,但是实际上不会报错。因为存在变量提升,真正运行的是下面的代码。

var a;
console.log(a); 先声明,没有赋值,所以是undefined的状态
a = 1;

3.注释

// 单行注释
/*
 多行
 注释
*/

JavaScript 可以兼容 HTML 代码的注释,所以也被视为合法的单行注释,如下:

x = 1; <!-- x = 2;  只有x=1会执行
--> x = 3;     -->只有在行首,才会被当成单行注释

在这里插入图片描述

function countdown(n) {
  while (n --> 0) console.log(n);-->当作n--,直到减为0
  }
  countdown(3)

在这里插入图片描述

4.三元运算符(也可用于逻辑判断)

(条件) ? 表达式1 : 表达式2   

上述代码中,如果“条件”为true,则返回“表达式1”的值,否则返回“表达式2”的值。

var even = (n % 2 === 0) ? true : false;
上面代码中,如果n可以被2整除,则even等于true,否则等于false
上述三元运算符与下方的if语句结果相等同
var even;
if (n % 2 === 0) {
  even = true;
} else {
  even = false;
}
var myVar;
console.log(
  myVar ?            判断有无值
  'myVar has a value' :   有值输出这个
  'myVar does not have a value'   无值输出这个
)
var msg = '数字' + n + '是' + (n % 2 === 0 ? '偶数' : '奇数');

在这里插入图片描述
运行结果为:在这里插入图片描述
数字和字符串加在一起会变成字符串的相加(连接)

js中的"+"为字符串的连接符,单双引号成对出现,单引号可以包裹双引号,双引号包裹单引号
安全js前置知识整理_第1张图片

2.window对象

alert 弹窗 onfocus聚焦 onblur失焦 onclick点击

1.window.self window.window

window.selfwindow.window属性都指向窗口本身

window.self === window // true
window.window === window // true

2.window.frames,window.length

window.frames属性返回一个类似数组的对象,成员为页面内所有框架窗口,包括frame元素和iframe元素。window.frames[0]表示页面中第一个框架窗口。

如果iframe元素设置了idname属性,那么就可以用属性值,引用这个iframe窗口。比如 // 下面的脚本在 about.html 里面 var frameEl = window.frameElement; if (frameEl) { frameEl.src = 'other.html'; }

3.window 对象的方法

window.alert(),window.prompt(),window.confirm()

window.alert()window.prompt()window.confirm()都是浏览器与用户互动的全局方法。它们会弹出不同的对话框,要求用户做出回应。注意,这三个方法弹出的对话框,都是浏览器统一规定的式样,无法定制。

(1)window.alert()

window.alert()方法弹出的对话框,只有一个“确定”按钮,往往用来通知用户某些信息。
安全js前置知识整理_第2张图片
window.alert()方法的参数只能是字符串,没法使用 CSS 样式,但是可以用\n指定换行。

alert('本条提示\n分成两行');
(2)window.prompt()

window.prompt()方法弹出的对话框,提示文字的下方,还有一个输入框,要求用户输入信息,并有“确定”和“取消”两个按钮。它往往用来获取用户输入的数据。
安全js前置知识整理_第3张图片

var result = prompt('您的年龄?', 25)

上面代码会跳出一个对话框,文字提示为“您的年龄?”,要求用户在对话框中输入自己的年龄(默认显示25)。用户填入的值,会作为返回值存入变量result

window.prompt()的返回值有两种情况,可能是字符串(有可能是空字符串),也有可能是null。具体分成三种情况。

  1. 用户输入信息,并点击“确定”,则用户输入的信息就是返回值。
  2. 用户没有输入信息,直接点击“确定”,则输入框的默认值就是返回值。
  3. 用户点击了“取消”(或者按了 ESC 按钮),则返回值是null

window.prompt()方法的第二个参数是可选的,但是最好总是提供第二个参数,作为输入框的默认值。

(3)window.confirm()

window.confirm()方法弹出的对话框,除了提示信息之外,只有“确定”和“取消”两个按钮,往往用来征询用户是否同意。
安全js前置知识整理_第4张图片

var result = confirm('你最近好吗?');

安全js前置知识整理_第5张图片
上面代码弹出一个对话框,上面只有一行文字“你最近好吗?”,用户选择点击“确定”或“取消”。

confirm方法返回一个布尔值,如果用户点击“确定”,返回true;如果用户点击“取消”,则返回false

var okay = confirm('wangpeiting');
  if (okay) {
  // 用户按下“确定”
  } else {
  // 用户按下“取消”
  }

安全js前置知识整理_第6张图片

4.location对象

// 当前网址为 http://user:[email protected]:4097/path/a.html?x=111#part1
document.location.href(输入的命令)
// "http://user:[email protected]:4097/path/a.html?x=111#part1"(得出结果)
document.location.protocol(协议)  常见三种协议:http  https  ftp
// "http:"
document.location.host(包含端口)
// "www.example.com:4097"
document.location.hostname
// "www.example.com"
document.location.port
// "4097"
document.location.pathname
// "/path/a.html"
document.location.search(?之后)
// "?x=111"
document.location.hash(#之后)
// "#part1"
document.location.username
// "user"
document.location.password
// "passwd"
document.location.origin()
// "http://user:[email protected]:4097"

跨域 :协议相同 host相同 port相同

这些属性里面,只有origin属性是只读的,其他属性都可写。

注意,如果对Location.href写入新的 URL 地址,浏览器会立刻跳转到这个新地址。

document.location.href = 'http://www.example.com';

方法

(1)Location.assign()

assign方法接受一个 URL 字符串作为参数,使得浏览器立刻跳转到新的 URL。如果参数不是有效的 URL 字符串,则会报错。

document.location.assign('http://www.example.com')
(2)Location.replace()(删除历史记录)

replace方法接受一个 URL 字符串作为参数,使得浏览器立刻跳转到新的 URL。如果参数不是有效的 URL 字符串,则会报错。

它与assign方法的差异在于,replace会在浏览器的浏览历史History里面删除当前网址,也就是说,一旦使用了该方法,后退按钮就无法回到当前网页了,相当于在浏览历史里面,使用新的 URL 替换了老的 URL。它的一个应用是,当脚本发现当前是移动设备时,就立刻跳转到移动版网页。

document.location.replace('http://www.example.com')

5.URL 的编码和解码

网页的 URL 只能包含合法的字符。合法字符分成两类。

  • URL 元字符:分号(;),逗号(,),斜杠(/),问号(?),冒号(:),at(@),&,等号(=),加号(+),美元符号($),井号(#
  • 语义字符:a-zA-Z0-9,连词号(-),下划线(_),点(.),感叹号(!),波浪线(~),星号(*),单引号('),圆括号(()

除了以上字符,其他字符出现在 URL 之中都必须转义,规则是根据操作系统的默认编码,将每个字节转为百分号(%)加上两个大写的十六进制字母。

JavaScript 提供四个 URL 的编码/解码方法。

  • encodeURI()
  • encodeURIComponent()
  • decodeURI()
  • decodeURIComponent()
  • 1.encodeURL()

encodeURI()方法用于转码整个 URL。它的参数是一个字符串,代表整个 URL。它会将元字符和语义字符之外的字符,都进行转义。

encodeURI('http://www.example.com/q=春节')
// "http://www.example.com/q=%E6%98%A5%E8%8A%82"

安全js前置知识整理_第7张图片
encode-----编码 decode------解码

2.encodeURLComponent()

encodeURIComponent()方法用于转码 URL 的组成部分,会转码除了语义字符之外的所有字符,即元字符也会被转码。所以,它不能用于转码整个 URL。它接受一个参数,就是 URL 的片段。

encodeURIComponent('春节')
// "%E6%98%A5%E8%8A%82"
encodeURIComponent('http://www.example.com/q=春节')
// "http%3A%2F%2Fwww.example.com%2Fq%3D%E6%98%A5%E8%8A%82"(将协议也一起转了)

上面代码中,encodeURIComponent()会连 URL 元字符一起转义,所以如果转码整个 URL 就会出错。

3.URL接口实例属性

URL 实例的属性与Location对象的属性基本一致,返回当前 URL 的信息。

  • URL.href:返回整个 URL
  • URL.protocol:返回协议,以冒号:结尾
  • URL.hostname:返回域名
  • URL.host:返回域名与端口,包含:号,默认的80和443端口会省略
  • URL.port:返回端口
  • URL.origin:返回协议、域名和端口
  • URL.pathname:返回路径,以斜杠/开头
  • URL.search:返回查询字符串,以问号?开头
  • URL.searchParams:返回一个URLSearchParams实例,该属性是Location对象没有的
  • URL.hash:返回片段识别符,以井号#开头
  • URL.password:返回域名前面的密码
  • URL.username:返回域名前面的用户名
var url = new URL('http://user:[email protected]:4097/path/a.html?x=111#part1');
url.href
// "http://user:[email protected]:4097/path/a.html?x=111#part1"
url.protocol
// "http:"
url.hostname
// "www.example.com"
url.host
// "www.example.com:4097"
url.port
// "4097"
url.origin(只有origin只读)
// "http://www.example.com:4097"
url.pathname
// "/path/a.html"
url.search
// "?x=111"
url.searchParams
// URLSearchParams {}
url.hash
// "#part1"
url.password
// "passwd"
url.username
// "user"

这些属性里面,只有origin属性是只读的,其他属性都可写,并且会立即生效。

var url = new URL('http://example.com/index.html#part1');
url.pathname = 'index2.html';
url.href // "http://example.com/index2.html#part1"

4.URLSearchParams.toString()

toString方法返回实例的字符串形式。

var url=new URL('https://example.com?foo=1&bar=2');
console.info(url);
var params=new URLSearchParams(url.search);
console.info(params.toString());     // "foo=1&bar=2' 

那么需要字符串的场合,会自动调用toString方法

5.URLSearchParams.append()

append()方法用来追加一个查询参数。它接受两个参数,第一个为键名,第二个为键值,没有返回值。

var params = new URLSearchParams({'foo': 1 , 'bar': 2});
params.append('baz', 3);
console.info(params.toString())   // "foo=1&bar=2&baz=3"

append()方法不会识别是否键名已经存在

var params = new URLSearchParams({'foo': 1 , 'bar': 2});
params.append('foo', 3);
console.info(params.toString())   // "foo=1&bar=2&foo=3"

上面代码中,查询字符串里面foo已经存在了,但是append依然会追加一个同名键。js中接第一个,php第二个

6.URLSearchParams.delete()

delete()方法用来删除指定的查询参数。它接受键名作为参数。

var params = new URLSearchParams({'foo': 1 , 'bar': 2});
params.delete('bar');
params.toString() // "foo=1"

7.URLSearchParams.has()

has()方法返回一个布尔值,表示查询字符串是否包含指定的键名。

var params = new URLSearchParams({'foo': 1 , 'bar': 2});
console.info(params.has('bar'))    // true   有打印ture
console.info(params.has('baz'))    // false  没有打印false

8.URLSearchParams.set()

set()方法用来设置查询字符串的键值。

它接受两个参数,第一个是键名,第二个是键值。如果是已经存在的键,键值会被改写,否则会被追加。

var params = new URLSearchParams('?foo=1');
params.set('foo', 2);
params.toString() // "foo=2"            foo存在,被改写
params.set('bar', 3);
params.toString() // "foo=2&bar=3"      bar不存在,追加bar

如果有多个的同名键,set会移除现存所有的键。

var params = new URLSearchParams('?foo=1&foo=2');
params.set('foo', 3);
params.toString()   // "foo=3"   由于foo存在,原有的值会被改写

9.URLSearchParams.get(),URLSearchParams.getAll()

get()方法用来读取查询字符串里面的指定键。它接受键名作为参数。

var params = new URLSearchParams('?foo=1');
console.info(params.get('foo'))     // "1"    存在为1
console.info(params.get('bar'))     // null   不存在为null

两个地方需要注意。第一,它返回的是字符串,如果原始值是数值,需要转一下类型;第二,如果指定的键名不存在,返回值是null

如果有多个的同名键,get返回位置最前面的那个键值。(php获得最后一个)

var params = new URLSearchParams('?foo=3&foo=2&foo=1');
console.info(params.get('foo'))      // "3"  得到最前面的值

getAll()方法返回一个数组,成员是指定键的所有键值。它接受键名作为参数。

var params = new URLSearchParams('?foo=1&foo=2');
console.info(params.getAll('foo'))     // ["1", "2"]

上面代码中,查询字符串有两个foo键,getAll返回的数组就有两个成员。

10.URLSearchParams.sort()

sort()方法对查询字符串里面的键进行排序,规则是按照 Unicode 码点从小到大排列。

该方法没有返回值,或者说返回值是undefined

var params = new URLSearchParams('c=4&a=2&b=3&a=1');
console.info(params.sort());
console.info(params.toString())    //a=2&a=1&b=3&c=4

在这里插入图片描述

上面代码中,如果有两个同名的键a,它们之间不会排序,而是保留原始的顺序。

你可能感兴趣的:(笔记,javascript,安全,前端)