JavaScript
文章平均质量分 87
JavaScript基础教程学习
A_山水子农
这个作者很懒,什么都没留下…
展开
-
JavaScript:执行环境及作用域链
(1)、执行环境 定义了变量或函数有权访问的其它数据,决定了它们的各自行为。每个执行环境都有一个与之关联的变量对象(variable object, VO),执行环境中定义的所有变量和函数都会保存在这个对象中,解析器在处理数据的时候就会访问这个内部对象。 全局执行环境是最外层的一个执行环境,在web浏览器中全局执行环境是window对象,因此所有全局变量和函数都是作为window对象的原创 2016-05-31 16:00:30 · 908 阅读 · 0 评论 -
js动态加载脚本
首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在里面写一个方法functionOne,很简单,代码如下:function functionOne(){ alert("成功加载");} 后面的html文件都创建在同一个目录下。方法一:直接document.write 在同一个文件夹下面创建一个function1.html,代码如转载 2016-07-26 08:53:37 · 1182 阅读 · 0 评论 -
JavaScript中的this
请看下面的代码,最后alert出来的是什么呢? var name = "Bob"; var nameObj ={ name : "Tom", showName : function(){ alert(this.name); }, waitShowName : function(){原创 2016-07-26 08:57:02 · 428 阅读 · 0 评论 -
Javascript闭包
一、变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种:全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。 var n=999; function f1(){ alert(n); } f1(); // 999另一方面,在函数外部自然无法读取函数内的局部变量。 fun转载 2016-08-04 20:04:56 · 422 阅读 · 0 评论 -
JavaScript 对象和属性
面向对象(Object-Oriented,OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数。”严格来讲,这就相当于说对象是一组没有特定顺序的值,对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。一、理解对象 创建自定义对象的最简单方式就是创建一个obj...原创 2016-08-10 09:15:21 · 1089 阅读 · 1 评论 -
JavaScript 面向对象编程
1、模拟重载 在Java中重载是在一个类里面,方法名字相同,而参数不同。返回类型可以相同也可以不同。每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表。由于JavaScript是弱类型,所以没有直接的机制去实现参数重载,但是我们可以通过传入的参数个数来进行模拟的重载。function Person(){ var args=arguments; if(typeof arg原创 2016-08-10 11:10:29 · 517 阅读 · 0 评论 -
前端常见跨域解决方案
什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交 2.) 资源嵌入: 、什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CS原创 2017-09-15 13:46:21 · 1022 阅读 · 0 评论 -
JavaScript实现call、apply和bind
每个函数都包含两个非继承而来的方法:apply()和call()。这两个方法的用途是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。详细内容查看JavaScript中call()、apply()和 bind()方法,1、call方法的实现下面看一个使用call方法的实例:function add(c, d){ return this.a + this.b + c + d原创 2017-12-13 17:29:52 · 1879 阅读 · 0 评论 -
js函数柯里化(function currying)
currying又称部分求值。一个currying的函数首先会接受一些参数,接受了这些参数之后,该函数不会立即求值,而是继续返回另外一个函数,刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正求值的时候,之前传入的所有参数都会被一次性用于求值。 currying简单的说就是:只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数。你可以一次性地调用 curry 函数,也...原创 2018-03-20 16:59:30 · 6052 阅读 · 0 评论 -
JavaScript基于原型的面向对象系统
我们知道在JavaScript中一切(引用类型)都是对象,对象是属性的集合,但是JavaScript中的对象到底是怎么创建的呢?在Java中是通过实例化类来创建一个对象,对象总是从类中的创建而来;在JavaScript中没有类(ES6中的class只是一个语法糖)的概念,那么JavaScript中的对象呢?JavaScript是基于原型的面向对象语言,在原型编程思想中,类并不是必需的,对象未必...原创 2018-03-20 21:40:54 · 794 阅读 · 0 评论 -
offsetTop、offsetLeft、offsetWidth、offsetHeight
//获取坐标位置function getpos(e){ var t=e.offsetTop; var l=e.offsetLeft; var height=e.offsetHeight; while(e=e.offsetParent){ t+=e.offsetTop; l+=e.offsetLeft;转载 2016-08-12 21:26:28 · 4914 阅读 · 0 评论 -
JavaScript:同源策略
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。示例:来自h原创 2016-08-15 11:13:48 · 967 阅读 · 0 评论 -
getClientRects 和 getBoundingClientRect 的用法和区别
getClientRects获取元素占据页面的所有矩形区域 描述获取元素占据页面的所有矩形区域。语法 var rectCollection = object.getClientRects();值getClientRects 返回一个TextRectangle集合,就是TextRectangleList对象。TextRectangle对象包含了, top转载 2017-02-08 13:57:50 · 1888 阅读 · 0 评论 -
js中typeof和instanceof用法区别
typeof和instanceof判断变量,typeof会返回一个变量的基本类型,只有以下几种:number,boolean,string,function(函数),object(NULL,数组,对象),undefined。;例:alert(typeof(1));//numberalert(typeof("abc"));//stringalert(typeof(true));//boo原创 2017-07-26 14:28:08 · 7430 阅读 · 2 评论 -
JavaScript作用域、上下文、执行期上下文、作用域链、闭包
作用域、上下文、执行期上下文、作用域链、闭包是JavaScript中关键概念之一,是JavaScript难点之一,在应聘面试时必定会问到的问题,作为前端工程师必须理解和掌握。相信大家已经阅读了很多关于这方面的文章,但是看完之后似懂非懂。在我阅读了《JavaScript高级程序设计》、《高性能的JavaScript》这两本书后,我才完全理解这些概念。一、作用域(Scope) 作...原创 2017-11-07 00:50:14 · 8313 阅读 · 5 评论 -
JS数组扁平化、去重、排序
在网上看到一个校招题目,已知一个数组var arr = [[1, 3, 2, 1],[5, 3, 4, 8, 5, 6, 5],[6, 2, 8, 9, [4, 11, 15, 8, 9, 12, [12, 13, [10], 14]]], 16],用js编写一个程序将这个数组扁平化,并得到一个升序且无重复值的数组。得到最终结果为:[1,2,3,4,5,6,8,9,10,11,12,13,14,15原创 2017-09-13 15:30:17 · 6514 阅读 · 1 评论 -
iframe.contentWindow
1、iframe.contentWindow(主页面调用iframe) 此处的iframe是从document取得的,即作作为document的子对象出现,虽然是文档(document)对象,但由于它是独立的页面,因而拥有自己的事件,拥有自己的窗口对象(contentWindow);contentWindow属性是指指定的frame或者iframe所在的window对象。 在IE中iframe原创 2017-09-15 12:06:48 · 4915 阅读 · 0 评论 -
JavaScript:数据类型
一、数据类型 ECMAScript中有五种简单的数据类型(也称为基本数据类型):Undefined、Null、Boolean、Number、String。还有一种复杂数据类型—Object,Object本质上是由一组无序的名值对组成的。1、typeof 鉴于ECMAScript是松散类型的,因此需要有一种手段来检测给定变量的数据—typeof就是负责提供这原创 2016-05-31 15:21:36 · 3917 阅读 · 0 评论 -
JavaScript:变量
ECMAScript 变量可能包含两种不同的数据类型的值,基本类型值和引用类型值。基本类型值指的是简单的数据段,而引用类型值指由多个值构成的对象。 在将一个值赋给变量时,解析器必须确定这个值是基本类型值还是引用类型值。常用的5种基本数据类型:Undefined、Null、Boolean、Number和String。它们都是按值访问的。因为可以操作保存在变量中的实际值。 引用类型的原创 2016-05-31 15:58:11 · 629 阅读 · 0 评论 -
JavaScript:引用类型
引用类型的值(对象)是引用类型的一个实例。在ECMAscript中,引用类型是一种数据结构,用于将数据和功能组织在一起。它也常被称为类,但是这种称呼并不妥当。尽管ECMAscript从技术讲是一门面向对象的语言,但是它不具备传统的面向对象语言所支持的类和接口等基本结构。引用类型有时候也称为对象定义,因为它们描述的是一类对象所具有的属性和方法。1、Object类型 Object类型是Jav原创 2016-05-31 19:00:19 · 2777 阅读 · 0 评论 -
JavaScript:创建对象
面向对象(Object-Oriented,OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数。”严格来讲,这就相当于说对象是一组没有特定顺序的值,对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。一、理解对象 创建自定义对象的最简单方式就是创建一个原创 2016-06-01 11:53:13 · 681 阅读 · 0 评论 -
JavaScript:原型链、继承
1、理解原型对象我们先使用构造函数创建一个对象:function Person() {}var person = new Person();person.name = 'Kevin';console.log(person.name) // Kevin在这个例子中,Person 就是一个构造函数,我们使用 new 创建了一个实例对象 person。 1).只要创建了一个新函数,就会为该函...原创 2016-06-01 12:04:20 · 730 阅读 · 0 评论 -
JavaScript:闭包
一、充电1、一切(引用类型)都是对象,对象是属性的集合。2、函数是一种对象,但是函数却不像数组一样——你可以说数组是对象的一种,因为数组就像是对象的一个子集一样。但是函数与对象之间,却不仅仅是一种包含和被包含的关系,函数和对象之间的关系比较复杂,甚至有一点鸡生蛋蛋生鸡的逻辑。 function Fn() {this.name = '王福朋';this.year = 1988;原创 2016-06-02 16:31:10 · 5447 阅读 · 0 评论 -
JavaScript:BOM(浏览器对象模型)
BOM(BrowserObjectModel)也叫浏览器对象模型,描述与浏览器进行交互的方法和接口。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。 JavaScript由三部分组成:ECMAScript,BOM,DOM。BOM提供了很多对象,用于访问浏览器的功能。下面介绍浏览器的三个公共对象:window对象,location对象原创 2016-06-02 21:19:42 · 1104 阅读 · 0 评论 -
JavaScript:DOM(文档对象模型)
通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西,JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。一、节点层次 DOM 是这样规定的: 整个文档是一个文档节点 · ...原创 2016-06-03 14:23:12 · 832 阅读 · 0 评论 -
JavaScript:DOM扩展
对DOM的两个主要的扩展石Selectors API和HTML5。一、选择符API1、querySelector()方法querySelector()方法接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null;var myDIv=document.querySelector("#divTest");//取得ID为divTest的元素var se原创 2016-06-03 17:13:49 · 635 阅读 · 0 评论 -
JavaScript:样式
要确定浏览器是否支持DOM2级定义的css能力,使用下面的代码:var supportsDOM2CSS=document.implementation.hasFeature("CSS","2.0");var supportsDOM2CSS2=document.implementation.hasFeature("CSS2","2.0");alert(supportsDOM2CSS);原创 2016-06-03 19:39:42 · 686 阅读 · 0 评论 -
JavaScript:事件处理程序
JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。一、事件流 事件流描述的是从页面中接收事件的顺序,IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕获流。1、事件冒泡 事件开始的时候由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。原创 2016-06-04 16:24:08 · 517 阅读 · 0 评论 -
JavaScript:事件对象
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。1、DOM中的事件对象DOM中的事件对象Click Mevar btn=document.getElementById("myBtn");//DOM0级方法btn.onclick=function(event){ alert(event.type);//"clic原创 2016-06-04 16:28:56 · 574 阅读 · 0 评论 -
JavaScript:事件类型
我们把事件分为了三大类,分别是一般事件、表单事件和页面事件。当前我们可以再做细分:1、UI事件:如load、unload、error、resize、scroll、select、DOMActive,是用户与页面上的元素交互时触发的。(1)、load事件事件类型var image=document.getElementById("myImage");EventUti原创 2016-06-04 17:56:09 · 1081 阅读 · 0 评论 -
JavaScript:表单基础知识
1、表单引用var form=document.getElementById("from1");//取得id为from1的表单引用var firstForm=document.forms[0];//取得页面中的第一个表单var myForm=document.forms["form2"];//取得页面中名称为“form2”的表单2、提交表单var form=document.g原创 2016-06-05 16:55:00 · 807 阅读 · 0 评论 -
JavaScript:文本框脚本
1、选择文本表单脚本var form=document.getElementById("form");var textbox=form.elements[0];//取得表单中的第一个字段EventUtil.addHandler(textbox,"focus",function(event){ event=EventUtil.getEvent(event);原创 2016-06-05 16:58:51 · 878 阅读 · 0 评论 -
JavaScript:选择框脚本(select标签)
一、选择框脚本表单脚本1-12-13-14-15-1var selectbox=document.forms[0].elements["location"];for(var i=0,len=selectbox.options.length;i<len;i++){var text=selectbox.options[i].text; var va原创 2016-06-05 17:57:10 · 1767 阅读 · 0 评论 -
JavaScript:使用Canvas绘图
1、基本用法 要使用<canvas>元素,必须先设置其width和height属性,指定可以绘图的区域大小,出现在开始后结束标签中的内容是后备信息,如果浏览器不支持<canvas>元素,就会显示这些信息。例如<canvas id="drawing" width="200" height="200">A Drawing of something</ca原创 2016-06-06 14:11:04 · 32714 阅读 · 0 评论 -
JavaScript:HTML5跨文档消息传递(postMessage)
跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息。例如,www.w3cmm.com域中的一个页面与一个位于内嵌框架中的p2p.w3cmm.com域中的页面通信。在XDM机制出现之前,更稳妥地实现这种通信需要花很多功夫。XDM把这种机制规范化,让我们能既稳妥有简单地实现跨文档通信。 XDM的核心是p...原创 2016-06-06 16:44:08 · 4741 阅读 · 0 评论 -
JavaScript:EventUtil.js
// JavaScript Documentvar EventUtil={ //添加事件 addHandler:function(element,type,handler){ if(element.addEventListener){//DOM2级 element.addEventListener(type,handler,false); }else if原创 2016-06-06 16:48:00 · 1685 阅读 · 0 评论 -
JavaScript:JSON详解
向服务器发出Ajax请求时,可以以两种不同的方式从服务器响应检索数据:一种是使用XMLHttpRequest对象的reponseXML属性访问XML格式的数据;一种是XMLHttpRequest对象的responseText属性访问字符串格式的数据。当前,XML是进行数据传输的标准语言,但是使用XML的缺点之一是很难对它进行解析并提取要添加到页面的数据。 JSON(JavaScri原创 2016-06-06 21:40:47 · 1337 阅读 · 0 评论 -
JavaScript:Ajax详解
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 不是新的编程语言,而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整原创 2016-06-07 12:07:38 · 683 阅读 · 0 评论 -
JavaScript:CORS(跨源资源共享)
XHR的一个主要约束是同源策略,即:相同域、相同端口、相同协议,可以通过跨域资源共享CORS(Cross-Origin Resourse Sharing)实现跨域资源共享。其基本思想是通过自定义HTTP头让浏览器与服务器沟通,从而决定请求或响应是应该成功还是失败。发送get/post请求时,给它添加一个额外的Origin头部,其中包含请求页面的源信息(协议,域名和端口),以便服务器根据这个头部信息原创 2016-06-07 12:29:51 · 2765 阅读 · 0 评论 -
JavaScript:图像ping
动态创建图像经常用于图像Ping。图像Ping是与服务器进行简单、单向的跨域通信的一种方式。请求的数据是通过查询字符串形式发送的,而响应可以是任意内容,但通常是像素图或204响应。通过图像Ping,浏览器得不到任何具体的数据,但通过侦听load和error事件,它能知道响应是什么时候接收到的。 图像Ping最常用于跟踪用户点页面或动态广告曝光次数。图像Ping有两个主要的缺点,一是只能发送G原创 2016-06-07 12:38:57 · 2466 阅读 · 0 评论