面向对象的语言有一个标志,那就是语言中都有类的概念 前面的文章中我提到过ECMAScript中没有类的概念(ES6之前) 所以JS中的对象和其他语言中的对象存在着一些区别 ECMA中对对象的定义如下: 无序属性的集合,其属性可以包含基本值.对象.或者函数 说白了JS中的对象可以看作散列表,无非就是一组名.值对 前面我在介绍JS中的引用类型的时候,已经介绍了对象定义的两种方式:1.字面量 2.构造函数 这里不再赘述 下面介绍一下对象上的一些属性 属性类型 ECMA中规定了两种属性类型:数据属性和访…

在JS中location是一个神奇的对象 它既是window对象的属性,也是document对象的属性 它的作用主要在于保存当前文档页面的信息,以及将 url 解析为独立的片段 location对象属性 1.hash 返回url中的 #后面的0个或多个字符,若 url 不包含#则返回空字符串 2.host 返回url中的服务器名称和端口号 如“localhost:8080” 3.hostname 返回url中不带端口号的服务器名称 4.href 返回当前加载页的完整 url 5.pathname…

WebGL上下文 在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是由于 webgl 的规范仍未制定完成 制定完成后名字就会改为简单的 "webgl" 如果浏览器不支持,那么在获取webgl上下文的时候浏览器会返回 null 所以在使用前需要检测返回值 基本的获取 WebGL 代码如下: let drawing = document.getElementById("drawing"); // 检测浏览器…

话不多说,我们直接开始进入今天的主题 流程控制语句 首先什么是流程控制语句呢? 顾名思义,就是控制流程的语句. 在JS中语句定义了ECMAScript中的主要语法,让我们可以使用一系列的关键字来完成指定任务. 语句也是构成一门编程语言旳基础,所以还是有必要记录一下的. 虽然有些语句不常用,但存在即合理 emm if语句 在大多数编程语言中if语句,是最常用的语句 语法如下: if(条件){ 代码块1 }else{ 代码块2 } 当代码块只有一行语句时可以不用添加花括号. 但是在实际使用过程中,最…

私有变量 严格来讲,JS中没有私有成员的概念,所有对象属性都是公有的. 但是JS中有私有变量的概念 所有在函数中定义的变量都可以认为是私有变量,因为不能在函数外部进行访问 私有变量包括 1.函数参数 2.局部变量 3.函数内部定义的其他函数 还有一个概念叫 特权方法 特权方法指的就是有权能够访问私有变量的方法 私有变量和特权方法主要用来隐藏不应该被直接修改的数据 function Person(name){ this.getName = function(){ return name; } th…

什么是内置对象呢? js高级程序设计中给出的定义为:由ES规定不依赖于宿主环境的对象,这些对象在JS执行前就已经存在 前面我们介绍的引用类型都是内置对象 除了这些对象外ECMA还规定了两个单体内置对象:1.Global 2.Math Global对象 Global对象十分特别,从某种意义上来说他是一个背锅侠 因为凡是不属于任何对象的属性和方法最后都将成为Global对象的属性和方法 也就是说在JS中凡是全局变量和全局方法实际上都是Global对象的属性和方法(包括isFinite等方法也是) G…

事件对象 在触发DOM‘事件时,会产生一个事件对象 event 该对象包含着所有与事件有关的信息 所有浏览器都支持 event 对象但是支持的方式有所不同 DOM事件对象 兼容DOM的浏览器会将event对象传入事件处理程序中 如下所示: var btn = document.getElementByTagName("button")[0]; btn.onclick = function(event){ alert(event.type); //"click" }…

screen对象 screen对象应该是BOM对象中最不常用的对象了 其主要用于提供客户端的显示能力信息 包括浏览器外部显示的信息,和像素的宽高等 这个对象的主要用于检测客户端能力,一般不会影响功能 而且由于,该对象的许多属性基本上都是只读的,所以也没有太多可以操作的空间,毕竟这是由客户端硬件所决定的 下面和昨天一样只例举主流浏览器都支持的属性与方法 详见MDN 1.availHeight 屏幕像素总高度减去系统部件高度的值(即屏幕剩余高度) 2.availWidth 屏幕像素宽度减系统部件宽度…

window对象作为浏览器的全局对象.location对象保存了页面的url信息 那么navigator对象又有什么作用呢? navigator对象 该对象最早由 Netspace Navigator 2.0 引入,用于识别浏览器客户端的事实标准 在IE中以window.clientInformation.Opera中的window.opera提供了与navigator类似的信息 但是navigator对象在所有支持JS的浏览器中都有实现,只是对某些属性,各个浏览器的实现并不一致 下面例举的属性…

今天讲一下window对象和浏览器导航,弹窗等有关的内容 导航和打开窗口 window.open() 用于导航到某个特定 url 该方法接收四个参数 1.url 2.窗口目标(当页面中有多个框架frame,用于指定哪个窗口打开第一个参数的url) 3.特性字符串(用于规定新窗口的相关特性) 4.新页面是否取代浏览器历史记录中当前页面 这个特性字符串有以下可选值 1.fullscreen 是否全屏(IE有效) 2.height 数值 3.left 数值 4.location 是否显示地址栏(该特性…

ECMAScript是JS的核心 但是对于在浏览器中运行的JS,BOM显然才是真正的核心 我们知道JS是由三个部分组成的 BOM.DOM.ECMAScript 之前的文章我们主要介绍的是ECMAScript 也就是JS的核心语法 但是JS作为一种脚本语言,其创建的初衷不就是为了控制浏览器中的页面的表现形势嘛 所以JS与浏览器的交互由什么控制呢? 当然就是我们的BOM了(浏览器对象模型) BOM提供了一系列的对象用于访问浏览器的功能,由于各个厂商会按照各自的想法去拓展它 所以只有其中的一部分被标准…

继承是所有面向对象的语言最让人津津乐道的概念 许多面向对象的语言都支持两种实现继承的方式: 1.接口继承 2.实现继承 由于ECMAScript中没有函数签名,所以自然也是不支持接口继承 所以JS中能实现的也只能是实现继承,而实现继承主要是依靠原型链 至于原型链的构成在昨天的文章中也大概讲了一下 无非就是每个对象的实例都有一个[[Prototype]]的属性(在游览器中以__proto__来显式地支持此属性)指向了其构造函数的原型对象 每个对象都有一个这样的引用,就构成了原型链 原型链的顶端是O…

JS中对象相关的最重要的恐怕就是原型链了 原型链也是JS中对象继承的实现的基础 接昨天的文章,我们使用构造函数创建对象的时候仍然存在一些问题 那就是所有的实例没法共用一个函数 这样无疑会造成极大的内存浪费 那么解决的办法是什么呢? 那就是通过对象的原型来实现 原型链 在JS中我们创建的每一个函数都有一个 prototype(原型)属性 该属性是一个指针指向一个对象,这个对象的用途是包含由特定类型所有实例的共享属性和方法 这个对象也就是我们常说的原型对象 原型链就是对象实例和对象的原型对象组成的继…

键盘与文本事件 用户在使用键盘时会触发键盘事件 “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容 所以键盘事件被放入了DOM3级事件的规范中 总的来说有三个键盘事件: keydown:当用户按下键盘上的任意键时触发,按住不放会重复触发 keypress:用户按下键盘上的字符键时触发,按住不放重复触发(按下ESC键也会触发) keyup:用户释放按键触发 所有元素都支持上述三个事件,但只有用户通过文本文本框输入文本时比较常用 文本事件只有一个就是 textInput 事件 该…

遍历 “DOM2级遍历和范围” 定义了两个用于辅助完成顺序遍历的DOM结构类型 NodeIterator 和 TreeWalk 上述两种类型可以基于给定起点的DOM结构执行深度优先的遍历操作 对于检测浏览器对于该功能的实现可以使用以下代码 var supportTraversals = document.implementation.hasFeature("Traversal","2.0"); var supportsNodeIterator = (typeof d…

DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3的背景来历 首先DOM1级主要定义的是HTML和XML文档底层的结构,DOM2和DOM3两个级别则主要致力于为文档引入更加丰富的交互能力 与此同时这两个版本也支持了更加高级的XML特性 首先DOM2分为了许多模块 如下所示: 1. DOM2级核心 2.DOM2级视图 3.DOM2级事件 4.DOM2…

Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 nodeType:1 nodeName:元素标签名 nodeValue:null parentNode:Document.Element tagName:用于访问元素的标签名(为了清晰,返回的值都是大写的标签名,在进行比较时需注意转换) HTML元素 Html 元素都使用 HTMLElement…

DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上就是三种规范,只要是实现了这三种规范,那么这个语言就可以说是JS DOM(文档对象模型)也是一种规范,是针对HTML和XML文档的API(应用程序编程接口) DOM的功能主要是用于将文档解析为一个层次化的节点树,通过DOM提供的API让开发人员能够操作这棵节点树 用于对文档内容进行操作(增.删.改.…

JS中处理字符串最常用的应该就是正则了 同样正则(RegExp)类型也是JS中引用类型的一种 ECMAScript通过 RegExp类型 来支持正则表达式 创建正则 var expression = / pattern / flags; 在上面创建正则实例中 pattern 部分可以是任意简单或复杂的正则表达式,每个正则表达式可以有一个或多个 flags 来标明正则的行为 使用构造函数创建 var expression = new RegExp("pattern","flag…

日常更新~~ 变量 所有的编程语言中,变量都是赋予语言灵活性的根本所在. 那么JS中的变量又有那些与众不同的地方呢.? 按照ECMA-262的定义,JS的变量和其他编程语言的变量有很大的区别 其松散类型的本质,决定了JS中的变量只是在某个特定的时期,用于保存特定值的一个名字 变量保存的值及其类型可以在脚本的生命周期内进行改变,这也是JS强大又让人难受的关键. 基本类型的值和引用类型的值 首先,在许多编程语言中几乎都有基本类型和引用类型这两个概念. 通常来说,对于基本类型的值变量保存的是值本身.…

前一段时间由于事情比较多,所以笔记耽搁了一段时间,从这一篇开始我会尽快写完这个系列. 文章中有什么不足之处,还望各位大佬指出. JS中的数据类型 上一篇中我写了有关JS引入的Script标签相关的东西. 那么这一篇,我们可以正式进入JS的世界了,emmm 前面的东西应该比较基础,大佬们不喜勿喷. 首先学习一门语言,最开始不出意外的话应该是先了解这门语言由什么类型的数据组成,毕竟语言都是建立在这些数据类型的基础之上的. 在介绍数据类型之前,我先大概说一下 typeof 操作符,这是JS中判断一个变…

继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感:变量.函数名.操作符都是大小写敏感的,比如“text”和“Text”不同. 标识符: 第一个字符必须是字母.下划线或者美元符号($); 之后的字符可以是字母.下划线.美元符号或者数字. 标识符中的字母可以是ASCII和Unicode字母比如À and Æ,但是不推荐这样使用. 按照惯例,ECMASc…

错误 Javascript与WebGL之间的一个最大区别在于,WebGL的操作一般不会抛出错误 如果希望获取WebGL的错误信息,那么就需要手动调用  gl.getError() 方法 该方法会返回以下错误常量之一: gl.NO_ERROR: 上一次操作没有发生错误 gl.INVALID_ENUM: 应该给WebGL方法传入常量但是传错了参数 gl.INVALID_VALUE: 在需要无符号数的地方传入了负值 gl.INVALID_OPERATION: 在当前状态下不能完成操作 gl.OUT_O…

类型化视图 类型化视图一般也被认为是一种类型化数组. 因为其元素必须是某种特定的数据类型,类型化视图都继承自 Dataview Int8Array: 表示8位二补整数(即二进制补数) Uint8Array: 8位无符号整数 Int16Array: 16位二补数 Uint16Array: 16位无符号整数 Float32Array: 32位IEEE浮点值 Float64Array: 64位IEEE浮点值 与上面同名的构造函数都支持三个参数: ArrayBuffer 字节偏移量 字节长度 返回一个类…

WebGL webgl 是针对 canvas 的 3D上下文,与其它Web技术不同,WebGL并非是W3C制定的标准,而是由 Khronos Group 制定的. 类型化数组 WebGL所涉及的复杂运算需要提前知道数值的精度,但是标准的 JS 无法支持这一诉求. 因此WebGL引入了类型化数组这一概念,类型化数组也是数组,与一般的数组没有什么区别,只不过这种数组中所有元素的值都被指定为某一特定类型. 类型化数组的核心在于 ArrayBuffer 这一数据类型,每个 ArrayBuffer 对象表…

阴影 2D上下文将会根据以下属性为形状或路径绘制阴影 shadowColor: 用于设置阴影颜色,默认为黑色 shadowOffsetX: 形状或路径X方向的阴影偏移量,默认为0 shadowOffsetY: 形状或路径y轴方向的阴影偏移量,默认为0 shadowBlur: 模糊的像素数,默认为0, 即不模糊 这些属性都可以通过 context 对象来修改,只要在绘制之前为其设置值,就能自动产生阴影 var context = drawing.getContext("2d"); //…

此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) ECMAScript说白了是定义Javascript的标准,而这种标准与浏览器并无依赖关系. 我们现在前端所使用的Javascript只是遵循这一标准的,以浏览器为宿主平台的脚本语言. 遵循这一标准的脚本语言都可以称之为js. 而js的宿主平台除了我们最常用的浏览器平台之外,还有node,和Adobe…

模式 模式其实就是重复的图像,用来填充或描边图形 要创建一个新模式,可以调用 createPattern()并传入两个参数 一个HTML img元素 用于表示如何重复的字符串 "repeat" 重复 "repeat-x" 水平方向重复 "repeat-y" 垂直方向重复 "no-repeat" 不重复 如: let image = document.images[0]; let pattern = document.creat…

绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘制文本的X坐标 绘制文本的Y坐标 最大像素宽度 这些方法都以以下属性为基础: font: 表示文本样式,大小,字体, 该属性以 CSS 中指定字体的格式来指定 textAlign: 表示文本对齐方式,可能的值有 "start" "end" "left"…

2D上下文 使用2D上下文提供的方法可以绘制简单的2D图形,如矩形,弧线和路径; 2D上下文的坐标开始域<canvas>元素的左上角,原点坐标为(0,0) 后续所有操作的计算都基于原点,x越大表示越靠右,y越大表示越靠下 此外<canvas>的width,height属性表示水平和垂直方向上可用像素点的数目 填充和描边 2D上下文的两种基本绘图操作是填充和描边. 填充就是用指定等样式(颜色,渐变,图像)填充目标图形 描边就是指在图形的边缘划线. 大多数的2D上下文的操作都会细分为填…