JavaScript from Beginner to Professional

JavaScript from Beginner to Professional

by Laurence Lars Svekis, Maaike van Putten, Codestars By Rob Percival
Released December 2021
Publisher(s): Packt Publishing
ISBN: 9781800562523

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Start your journey towards becoming a JavaScript developer with the help of more than 100 fun exercises and projects.

Purchase of the print or Kindle book includes a free eBook in the PDF format.

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.

Table of contents

  1. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Get in touch
  2. Getting Started with JavaScript
    1. Why should you learn JavaScript?
    2. Setting up your environment
      1. Integrated Development Environment
      2. Web browser
      3. Extra tools
      4. Online editor
    3. How does the browser understand JavaScript?
    4. Using the browser console
      1. Practice exercise 1.1
    5. Adding JavaScript to a web page
      1. Directly in HTML
        1. Practice exercise 1.2
      2. Linking an external file to our web page
        1. Practice exercise 1.3
    6. Writing JavaScript code
      1. Formatting code
        1. Indentations and whitespace
        2. Semicolons
      2. Code comments
        1. Practice exercise 1.4
      3. Prompt
      4. Random numbers
    7. Chapter project
      1. Creating an HTML file and a linked JavaScript file
    8. Self-check quiz
    9. Summary
  3. JavaScript Essentials
    1. Variables
      1. Declaring variables
        1. let, var, and const
        2. Naming variables
    2. Primitive data types
      1. String
        1. Escape characters
      2. Number
      3. BigInt
      4. Boolean
      5. Symbol
      6. Undefined
      7. null
    3. Analyzing and modifying data types
      1. Working out the type of a variable
      2. Converting data types
      3. Practice exercise 2.1
    4. Operators
      1. Arithmetic operators
        1. Addition
        2. Subtraction
        3. Multiplication
        4. Division
        5. Exponentiation
        6. Modulus
        7. Unary operators: increment and decrement
        8. Combining the operators
        9. Practice exercise 2.3
      2. Assignment operators
        1. Practice exercise 2.4
      3. Comparison operators
        1. Equal
        2. Not equal
        3. Greater than and smaller than
      4. Logical operators
        1. And
        2. Or
        3. Not
    5. Chapter project
      1. Miles-to-kilometers converter
      2. BMI calculator
    6. Self-check quiz
    7. Summary
  4. JavaScript Multiple Values
    1. Arrays and their properties
      1. Creating arrays
      2. Accessing elements
      3. Overwriting elements
      4. Built-in length property
      5. Practice exercise 3.1
    2. Array methods
      1. Adding and replacing elements
      2. Deleting elements
      3. Finding elements
      4. Sorting
      5. Reversing
      6. Practice exercise 3.2
    3. Multidimensional arrays
      1. Practice exercise 3.3
    4. Objects in JavaScript
      1. Updating objects
      2. Practice exercise 3.4
    5. Working with objects and arrays
      1. Objects in objects
      2. Arrays in objects
      3. Objects in arrays
      4. Objects in arrays in objects
      5. Practice exercise 3.5
    6. Chapter projects
      1. Manipulating an array
      2. Company product catalog
    7. Self-check quiz
    8. Summary
  5. Logic Statements
    1. if and if else statements
      1. Practice exercise 4.1
    2. else if statements
      1. Practice exercise 4.2
    3. Conditional ternary operators
      1. Practice exercise 4.3
    4. switch statements
      1. The default case
        1. Practice exercise 4.4
      2. Combining cases
        1. Practice exercise 4.5
    5. Chapter projects
      1. Evaluating a number game
      2. Friend checker game
      3. Rock Paper Scissors game
    6. Self-check quiz
    7. Summary
  6. Loops
    1. while loops
      1. Practice exercise 5.1
    2. do while loops
      1. Practice exercise 5.2
    3. for loops
      1. Practice exercise 5.3
    4. Nested loops
      1. Practice exercise 5.4
    5. Loops and arrays
      1. Practice exercise 5.5
      2. for of loop
        1. Practice exercise 5.6
    6. Loops and objects
      1. for in loop
        1. Practice exercise 5.7
      2. Looping over objects by converting to an array
    7. break and continue
      1. break
      2. continue
      3. Practice exercise 5.8
      4. break, continue, and nested loops
      5. break and continue and labeled blocks
    8. Chapter project
      1. Math multiplication table
    9. Self-check quiz
    10. Summary
  7. Functions
    1. Basic functions
      1. Invoking functions
      2. Writing functions
      3. Naming functions
      4. Practice exercise 6.1
      5. Practice exercise 6.2
    2. Parameters and arguments
      1. Practice exercise 6.3
      2. Default or unsuitable parameters
    3. Special functions and operators
      1. Arrow functions
      2. Spread operator
      3. Rest parameter
    4. Returning function values
      1. Practice exercise 6.4
      2. Returning with arrow functions
    5. Variable scope in functions
      1. Local variables in functions
        1. let versus var variables
        2. const scope
      2. Global variables
      3. Immediately invoked function expression
        1. Practice exercise 6.5
    6. Recursive functions
      1. Practice exercise 6.6
    7. Nested functions
      1. Practice exercise 6.7
    8. Anonymous functions
      1. Practice exercise 6.8
      2. Function callbacks
    9. Chapter projects
      1. Create a recursive function
      2. Set timeout order
    10. Self-check quiz
    11. Summary
  8. Classes
    1. Object-oriented programming
    2. Classes and objects
    3. Classes
      1. Constructors
        1. Practice exercise 7.1
      2. Methods
        1. Practice exercise 7.2
      3. Properties
        1. Getters and setters
    4. Inheritance
    5. Prototypes
      1. Practice exercise 7.3
    6. Chapter projects
      1. Employee tracking app
      2. Menu items price calculator
    7. Self-check quiz
    8. Summary
  9. Built-In JavaScript Methods
    1. Introduction to built-in JavaScript methods
    2. Global methods
      1. Decoding and encoding URIs
        1. decodeUri() and encodeUri()
        2. decodeUriComponent() and encodeUriComponent()
        3. Encoding with escape() and unescape()
        4. Practice exercise 8.1
      2. Parsing numbers
        1. Making integers with parseInt()
        2. Making floats with parseFloat()
      3. Executing JavaScript with eval()
    3. Array methods
      1. Performing a certain action for every item
      2. Filtering an array
      3. Checking a condition for all elements
      4. Replacing part of an array with another part of the array
      5. Mapping the values of an array
      6. Finding the last occurrence in an array
      7. Practice exercise 8.2
      8. Practice exercise 8.3
    4. String methods
      1. Combining strings
      2. Converting a string to an array
      3. Converting an array to a string
      4. Working with index and positions
      5. Creating substrings
      6. Replacing parts of the string
      7. Uppercase and lowercase
      8. The start and end of a string
      9. Practice exercise 8.4
      10. Practice exercise 8.5
    5. Number methods
      1. Checking if something is (not) a number
      2. Checking if something is finite
      3. Checking if something is an integer
      4. Specifying a number of decimals
      5. Specifying precision
    6. Math methods
      1. Finding the highest and lowest number
      2. Square root and raising to the power of
      3. Turning decimals into integers
      4. Exponent and logarithm
      5. Practice exercise 8.6
    7. Date methods
      1. Creating dates
      2. Methods to get and set the elements of a date
      3. Parsing dates
      4. Converting a date to a string
      5. Practice exercise 8.7
    8. Chapter projects
      1. Word scrambler
      2. Countdown timer
    9. Self-check quiz
    10. Summary
  10. The Document Object Model
    1. HTML crash course
      1. HTML elements
      2. HTML attributes
    2. The BOM
      1. Practice exercise 9.1
      2. Window history object
      3. Window navigator object
      4. Window location object
        1. Practice exercise 9.2
    3. The DOM
      1. Additional DOM properties
      2. Selecting page elements
      3. Practice exercise 9.3
    4. Chapter project
      1. Manipulating HTML elements with JavaScript
    5. Self-check quiz
    6. Summary
  11. Dynamic Element Manipulation Using the DOM
    1. Basic DOM traversing
      1. Practice exercise 10.1
      2. Selecting elements as objects
        1. Changing innerText
        2. Changing innerHTML
    2. Accessing elements in the DOM
      1. Accessing elements by ID
        1. Practice exercise 10.2
      2. Accessing elements by tag name
        1. Practice exercise 10.3
      3. Accessing elements by class name
        1. Practice exercise 10.4
      4. Accessing elements with a CSS selector
        1. Using querySelector()
        2. Using querySelectorAll()
    3. Element click handler
    4. This and the DOM
      1. Practice exercise 10.7
    5. Manipulating element style
    6. Changing the classes of an element
      1. Adding classes to elements
      2. Removing classes from elements
      3. Toggling classes
    7. Manipulating attributes
      1. Practice exercise 10.8
    8. Event listeners on elements
      1. Practice exercise 10.9
    9. Creating new elements
      1. Practice exercise 10.10
    10. Chapter projects
      1. Collapsible accordion component
      2. Interactive voting system
      3. Hangman game
    11. Self-check quiz
    12. Summary
  12. Interactive Content and Event Listeners
    1. Introducing interactive content
    2. Specifying events
      1. Specifying events with HTML
      2. Specifying events with JavaScript
        1. Practice exercise 11.1
      3. Specifying events with event listeners
        1. Practice exercise 11.2
    3. The onload event handler
      1. Practice exercise 11.3
    4. Mouse event handlers
      1. Practice exercise 11.4
    5. The event target property
      1. Practice exercise 11.5
    6. DOM event flow
      1. Practice exercise 11.6
    7. onchange and onblur
      1. Practice exercise 11.7
    8. Key event handler
      1. Practice exercise 11.8
    9. Drag and drop elements
      1. Practice exercise 11.9
    10. Form submission
      1. Practice exercise 11.10
    11. Animating elements
      1. Practice exercise 11.11
    12. Chapter projects
      1. Build your own analytics
      2. Star rating system
      3. Mouse position tracker
      4. Box clicker speed test game
    13. Self-check quiz
    14. Summary
  13. Intermediate JavaScript
    1. Regular expressions
      1. Specifying multiple options for words
      2. Character options
      3. Groups
      4. Practical regex
        1. Searching and replacing strings
        2. Email validation
    2. Functions and the arguments object
      1. Practice exercise 12.3
    3. JavaScript hoisting
    4. Using strict mode
    5. Debugging
      1. Breakpoints
        1. Practice exercise 12.4
      2. Error handling
        1. Practice exercise 12.5
    6. Using cookies
      1. Practice exercise 12.6
    7. Local storage
      1. Practice exercise 12.7
    8. JSON
      1. Practice exercise 12.8
      2. Parsing JSON
        1. Practice exercise 12.9
        2. Practice exercise 12.9 answers
    9. Chapter projects
      1. Email extractor
      2. Form validator
      3. Simple math quiz
    10. Self-check quiz
    11. Summary
  14. Concurrency
    1. Introducing concurrency
    2. Callbacks
      1. Practice exercise 13.1
    3. Promises
      1. Practice exercise 13.2
    4. async and await
      1. Practice exercise 13.3
    5. Event loop
      1. Call stack and callback queue
    6. Chapter project
      1. Password checker
    7. Self-check quiz
    8. Summary
  15. HTML5, Canvas, and JavaScript
    1. Introducing HTML5 with JavaScript
    2. Local file reader
      1. Uploading files
      2. Reading files
      3. Practice exercise 14.1
    3. Getting position data with GeoLocation
    4. HTML5 canvas
      1. Practice exercise 14.2
    5. Dynamic canvas
      1. Adding lines and circles to the canvas
        1. Practice exercise 14.3
      2. Adding text to the canvas
        1. Practice exercise 14.4
      3. Adding and uploading images to the canvas
        1. Practice exercise 14.5
      4. Adding animations to the canvas
        1. Practice exercise 14.6
    6. Drawing on canvas with a mouse
      1. Practice exercise 14.7
    7. Saving dynamic images
    8. Media on the page
    9. Digital accessibility in HTML
    10. Chapter projects
      1. Create a Matrix effect
      2. Countdown clock
      3. Online paint app
    11. Self-check quiz
    12. Summary
  16. Next Steps
    1. Libraries and frameworks
      1. Libraries
        1. jQuery
        2. D3
        3. Underscore
        4. React
      2. Frameworks
        1. Vue.js
        2. Angular
    2. Learning the backend
      1. APIs
      2. AJAX
        1. Practice exercise 15.1
      3. Node.js
        1. Using the Express Node.js framework
    3. Next steps
    4. Chapter projects
      1. Working with JSON
      2. List-making project
    5. Self-check quiz
    6. Summary
  17. Appendix – Practice Exercise, Project, and Self-Check Quiz Answers
    1. Chapter 1, Getting Started with JavaScript
      1. Practice exercises
      2. Projects
        1. Creating an HTML file and a linked JavaScript file
      3. Self-check quiz
    2. Chapter 2, JavaScript Essentials
      1. Practice exercises
      2. Projects
        1. Miles-to-kilometers converter
        2. BMI calculator
      3. Self-check quiz
    3. Chapter 3, JavaScript Multiple Values
      1. Practice exercises
      2. Projects
        1. Manipulating an array
        2. Company product catalog
      3. Self-check quiz
    4. Chapter 4, Logic Statements
      1. Practice exercises
      2. Projects
        1. Evaluating a number game answers
        2. Friend checker game answers
        3. Rock paper scissors game answers
      3. Self-check quiz
    5. Chapter 5, Loops
      1. Practice exercises
      2. Project
        1. Math multiplication table
      3. Self-check quiz
    6. Chapter 6, Functions
      1. Practice exercises
      2. Projects
        1. Create a recursive function
        2. Set timeout order
      3. Self-check quiz
    7. Chapter 7, Classes
      1. Practice exercises
      2. Projects
        1. Employee tracking app
        2. Menu items price calculator
      3. Self-check quiz
    8. Chapter 8, Built-In JavaScript Methods
      1. Practice exercises
      2. Projects
        1. Word scrambler
        2. Countdown timer
      3. Self-check quiz
    9. Chapter 9, The Document Object Model
      1. Practice exercises
      2. Projects
        1. Manipulating HTML elements with JavaScript
      3. Self-check quiz
    10. Chapter 10, Dynamic Element Manipulation Using the DOM
      1. Practice exercises
      2. Projects
        1. Collapsible accordion component
        2. Interactive voting system
        3. Hangman game
      3. Self-check quiz
    11. Chapter 11, Interactive Content and Event Listeners
      1. Practice exercises
      2. Projects
        1. Build your own analytics
        2. Star rater system
        3. Mouse position tracker
        4. Box clicker speed test game
      3. Self-check quiz
    12. Chapter 12, Intermediate JavaScript
      1. Practice exercises
      2. Projects
        1. Email extractor
        2. Form validator
        3. Simple math quiz
      3. Self-check quiz
    13. Chapter 13, Concurrency
      1. Practice exercises
      2. Projects
        1. Password checker
      3. Self-check quiz
    14. Chapter 14, HTML5, Canvas, and JavaScript
      1. Practice exercises
      2. Projects
        1. Create a Matrix effect
        2. Countdown clock
        3. Online paint app
      3. Self-check quiz
    15. Chapter 15, Next Steps
      1. Practice exercises
      2. Projects
        1. Working with JSON
        2. List-making project
      3. Self-check quiz
  18. Other Books You May Enjoy
  19. Index

Product information

  • Title: JavaScript from Beginner to Professional
  • Author(s): Laurence Lars Svekis, Maaike van Putten, Codestars By Rob Percival
  • Release date: December 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781800562523