js代码

JS-常用事件集合

余生颓废 提交于 2020-01-30 14:31:47
常见的事件如下: 事件 事件句柄 用法 blur onblur 元素失去焦点。 focus onfocus 元素获得焦点。 change onchange 域的内容被改变。 click onclick 当用户点击某个对象时调用的事件句柄。 dblclick ondblclick 当用户双击某个对象时调用的事件句柄。 keydown onkeydown 某个键盘按键被按下。 keyup onkeyup 某个键盘按键被松开。 load onload 一张页面或一幅图像完成加载。 mousedown onmousedown 鼠标按钮被按下。 mousemove onmousemove 鼠标被移动。 mouseout onmouseout 鼠标从某元素移开。 mouseover onmouseover 鼠标移到某元素之上。 mouseup onmouseup 鼠标按键被松开。 reset onreset 重置按钮被点击。 submit onsubmit 确认按钮被点击。 select onselect 文本被选中。 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author"

JS原型链的理解

自作多情 提交于 2020-01-30 13:43:43
一些个人的理解,不一定是对的,仅供参考。 在JS中有函数和对象两个概念,而又有一切皆对象的概念及函数也是一个对象。所以可以说函数一定可以作为一个对象,而对象不一定是一个函数。 也可以说在js中对象分为两种:1.仅仅是一个对象2.既时对象又是函数(以下称为函数对象) 在JS中有一个概念:所有对象都有__proto__属性,而函数对象则还有prototype属性,可以以此区分出哪些是函数对象 在JS中有两个顶级的内置对象:Object和Function,这两个对象我测试了都属于函数对象。但有所不同的是:Object和Function的__proto__都是ƒ () { [native code] }(native code是已被编译为特定于处理器的 机器码 的代码,我反正就理解为不可见的源代码),Function的prototype为ƒ () { [native code] },Object的prototype是一个对象,里面有一些自己系统自定义的方法 在JS中有一个概念:对象是由函数对象生成的,并且对象的 __proto__ 属性指向函数对象的 prototype 属性;函数(函数对象)也是由函数(函数对象)生成的,并且生成函数(函数对象)的prototype是一个系统默认生成的对象包含了两个属性(constructor和__proto__)

HTTP协议请求

核能气质少年 提交于 2020-01-30 08:00:57
HTTP协议请求   前言:这几天在学习HTTP协议的请求响应等知识点,使我也慢慢地了解了HTTP协议,以前写网站的时候根本不考虑这些,也就是所谓的”托控件”,这几天学习了这些知识点感觉真的是一个提升,由于我比较笨,所以写个笔记记录一下,要是以后忘了可以再研究研究。顺便也共享一下,可能有错误,希望大家能够指出来。 1. 什么是浏览器? 什么是服务器?   (1)我们一直在浏览网页,比如我们去博客园 www.cnblogs.com ,那么我们知道当我们输入这段网址的时候我们的浏览器以及服务器做了什么吗?下面简单的看一下这张图:      (2)当我们在浏览器中输入: http://127.0.0.1:8080/proscenium/ 的时候,浏览器请求后台服务器,后台服务器会返回给我们一个网页,那么后台服务器到底干了什么呢?我们可以使用Chrome,IE自带的开发者人员工具,或者DebugBur,Fiddler,和HttpWatch查看,下面就是我查看的网站的访问记录        注解:当我们输入网址回车的时候,浏览器自动的将我们请求的地址封装成了HTTP报文,HTTP报文就是一串字符串,而后通过Socket发送到服务器对应的IP和端口上去,请求的报文格式如下:   GET /proscenium/ HTTP/1.1   Host: localhost:8080  

让前端监控数据采集更高效

痴心易碎 提交于 2020-01-30 02:55:18
随着业务的快速发展,我们对生产环境下的问题感知能力越来越关注。作为距离用户最近的一层,前端的表现是否可靠、稳定、好用,很大程度上决定着用户对整个产品的体验和感受。因此,对于前端的监控不容忽视。 搭建一套前端监控平台需要考虑的方面很多,比如数据采集、埋点模式、数据处理和分析、报警以及监控平台在具体业务中的应用等等。在这所有环节中,准确、完整、全面的数据采集是一切的前提,也为后续的用户精细化运营提供基础。 前端技术的日新月异给数据采集也带来了变化和挑战,传统的手工打点模式已经不能满足需求。如何在新的技术背景下让前端数据采集工作更加完善、高效,是本文讨论的重点。 前端监控数据采集 在采集数据之前,首先要考虑采集什么样的数据。我们重点关注两类数据,一类是与用户体验相关的,如首屏时间、文件加载时间、页面性能等;另外是帮助我们及时感知产品上线后是否出现异常的,比如资源错误、API 响应时间等。具体来说,我们对前端的数据采集具体主要分为: 路由切换 (href、hashchange、pushState) JsError 性能 (performance) 资源错误 API 日志上报 路由切换 Vue、React、Angular 等前端技术的快速发展使单页面应用盛行。我们都知道,传统的页面应用是用一些超链接来实现页面切换和跳转的,而单页面应用是使用各自的路由系统来管理前端的每一个页面切换,例如

JavaScript

女生的网名这么多〃 提交于 2020-01-30 00:01:17
基本语法 与HTML结合方式 1、内部js: 定义<script>标签内容就是js代码 2、外部js: 定义<script>通过src属性引入外部的js文件 3、注意 1.<script>可以定义在html页面的任何地方,但是定义的位置会影响执行顺序。 2.<script>可以定义多个 注释 1、单行注释 1、单行注释://注释内容 2、多行注释:/*注释内容*/ 数据类型 1、原始数据类型 1)number:数字。整数/小数/NaN(not a number 一个不是数字的数字类型) 2)string:字符串。“asdf“ "a" 'fds' 3)booolean:true ro false 4)null:一个对象为空的占位符 5)undefined:未定义。如果一个变量没有给初始值,则会被默认赋值为undefined 变量 变量:一小块存储数据的内存空间 Java语言时强类型语言,而JavaScript是弱类型语言。 1、强类型语言:在开辟变量内存空间时,定义了空间将来存储的数据类型,只能存储固定类型的数据 2、弱类型:在开辟变量空间时,不定义看空间将来的存储数据类型,可以放任意类型的数据。 语法: var 变量名 = 初始值; typeof运算符:获取变量的类型 注:null运算后得到的是object 运算符 1、一元运算符 ++ -- +(正号) -(负号) ++(--

js -- javascript

江枫思渺然 提交于 2020-01-29 19:37:29
js -- javascript ECMAscript5 ECMAscript6 -- vue.js react .. 由三个部分组成 1 ECMAscript5的核心 js语言 2 BOM 浏览器对象模型 js操作浏览器,做出对应的一些效果 3 DOM 文档对象模型 -- HTML文件 js代码引入方式 ​ 三种方式 1 head标签的script标签里面(alert('xx'), confirm('xx')) 2 body标签的script标签里面 3 外部文件引入的方式来使用 a 创建一个.js结尾的文件,写上咱们的js代码 比如:alert('are you ok?'); b 在想使用这个js代码的html文件中,head标签或者body标签下面或者上面写下面的内容 <script src="01test.js"></script> js语言基础 变量 var a = 10; 变量定义 var 变量名; 数据类型 number类型(整数,浮点数) var n = 11; var n2 = 11.11; js代码注释 // js代码 查看数据类型 typeof 变量名; typeof n; -- number类型 变量声明,但没有赋值的时候,变量的值为undefined string类型(字符串) 示例: var a = 'alexsb'; var a = new

lazyload延迟加载组件

霸气de小男生 提交于 2020-01-29 17:27:54
lazyload现在网上已经用的很多(淘宝商城,新浪微博等等),先放demo: mylazyLoad.zip 效果: <div id="redbox1" onclick="alert('js执行了')" class="redbox">点击我</div> <div class="bluebox"></div> <div class="redbox"></div> <div class="bluebox"></div> <div class="redbox"></div> <div class="bluebox"></div> <div class="redbox"></div> <div class="bluebox"></div> <div class="redbox"></div> <div class="bluebox"></div> <div class="redbox"></div> <div class="bluebox"></div> <div class="redbox"></div> <div class="bluebox"></div> <div class="redbox"></div> <div class="bluebox"></div> <div class="redbox"></div> <div class="bluebox"></div> <div

《JS高级程序设计》要点总结

允我心安 提交于 2020-01-29 17:24:26
第1章 没记下啥,多读几遍再写吧。 第2章 在HTML中使用JavaScript 包含在< script>元素内部的JavaScript代码将被从上至下依次解释,解析js代码时(包括下载js文件时),页面的处理也会暂时停止,因此通常将js代码放入< head>标签内的最后几行; < script>的src属性可以包含来自外部域的js文件;(安全性问题) 延迟脚本,< script>标签的defer属性,当defer = “defer”,js脚本将会延迟到浏览器遇到< /html>时才执行,理应按顺序,但实际情况不一定按顺序,因此最好只包含一个延迟脚本; 异步脚本,< script>标签的asynv属性,只适用于外部脚本文件,并告诉浏览器立即下载,但并不保证按先后顺序执行; 推荐使用外部文件: 1)易于维护 2)可缓存:若多个页面使用同一js文件,只需下载一次,加快了页面加载速度 不理解的:指定async属性的目的不是让页面等待两个脚本下载和执行,从而异步加载其他内容。为此,建议异步脚本不要在加载期间修改DOM?(P14) < noscript>当浏览器不支持JavaScript时让页面平稳地退化; 1)浏览器不支持脚本 2)浏览器支持脚本,但脚本被禁用 <noscript> <p>本页面需要浏览器支持(启用)JavaScript。</p> </noscript> 第3章 基本概念

项目实战

感情迁移 提交于 2020-01-29 07:06:39
项目实战 1.环境介绍 2.nvm和node.js环境配置 3.npm使用详解 4.gulp介绍和安装 5.gulp创建任务 6.gulp创建处理css文件任务 7.gulp给文件重命名 8.gulp处理JavaScript文件的任务 9.合并多个文件 10.创建压缩图片任务 11.监听文件修改,自动执行任务 12.修改代码实时刷新浏览器 13.项目环境搭建和安装相应包 14.编写gulpfile.js文件 15.sass语法介绍和转换为css 16.导航条实现(1) 17.导航条实现(2) 18.导航条实现(3) 19.导航条吸顶效果 20.轮播图布局和样式 21.JS面向对象和实现一次轮播 22.实现自动轮播 23.鼠标hover事件控制轮播图暂停和继续 24.切换轮播图的箭头样式及其显示和隐藏事件 25.轮播图上下切换 26.小圆点结构和样式 27.根据轮播图的个数动态修改小圆点结构和样式 28.小圆点点击事件和自动更新当前选中的小圆点 29.实现自动无限循环轮播 30.左右箭头切换实现循环轮播 31.新闻列表tab栏布局完成 32.新闻列表页布局完成 33.加载更多按钮的布局和样式 34.侧边栏-标题和广告位布局完成 35.侧边栏-关注第三方平台盒子布局和样式 36.侧边栏-热门推荐完成 37.footer布局和样式(1) 38.footer布局和样式(2) 39

前端解决跨域的九种方法

谁都会走 提交于 2020-01-29 05:47:56
什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1、 资源跳转:A链接、重定向、表单提交 2、 资源嵌入: <link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链 3、 脚本请求: js发起的ajax请求、dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。 什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。 同源策略限制以下几种行为: 1、Cookie、LocalStorage 和 IndexDB 无法读取 2、 DOM 和 Js对象无法获得 3、 AJAX 请求不能发送 常见跨域场景 URL 说明 是否允许通信 http://www.demo.com/a.js http://www.demo.com/b.js 同一域名,不同文件或路径 允许 http://www.demo.com/lab/c.js http://www