JavaScript on Lin's Blog

Vue.js Render Object as Table in Beautiful Way

Fri, 17 Mar 2017 01:39:34 +0000

In Vue.js, we can use v-for to render an Array as an HTML table or list nicely. But if we want to render an Object’s keys and values as a table, for example, I use JS Objects and an Array to store a lot of contact info, and each contact has different keys. I want to display the info for Contact 1 in a table. It seems v-for isn’t a good fit here?

How to Prevent the Input onFocus Event From Firing After Page onFocus

Thu, 16 Feb 2017 11:27:59 +0000

Recently I was working on adding Google Analytics user event tracking code to a website. I attached the code to inputs using HTML event handlers, so that whenever a user clicks a specific field or button, a record is sent to Google Analytics. This works fine, but I noticed a problem. If a user clicks into an input field, switches to another page (another Chrome tab), and then switches back to my page (Page onFocus), the input’s onFocus event fires automatically!

JavaScript: How to Check Whether a Variable Is NaN

Tue, 14 Feb 2017 22:44:05 +0000

JavaScript has so many strange quirks! Today, while using parseFloat to convert a string into a number, I learned that if the input can’t be converted to a number, it returns NaN (Not a Number). So I wrote the following code to check for it:

var score = parseFloat(prompt("Score:"));
if(score === NaN) {
console.log("Not a Number");
} else {
console.log(score);
}

At first glance, this code seems perfectly reasonable, just like comparing undefined or null directly with equality. Who knew it would completely fail?

Worried About Visitors Copying Your Articles? Use JS to Automatically Append a Reminder or Disable Copying!

Sun, 12 Feb 2017 23:43:41 +0000

Many content sites have a mechanism that automatically appends the original article URL when text is copied, such as Mojing Lyrics and Zhihu. Some sites even ban users from copying text altogether. Achieving these features isn’t difficult; it only takes a few lines of simple JavaScript. But first you should think about whether your site really needs such a feature. When a regular visitor copies text and pastes it into Facebook, does that really harm your site? And if you truly want to stop visitors from copying text, these tricks only keep out the honest, not the determined. Are you really protecting your interests, or just making your site harder to use?

Handling File Uploads on the Frontend With JS: Preview, Size, Dimensions, and Format

Thu, 09 Feb 2017 13:44:33 +0000

What I hate most when uploading a file is being told five minutes later that the file is too big or the dimensions are wrong! We usually leave upload validation to the backend, so a file has to be uploaded before we can check whether it meets the requirements. Images in particular also need their aspect ratio checked. If all of this is left entirely to the backend, the user experience can suffer. When I was researching profile picture uploads at NewTalk, I found that all of this can actually be handled on the frontend. With JS and HTML5 APIs, you can check the file’s format, size (20MB), and dimensions (100x100). You can even do previews and client-side image cropping and conversion!

Measuring Function Execution Time in JavaScript

Tue, 24 Jan 2017 18:56:38 +0000

To measure a function’s execution time in JavaScript, you can subtract the timestamp taken before the function runs from the timestamp taken after it finishes. Most people use new Date().getTime() to get a timestamp, but if your function runs in less than 1 millisecond, this won’t work, because the smallest unit of a timestamp is the millisecond. So I recommend the Window.Performance API. It gives you the number of milliseconds since the page started loading, with precision down to a thousandth of a millisecond.

JavaScript String Replace All

Mon, 16 Jan 2017 01:20:29 +0000

In JavaScript, String.replace may behave differently than you expect. When you want to replace a string, you’ll find that replace only replaces the first occurrence. For example, “AAA”.replace(“A”, “B”) gives “BAA”, not the “BBB” you might expect. This is because the first argument of JS replace is actually a regular expression, not a string. If you pass in a string, only the first match is replaced, which leads to results you didn’t expect.

JavaScript: Manipulating Browser History, Changing URLs, and the Back Button Event (Essential for SPAs)

Sat, 14 Jan 2017 12:59:02 +0000

Nowadays JavaScript is everywhere. Using JS to manipulate web pages, for things like Ajax, page switching, and pop-up windows, is more and more common. There are even JS frameworks such as React JS and Vue JS that help you develop Single Page Applications (SPAs). When you manipulate a web page with JS, the thing you fear most is URL changes and history. For example, if you switch pages with jQuery, the URL doesn’t change, because it’s a JS operation. And when the user clicks the browser’s Back button in the top left corner, they go straight to another page, because JS operations aren’t recorded in the history (in fact, they can’t be). To solve this series of problems, you can use history.pushState, history.replaceState, and the onpopstate event provided by HTML5.

Implementing a Round-Up-to-Whole-Number Feature: Ideas and Methods

Wed, 11 Jan 2017 23:30:33 +0000

Recently I came across a “round up” feature on Zeczec. For example, if a checkout total is NT$1359, pressing the round-up button changes it to NT$1400. It’s a fun feature, but when I actually tried to implement it, I found that rounding up isn’t easy. There are many non-technical concerns. Here I’ll record the problems I ran into while implementing it, the process I went through, and the final solution!

JavaScript Page Load, Focus, UnFocus, and Exit Events

Tue, 03 Jan 2017 20:43:11 +0000

Most people know how to use JavaScript to record when a user enters a web page, but have you ever thought about how to tell when a user has “closed” it? Browsers today show multiple web pages as tabs, so it’s possible the user is actually looking at someone else’s page while yours just sits there. For example, YouTube often runs into this: a user leaves the page open to listen to music, but in fact they’re looking at Facebook…

Today I’ll briefly note the JS page load and close events, as well as the focus (entering the page) and unfocus (leaving the page) events. With these events, you can record user behavior for analysis, and even do things like stop playing music when the user leaves the page.

Copying Text to the Clipboard with JavaScript

Sat, 10 Dec 2016 15:19:09 +0000

In the past, using JavaScript to copy and paste text through the clipboard was very cumbersome. While developing NTUST.ME, a short URL service for National Taiwan University of Science and Technology, I wanted to make it easy for people to copy the shortened URLs, so I looked into the clipboard API in JavaScript. I found that newer browsers have an execCommand function that supports many handy text operations, such as copy and select all. Let me introduce it to you!

Enable Cross-Origin Resource Sharing (CORS) for Phaser.js

Fri, 02 Dec 2016 14:01:31 +0000

When you load resources and assets from a different domain in Phaser JS, the browser’s same-origin policy blocks them, and you get a pile of error messages, such as:

XMLHttpRequest cannot load http://s.ntustcoding.club/scroll-game-workshop/map.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.

Actually, Phaser itself supports Cross-Origin Resource Sharing (CORS). You can solve this with one simple line, as long as the web hosting you use also supports CORS.

【jQuery】Lazyload - Delayed Image Loading

Wed, 27 Apr 2011 19:15:30 +0000

Photography websites often have a lot of images. When visitors browse these sites, it takes quite a while to load because so many photos have to be loaded. This has a big impact on the website’s host traffic, and it also increases the CPU time on the visitor’s side a lot. Here I want to introduce Lazyload, a jQuery plugin that delays image loading. In other words, when you enter a website, it doesn’t load all the images at once. It only loads some of them, and as you scroll the browser, it loads “the images in the section you are looking at,” so the page loads faster.

[JavaScript] encodeURIComponent: A Function for Encoding URLs

Wed, 22 Jul 2009 14:49:56 +0000

When you use JavaScript to make GET requests, you’ll often run into the fact that JavaScript requires the URL to be encoded. For functions that need an encoded URL, you can use encodeURIComponent to encode it.