https://hugo.curtiscode.dev/tags/javascript/Recent content in javascript on Curtis TimsonHugo -- gohugo.ioen-GBFri, 11 Feb 2022 00:00:00 +0000https://hugo.curtiscode.dev/post/js/chartjs-filtering-duplicate-data/Fri, 11 Feb 2022 00:00:00 +0000https://hugo.curtiscode.dev/post/js/chartjs-filtering-duplicate-data/With large data sets, Chart.js data points can start to look cluttered and impact performance. This article looks at how these could be filtered. What is Chart.js? Chart.js is an open-source library which provides simple and flexible Javascript charting. There is also an npm package, react-chartjs-2, which provides Chart.js as React components. Duplicate data points When using a line chart with a lot of data and unchanging values on the y-axis, there can be a lot of overlapping data points, which aren’t providing much value to the user:https://hugo.curtiscode.dev/post/angularjs/angularjs-jest-unit-testing/Fri, 17 Nov 2017 18:00:00 +0000https://hugo.curtiscode.dev/post/angularjs/angularjs-jest-unit-testing/Jest, a unit testing framework by Facebook, is commonly associated with the React JS library. However Jest is not specifically for React, and can be used to test any javascript code you wish. Recently I’ve been using Jest with AngularJs 1.6 and have put together the following step-by-step guide on how to get setup. This guide includes: Installing Angular Mocks and Jest CLI Creating an AngularJs Service Create Jest unit test file Running Jest tests with failed example Correcting service and running successful Jest tests Checking code coverage of tests TL;DR - Full Working Example on GitHub Install Angular Mocks and Jest CLI To use Jest with AngularJs you will require the Angular Mocks and Jest CLI packages, which can be installed using npm:https://hugo.curtiscode.dev/post/js/default-parameters-es6/Wed, 05 Oct 2016 00:00:00 +0000https://hugo.curtiscode.dev/post/js/default-parameters-es6/With ES5 if you wish to set default parameters on a javascript function you would be required to check the value and supply a default if one hadn’t been set. var myFunction = function(arg1, arg2){ arg1 = arg1 || 25; arg2 = arg2 || true; //do something } Even this has problems as passing in 0 for arg1 or false for arg2 would both evaluate as “falsey” and therefore set the default values.https://hugo.curtiscode.dev/post/angularjs/filtering-arrays-in-angularjs/Wed, 24 Jun 2015 00:00:00 +0000https://hugo.curtiscode.dev/post/angularjs/filtering-arrays-in-angularjs/Previously I wrote an articleon how to display data from a simple javascript array using AngularJS. Following on from that this next article will show you how to filter that same array by particular properties. In the previous article I used the following HTML markup with AngularJS to loop through an array of users to display their Name and Location: <div ng-app="myApp" ng-controller="myController"> <ul> <li ng-repeat="user in users">{{user.Name}} | {{user.https://hugo.curtiscode.dev/post/angularjs/setting-up-a-simple-angularjs-app-to-display-an-array/Tue, 02 Jun 2015 00:00:00 +0000https://hugo.curtiscode.dev/post/angularjs/setting-up-a-simple-angularjs-app-to-display-an-array/AngularJS is a powerful Single-Page-Application javascript framework created by Google. The following is a simple tutorial on how to set up an AngularJS application to display a javascript array of user information. First of all we’ll start by creating our javascript array. The following is an array of user information containing details of Name, Gender and Location. var userData = [ { Name: "John Smith", Gender: "M", Location: "Wales" }, { Name: "Sally Smith", Gender: "F", Location: "USA" }, { Name: "Curtis Timson", Gender: "M", Location: "England" }, { Name: "Sam Wallace", Gender: "M", Location: "England" }, { Name: "Caroline James", Gender: "F", Location: "Scotland" } ]; Next we’ll set up the HTML application container required:https://hugo.curtiscode.dev/post/js/preventing-console-log-issues-in-ie/Mon, 27 Oct 2014 00:00:00 +0000https://hugo.curtiscode.dev/post/js/preventing-console-log-issues-in-ie/In some older browsers, including versions of Internet Explorer, window.console doesn’t exist and therefore calling console.log() will result in an error. One way of fixing this is to create a function which checks whether console exists and use this function instead: function consolelog(v){ if (window.console && window.console.log){ window.console.log(v); } } However this requires all developers knowing about this function, and if someone forgets and directly calls console.https://hugo.curtiscode.dev/post/js/round-to-the-nearest-decimal/Fri, 10 Oct 2014 00:00:00 +0000https://hugo.curtiscode.dev/post/js/round-to-the-nearest-decimal/If we need round to the nearest whole number, we can use the Math.round() function to return this: Math.round(1.34234); //returns 1 However what if we need to round to a decimal place? For example 0.5. The following function can be used to do just that, and the logic itself can be adapted to be used for other languages too (C#, SQL etc). function roundToMultiple(value, multiple){ var t = (1/multiple); return (Math.https://hugo.curtiscode.dev/post/js/mixing-revealing-module-and-singleton-javascript-patterns/Thu, 09 Oct 2014 00:00:00 +0000https://hugo.curtiscode.dev/post/js/mixing-revealing-module-and-singleton-javascript-patterns/Until recently I’ve been using the Singleton pattern for my javascript objects. This works well as my functions are namespaced and therefore the risk of clashing object names across Javascript files is reduced. For this example I’ve created a singleton pattern javascript object which will show an alert window displaying “hello world”. var MyFunction = { Init: function(){ this.Config.foo = "hello world"; }, Config:{ foo:null }, ShowAlert:function(){ alert(this.https://hugo.curtiscode.dev/post/js/create-a-flashing-tab-notification-page-title/Wed, 04 Jun 2014 00:00:00 +0000https://hugo.curtiscode.dev/post/js/create-a-flashing-tab-notification-page-title/Page title notifications switch between the default page title and a notification message continously in order to grab the user’s attention. This is commonly used with chat applications. I’ve written a small javascript object which can be used to switch on and off page title notifications. To activate the page title notification call the following: pageTitleNotification.on("New Message!"); Then call the following to turn it off: pageTitleNotification.off() The default speed is 1000 milliseconds, but this can be customised by passing a 2nd parameter to the on() function.https://hugo.curtiscode.dev/post/jquery/namespacing-jquery-event-handlers/Mon, 05 May 2014 00:00:00 +0000https://hugo.curtiscode.dev/post/jquery/namespacing-jquery-event-handlers/If we are to attach 2 or more event handlers to an element these will become stacked and run linear in the order they were attached. For example: $(".foo").on("click", function(e){ console.log("bar"); }); $(".foo").on("click", function(e){ console.log("baz"); }); If .foo is then clicked, the browser console will log: "bar" "baz" If we wish to remove these event handlers we can call: $(".foo").off("click"); Simple. However, what if we wish to only remove 1 of these event handlers and retain the other?https://hugo.curtiscode.dev/post/js/default-negative-variables-to-zero-in-javascript/Wed, 30 Apr 2014 00:00:00 +0000https://hugo.curtiscode.dev/post/js/default-negative-variables-to-zero-in-javascript/If you need to default a value to 0 if its negative, you could do: var i = -45; if (i<0){ i = 0; } console.log(i); //0 However, a shorter way of doing this would be to use Math.max() passing 0 as one of the parameters: var i = -45; i = Math.max(0,i); console.log(i); //0 Likewise Math.min() can be used to set a maximum value: var i = 999; i = Math.https://hugo.curtiscode.dev/post/js/console-log-vs-alert-when-debugging/Thu, 28 Mar 2013 00:00:00 +0000https://hugo.curtiscode.dev/post/js/console-log-vs-alert-when-debugging/Using console.log() is a great way of getting quick results about what variables are holding what values at which point, and which areas of code are being called, without having to debug. Before javascript debugging became so accessible, one of the only ways of checking the values of your variables would be to call alert(). However, this wasn’t ideal as it would stop the script from running while the alert() was displayed, preventing the script from continuing its usual process.https://hugo.curtiscode.dev/post/js/reading-url-hashtag-values/Sun, 27 Jan 2013 00:00:00 +0000https://hugo.curtiscode.dev/post/js/reading-url-hashtag-values/URL hashtags were primarily used in order to position the page scroll on load to a particular element. With javascript we can access what the value of the hashtag is on page load. if (window.location.hash){ var hash = window.location.hash.substring(1); alert("hashtag value is '" + hash + "'"); } This snippet first checks that the URL contains a hashtag, and then uses substring() to remove the hash (#) character from the start of the string.https://hugo.curtiscode.dev/post/js/check-javascript-function-exists-before-calling-it/Fri, 23 Nov 2012 00:00:00 +0000https://hugo.curtiscode.dev/post/js/check-javascript-function-exists-before-calling-it/On large applications, there may be some instances where you need to make a call to a function which belongs in a different javascript file. There might also be a case where this javascript file isn’t always included on every page, and should only be called if it is included. If we are to call this function, and it hasn’t been included, a javascript error will be returned. Therefore we need to first check that the functions exists in the current context.https://hugo.curtiscode.dev/post/jquery/using-jquery-callback-functions/Sun, 05 Aug 2012 00:00:00 +0000https://hugo.curtiscode.dev/post/jquery/using-jquery-callback-functions/I’ve heard questions in the past regarding how to run a script after a jQuery animation or event has been completed. The majority of these believe that you need to delay the script for a few seconds, allowing the animation to complete before the 2nd function is called. For example: $foo.load("MyWebPage.html"); $foo.delay(1000).css("color", "red"); Here, the jQuery object $foo is being loaded with a web page’s content, then while this is happening a delay of 1000 milliseconds is set, before the css colour is changed to red.