JAVASCRIPT - 技术教程文章

javascript 2048游戏【代码】【图】

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <html xmlns="http://www.w3.org/1999/xhtml">3 <head>4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5 <title>无标题文档</title>6 <style>7 header{display:block; margin:0 auto; width:100%; text-align:center;}8 header h1{font-size:40px; font-family:Arial, ...

javascript阻止事件冒泡和浏览器的默认行为【代码】

1.阻止事件冒泡,使成为捕获型事件触发机制.1function stopBubble(e) { 2//如果提供了事件对象,则这是一个非IE浏览器 3if ( e && e.stopPropagation ) 4//因此它支持W3C的stopPropagation()方法 5 e.stopPropagation(); 6else7//否则,我们需要使用IE的方式来取消事件冒泡 8 window.event.cancelBubble = true; 9 }2.当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为. 1//阻止浏...

[javascript] 反射与依赖注入!

对于javascript中的反射的理解,一直都是认为,利用数组对回调函数进行保存,之后在适当的时刻利用call或是apply 方法,对回调进行调用即可,一般如下操作:首先定义两个方法:var service = function() {return { name: 'Service' }; } var router = function() {return { name: 'Router' }; }我们有另一个函数需要用到这两个模块。var doSomething = function(other) {var s = service();var r = router(); }; 当然,我们希望能够...

javascript-单体模式【代码】

<script type="text/javascript"> //简单单体模式 var singleton={ attr1:10, attr2:true, method1:function(){console.log(‘method1 ...‘)}, method2:function(){console.log(‘method2 ...‘)} } console.log(singleton.attr1) singleton.method1() //划分命名空间 var nameSpace1={} nameSpace1.singleton1={ attr1:10, attr2:true, method1:function(){con...

《高性能JavaScript》学习笔记(2)——日更中【代码】

我说日更就日更,接着....今天从缓冲布局信息开始啦!-------------------2016-7-22 21:09:12---------------------------14、减少对布局信息的查询次数,查询时将他赋值给局部变量参与计算。例子,在元素网右下方不断平移时,在timeout中可以写:1var current = myElement.offsetLeft; 2 current++; 3 myElement.style.left = current + ‘px‘; 4 myElement.style.top = current + ‘px‘; 5if(current > 500){ 6//...

JAVAScript中DOM与BOM的差异分析【代码】【图】

JAVAScript 有三部分构成,ECMAScript,DOM和BOM,根据浏览器的不同,具体的表现形式也不尽相同。我们今天来谈一谈DOM和BOM这俩者之间的差异。用百科上的来说:1. DOM是 W3C 的标准; [所有浏览器公共遵守的标准]2. BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]3. window 是 BOM 对象,而非 js 对象;DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。BOM 主要处理浏览...

构建基于Javascript的移动CMS——生成博客(二).路由

在有了上部分的基础之后,我们就可以生成一个博客的内容——BlogPosts Detail。这样就完成了我们这个移动CMS的几乎主要的功能了,有了上节想必对于我们来说要获取一个文章已经不是一件难的事情了。获取每篇博客于是我们照猫画虎地写了一个BlogDetail.jsdefine([‘jquery‘,‘underscore‘,‘mustache‘,‘text!/blog_details.html‘ ],function($, _, Mustache, blogDetailsTemplate){var BlogPostModel = Backbone.Model.extend({...

Javascript循环【代码】

为了理解“循环”,可以将在javascript中的代码想象成一条条的分支路径。循环语句就是程序路径的一个回路,可以让一部分代码重复执行。常见的循环语句有:while、do/while、for和for/in。(1)whileif语句是一种基本的控制语句,用来选择执行程序的分支语句。和if一样,while语句也是一个基本循环语句,它的语法如下:while (expression){ statement; }在执行while语句之前,Javascript解释器首先计算expression的值,如果...

《编写可维护的javascript》推荐的编码规范之——编程风格【代码】【图】

javaScript编码规范 这正是本书的内容:如何站在团队的角度去写<SPAN style=‘font-family: "Times New Roman";‘>javascript代码。目标是解决多人开发的环境中很多工程师如何书写统一风格的代码的问题。对于个人来说,需要在一定程度上牺牲个人偏好、个人观点甚至个人英雄主义,但你所收获的将是一个能做大事的高效团队。 <SPAN style=‘font-family: "Times New Roman";‘>“java语言编码规范”指出编码规范如此重要的几个原因...

javascript-引用类型--Object类型【代码】

引用类型是一种数据结构,本质是数据和功能的集合。引用类型有时也被称为对象定义,因为它们描述的是一类对象所具有的属性和方法。引用类型相当于java里面的类,javascript虽然是一门面向对象语言,但是它不支持传统面向对象语言的类和接口。  对象是某个特定引用类型的实例,对象可以通过new操作符后跟一个要创建的对象类型的名称来创建。例如:var o = new Object();这行代码创建了Object引用类型的一个新实例,然后将该实例保...

JavaScript学习笔记——DOM基础 2.5【代码】【图】

一、document.write方法document对象write()方法,常用来向网页中输出字符串,圆括号中可以是要输出的字符串,document.write(‘这是我的个人博客‘);也可以是字符串变量,var myText = ‘这是我的个人博客‘; document.write(myText);还有一种,就是通过字符串和变量组合的方式进行输出。var myText = ‘这是我的‘; document.write(myText + ‘个人博客‘);document.write还可以应用到函数中,不过我需要在HTML中调用这个函数才能...

Javascript类的写法

Javascript中function即为类,在function内部用this设置类的public成员变量与方法,例如: [javascript] view plaincopyfunction myclass(name){ var str = "private string";    //private field function privatefn(){      //private method         alert(str);     }; this.name = name; this.pubfn = function(){         privatefn();      //call private method    ...

JavaScript常用的设计模式详解【代码】

1.单例模式单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。适用场景:一个单一对象。比如:弹窗,无论点击多少次,弹窗只应该被创建一次。class CreateUser {constructor(name) {this.name = name;this.getName();}getName() {returnthis.name;} } // 代理实现单例模式var ProxyMode ...

javascript开发HTML5游戏--斗地主(单机模式part3)【代码】【图】

最近学习使用了一款HTML5游戏引擎(青瓷引擎),并用它尝试做了一个斗地主的游戏,简单实现了单机对战和网络对战,代码可已放到github上,在此谈谈自己如何通过引擎来开发这款游戏的。客户端代码 服务端代码          (点击图片进入游戏体验)前文链接:javascript开发HTML5游戏--斗地主(单机模式part1)javascript开发HTML5游戏--斗地主(单机模式part2)本文章为第三部分内容,主要AI相关逻辑实现,参考文章斗地主ai设计。...

javascript实现继承的一种方式【代码】

function extend(Child, Parent) {var F = function(){};F.prototype = Parent.prototype;Child.prototype = new F();Child.prototype.constructor = Child;Child.uber = Parent.prototype;} 使用的时候,方法如下extend(Cat,Animal);var cat1 = new Cat("大毛","黄色");alert(cat1.species); // 动物这个extend函数,就是YUI库如何实现继承的方法。原文:http://www.cnblogs.com/hubing/p/4528496.html

javascript -- (贪吃蛇游戏)

界面设置/***body**/<body>  <h1>贪吃蛇游戏</h1>  /***score记录成绩**/  <p id="score">0</p>  /***地图**/  <div id="snake_map">    /***地图的绘制通过js实现**/  </div>  /***三个按钮**/  <div class = "box">    <button type="button" name="button" id="reset">重新开始</button>    <button type="button" name="button" id="createSpeed">升速</button>    <button type="button" nam...

深入理解JavaScript系列(28):设计模式之工厂模式【代码】

介绍 与创建型模式类似,工厂模式创建对象(视为工厂里的产品)时无需指定创建对象的具体类。 工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。 这个模式十分有用,尤其是创建对象的流程赋值的时候,比如依赖于很多设置文件等。并且,你会经常在程序里看到工厂方法,用于让子类类定义需要创建的对象类型。 ...

《JavaScript高级程序设计》笔记:HTML5脚本编程(16)【代码】

跨文档消息传递跨文档消息传递(cross-document messaging),有时候简称为XDM,指的是在来自不同域的页面间传递消息。例如,www.wrox.com域中的页面与位于一个内嵌框架中的p2p.wrox.com域中的页面通信。XDM的核心是postMessage()方法。在HTML5规范中,除了XDM部分之外的其他部分也会提到这个方法名,但都是为了同一个目的:向另一个地方传递数据。对于XDM而言,“另一个地方”指的是包含在当前页面中的<iframe>元素,或者由当前页面...

Javascript中parseInt的正确使用方式【图】

定义和用法parseInt() 函数可解析一个字符串,并返回一个整数。语法?1parseInt(string, radix)parseInt(string, radix) 当参数radix的值为 0,或没有设置该参数时,parseInt()会根据 string来判断数字的基数。返回值返回解析后的数字。提示和注释注释:只有字符串中的第一个数字会被返回。注释:开头和结尾的空格是允许的。提示:如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN。实例在本例中,我们将使用...

JavaScript 验证表单不为空和获取select下拉列表的值和文本

1.验证表单不为空var hasform = { "Name": "名字", "Id_card": "身份证", "PaySalary": "月工资", "CardCode": "账号", "Fk_Subjectf_Code": "功能科目", "Birthday": "出生日期", "Start_Date": "开始时间" }; var result = true; var value; for (var k in hasform ) { value = $("#" + k).val(); if ...

如何利用javascript获取表单中select下拉列表中所选中项的值value【代码】

?11.html代码如下:<html> <head> </head> <body> <form name="form1" id="form1"> Select your favorite fruit: <select id="mySelect" name="mySelect"> <option value="11">Apple</option> <option value="22" >Orange</option> <option value="33">Pineapple</option> <option value="44">Banana</option> </select> <br /><br /> <input type="button" onclick="getIndex()" value="Alert index of selected option"> </form>...

javascript-DOM学习

javascript-DOM学习  DOM document(html) object modle  document对象(DOM核心对象)  dom能用来干什么?  对html元素的样式(颜色、大小、位置等等)、内容、属  性来进行动态的改变和操作。  document对象  ? 一、属性  ? title 返回或设置当前文档的标题  ? 方法:  ? getElementById(idname) 返回拥有指定id的(第一个)对象的引  用  ? getElementsByTagName(tagname) 返回带有指定标签名的对象的  集合 ...

关于JavaScript的异步执行

首先,计算机执行程序,会分为同步执行,和异步执行同步执行都是正常的计算机程序执行的三大流程第一,顺序控制语句 从上至下,从左至右第二,分支控制语句 if ,switch第三,循环控制语句 for循环,while,do...while,for...in循环,forEach()循环 而异步执行,是一种特殊的程序的执行方式分别有:(1)setInterval 定时器,(2)setTimeout 延时器(3)事件绑定 onclick .... (4)ajax请求异步执行的执行过程:首先,从第...

【Javascript高级程序设计】数据类型与typeof【代码】

数据类型:undefined、null、boolean、string、number、复杂数据类型object 共六种typeof:undefined、object、boolean、string、number、function 六种console.log(typeofnull); //object null值表示一个空对象指针 undefined主要目的是用于比较。可以区分空对象指针与未经初始化的变量。var message; console.log(message); //undefined console.log(age);   //错误console.log(typeof message); //undefined; console...

JavaScript--3种函数调用的方法【代码】

1、函数的简单调用:<script > function fn(p){alert(p); } </script><body><script>fn("简单调用JavaScript函数");</script></body>2、事件响应中调用函数<script > function fn(){alert("success"); } </script><body> <form action="method" type="post"> <input type="button" value="提交" onclick="fn()"> </form></body>3、通过链接调用函数<script >  function fn(){alert("success");}</script> <body>   <a href="ja...

JavaScript数据结构——链表的实现【代码】【图】

前面楼主分别讨论了数据结构栈与队列的实现,当时所用的数据结构都是用的数组来进行实现,但是数组有的时候并不是最佳的数据结构,比如在数组中新增删除元素的时候需要将其他元素进行移动,而在javascript中使用spit()方法不需要访问其他元素。如果你在使用数组的时候发现很慢,就可以考虑使用链表。   链表的概念  链表是一种常见的数据结构。它是动态地进行存储分配的一种结构。链表有一个“头指针”变量,以head表示,它存放...

Ajax--JavaScript实现【代码】

Ajax:一种不用刷新整个页面便可与服务器通讯的办法  Ajax实现的步骤:    1、创建XMLHttpRequest对象    2、服务器向浏览器响应请求(注册监听)    3、浏览器与服务器建立连接    4、浏览器向服务器发送请求     readyState 属性表示Ajax请求的当前状态。它的值用数字代表。 0 代表未初始化。 还没有调用 open 方法 1 代表正在加载。 open 方法已被调用,但 send 方法还没有被...

javascript面向对象和原型【代码】

/* //工厂模式 function createObject(name,age){var obj = new Object();//新建一个对象obj.name=name;//新建对象的属性obj.age=age;obj.run=function(){//新建对象的方法return this.name+","+this.age+"...running.";}return obj;//返回新建的对象引用 }var box1 = createObject("Carl",20); var box2 = createObject("Zhang",25); alert(box1.run()); alert(box2.run());//构造函数 function Box(name,age){this.name=name;//新...

Js事件分发与DOM事件流【图】

这一篇比较透彻:https://www.jianshu.com/p/dc1520327022 点击了目标节点后,捕获阶段里事件会从外向目标传递;到了目标阶段,捕获和冒泡的执行顺序按照事件被定义的先后顺序执行;最后冒泡阶段,又会由目标向外进行传递。 原文:https://www.cnblogs.com/youzi-xuchongyou/p/11636244.html

Js获取下拉框的值和文本select

$("#camera").change(function () { var obj = this; $("#camera_Name").val($("#camera option:selected").text()); $("#camera_Naming").val($(obj).val()); }); $("#teams option:selected").each(function () { t+=($(this).text()+",") });文本 $("#teams).val() 值 原文:http://www.cnblogs.com/change4now/p/5665155.html

JAVASCRIPT - 技术教程分类
JavaScript 教程 JavaScript 简介 JavaScript 用法 JavaScript Chrome 中运行 JavaScript 输出 JavaScript 语法 JavaScript 语句 JavaScript 注释 JavaScript 变量 JavaScript 数据类型 JavaScript 对象 JavaScript 函数 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 运算符 JavaScript 比较 JavaScript 条件语句 JavaScript switch 语句 JavaScript for 循环 JavaScript while 循环 JavaScript break 和 continue 语... JavaScript typeof JavaScript 类型转换 JavaScript 正则表达式 JavaScript 错误 JavaScript 调试 JavaScript 变量提升 JavaScript 严格模式 JavaScript 使用误区 JavaScript 表单 JavaScript 表单验证 JavaScript 验证 API JavaScript 保留关键字 JavaScript this JavaScript let 和 const JavaScript JSON JavaScript void JavaScript 异步编程 JavaScript Promise JavaScript 代码规范 JavaScript 函数定义 JavaScript 函数参数 JavaScript 函数调用 JavaScript 闭包 DOM 简介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素 HTMLCollection 对象 NodeList 对象 JavaScript 对象 JavaScript prototype JavaScript Number 对象 JavaScript String JavaScript Date(日期) JavaScript Array(数组) JavaScript Boolean(布尔) JavaScript Math(算数) JavaScript RegExp 对象 JavaScript Window JavaScript Window Location JavaScript Navigator JavaScript 弹窗 JavaScript 计时事件 JavaScript Cookie JavaScript 库 JavaScript 实例 JavaScript 对象实例 JavaScript 浏览器对象实例 JavaScript HTML DOM 实例 JavaScript 总结 JavaScript 对象 HTML DOM 对象 JavaScript 异步编程 javascript 全部