Book Image

JavaScript by Example

By : Dani Akash S
Book Image

JavaScript by Example

By: Dani Akash S

Overview of this book

JavaScript is the programming language that all web developers need to learn. The first item on our JavaScript to-do list is building g a To-do list app, which you'll have done by the end of the first chapter. You'll explore DOM manipulation with JavaScript and work with event listeners. You'll work with images and text to build a Meme creator. You will also learn about ES (ECMAScript) classes, and will be introduced to layouts using the CSS3 Flexbox. You'll also develop a responsive Event Registration form that allows users to register for your upcoming event and use charts and graphics to display registration data. You will then build a weather application, which will show you different ways perform AJAX requests and work with dynamic, external data. WebRTC enables real-time communication in a web browser; you'll learn how to use it when you build a real-time video-call and chat application later in the book. Towards the end of the book, you will meet React, Facebook's JavaScript library for building user interfaces. You'll throw together a blog with React, and get a feel for why this kind of JavaScript framework is used to build large-scale applications. To make your blog more maintainable and scalable, you'll use Redux to manage data across React components.
Table of Contents (8 chapters)

System requirements

JavaScript is the language of the web. So, you can build web applications from any system with a web browser and a text editor. But we do need some tools for building modern complex web applications. For better development experience, it's recommended to use a Linux or Windows machine with minimum 4 GB RAM or a Mac machine. Before we start, you might want to set up some of the following applications in your system.

Text editor

First of all, you need a JavaScript-friendly text editor. Text editors are important when it comes to writing code. Depending on the features they provide, you can save hours of development time. There are some really good text editors out there with excellent languages support. We are going to be using JavaScript in this book, so I'd recommend getting one of these open source JavaScript-friendly text editors:

You can also try Sublime Text: https://www.sublimetext.com/, which is a great text editor, but unlike the previously mentioned ones, Sublime Text is commercial and you need to pay for continued usage. There is also another commercial product WebStorm: https://www.jetbrains.com/webstorm/, which is a full-fledged Integrated Development Environment (IDE) for JavaScript. It comes with various tools for debugging and integration with JavaScript frameworks. You might want to give it a try sometime.

I would recommend using Visual Studio Code (VSCode) for the projects in this book.

Node.js

Here's another important tool that we will be using throughout this book, Node.js. Node.js is a JavaScript runtime built on Chrome's V8 engine. It lets you run JavaScript outside your browser. Node.js has become really popular because it lets you run JavaScript on the server and is really fast thanks to its non-blocking I/O methods.
One other excellent advantage of Node.js is that it helps create command-line tools, which can be used for various purposes, such as automation, code scaffolding, and more, many of which we will be using in this book. At the time of writing this book, the latest Long Term Support (LTS) version of Node.js is 6.10.2. I'll be using this version throughout this book. You can install the latest LTS version available at the time you are reading this book.

For Windows users

Installation on Windows is straightforward; just download and install the latest LTS version available at: https://nodejs.org/en/.

For Linux users

For Mac users

Install Node.js using Homebrew:

  • Install Homebrew from: https://brew.sh/
  • Run the following command in terminal: brew install node

Once you have installed Node.js, run node -v in your Terminal (command prompt for Windows users) to check whether it is properly installed. This should print the current version of the node you have installed.

Google Chrome

Finally, install the latest version of Google Chrome: https://www.google.com/chrome/ in your system. You can use Firefox or other browsers, but I will be using Chrome, so it will be easier for you to follow if you use Chrome.

Now that we have all the necessary tools installed in our system, let's get started with building our first application!