Start your journey towards becoming a JavaScript developer with the help of more than 100 fun exercises and projects.
Key Features
• Write eloquent JavaScript and employ fundamental and advanced features to create your own web apps
• Interact with the browser with HTML and JavaScript, and add dynamic images, shapes, and text with HTML5 Canvas
• Build a password checker, paint web app, hangman game, and many more fun projects
Book Description
This book demonstrates the capabilities of JavaScript for web application development by combining theoretical learning with code exercises and fun projects that you can challenge yourself with. The guiding principle of the book is to show how straightforward JavaScript techniques can be used to make web apps ranging from dynamic websites to simple browser-based games.
JavaScript from Beginner to Professional focuses on key programming concepts and Document Object Model manipulations that are used to solve common problems in professional web applications. These include data validation, manipulating the appearance of web pages, working with asynchronous and concurrent code.
The book uses project-based learning to provide context for the theoretical components in a series of code examples that can be used as modules of an application, such as input validators, games, and simple animations. This will be supplemented with a brief crash course on HTML and CSS to illustrate how JavaScript components fit into a complete web application.
As you learn the concepts, you can try them in your own editor or browser console to get a solid understanding of how they work and what they do. By the end of this JavaScript book, you will feel confident writing core JavaScript code and be equipped to progress to more advanced libraries, frameworks, and environments such as React, Angular, and Node.js.
What you will learn
• Use logic statements to make decisions within your code
• Save time with JavaScript loops by avoiding writing the same code repeatedly
• Use JavaScript functions and methods to selectively execute code
• Connect to HTML5 elements and bring your own web pages to life with interactive content
• Make your search patterns more effective with regular expressions
• Explore concurrency and asynchronous programming to process events efficiently and improve performance
• Get a head start on your next steps with primers on key libraries, frameworks, and APIs
Who this book is for
This book is for people who are new to JavaScript (JS) or those looking to build up their skills in web development. Basic familiarity with HTML & CSS would be beneficial.
Whether you are a junior or intermediate developer who needs an easy-to-understand practical guide for JS concepts, a developer who wants to transition into working with JS, or a student studying programming concepts using JS, this book will prove helpful.
Author(s): Laurence Lars Svekis, Maaike van Putten, Rob Percival
Edition: 1
Publisher: Packt Publishing
Year: 2021
Language: English
Commentary: Publisher's PDF
Pages: 544
City: Birmingham, UK
Tags: Programming; JavaScript; Concurrency; DOM; Object-Oriented Programming; HTML5; Regular Expressions; Assignments
Cover
Copyright
Contributors
Table of Contents
Preface
Chapter 1: Getting Started with JavaScript
Why should you learn JavaScript?
Setting up your environment
Integrated Development Environment
Web browser
Extra tools
Online editor
How does the browser understand JavaScript?
Using the browser console
Practice exercise 1.1
Adding JavaScript to a web page
Directly in HTML
Practice exercise 1.2
Linking an external file to our web page
Practice exercise 1.3
Writing JavaScript code
Formatting code
Indentations and whitespace
Semicolons
Code comments
Practice exercise 1.4
Prompt
Random numbers
Chapter project
Creating an HTML file and a linked JavaScript file
Self-check quiz
Summary
Chapter 2: JavaScript Essentials
Variables
Declaring variables
let, var, and const
Naming variables
Primitive data types
String
Escape characters
Number
BigInt
Boolean
Symbol
Undefined
null
Analyzing and modifying data types
Working out the type of a variable
Converting data types
Practice exercise 2.1
Operators
Arithmetic operators
Addition
Subtraction
Multiplication
Division
Exponentiation
Modulus
Unary operators: increment and decrement
Combining the operators
Practice exercise 2.3
Assignment operators
Practice exercise 2.4
Comparison operators
Equal
Not equal
Greater than and smaller than
Logical operators
And
Or
Not
Chapter project
Miles-to-kilometers converter
BMI calculator
Self-check quiz
Summary
Chapter 3: JavaScript Multiple Values
Arrays and their properties
Creating arrays
Accessing elements
Overwriting elements
Built-in length property
Practice exercise 3.1
Array methods
Adding and replacing elements
Deleting elements
Finding elements
Sorting
Reversing
Practice exercise 3.2
Multidimensional arrays
Practice exercise 3.3
Objects in JavaScript
Updating objects
Practice exercise 3.4
Working with objects and arrays
Objects in objects
Arrays in objects
Objects in arrays
Objects in arrays in objects
Practice exercise 3.5
Chapter projects
Manipulating an array
Company product catalog
Self-check quiz
Summary
Chapter 4: Logic Statements
if and if else statements
Practice exercise 4.1
else if statements
Practice exercise 4.2
Conditional ternary operators
Practice exercise 4.3
switch statements
The default case
Practice exercise 4.4
Combining cases
Practice exercise 4.5
Chapter projects
Evaluating a number game
Friend checker game
Rock Paper Scissors game
Self-check quiz
Summary
Chapter 5: Loops
while loops
Practice exercise 5.1
do while loops
Practice exercise 5.2
for loops
Practice exercise 5.3
Nested loops
Practice exercise 5.4
Loops and arrays
Practice exercise 5.5
for of loop
Practice exercise 5.6
Loops and objects
for in loop
Practice exercise 5.7
Looping over objects by converting to an array
break and continue
break
continue
Practice exercise 5.8
break, continue, and nested loops
break and continue and labeled blocks
Chapter project
Math multiplication table
Self-check quiz
Summary
Chapter 6: Functions
Basic functions
Invoking functions
Writing functions
Naming functions
Practice exercise 6.1
Practice exercise 6.2
Parameters and arguments
Practice exercise 6.3
Default or unsuitable parameters
Special functions and operators
Arrow functions
Spread operator
Rest parameter
Returning function values
Practice exercise 6.4
Returning with arrow functions
Variable scope in functions
Local variables in functions
let versus var variables
const scope
Global variables
Immediately invoked function expression
Practice exercise 6.5
Recursive functions
Practice exercise 6.6
Nested functions
Practice exercise 6.7
Anonymous functions
Practice exercise 6.8
Function callbacks
Chapter projects
Create a recursive function
Set timeout order
Self-check quiz
Summary
Chapter 7: Classes
Object-oriented programming
Classes and objects
Classes
Constructors
Practice exercise 7.1
Methods
Practice exercise 7.2
Properties
Getters and setters
Inheritance
Prototypes
Practice exercise 7.3
Chapter projects
Employee tracking app
Menu items price calculator
Self-check quiz
Summary
Chapter 8: Built-In JavaScript Methods
Introduction to built-in JavaScript methods
Global methods
Decoding and encoding URIs
decodeUri() and encodeUri()
decodeUriComponent() and encodeUriComponent()
Encoding with escape() and unescape()
Practice exercise 8.1
Parsing numbers
Making integers with parseInt()
Making floats with parseFloat()
Executing JavaScript with eval()
Array methods
Performing a certain action for every item
Filtering an array
Checking a condition for all elements
Replacing part of an array with another part of the array
Mapping the values of an array
Finding the last occurrence in an array
Practice exercise 8.2
Practice exercise 8.3
String methods
Combining strings
Converting a string to an array
Converting an array to a string
Working with index and positions
Creating substrings
Replacing parts of the string
Uppercase and lowercase
The start and end of a string
Practice exercise 8.4
Practice exercise 8.5
Number methods
Checking if something is (not) a number
Checking if something is finite
Checking if something is an integer
Specifying a number of decimals
Specifying precision
Math methods
Finding the highest and lowest number
Square root and raising to the power of
Turning decimals into integers
Exponent and logarithm
Practice exercise 8.6
Date methods
Creating dates
Methods to get and set the elements of a date
Parsing dates
Converting a date to a string
Practice exercise 8.7
Chapter projects
Word scrambler
Countdown timer
Self-check quiz
Summary
Chapter 9: The Document Object Model
HTML crash course
HTML elements
HTML attributes
The BOM
Practice exercise 9.1
Window history object
Window navigator object
Window location object
Practice exercise 9.2
The DOM
Additional DOM properties
Selecting page elements
Practice exercise 9.3
Chapter project
Manipulating HTML elements with JavaScript
Self-check quiz
Summary
Chapter 10: Dynamic Element Manipulation Using the DOM
Basic DOM traversing
Practice exercise 10.1
Selecting elements as objects
Changing innerText
Changing innerHTML
Accessing elements in the DOM
Accessing elements by ID
Practice exercise 10.2
Accessing elements by tag name
Practice exercise 10.3
Accessing elements by class name
Practice exercise 10.4
Accessing elements with a CSS selector
Using querySelector()
Using querySelectorAll()
Element click handler
This and the DOM
Practice exercise 10.7
Manipulating element style
Changing the classes of an element
Adding classes to elements
Removing classes from elements
Toggling classes
Manipulating attributes
Practice exercise 10.8
Event listeners on elements
Practice exercise 10.9
Creating new elements
Practice exercise 10.10
Chapter projects
Collapsible accordion component
Interactive voting system
Hangman game
Self-check quiz
Summary
Chapter 11: Interactive Content and Event Listeners
Introducing interactive content
Specifying events
Specifying events with HTML
Specifying events with JavaScript
Practice exercise 11.1
Specifying events with event listeners
Practice exercise 11.2
The onload event handler
Practice exercise 11.3
Mouse event handlers
Practice exercise 11.4
The event target property
Practice exercise 11.5
DOM event flow
Practice exercise 11.6
onchange and onblur
Practice exercise 11.7
Key event handler
Practice exercise 11.8
Drag and drop elements
Practice exercise 11.9
Form submission
Practice exercise 11.10
Animating elements
Practice exercise 11.11
Chapter projects
Build your own analytics
Star rating system
Mouse position tracker
Box clicker speed test game
Self-check quiz
Summary
Chapter 12: Intermediate JavaScript
Regular expressions
Specifying multiple options for words
Character options
Groups
Practical regex
Searching and replacing strings
Email validation
Functions and the arguments object
Practice exercise 12.3
JavaScript hoisting
Using strict mode
Debugging
Breakpoints
Practice exercise 12.4
Error handling
Practice exercise 12.5
Using cookies
Practice exercise 12.6
Local storage
Practice exercise 12.7
JSON
Practice exercise 12.8
Parsing JSON
Practice exercise 12.9
Practice exercise 12.9 answers
Chapter projects
Email extractor
Form validator
Simple math quiz
Self-check quiz
Summary
Chapter 13: Concurrency
Introducing concurrency
Callbacks
Practice exercise 13.1
Promises
Practice exercise 13.2
async and await
Practice exercise 13.3
Event loop
Call stack and callback queue
Chapter project
Password checker
Self-check quiz
Summary
Chapter 14: HTML5, Canvas, and JavaScript
Introducing HTML5 with JavaScript
Local file reader
Uploading files
Reading files
Practice exercise 14.1
Getting position data with GeoLocation
HTML5 canvas
Practice exercise 14.2
Dynamic canvas
Adding lines and circles to the canvas
Practice exercise 14.3
Adding text to the canvas
Practice exercise 14.4
Adding and uploading images to the canvas
Practice exercise 14.5
Adding animations to the canvas
Practice exercise 14.6
Drawing on canvas with a mouse
Practice exercise 14.7
Saving dynamic images
Media on the page
Digital accessibility in HTML
Chapter projects
Create a Matrix effect
Countdown clock
Online paint app
Self-check quiz
Summary
Chapter 15: Next Steps
Libraries and frameworks
Libraries
jQuery
D3
Underscore
React
Frameworks
Vue.js
Angular
Learning the backend
APIs
AJAX
Practice exercise 15.1
Node.js
Using the Express Node.js framework
Next steps
Chapter projects
Working with JSON
List-making project
Self-check quiz
Summary
Appendix – Practice Exercise, Project, and Self-Check Quiz Answers
Chapter 1, Getting Started with JavaScript
Practice exercises
Projects
Creating an HTML file and a linked JavaScript file
Self-check quiz
Chapter 2, JavaScript Essentials
Practice exercises
Projects
Miles-to-kilometers converter
BMI calculator
Self-check quiz
Chapter 3, JavaScript Multiple Values
Practice exercises
Projects
Manipulating an array
Company product catalog
Self-check quiz
Chapter 4, Logic Statements
Practice exercises
Projects
Evaluating a number game answers
Friend checker game answers
Rock paper scissors game answers
Self-check quiz
Chapter 5, Loops
Practice exercises
Project
Math multiplication table
Self-check quiz
Chapter 6, Functions
Practice exercises
Projects
Create a recursive function
Set timeout order
Self-check quiz
Chapter 7, Classes
Practice exercises
Projects
Employee tracking app
Menu items price calculator
Self-check quiz
Chapter 8, Built-In JavaScript Methods
Practice exercises
Projects
Word scrambler
Countdown timer
Self-check quiz
Chapter 9, The Document Object Model
Practice exercises
Projects
Manipulating HTML elements with JavaScript
Self-check quiz
Chapter 10, Dynamic Element Manipulation Using the DOM
Practice exercises
Projects
Collapsible accordion component
Interactive voting system
Hangman game
Self-check quiz
Chapter 11, Interactive Content and Event Listeners
Practice exercises
Projects
Build your own analytics
Star rater system
Mouse position tracker
Box clicker speed test game
Self-check quiz
Chapter 12, Intermediate JavaScript
Practice exercises
Projects
Email extractor
Form validator
Simple math quiz
Self-check quiz
Chapter 13, Concurrency
Practice exercises
Projects
Password checker
Self-check quiz
Chapter 14, HTML5, Canvas, and JavaScript
Practice exercises
Projects
Create a Matrix effect
Countdown clock
Online paint app
Self-check quiz
Chapter 15, Next Steps
Practice exercises
Projects
Working with JSON
List-making project
Self-check quiz
Packt Page
Other Books You May Enjoy
Index
