JS-Web-API_web服务和web端jsapi-程序员宅基地

技术标签: 基础知识总结  JavaScript  前端  

JS 基础知识: ECMA 262 标准
JS-Web-API: W3C 标准

W3C 标准中关于 JS 的规定有:
- DOM 操作
- BOM 操作
- 事件绑定
- ajax 请求(包括 http 协议)
- 存储

W3C 标准没有规定任何 JS 基础相关的东西;
只定义用于浏览器中 JS 操作页面的 API 和全局变量。

1. DOM——文档对象模型
1.1 DOM 本质

html 代码时字符串,浏览器将这些代码结构化,转换为浏览器、js 可识别的文档对象模型。

  • DOM 是哪种基本的数据结构: 树
1.2 DOM 节点操作

document.getElementById(‘id’) //元素
document.getElementByTagName(‘div’) //集合
var x = document.getElementsByClassName(“example color”); //集合 获取包含 “example” 和 “color” 类名的所有元素:
document.querySelector(“p.example”); //元素 获取文档中 class=”example” 的第一个

元素:
document.querySelectorAll(‘p’) //集合

attribute 和 property 的区别
property是DOM中的属性,是JavaScript里的对象;
attribute是HTML标签上的属性,它的值只能够是字符串;

attribute 值得更改会同步到 property 上;
property 值得更改不一定会反映到 attribute 上;
更改property和attribute上的任意值,都会将更新反映到HTML页面中;

1.3 DOM 结构操作
  • 新增节点:appendChild
  • 获取父元素:parentElement
  • 获取子元素:childNodes(集合)
  • 删除节点:removeChild
2. BOM——浏览器对象模型
2.1 navigator

浏览器用于 HTTP 请求的用户代理头的值

//检测浏览器类型
let ua = navigator.userAgent
let isChrome = ua.indexOf('Chrome')
console.log(isChrome)
2.2 screen

Screen 对象包含有关客户端显示屏幕的信息

width:返回显示器屏幕的宽度
height:返回显示屏幕的高度
availWidth:返回显示屏幕的宽度 (除 Windows 任务栏之外)
availHeight:返回显示屏幕的高度 (除 Windows 任务栏之外)
2.3 location

Location 对象包含有关当前 URL 的信息

href:完整的 URL
protocol:当前 URL 的协议
host:端口号
pathname:当前 URL 的路径部分
search:从问号 (?) 开始的 URL(查询部分)
hash:从井号 (#) 开始的 URL(锚)
assign():加载新的文档
reload():重新加载当前文档
replace():用新的文档替换当前文档
2.4 history

History 对象包含用户(在浏览器窗口中)访问过的 URL


属性  描述
length:返回浏览器历史列表中的 URL 数量
back():加载 history 列表中的前一个 URL。
forward():加载 history 列表中的下一个 URL。
go():加载 history 列表中的某个具体页面。
3. 事件
3.1 通用事件绑定
//通用事件绑定
function bindEvent(elem, type, fn){
    
    elem.addEventListener(type, fn);
}
let a = document.getElementsByClassName('a');
bindEvent(a, 'click', function(e){
    
        e.preventDefault()//阻止默认行为
    alert('click')
})
3.2 事件冒泡

html 部分:

<div id="div1">
    <p id="p1">显示</p>
    <p id="p2">隐藏</p>
</div>
<div style="width:300px;height: 300px;background-color: #6dff6a" id="block"></div>

javascript 部分

//方法一:利用事件冒泡
        function bindEvent(elem, type, fn){
    
            elem.addEventListener(type, fn);
        }
        let block = document.getElementById('block');
        let p1 = document.getElementById('p1')
        bindEvent(p1, 'click', function(e){
    
            e.stopPropagation() //阻止事件冒泡
            block.style.display = 'block'
        })

        let div1 = document.getElementById('div1');
        bindEvent(div1, 'click', function(e){
    
            block.style.display = 'none'
        })
//方法二:运用事件代理,利用 e.target 判断
        function bindEvent(elem, type, fn){
    
            elem.addEventListener(type, fn);
        }
        let block = document.getElementById('block');
        let div1 = document.getElementById('div1');
        bindEvent(div1, 'click', function(e){
    
            console.log(e.target.nodeName)
            if(e.target.id === 'p1'){
                block.style.display = 'block'
            }else{
                block.style.display = 'none'
            }
        })
3.3 完善通用绑定事件的函数
        function bindEvent(elem, type, fn, selector){
    
            elem.addEventListener(type, function(e){
    
                if(selector && e.target.matches(selector)){//使用代理
                    fn.call(e.target, e)
                }else{
                    fn(e)
                }
            })
        }

事件代理的好处:

  • 代码简洁
  • 减少浏览器内存占用

题目:
编写一个通用的事件监听函数
描述事件冒泡流程
对于一个无限下拉加载图片的页面,如何给每个图片绑定事件

4. Ajax
4.1 XMLHttpRequest
var xhr = new XMLHttpRequest()
xhr.open('GET', '/api', false)//false=>异步
xhr.onreadystatechange = function(){
    
    //函数异步执行
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            console.log(xhr.responseText)
        }
    }
}
xhr.send(null)
//IE 低版本使用 ActiveXObject
4.2 状态码说明

readyState 状态:

  • 0:未初始化,还没有调用 send() 方法
  • 1:载入,已调用 send() 方法,正在发送请求
  • 2:载入完成,send() 方法执行完成,已收到全部响应内容
  • 3:交互,正在解析响应内容
  • 4:完成,响应内容解析完成,可以在客户端调用了

status 状态:

  • 2xx:表示请求成功。eg:200
  • 3xx:需要重定向,浏览器直接跳转
  • 4xx:客户端请求错误,eg:404
  • 5xx:服务端错误
4.3 跨域
4.3.1 跨域概念

同源: 协议+域名+端口 三者相同。
同源策略:同源策略限制以下几种行为:
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 和 Js对象无法获得
- AJAX 请求不能发送

同源策略是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。

4.3.2 可以跨域的三个标签
  • <img src=xxx>:用于打点统计,统计网站可能是其他域(img 没有兼容限制)
  • <link href=xxx>:link、script 可以使用 CDN,CDN 的也是其他域
  • <script src=xxx>:script 可以用于 JSONP
4.3.3 跨域解决方案

1)JSONP
动态创建script,再请求一个带参网址实现跨域通信。
缺点:只能实现get一种请求,无法发送特定头部,无法发送 body。
实现原理:

<script>
    window.callback = function(data){
        console.log(data)//跨域得到的信息
    }
</script>`
<script src="xxx"></script>
//上述 xxx 会返回 callback({x:1,y:2})

3)跨域资源共享(CORS)
服务端设置 http header(Access-Control-Allow-),前端无须设置,若要带cookie请求:前后端都需要设置。

2)postMessage
postMessage是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作的window属性之一,它可用于解决以下方面的问题:
a.) 页面和其打开的新窗口的数据传递
b.) 多窗口之间消息传递
c.) 页面与嵌套的iframe消息传递
d.) 上面三个场景的跨域数据传递

用法:postMessage(data,origin)方法接受两个参数

5. 存储

cookies & localStorage & sessionStorage

Web Storage 的好处:
1) api 接口使用方便
2) 支持事件通知机制,可以将数据更新的通知发送给监听者
3) 减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递。
4) 快速显示数据:性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。再加上网页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示。
5) 临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用sessionStorage非常方便。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sunshine9284/article/details/81607706

智能推荐

使用Dev-C++调试,变量的值 not found in current context,下一步是灰色无法点击-程序员宅基地

文章浏览阅读1w次,点赞10次,收藏13次。在学习使用Dev-C++进行调试时,设断点之后遇到了变量的值 not found in current context,下一步等是灰色无法点击这样的问题,如图。(1)在百度后了解到,应把工具->编译选项->代码生成/优化->连接器中的产生调试信息项改成YES,如图。这样就应该解决了问题。(2)但我还无法成功调试,后来发现是自己粗心,保存时将C语言的代码保存成.cpp为后缀而不是.c。.c代表C的源程序,.cpp代表c++源程序。重新保存成后缀为.c,就可以正常调试了。.._not found in current context

JS获取中文拼音首字母,并通过拼音首字母快速查找页面内的中文内容-程序员宅基地

文章浏览阅读5k次。实现效果:图一:图二:此例中输入的中文字符串“万万保重”,有三个字是多音字,所以alert对话框中显示的是多种读音的组合;如何实现?如何实现通过拼音首字母快速查找页面内的中文内容呢?过程原理是这样的:例如要对一些人名进行快速查找,当页面加载完成后,对所有人名建立一个索引,生成拼音首字母与姓名的对应关系;然后监听键盘事件,当用户按下键盘时,根据键值得到按下的是哪个字母,然后遍历索引中..._kjmypxjynwmjjm

Field类详解-程序员宅基地

文章浏览阅读4.1k次。//AccessibleObject 类是 Field、Method 和 Constructor 对象的基类。 public class AccessibleObject implements AnnotatedElement { /* * 1、实现了AnnotatedElement对注解支持的相关方法 * 2、提供访问控制 /_field类

数据可视化_数据可视化博客-程序员宅基地

文章浏览阅读1.4k次。数据可视化ECharts_数据可视化博客

初遇C#之HelloWorld程序_.net framework helloworld c#-程序员宅基地

文章浏览阅读4.8k次。一、开发环境 C#是一种面向对象的、运行于.NETFramework之上的高级程序设计语言。由于C#非常依赖于.NETFramework所以Win7就自带了.NETFramework3.5,Win8自带了.NETFramework 4.0。因此我可以先不使用VS IDE, 因为刚开始还是徒手建立自己的天下比较有好处,等到对基本的框架有了解之后,再来使用VS才能做到的心应手。否则_.net framework helloworld c#

vuecli3代码压缩混淆使用uglifyjs压缩JS_使用uglifyjs混淆vue3代码-程序员宅基地

文章浏览阅读4k次,点赞2次,收藏4次。、安装 “uglifyjs-webpack-plugin”cnpm i --save uglifyjs-webpack-plugin没有安装cnpm的同学可以用npm2、在项目根目录下创建一个名为 vue.config.js的文件3、在vue.config.js中引入uglifyjs-webpack-pluginconst UglifyPlugin = require('uglifyjs-webpack-plugin')4、在vue.config.js中配置uglifyjs-we_使用uglifyjs混淆vue3代码

随便推点

nodeJS之流stream_nodejs stream-json-程序员宅基地

文章浏览阅读1k次。概述  流(stream)在Nodejs中是处理流数据的抽象接口。stream模块提供了基础的API 。使用这些API可以很容易地来构建实现流接口的对象。Nodejs提供了多种流对象。 例如,HTTP请求和process.stdout都是流的实例  流可以是可读的、可写的,或是可读写的。所有的流都是 EventEmitter 的实例。  尽管所有的 Node.js 用户_nodejs stream-json

Elasticsearch(9) --- 聚合查询(Bucket聚合)_elasticsearch nest bucket聚合-程序员宅基地

文章浏览阅读457次。Elasticsearch(9) --- 聚合查询(Bucket聚合)系统小说 www.kuwx.net上一篇讲了Elasticsearch聚合查询中的Metric聚合:Elasticsearch(8) --- 聚合查询(Metric聚合)说明 本文主要参考于Elasticsearch 官方文档 7.3版本。 Bucket Aggregations概念:Bucket 可以理解为一..._elasticsearch nest bucket聚合

【大数据】三、相似项发现(Jaccard、Shingling、MinHashing)_shingling的作用-程序员宅基地

文章浏览阅读943次,点赞2次,收藏8次。文章目录1. Jaccard1.1 例题2. shingling2.1 k-shingle2.2 k 值大小的选择2.3 例题3. MinHashing3.1 minhashing 作用:压缩3.2 算法步骤、例题4. LSH 行条化策略的分析5. 距离测度1. Jaccard定义 Jaccard 相似度计算公式:定义 Jaccard 距离:1.1 例题不重复重复 (bag),最大值为 1 / 22. shingling将文档用短字符集合来表示2.1 k-shinglech_shingling的作用

EditText电话号码格式_edittext中的电话格式-程序员宅基地

文章浏览阅读514次。看了网上一些文章,自己改了改,小白/** * * @author Damon * 电话格式EditText */public class PhoneNumberEditText extends EditText implements TextWatcher { public PhoneNumberEditText(Context context, AttributeSet at_edittext中的电话格式

Windows7/10电脑怎么设置自动关机?实测有效!_windows10如何设置关机时间-程序员宅基地

文章浏览阅读248次。目录1. 桌面 — 右键点击此电脑(计算机)— 管理2. 计算机管理 — 任务计划程序 — 创建基本任务3. 创建基本任务向导3.1 名称:自动关机3.2 触发器:每天3.3 每日:设置每天在几点关机3.4 操作:启动程序3.5 启动程序:3.6 完成在网上搜索,发现很多设置自动关机的教程,要么是利用了电脑自动关机软件,要么有一些小问题。其实利用电脑的“定时任务”就可以轻松搞定电脑自动关机。这里图文记录一下操作的全部过程,小白照着做也能搞定Windows自动关机!1. 桌面 — 右键点击此电脑(计算机)_windows10如何设置关机时间

MATLAB算法实战应用案例精讲-【神经网络】激活函数:Swish(附python代码实现)_matlab bp 激活函数swich-程序员宅基地

文章浏览阅读1.5k次。Swish是谷歌在17年提出的一个激活函数,形式非常简单,几乎就是 sigmoid 和 ReLU 的拼凑,具备无上界有下界、平滑、非单调的特性,Swish 在深层模型上的效果优于 ReLU。例如,仅仅使用 Swish 单元替换 ReLU 就能把 Mobile NASNetA 在 ImageNet 上的 top-1 分类准确率提高 0.9%,Inception-ResNet-v 的分类准确率提高 0.6%。多种激活函数对比生物神经网络是人工神经网络的起源。_matlab bp 激活函数swich

推荐文章

热门文章

相关标签