JavaScript实例:运动的小球
本篇博文通过制作一个小球运动动画的实例,来学习在HTML5的画布上实现动画制作的方法,同时理解面向对象程序设计的基本思想。
1.绘制小球
先在HTML页面中设置一个画布。
<canvas id="myCanv ...
配置ES6的JavaScript运行环境-Visual Studio Code
内容:在Visual Studio Code下,配置ES6的JS运行开发环境(通过babel把ES6转码为ES5语法的代码)和VS相关插件。(之前都用sublimeText3,好像现在主流都是用VS的比较多)
前排提示:如果只是学习,单纯调试使用ES6的JS代码,安装Visual Studio Code和Node.js(正文的第一步和第二步),然后就可以在Debug下执行Run with Nod ...
javaScript
1、什么是javaScript?
javaScript 是基于对象(Object)和事件驱动的脚本语言。使用它的目的是与HTML(超文本标记语言)、java脚本语言一起实现在一个Web页面中链接多个对象,与Web 客户交互作用。
2、javaScript 的特点
基于对象:javaScript 是基于对象的脚本编程语 ...
JavaScript的内存模型
引言
在我们的前端日常工作中,无时无刻不在进行着变量的声明和赋值,你是否也曾碰到过变量声明报错或变量被污染的问题,如果你跟笔者一样碰到过,那么我们应该暂时停下来好好思考问题发生的原因以及如何采取相应的补救措施。当然排查问题最好的方式就是深入其底层细节,了解在JavaScript中的内存分配方式。只有我们对底层 ...
不要再造轮子了:聊一聊 JavaScript 的 URL 对象是什么?
本文由葡萄城技术团队于博客园翻译并首发
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
如果我们自己编写从URL中分析和提取元素的代码,那么有可能会比较痛苦和麻烦。程序员作为这个社会中最“懒”的群体之一,无休止的重复造轮子必然是令人难以容忍的,所以大多 ...
理解Javascript执行过程
Javascript是一种解释型的动态语言。
在程序中,有编译型语言和解释型语言。那么什么是编译型语言,什么是解释型语言呢?
编译型语言: 它首先将源代码编译成机器语言,再由机器运行机器码(二进制)。
解释型语言: 相对于编译型语言而存在的,源代码不是直接编译为目标代码,而是将源代码翻译成中间代码,再由解释器对中间代码 ...
JavaScript五种方式实现图片轮播
实现图片轮播的主要思路总结:
1、将多张图片水平或者垂直方向衔接排好,沿着某一个方式移动,父元素设置固定的大小,溢出的内容进行隐藏
2,通过position条件下:z-index的覆盖显示。
3、改变透明度实现图片轮播
基于上面的思路,下面是五种实现的方式:
方式一:vue + swiper 实现图 ...
JavaScript实现图片的自动轮播
一、html和css部分代码
设计的框架为:
一个大的div用来显示图片(共四张图片),这个大的div中包含两个箭头,用来切换图片,向左或向右;
然后底部有四个小的div用来对应每张图片;
html和css效果图:
代码:
1 <!DOCTYPE html>
2 <html>
3 <head lang="en" ...
JavaScript中定义类的方式详解
本文实例讲述了JavaScript中定义类的方式。分享给大家供大家参考,具体如下:
Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Javascript如何实现类 ...
JavaScript实现动态轮播图效果
功能描述:
1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏
2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步
3.拷贝第一张图片添加到ul最后可以实现动态添加图片
4.给箭头绑定单击事件,并且使图片可以无缝轮播
5.实现自动轮播(动画函数)
代码实现:
1.鼠标移入左右侧箭头显示 ...
Dart和JavaScript对比小结
作为一名web前端来入门dart,新语言和我们熟悉的js有所差异,写dart的过程中容易受到原有思维的影响,这里把dart和js做一个对比总结,方便查找和熟悉。
变量声明
var 关键字
dart和js都支持var关键字,使用 var 关键词进行声明的时候,dart 会自动推断出 当前变量的类型,如果在变量声明的时候没有进行赋值,那么 ...
AST抽象语法树 JavaScript版
在javascript世界中,你可以认为抽象语法树(AST)是最底层。 再往下,就是关于转换和编译的“黑魔法”领域了。
现在,我们拆解一个简单的add函数
function add(a, b) {
return a + b
}
首先,我们拿到的这个语法块,是一个FunctionDeclaration(函数定义)对象。
用力拆开,它成了三块:
一个id,就是它的名字,即add
两 ...
JavaScript-Clipper.js
Clipper.js下载地址:https://sourceforge.net/projects/jsclipper/files/latest/download使用Javascript Clipper库,您可以通过多种方式修改路径(多边形和折线)的几何形状。
特点:
1. 主要布尔运算:和、相交、差和或。
2. 用正数或负数抵消路径。
其他功能包括:
3. 简化多边形,这意味着将自相 ...
javascript闭包详解
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。
下面就是我的学习笔记,对于Javascript初学者应该是很有用的。
一、变量的作用域
要理解闭包,首先必须理解Javascript特殊的变量作用域。
变量的作用域无非就是两种:全局变量和局部变量。
Javascript语言的特殊之处,就在于函数 ...
JavaScript调用百度地图
在网站开发过程中,经常会调用到地图,百度地图提供Web开发、Android开发、iOS开发API及SDK,百度地图JavaScript API可帮助您在网站中构建功能丰富、交互性强的地图应用,本篇博客简单介绍如何使用百度地图提供的JavaScript API调用百度地图。
百度地图开放平台地址:http://lbsyun.baidu.com/index.php?title=jspopular3.0 ...
javascript-state-machine
使用场景
一个由一个或多个动态变化的属性导致发生不同行为的对象,在与外部事件产生互动时,其内部状态就会改变,从而使得系统的行为也随之发生变化,那么这个对象,就是有状态的对象
代码中包含大量与对象状态有关的条件语句,像是if else或switch case语句,且这些条件执行与否依赖于该对象的状态。
Installation
...
详解JavaScript错误捕获和上报流程
怎么捕获错误并且处理,是一门语言必备的知识。在JavaScript中也是如此。
那怎么捕获错误呢?初看好像很简单,try-catch就可以了嘛!但是有的时候我们发现情况却繁多复杂。
Q1: 同步可以try-catch,但一个异步回调,比如setTimeOut里的函数还可以try-catch吗?
Q2: Promise的错误捕获怎么 ...
<JavaScript>几道javascript练习题
问题1: 作用域(Scope)
考虑以下代码:
(function() {
var a = b = 5;
})();
console.log(b);
控制台(console)会打印出什么?
答案
上述代码会打印出5。
这个问题的陷阱就是,在立即执行函数表达式(IIFE)中,有两个赋值,但是其中变量a使用关键词var来声明。这就意味着a是这个函数的局部变量。与此相反 ...
通过javascript 执行环境理解她
古往今来最难的学的武功(javascript)算其一。
欲练此功必先自宫,愿少侠习的此功,笑傲江湖。
你将了解
执行栈(Execution stack)
执行上下文(Execution Context)
作用域链(scope chains)
变量提升(hoisting)
闭包(closures)
this 绑定
执行栈
又叫调用栈,具有 LIFO(last in first out 后进先出)结构,用 ...
JavaScript中的回调函数(callback)
什么是回调函数
In computer programming, a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time[引自 维基百科 callback]
回调函数是一段可执行的代码段,它作为一个参数传递给其他的代码,其作 ...