Book Image

The JavaScript Workshop

By : Joseph Labrecque, Jahred Love, Daniel Rosenbaum, Nick Turner, Gaurav Mehla, Alonzo L. Hosford, Florian Sloot, Philip Kirkbride
Book Image

The JavaScript Workshop

By: Joseph Labrecque, Jahred Love, Daniel Rosenbaum, Nick Turner, Gaurav Mehla, Alonzo L. Hosford, Florian Sloot, Philip Kirkbride

Overview of this book

If you're looking for a programming language to develop flexible and efficient apps, JavaScript is a great choice. However, while offering real benefits, the complexity of the entire JavaScript ecosystem can be overwhelming. This Workshop is a smarter way to learn JavaScript. It is specifically designed to cut through the noise and help build your JavaScript skills from scratch, while sparking your interest with engaging activities and clear explanations. Starting with explanations of JavaScript's fundamental programming concepts, this book will introduce the key tools, libraries and frameworks that programmers use in everyday development. You will then move on and see how to handle data, control the flow of information in an application, and create custom events. You'll explore the differences between client-side and server-side JavaScript, and expand your knowledge further by studying the different JavaScript development paradigms, including object-oriented and functional programming. By the end of this JavaScript book, you'll have the confidence and skills to tackle real-world JavaScript development problems that reflect the emerging requirements of the modern web.

Related Content you might be interested in

Current Title:

Small book image
The JavaScript Workshop
Joseph Labrecque | Jahred Love | Daniel Rosenbaum | Nick Turner | Gaurav Mehla | Alonzo L. Hosford | Florian Sloot | Philip Kirkbride
Nov, 2019 | 802 pages
Small book image
Object-Oriented JavaScript
Stoyan STEFANOV | Ved Antani
Jan, 2017 | 550 pages
Small book image
JavaScript from Beginner to Professional
Maaike van Putten | Enix Ltd | Laurence Svekis
Dec, 2021 | 546 pages
Small book image
Advanced JavaScript
Zachary Shute
Jan, 2019 | 330 pages
Table of Contents (17 chapters)
Preface
Preface
About the Book
Free Chapter
1
1. Getting to Know JavaScript
1. Getting to Know JavaScript
Introduction
What Is JavaScript and How Is It Used?
A Brief History of the JavaScript Language
Versions of ECMAScript (and JavaScript)
Accessing Web Browser Developer Tools
An Introduction to Variables
Overview of JavaScript Capabilities
Summary
2
2. Working with JavaScript
2. Working with JavaScript
Introduction
Integrated Development Environments (IDE)
JavaScript Project and File Management
JavaScript Syntax and Structure
Overview of JavaScript Environments
A Closer Look at Web Browser Developer Tools
HTML Element Manipulation with JavaScript
Summary
3
3. Programming Fundamentals
3. Programming Fundamentals
Introduction
Data Types
Syntax
Conditional and Loop Flow
Writing and Invoking Functions
Reacting to User Input Events and Updating the DOM
Summary
4
4. JavaScript Libraries and Frameworks
4. JavaScript Libraries and Frameworks
Introduction
Framework versus Library
Popular JavaScript Frameworks
Making XHR Requests
Frameworks versus Core JavaScript
Summary
5
5. Beyond the Fundamentals
5. Beyond the Fundamentals
Introduction
Creating Variables
Fixed Types
Boolean Operators
Working with Numbers
Working with Strings
The String Object
Working with Functions
Working with Objects
Working with Arrays
Working with Dates
Summary
6
6. Understanding Core Concepts
6. Understanding Core Concepts
Introduction
Event Types
The JavaScript Events Model
The JavaScript Event Life Cycle
Event Triggers
Working with Forms
Form Controls
Summary
7
7. Popping the Hood
7. Popping the Hood
Introduction
JavaScript Execution and the Event Loop
Memory Management
Summary
8
8. Browser APIs
8. Browser APIs
Introduction
Canvas
Web Audio API
Web Storage API
IndexedDB
Performance API
Web Socket API
Summary
9
9. Working with Node.js
9. Working with Node.js
Introduction
The Node.js Environment
Node Modules
HTTP
Working with Databases
Making Real-Time Web Apps
Summary
10
10. Accessing External Resources
10. Accessing External Resources
Introduction
JSON
AJAX
Other Libraries and XMLHttpRequest
Summary
11
11. Creating Clean and Maintainable Code
11. Creating Clean and Maintainable Code
Introduction
What Is a Regex?
Regexes in Detail
Best Practices for Clean Coding
Summary
12
12. Using NextGeneration JavaScript
12. Using NextGeneration JavaScript
Introduction
Browser Differences
Package Managers
Babel Applications with Parcel
Babel Applications with Webpack
The TypeScript Language
Code Support Libraries
Popular Frameworks
Server-Side Libraries
Summary
13
13. JavaScript Programming Paradigms
13. JavaScript Programming Paradigms
Introduction
JavaScript Paradigms
Basic JavaScript Concepts
Data Scope
JavaScript Memory Management
Summary
14
14. Understanding Functional Programming
14. Understanding Functional Programming
Introduction
Pure Functions
Higher-Order Functions
Currying Functions
Function Recursion
Blackjack
Summary
15
15. Asynchronous Tasks
15. Asynchronous Tasks
Introduction
Callbacks
Promises and the Fetch API
Some Details Concerning Promises
Async/Await
Summary
Appendix
Appendix
1. Getting to Know JavaScript
2. Working with JavaScript
3. Programming Fundamentals
4. JavaScript Libraries and Frameworks
5. Beyond the Fundamentals
6. Understanding Core Concepts
7. Popping the Hood
8. Browser APIs
9. Working with Node.js
10. Accessing External Resources
11. Creating Clean and Maintainable Code
12. Using Next-Generation JavaScript
13. JavaScript Programming Paradigms
14. Understanding Functional Programming
15. Asynchronous Tasks

4. JavaScript Libraries and Frameworks

Activity 4.01: Adding an Animation to the Todo List Application

Solution:

  1. Go to https://packt.live/34LCqN5 and get the jQuery CDN URL.
  2. Load the library into the head tag of your existing Todo-List-HTML using a script tag. This will allow you to use jQuery within your code:
    <head>
    // ... links and meta tags from the previous activity
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

    Inside activity.js, you need to change the todoEle variable. Change it to a jQuery element:

    // The todo list element
// let todoEle = document.getElementById('todo-list'); // old
let todoEle = $('#todo-list'); // new

    Inside the replaceListElements function, you can now use functions on the todoEle element that jQuery provides you with.

  3. Hide and clear what's inside the element using the necessary jQuery functions:
    function replaceListElements(listEle...
Previous Section
End of Section
Next Section