JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much anything on a webpage.
Table of Contents
JavaScript Tutorials and Courses
- JavaScript Guide – The guide shows you how to use JavaScript and gives an overview of the language. If you need exhaustive information about a language feature, have a look at the JavaScript reference.
- The Complete JavaScript Course 2020: Build Real Projects! – This course will take you from a complete JavaScript beginner to an advanced developer. You will learn how to program, solve problems, and organize code using common JavaScript patterns.
- Full Stack JavaScript – Teamtreehouse’s course not only teaches you about JavaScript but also guides you on how to use Node.js, a popular JS framework.
- Eloquent JavaScript – This is a book about JavaScript, programming, and the wonders of the digital.
- Introduction to JavaScript – This section will cover basic JavaScript programming concepts, which range from variables and arithmetic to objects and loops.
- The Modern JavaScript Tutorial – This is a website dedicated to JS tutorials. You will learn about the basics of the language and advanced topics.
Best JavaScript Frameworks
- jQuery – jQuery is a fast, lightweight, and feature-rich JavaScript library that simplifies HTML document traversal and manipulation, event handling, and AJAX-based web development. It provides an easy-to-use API that works across a multitude of browsers and has a large community of developers.
- Node.js – Node.js is a server-side runtime environment for JavaScript that allows developers to build scalable, high-performance applications. It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js is particularly useful for building real-time, data-intensive applications that require high concurrency.
- Vue.js – Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be easy to learn and use, and it offers a simple, flexible approach to building complex web applications. Vue.js is lightweight, fast, and efficient, and it provides a range of features, including data binding, computed properties, and templates.
- AngularJS – AngularJS is a powerful JavaScript framework for building dynamic web applications. It provides a comprehensive set of features, including two-way data binding, dependency injection, and directives, that make it easy to build complex applications. AngularJS is particularly useful for building single-page applications that require high interactivity and rich user interfaces.
- TypeScript –
- TypeScript is a strongly-typed superset of JavaScript that adds optional static typing, classes, and interfaces to the language. It is designed to help developers write more scalable, reliable, and maintainable code. TypeScript is particularly useful for large-scale applications and teams, as it can help catch errors early and improve code readability and maintainability.
JavaScript Editors
You can code JavaScript using any text editor.
- Atom
- Visual Studio Code
- Sublime Text
- Brackets
Best JavaScript Plugins
- 3D Model Viewer – View 3D models with many support formats such as 3ds, 3md, amf, assimp, dar, fbx, obj, zip, json, gcode, etc…
- PDF Viewer – PDF Viewer is a responsive Javascript plugin for embedding PDF files on a webpage. It is coded in pure Javascript, and does not require jQuery to work. So you can use this in AngularJS or ReactJS applications also.
- Zaudio – zAudio is an easy-to-use, simple, and modern JavaScript audio player based on the HTML5’s audio element.
- ScrollBooster – A lightweight and zero-dependency content drag-to-scroll library.
- SVG.js – SVG.js has no dependencies and aims to be as small as possible while providing powerful tools for manipulating and animating SVG.
- FilePond – A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads and offers a great, accessible, silky-smooth user experience.
- v8n – The ultimate JavaScript validation library you’ve ever needed.
- Magic Grid – A simple, lightweight Javascript library for dynamic grid layouts. With Magic Grid, all you have to do is specify a container and listen for changes. A
- autoComplete – Simple autocomplete pure vanilla Javascript library.
- Pickr – Flat, simple, multi-themed, responsive, and hackable Color-Picker library. Compatible with all CSS Frameworks e.g. Bootstrap, and Materialize. Supports alpha channel, rgba, hsla, hsva and more.
- Selection – Lightweight library to allow visual DOM Selections.
- LuminJS – A JavaScript library to progressively highlight any text on a page.
- Curtains.js – converts HTML elements containing images and videos into 3D WebGL textured planes.
- Lookforward – Create page section transition.
- Formee – A tiny (532B) library for handling <form> elements
- Displaceable – A tiny, performant, and configurable JavaScript library that smoothly displaces elements on mouse move.
- Toastify – A plugin that shows beautiful notification messages.
- Nightly.js – Enable night mode on your website.
- Driver – A lightweight, no-dependency, vanilla JavaScript engine to drive the user’s focus across the page.
- Smooth dnd – A fast and lightweight drag&drop, a sortable library with many configuration options covering many d&d scenarios. There are no external dependencies. It uses CSS transitions for animations so it’s hardware accelerated whenever possible.
- Pell – This is the simplest and smallest WYSIWYG text editor for the web, with no dependencies.
- alpinejs – It is a rugged, minimal framework for composing JavaScript behavior in your markup, which offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.
- EnlighterJS3 – EnlighterJS is an open-source syntax highlighter written in pure JavaScript. It supports 40 languages/formats with 12 high-quality themes.
- js-cookie – Read and write cookies easily.
JavaScript Game Engines
- Pixi.js – PixiJS is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility.
- Phaser – Phaser is a HTML5 and JavaScript game engine which supports both a Canvas and WebGL renderer.
- MelonJS – melonJS is a standalone library, a lightweight 2D sprite-based engine. It supports 3rd party tools for Texture Packing such as TexturePacker, Free Texture Packer, ShoeBox.
- kiwi.js – Kiwi.js is a HTML5 game framework with blazingly fast WebGL rendering and complementary tools.
- Crafty – This engine help developers make games in a structured way with the use of Entities & Components, and Eventbinding. There is no DOMmanipulation or custom drawing routines.
- Stage.js – Stage.js provides a DOM-like tree data model to compose your application and internally manages rendering cycles and the drawing of your application.
- Cocos2d-html5 – Cocos2d-html5 is a cross-platform 2D game engine written in JavaScript, based on Cocos2d-X.
Blog Posts
JavaScript is a programming language that is used to control the behavior of web pages. It can be used to make words capitalized or lowercase, and it can be used for many other things too. In this blog post, we...
jQuery is a written JavaScript code that comprises of a concise and fast JavaScript library which is used to simplify the traversing of HTML documents, handling of events, animations as well as Ajax interactions for quick web development. So what...
JavaScript is a programming language that can be used for all sorts of things on a website. One of the most common uses for JavaScript is manipulating strings, including remove whitespace characters. In this blog post, you will learn how...
JavaScript is a traditional language that can be used to create dynamic and interactive websites. jQuery is a JavaScript library that simplifies how you interact with the DOM. Its key features include event handling, animation, and Ajax interactions. jQuery has...
JavaScript Array is a data type that stores ordered sets of values. The JavaScript language has several built-in methods for working with arrays, including push(), pop(), and reverse(). These methods are often used to manipulate lists in the document object...
In this tutorial, we will be discussing how to find the longest word in a string using JavaScript. You may think that you don't need to know this for your job or maybe you're not even a programmer. But if...
JavaScript has many built-in functions that can be used in your code to simplify repetitive tasks. Two of these are the slice() and substring() methods, which truncate a string so that it is a specific length or smaller. This article...
JavaScript arrays are a powerful and versatile data type that can be used to store any type of information. One way to use an array is by using it as a list of items. There may be moments when you...
JavaScript is a programming language that can be used to make webpages interactive. One common task is reversing strings, and this post will show you how. First, we'll introduce the reverse() function in JavaScript. Next, we'll see how to use...
JavaScript is a powerful language. It can be used to do anything from making simple animations on a website to building complex user interfaces in modern web applications. But there are some pitfalls that JavaScript developers need to watch out...
This article will show you how to remove numbers from strings in JavaScript. This is a common use case when writing code for financial applications where the number needs to be formatted as text, but not actually shown on screen....
Have you ever had a situation where you needed to get the last few characters of a string? Maybe it was an ID number, or some other identifier. As JavaScript developers, we have two simple ways to do this. The...
If you want to clone an array that is identical to the original, then just assigning values one at a time via the assignment operator will not work. var ages = [20, 25, 45, 54, 62]; var ages2 = ages;...
To refresh page in JavaScript, we use location.reload() function. It is used to reload the current document. But if the origin of the script calling location.reload() differs from the origin of the page that owns the Location object, the reload...
In JavaScript, we use both var and let to declare a variable. However, they are not understood the same. The differences between them are scope. var is function scoped while let is block-scoped. If a variable is defined with let...
When using JavaScript, if you want to know if an array is empty or not, you can use .length property, The length property of an array returns its size. If it is 0, the array is empty. const languages =...
console.log() is a proper JavaScript method to print data into the developer's console. //Syntax console.log(x); The parameter X can be of any data type: a string, an inter, or an object. If the x doesn't exist, it prints out the...
Before using an object's property in JavaScript, we must first check if it exists. Otherwise, an error or warning will be thrown instead. There are 2 ways to detect whether a specified property exists in a specific object. Use in operator...
jQuery is a fantastic JavaScript library for developing user interactions quickly. It has made web design faster, easier and more accessible. Following are the best jQuery plugins to save you time and effort. Developed in 2006 by John Resig, jQuery...
Data tables are an important part of any admin dashboard. It helps show data to webmasters and users. Creating a data table to enhance a website can be made simpler with the help of jQuery and JavaScript libraries. These libraries...
The modern web has made it easier than ever for users to input data into forms, but a datepicker plugin can make the process even smoother. A datepicker plugin allows users to select a date from a calendar-style popup, making...
Export in JavaScript is a feature that allows developers to export specific portions of code from a file or module to be used in other files or modules. When developing a module in JavaScript, the export statement is used to export live bindings to...
With the support of WebRTC, real-time communication capabilities in an app browser become reality. It supports many types of data, including voice, which allows developers to build powerful voice commands, text-to-speech, and speech recognition solutions. SpeechSynthesis The SpeechSynthesis interface of...
In JavaScript the getElementsByClassName() the method returns an HTMLCollection object which is a collection of all elements in the document with the class name parameter in the method. The HTMLCollection object is a collection of nodes, which can be accessed...
JavaScript is the most commonly used language for the 8th year straight with over 60% of the user base. As a result, frameworks based on JavaScript are also very popular and are the backbone of many front-end and back-end web...
setInterval() is a method that can be used to execute JavaScript script at specified intervals. We use it to display time from Date() class. HTML <div id="time"></div> JavaScript <script type="text/javascript"> var time = document.getElementById("time"); function showTime() { var date =...
JavaScript UI frameworks have been popular these days. Developers turn to UI frameworks to write more maintainable code, design fast/consistent UI components, keep both view and state synchronized, provide routing functionality, and build/maintain user interface components. But with a lot...
Delaying and looping function calls can be a useful tool when creating interactive web applications. By using the setTimeout and setInterval functions, you can create dynamic effects that can enhance the user experience. Both setTimeout() and setInterval() methods provide us...
Chart.js is a simple yet flexible JavaScript chart library for both designers & developers. If you want to download a chart as an image file, you can follow one of these 2 methods. Use the web browser's canvas-saving feature Chartjs...
Creating video games is an exciting and creative process that allows developers to express their creativity and test their skills in coding. HTML5 has come a long way since its birth. Games developed based on HTML5 have steadily replaced ones...
Charts help us to understand and read complex data by presenting them in a simpler form. Instead of reading content-rich data in text, it is easier to show them in a chart. The graphical form of data is much easier...
Most PHP apps use parameters to query data. There are many cases you have to handle these parameters on the front end, hence JavaScript or jQuery is used. Actually, jQuery isn't necessary in this case. Below are small code snippets...
SweetAlert is a javascript library that makes popup messages easy and pretty. Download and Install //use npm npm install sweetalert //use CDN: you can also find SweetAlert on unpkg and jsDelivr and use the global swal variable. https://unpkg.com/sweetalert/dist/sweetalert.min.js SweetAlert Examples...
It is easier to create a Youtube embed video by using the pre-made code supplied by Youtube. Under a video, you click on "Share" then "Embed". There will be an iframe code that can be pasted into any sites which...
