I will admit that as a developer, in the past I was quick to reach for a JavaScript library like jQuery when I needed JavaScript of any kind. I found JavaScript code far less intuitive than PHP and of course the JavaScript circa 2010 was nowhere near as refined or capable as that of 2024.
Setup
There is no “setup” for JavaScript: all modern browsers are capable of executing JavaScript code. Like all things web, JavaScript has come a long way over the years.
One of the newer applications of the language is Node.js, “an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.” [1]
When I started in web development, if you wanted any kind of movement on your web page, you used Flash (which no longer exists), or <marquee> (which is a sin against mankind). Now we have JavaScript, JavaScript libraries and of course, the beauty of modern CSS to take care of dynamic behaviour in the browser.
JavaScript & APIs
The introduction of standardised APIs for client-side scripting languages such as JavaScript offers a massive amount of functionality that is relatively easy to use. See the posts tagged JavaScript APIs for JavaScript examples.
Tutorials
I have attempted to separate vanilla JavaScript tutorials from those involving JavaScript libraries such as jQuery [2] and AngularJS.
JavaScript
-
JavaScript’s onclick() event
In the Hello World! Javascript primer our JavaScript ran as soon as the script loaded in the browser. JavaScript is event-driven: scripts run when a…
-
JavaScript’s addEventListener() method
The previous JavaScript posts have all been really simple — it is time to try something slightly more advanced. In this example, I have used…
-
Use JavaScript to manipulate the DOM
Your HTML page is a structured static document consisting of various elements. We talk about the Document Object Model (“DOM”). Have a look at Javascript’s onclick() event…
JavaScript Libraries
-
Datatables jQuery plug-in
I used the Datatables jQuery plug-in extensively in a work project. It is pretty easy to implement and offers useful functionality: search, pagination and ordering…
-
Chosen JavaScript plugin for Prototype & jQuery
Chosen is a JavaScript plugin for Prototype and jQuery that makes long, unwieldy select boxes much more user-friendly. In this tutorial: Required knowledge: 1. Demo…
-
Creating online QR codes with goQR.me API
This is a simple implementation of a QR Code generator using the free goQR.me API.
-
Text file upload and search highlight utility with PHP and jQuery
This was my second pass at an assignment given to me as part of a job interview. I decided to get a little flashier with…
-
Type-ahead look-up jQuery AJAX demo
This was one of my first jQuery experiments. jQuery AJAX requests to a PHP/MySQL back-end populate the drop-down of the input control as you type.…
-
Codepen & JSFiddle
Codepen & JSFiddle are incredibly useful online tools to test (or fiddle with) your JavaScript, HTML, and CSS code. You can test, save, share, embed, and…
-
HTML5 <datalist> jQuery validation
I decided to use the HTML5 <input> <datalist> on a View in my CakePHP project and was super surprised to see that there is no…
-
jQuery blockUI.js Plugin
This is a very cool jQuery plug-in that I implemented on a project that had a bit of AJAX going on. In line with providing…
-
jQuery jGrowl plugin
Most software these days offer some kind of on-screen notifications and modern websites are no exception – think of the notifications you receive while using…
-
HTML5’s <dialog> tag
You may wonder why I posted an article about an HTML element in the JavaScript category. Simple: the element is pretty useless unless you can…
Resources
I use Codepen & JSFiddle quite extensively as an easy way to learn JavaScript.
codepen.io
See the Pen Hello World! by David Fox (@foxbeefly) on CodePen.
jsFiddle
References:
- Node.js. (no date) Node.js – Run JavaScript Everywhere. Available at: https://nodejs.org/en (Accessed: 26 June 2024).
- openjsf.org, O. F. (no date) jQuery. Available at: https://jquery.com/ (Accessed: 19 June 2024).