Front End Tech
预见未来to50
不忘初心,方得始终!
展开
-
源码-JavaScript&jQuery交互式前端开发-第6章-事件-Focus和blur事件
Focus和blur事件即控件获取及失去焦点时触发的事件。JS如下:function checkUsername() { // Declare function var username = el.value; // Store username in variable if (us原创 2016-09-24 15:59:17 · 842 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-章节示例
示例效果:JS代码:/* The script is placed inside an immediately invoked function expression which helps protect the scope of variables */(function() { // PART ONE: CREATE HOTEL OBJECT AND WRIT原创 2016-09-27 10:49:01 · 544 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第4章-判断和循环
示例效果:JS代码:var table = 3; // Unit of tablevar operator = 'addition'; // Type of calculationvar i = 1; // Set counter to 1var msg = ''; // Message原创 2016-09-27 11:07:51 · 444 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第5章-文档对象模型-更新文本和标签
示例效果:JS代码:// Store the first list item in a variablevar firstItem = document.getElementById('one');// Get the content of the first list itemvar itemContent = firstItem.innerHTML;// Upd原创 2016-09-27 13:20:11 · 425 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第5章-文档对象模型-章节示例
示例效果:JS代码:// ADDING ITEMS TO START AND END OF LISTvar list = document.getElementsByTagName('ul')[0]; // Get the element// ADD NEW ITEM TO END OF LISTvar newItemLast = docu原创 2016-09-27 13:35:25 · 640 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第6章-事件-HTML事件处理程序
事件类型:UI事件(load, unload, error, resize, scroll)、键盘事件、鼠标事件、焦点事件、变动事件示例:HTML事件(已过时,不推荐使用)示例效果:JS代码:function checkUsername() { // Declare function var elMsg =原创 2016-09-27 13:51:03 · 419 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第6章-事件-使用事件委托
示例效果:JS代码:function getTarget(e) { // Declare function if (!e) { // If there is no event object e = window.event;原创 2016-09-27 14:04:31 · 483 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第7章-JQuery-基本示例
JQuery是一个在页面中引用的JavaScript文件,它允许你通过CSS样式选择器来找到一些元素。示例效果:JS代码:$(':header').addClass('headline');$('li:lt(3)').hide().fadeIn(1500);$('li').on('click', function() { $(this).remove();})原创 2016-09-27 16:39:28 · 593 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第7章-JQuery-修改内容
示例效果:JS代码:$(function() { $('li:contains("pine")').text('almonds'); $('li.hot').html(function() { return '' + $(this).text() + ''; }); $('li#one').remove();});HTML代码:原创 2016-09-27 19:17:11 · 619 阅读 · 0 评论 -
学以致用——Excel连接Oracle生成iKB报告——Part3(功能优化)
作为一个consultant,其价值就在于做一个problem solver,解决具体问题。自己写程序的好处就是,对细节的把控程度更高,更容易实现精益求精。今天,又熬夜优化了一下代码,现在,可以做到从Excel一键提取Oracle数据库iKB汇总数据,进行数据分析及完成自动化日报了。可以说,自动化程度已经相当之高了。分享代码:Sub initialize()'声明定义VB...原创 2017-07-13 04:31:46 · 703 阅读 · 2 评论 -
学以致用-使用Spotfire分析自己的CSDN文章列表
1. 首先,在CSDN网站上提取自己发表过的文章列表2. 在Excel中完成数据处理(制作Excel文档作为Spotfire Data File数据源)3. 导入Excel文件,插入计算列,制作图表扫一眼这些饼图,这近500篇文章的分布规律一目了然。当然,这背后的酸铁苦辣只有自己知道。原创 2017-11-29 01:03:13 · 700 阅读 · 0 评论 -
Spotfire使用经验-自定义饼图中显示的数据量(Top N分析,排名分析)
最近发现饼图在快速分析数据分布规律时简单快捷,但有时数据量很大时,饼图会变得拥挤不堪,不用filter限制数据的话,基本没法看。如下所示:此时,可考虑限制数据量。首先插入一个Text Area-> Edit Text Area ->Insert Property Control -> Input Field,新建一个Document Property(这一点很关键,不是data table原创 2017-11-30 23:47:25 · 2452 阅读 · 0 评论 -
Spotfire使用经验——热图的创建(辛苦工作十小时的成果分享)
客户要求将一份汇总数据采用热图(Heatmap)的形式展示出来。从中午到现在,将近用了10个小时,总算有点眉目了。锲而不舍,金石可镂,我算是深刻体会到了这句话的含义。要点:1. 确定Measure(也就是考量指标),本例为Compliant比例(Protocol ID相同的各条数据中,IssueCompliance字段的值为"Compliant"的占比),放在图表Y原创 2017-07-14 02:08:43 · 10633 阅读 · 3 评论 -
Spotfire使用经验-限制/排除数据(limit data)
在绘制饼图时,如果某一种类型占比很大而又没多大实际含义或者都是空值,或者不需要对其进行统计分析,则可以使用limit data功能。举例而言,下面的饼图中,空值将近八成。其他项目就显得很少而显示不出来。右击视图,Properties-> Data ->Limit Data,选择目标字段,在Expression中输入"字段修改后的饼图如原创 2017-12-01 21:55:13 · 2219 阅读 · 0 评论 -
Spotfire使用经验-在Cross Table(Pivot Table,透视表)中动态计算比例
工作中碰到一个需求,要在一张透视表中计算各列在同一行数据中所占的比例。可能是之前很多需求都是通过计算列来解决的,于是就自然而然通过插入一个“percentage”计算列来解决问题。问题看上去解决了,但用户使用filter后,发现这个比例是错的。经过排查,才发现这种手动计算的列,往往是附带了限定条件的。即,只有在满足特定筛选条件时,计算列的值是对的,而大部分情况下是错的。解决原创 2017-12-01 22:18:08 · 3348 阅读 · 0 评论 -
Spotfire使用经验——使用文档属性(Document Property)实现数据集范围的动态限定
需求描述:由于业务系统将被升级,现有的Spotfire报表的数据呈现将会收到影响。因此,用户希望能够在Spotfire中选择查看不同时间范围内的数据,即,业务系统升级前的数据和升级后的数据。解决方法:用户提出的方法是,创建两份Spotfire报表。我建议用户最好不要这样做,因为以后的维护成本将会翻倍。目前我提出的解决方案是:创建一个cutoffDate的文档属性(Document ...原创 2018-10-16 20:00:10 · 2261 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-String对象
属性:length方法:toUpperCase(), toLowerCase(), charAt(), indexOf(), lastIndexOf(), substring(), split(), trim(), replace()示例效果:JS代码:// Create a variable called saying to hold the string原创 2016-09-27 09:21:20 · 345 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-文档对象模型
文档对象模型的最顶端对象是document对象,代表当前浏览器窗口或标签中载入的页面。属性:title, lastModified, URL, domain方法:write(), getElementById(), querySelectorAll(), createElement(), createTextNode()示例:获取页面信息并显示到页脚示例效果:原创 2016-09-27 09:13:25 · 383 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-浏览器对象模型
Window对象代表当前浏览器中的窗口或标签,位于浏览器对象模型(BOM)中的最顶端。属性:innerHeight, innerWidth, pageXoffset, pageYoffset, screenX, screenY, location, document, history, history.length, screen, screen.width, screen.height方原创 2016-09-27 09:01:00 · 343 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第6章-事件-鼠标事件-浮层的显示与关闭
鼠标事件有:单击(click)、双击(dblclick)、鼠标键被按下(mousedown)、鼠标键松开(mouseup)、鼠标指针进入控件(mouseover)、鼠标指针离开控件(mouseout)、鼠标指针在元素上移动(mousemove)。JS代码如下:// Create the HTML for the messagevar msg = 'close X';msg +=原创 2016-09-24 16:25:10 · 535 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第6章-事件-鼠标事件-确定光标位置
光标(即,鼠标指针)位置即以屏幕、浏览器或可分为:1. 屏幕(显示器)位置: screenX, screenY2. 页面位置:pageX, pageY3. 浏览器(客户端)位置:clientX, clientYJS代码如下:var sx = document.getElementById('sx'); // Element to hold screenX原创 2016-09-24 22:37:45 · 445 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第6章-事件-键盘事件-确定按键值
键盘事件包括:1. 输入事件(Input)——当或元素的值发生变化时触发2. 任意键被按下事件(keydown)——当用户按下键盘的任意一个键时触发(按住不放,此事件会不断被触发)3. 可打印键(参考下文注释)被按下事件(keypress)——当用户按下一个键并在屏幕上显示一个字符时触发(按住不放,此事件会不断被触发)4. 松开按键事件(keyup)——当用户松开键盘上的任意一个键原创 2016-09-24 23:16:38 · 485 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第6章-事件-表单事件
表单事件包括:1. 提交事件(submit)——用来在将表单数据发送到服务器之前,校验用户输入2. 变化事件(change)——表单元素状态发生变化时触发(建议使用change事件取代某些click事件,用户不一定只使用鼠标来和表单元素交互,还可能通过Tab键、方向键或回车键来进行交互)3. 键入事件(input)示例:根据用户选择提示、比选项校验示例效果:原创 2016-09-26 08:49:31 · 404 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第6章-事件-变动事件
任何时候当元素被添加到DOM中或从DOM中移除时,DOM的结构就发生了变化,而这种变化会触发变动事件。变动事件包括:1. 节点插入事件(DOMNodeInserted)——当一个节点被插入到DOM树中时触发,如,使用appendChild()、replaceChild()或insertBefore()时2. 节点移除事件(DOMNodeRemoved)——当一个节点从DOM树中被移除时原创 2016-09-26 09:21:23 · 395 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第6章-事件-HTML5事件
H5中引入了3个页面级事件:1. DOMContentLoaded2. hashchange3. beforeunload示例:进入页面后让某一元素自动获取焦点,关闭页面时弹框提示用户示例效果:JS代码如下:function setup() { var textInput; textInput = document.getElementByI原创 2016-09-26 09:34:05 · 530 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第6章-事件-示例(Example)
示例:复制用户输入、使用单一按键切换不同功能(开始/暂停录音)示例效果:JS代码如下(注:页面功能看似简单,JS代码却并不简单):var noteInput, noteName, textEntered, target; // Declare variablesnoteName = document.getElementById('noteName'); //原创 2016-09-26 12:32:24 · 483 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第1章-编程基础知识
示例:根据当前时间,显示不同的问候语示例效果:JS代码如下:var today = new Date();var hourNow = today.getHours();var greeting;if (hourNow > 18) { greeting = 'Good evening!';} else if (hourNow > 12) { gree原创 2016-09-26 12:52:32 · 459 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-使用变量来存储数字
示例:使用变量来存储数字(肯能是最简单的JavaScript脚本了吧)示例效果:JS代码如下:// Create three variables to store the information needed.var price;var quantity;var total;// Assign values to the price and quantity va原创 2016-09-26 13:04:13 · 967 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-使用变量来存储字符串
示例效果:JS代码如下:// Create variables to hold the name and note text.var username;var message;// Assign values to these variables.username = 'PDH';message = '学好JavaScript, HTML, CSS等前端技术原创 2016-09-26 23:03:01 · 351 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-在字符串中使用引号
字符串必须被放置在单引号或双引号中,如要在字符串中使用双引号,必须使用单引号来包含整个字符串。JS 代码:// Create variables to hold the title and note text.var title; var message;// Assign values to these variables.title = "Molly's Special Of原创 2016-09-26 23:21:28 · 361 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-使用变量来存储布尔值
难点:这个示例的难点在于instock和shipping两种状态对应的图标的控制,到现在还没搞明白(还得回头补补CSS的课)JS代码如下:// Create variables and assign their valuesvar inStock;var shipping;inStock = false;shipping = false;// Get the eleme原创 2016-09-26 23:40:06 · 497 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-章节示例
示例效果:JS代码:// Create variables for the welcome messagevar greeting = '您好, ';var name = '黄先生';var message = ',您的结账单如下:';// Concatenate the three variables above to create the welcome messa原创 2016-09-26 23:59:39 · 493 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-使用字面量语法创建对象
示例效果:JS代码:// Set up the objectvar hotel = { name : 'Quay', rooms : 40, booked : 25, checkAvailability : function() { return this.rooms - this.booked; // Need "this" because inside f原创 2016-09-27 08:26:41 · 588 阅读 · 0 评论 -
源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-使用构造函数语法创建对象
代码示例:JS代码:// Create the template for objects that are hotelsfunction Hotel(name, rooms, booked) { this.name = name; this.rooms = rooms; this.booked = booked; this.checkAvailability原创 2016-09-27 08:40:30 · 396 阅读 · 0 评论 -
Spotfire调试经验——在Spotfire Cross Table(类似Excel Pivot Table)中实现去重百分比计算(% of total)
Excel透视表有个局限性,不能实现去重统计。即,只提供了count函数而没有提供uniqueCount函数。Spotfire的Cross Table中可使用uniqueCount来统计某一列中各个不同值所出现的行数,即去重统计。问题是,这个去重后的百分比怎么计算?自己摸索了半天,总算是在参考了一篇帖子后找到了解决方法:UniqueCount([列名]) THEN [Valu...原创 2019-06-07 00:30:34 · 2174 阅读 · 0 评论