US https://www.amazon.com/dp/B0D2S46V93

Canada https://www.amazon.ca/dp/B0D2S46V93

Kindle Book is FREE until Thursday, May 2 2024!

Free Kindle Offer for “JavaScript by Doing”

Great news for aspiring JavaScript developers! For a limited time, “JavaScript by Doing: Over 100 Hands-On Coding Challenges for Mastering JS” by Laurence Lars Svekis is available for free on Kindle until May 2, 2024. This is an incredible opportunity to dive into the world of JavaScript through a practical, hands-on approach that promises not just to teach but to thoroughly equip you with the skills needed to excel in web development.

The book begins with the basics—introducing JavaScript’s syntax, variables, data types, and control structures such as loops and conditional statements. Each foundational topic is paired with coding exercises that help solidify your understanding through direct application.

As you progress, the challenges grow more complex, introducing functions, arrays, and the intricacies of asynchronous programming. There’s a heavy emphasis on functional programming and handling asynchronous operations with modern JavaScript features like promises and async/await patterns.

A standout section of the book is its comprehensive guide to the Document Object Model (DOM). It teaches dynamic web page manipulation—critical skills for any web developer. You’ll learn everything from basic element selection to complex user-responsive programming.

Moreover, the book doesn’t shy away from the realities of programming—error handling, debugging, and best practices are covered extensively to prepare you for real-world challenges. It’s rounded off with modern JavaScript features including ES6 modules, arrow functions, and template literals, ensuring you’re up to date with the latest in JavaScript development.

Each chapter not only builds your coding skills but also includes multiple-choice quizzes and interview-style questions, making this book a fantastic resource for job preparation.

Whether you’re just starting out or looking to deepen your existing JavaScript knowledge, “JavaScript by Doing” is your gateway to becoming a proficient developer. Don’t miss out on this offer—grab your free copy before May 2, 2024!

Introduction to the Book

Welcome to “JavaScript by Doing: Over 100 Coding Challenges” the perfect guide for beginners eager to dive into the world of JavaScript. This book is structured to provide a clear, step-by-step approach to learning JavaScript by actually coding. Whether you are a complete novice or have some familiarity with programming, the exercises in this book are designed to enhance your understanding and proficiency in JavaScript. From simple variable assignments and data types to complex functions and asynchronous operations, this guide covers it all, providing both theoretical insights and practical exercises to ensure you gain a comprehensive grasp of the language.

Example Exercises for Beginners

Displaying Text: Learn to use console.log() to display messages in the browser’s console.

Exercise: Write a JavaScript line of code that prints “Hello, JavaScript!” to the console.

Sample Code: console.log(“Hello, JavaScript!”);

Working with Variables: Introduce variable creation and manipulation.

Exercise: Declare a variable named age and set it to your age. Print this variable to the console.

Sample Code:

let age = 25; // Replace 25 with your age

console.log(age);

Basic Conditional Logic: Using simple if statements to make decisions.

Exercise: Write a program that checks if a number (e.g., 5) is even and prints a corresponding message to the console.

let number = 5;

if (number % 2 === 0) {

 console.log(“The number is even.”);

} else {

 console.log(“The number is odd.”);

}

These exercises are designed to help you start coding in JavaScript immediately, with simple yet effective tasks that build a solid foundation in programming basics. As you progress through the book, the exercises will gradually increase in complexity, preparing you for more advanced JavaScript programming challenges.

Source Code 

Get the book source code at https://github.com/lsvekis/The-JavaScript-Challenge 

Introduction to JavaScript

What is JavaScript?

JavaScript is a programming language that allows you to implement complex features on web pages. It is the scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. It’s what makes web pages interactive and engaging.

History of JavaScript

JavaScript was developed by Brendan Eich in 1995 and quickly became a staple of web development. Over the years, it has evolved significantly, with the ECMAScript specification standardizing the core of JavaScript, ensuring compatibility across different web browsers.

Why Learn JavaScript?

JavaScript is essential for web development. It’s one of the three core technologies of the web, alongside HTML and CSS, enabling dynamic interactions on webpages. Its versatility extends beyond the browser with environments like Node.js, which allow for server-side scripting. Learning JavaScript opens doors to web and software development roles and is crucial for front-end, back-end, and full-stack development paths.

Coding Exercises Introduction

Setting Up the Environment

To run JavaScript, you typically include it within an HTML document. This setup involves creating a simple HTML file and linking a JavaScript file using a <script> tag, allowing the browser to execute the JavaScript.

Basic HTML page structure with JavaScript

<!DOCTYPE html>

<html>

<head>

    <title>JavaScript Practice</title>

</head>

<body>

    <script src=”script.js”></script>

</body>

</html>

Exercise: Displaying Text

The console.log() function in JavaScript is used to print any messages or variables to the browser’s console. It’s a helpful tool for debugging and showing output during development.

Understanding Variables

Variables in JavaScript are named containers for storing data values. JavaScript uses var, let, and const to declare variables:

• var is the oldest keyword, with function scope.
• let introduces block scope, better controlling the variable’s lifetime.
• const is like let but for constants, which means the value assigned to a const variable cannot be changed.

Exercise: Working with Variables

Here’s how variables are declared and used in JavaScript:

let message = “Hello, World!”; // Declares a variable that can be changed

const PI = 3.14159;           // Declares a constant whose value cannot be changed

var age = 30;                 // Declares a variable with function scope

Common Data Types

JavaScript variables can store different types of values, each of which behaves differently:

• String: Represents textual data, e.g., “Alice”.
• Number: An integer or a floating-point number, e.g., 25 or 3.14.
• Boolean: Represents a logical entity and can have two values: true or false.
• Null: An assignment value that represents no value or a null value.
• Undefined: A variable that has been declared but not assigned a value is automatically assigned the value undefined.
• Object: Collections of properties, can be seen as a collection of key-value pairs. Arrays in JavaScript are a type of object.
• Array: A global object that is used in the construction of arrays; a high-level list-like object.

Exercise: Exploring Data Types

Here’s how to demonstrate different data types in JavaScript:

let name = “Alice”;

let age = 25;

let isStudent = true;

let address = null;

let definition;

console.log(typeof name);         // Outputs “string”

console.log(typeof age);          // Outputs “number”

console.log(typeof isStudent);    // Outputs “boolean”

console.log(typeof address);      // Outputs “object” because `null` is treated as an object

console.log(typeof definition);   // Outputs “undefined”

Basic Conditional Logic

Introduction to if Statements

The if statement is used to execute a statement or block of code if a specified condition is true. It can be paired with else and else if to handle multiple conditions and provide alternate execution paths.

Exercise: Using Conditional Logic

Here’s an example showing how to use conditional logic based on the value of a variable:

let score = 85;

if (score >= 90) {

 console.log(“Excellent”);

} else if (score >= 80) {

 console.log(“Good”);

} else {

 console.log(“Needs Improvement”);

}

Combining Strings

Concatenating strings can be done using the + operator or template literals (backticks), which allow for embedded expressions.

Exercise: Create a Greeting

Here’s how you can use both methods to concatenate strings:

let user = “Alice”;

let greeting = “Hello, ” + user + “! Welcome to JavaScript.”; // Using the + operator

console.log(greeting);

console.log(`Hello, ${user}! Welcome to JavaScript.`); // Using template literals

Coding Exercises

Hello, JavaScript!

Task: Write a JavaScript program that prints “Hello, JavaScript!” to the console.

Purpose: Familiarize with basic output in JavaScript.

Sample Code:

console.log(“Hello, JavaScript!”);

Explanation:

This exercise introduces you to the console.log() method, which is used to print any message you want to the console. Here, the message “Hello, JavaScript!” is displayed in the console, demonstrating the simplest way to output information in JavaScript.

Variable Assignments

Task: Declare two variables, a and b. Assign 5 to a and 6 to b. Then create a third variable c that holds the sum of a and b. Print c to the console.

Purpose: Practice declaring variables and performing arithmetic operations.

Sample Code:

let a = 5;

let b = 6;

let c = a + b;

console.log(c);

Explanation:

This exercise introduces variable declarations using let, which is a keyword used to declare variables that can have block scope and be reassigned. Here, a and b are assigned numerical values, which are then added together and assigned to c. Finally, c is printed to the console, showing the result of the arithmetic operation.

Data Type Exploration

Task: Create variables of different data types: number, string, boolean, null, and undefined. Use the typeof operator to print the type of each variable to the console.

Purpose: Understand different data types and the typeof operator.

Sample Code:

let number = 42;

let string = “JavaScript”;

let boolean = true;

let nothing = null;

let undefinedVariable;

console.log(typeof number); // “number”

console.log(typeof string); // “string”

console.log(typeof boolean); // “boolean”

console.log(typeof nothing); // “object” (quirk in JavaScript)

console.log(typeof undefinedVariable); // “undefined”

Explanation:

This exercise explores different data types in JavaScript. typeof is an operator used to determine the type of a variable. This is useful for debugging or to ensure variables are of expected types before they are manipulated in functions or conditions.

Basic Conditional Logic

Task: Write a JavaScript program that uses a conditional statement to check if a number stored in a variable is even. If it is, print “The number is even” to the console.

Purpose: Apply conditional statements and understand modulus operator usage.

Sample Code:

let number = 24;

if (number % 2 === 0) {

 console.log(“The number is even”);

}

Explanation:

This exercise introduces the use of conditional (if) statements and the modulus operator (%). The modulus operator returns the remainder of a division operation. In this case, it checks whether a number is even by dividing it by 2 and checking if the remainder is 0.

String Concatenation

Task: Declare two string variables, concatenate them, and print the result. Example variables could be firstName and lastName.

Purpose: Learn string manipulation and concatenation.

Sample Code:

let firstName = “John”;

let lastName = “Doe”;

let fullName = firstName + ” ” + lastName;

console.log(fullName);

Explanation:

This exercise demonstrates how to concatenate strings using the + operator. Two string variables firstName and lastName are created and concatenated with a space between them to form a full name. The resulting string is then printed to the console, illustrating basic string manipulation.

These exercises cover fundamental concepts and provide a hands-on way to learn JavaScript syntax and operations.

Control Structures and Data Handling

Control Structures and Data Handling

Control structures are fundamental programming constructs that allow you to control the flow of execution based on conditions or repeatedly execute a block of code. Data handling involves operations on data like creating, retrieving, manipulating, and storing data within your program.

Control Structures Include:

• Conditional statements (if, else, switch)
• Loops (for, while, do-while)

Data Handling:

• Manipulating strings, arrays, and objects.
• Checking data types and converting between them.

Simple Conditionals

Conditionals are used to execute different code branches based on conditions. The simplest form is the if statement.

Example: Simple if Statement

Let’s say we want to print out whether a user is an adult based on their age:

let age = 20;

if (age >= 18) {

 console.log(“You are an adult.”);

} else {

 console.log(“You are not an adult.”);

}

In this example, the code checks if age is greater than or equal to 18. If true, it prints “You are an adult”; otherwise, it prints “You are not an adult.”

Loop Through Numbers

Loops are used to execute a block of code repeatedly under controlled conditions. A for loop is particularly useful for iterating over a sequence of numbers.

Example: Using a for Loop to Iterate Numbers

Suppose we want to print numbers from 1 to 10:

for (let i = 1; i <= 10; i++) {

 console.log(i);

}

This for loop starts with i = 1 and runs as long as i is less than or equal to 10. After each iteration, i is incremented by 1, and the current value of i is printed.

Data Type Checking

JavaScript is a dynamically typed language, which means variables are not directly associated with any particular type, and any variable can be assigned and re-assigned values of all types.

Example: Checking Data Types

To ensure proper handling of variables, you might need to check their data types using the typeof operator.

let name = “Alice”;

let age = 25;

let isStudent = false;

console.log(typeof name); // Outputs “string”

console.log(typeof age); // Outputs “number”

console.log(typeof isStudent); // Outputs “boolean”

In this example, typeof is used to determine and print the type of various variables. This is especially useful in functions where you need to validate inputs or in scripts where the data type can affect the execution logic.

Coding Exercises

Here’s a detailed set of coding exercises and multiple-choice quiz questions focused on “Control Structures and Data Handling” in JavaScript, designed to enhance understanding through practical coding and theoretical questioning.

Simple Conditionals

Task: Write a JavaScript program that checks if a number is positive, negative, or zero. Use if-else conditions.

Purpose: Understand how to use conditional statements to handle multiple conditions.

Sample Code:

let number = -3;

if (number > 0) {

 console.log(“The number is positive.”);

} else if (number < 0) {

 console.log(“The number is negative.”);

} else {

 console.log(“The number is zero.”);

}

Explanation:

This code snippet uses if, else if, and else to check three conditions: if number is greater than 0, it’s positive; if less than 0, it’s negative; otherwise, it’s zero. This exercise teaches the basic structure and application of conditional statements in JavaScript.

Loop Through Numbers

Task: Use a for loop to print numbers from 1 to 10.

Purpose: Learn to use loops to execute repetitive tasks.

Sample Code:

for (let i = 1; i <= 10; i++) {

 console.log(i);

}

Explanation:

This example demonstrates the use of a for loop, where i is initialized at 1 and increments by 1 on each iteration until it reaches 10. This helps in understanding loop setup and iteration.

Array Iteration

Task: Create an array of five fruits and use a for loop to print each fruit to the console.

Purpose: Practice array creation and iteration using loops.

Sample Code:

let fruits = [“apple”, “banana”, “cherry”, “date”, “elderberry”];

for (let i = 0; i < fruits.length; i++) {

 console.log(fruits[i]);

}

Explanation:

This exercise uses an array containing strings and a loop that iterates based on the array’s length, accessing each element by its index and printing it. It illustrates how to manipulate arrays and loop through them.

Using Switch Cases

Task: Write a program using a switch case to print the name of the day based on a given number (1-7).

Purpose: Understand the use of switch-case statements for multi-branch selection.

Sample Code:

let dayNumber = 3; // Example number

switch (dayNumber) {

 case 1:

 console.log(“Sunday”);

 break;

 case 2:

 console.log(“Monday”);

 break;

 case 3:

 console.log(“Tuesday”);

 break;

 case 4:

 console.log(“Wednesday”);

 break;

 case 5:

 console.log(“Thursday”);

 break;

 case 6:

 console.log(“Friday”);

 break;

 case 7:

 console.log(“Saturday”);

 break;

 default:

 console.log(“Invalid day number”);

}

Explanation:

The switch-case structure allows handling multiple possible values for a variable efficiently. Each case represents a possible value of dayNumber, with a corresponding action to print the day’s name.

Data Type Checking

Task: Create variables of different data types and use an if-else chain to check and print the type of each variable.

Purpose: Learn to identify and handle different data types in conditional logic.

Sample Code:

let items = [42, “hello”, true, null, undefined];

items.forEach(item => {

 if (typeof item === “number”) {

 console.log(`${item} is a number`);

 } else if (typeof item === “string”) {

 console.log(`${item} is a string`);

 } else if (typeof item === “boolean”) {

 console.log(`${item} is a boolean`);

 } else if (item === null) {

 console.log(`null value`);

 } else {

 console.log(`undefined value`);

 }

});

Explanation:

This code iterates through an array with various data types and checks each type using typeof and strict comparison. This exercise helps in understanding how to handle different types of data in JavaScript.

Multiple Choice Quiz Questions

What will the following loop print?

for (let i = 0; i < 5; i++) {

 console.log(i);

}

A) 0, 1, 2, 3, 4

B) 1, 2, 3, 4, 5

C) 0, 1, 2, 3, 4, 5

D) 1, 2, 3, 4

Correct Answer: A) 0, 1, 2, 3, 4

Explanation: The loop starts at 0 and increments until it is less than 5, thus printing 0 to 4.

Which data type is not directly supported by JavaScript?

A) int

B) string

C) boolean

D) object

Correct Answer: A) int

Explanation: JavaScript does not have an int type; it has number to represent both integers and floating-point numbers.

What will the following code output if the input is 8?

let input = 8;

switch (input % 2) {

 case 0:

 console.log(“Even”);

 break;

 case 1:

 console.log(“Odd”);

 break;

}

A) Even

B) Odd

C) Error

D) None of the above

Correct Answer: A) Even

Explanation: input % 2 yields 0 for even numbers, which matches the first case in the switch statement.

Which operator is used to concatenate strings in JavaScript?

A) +

B) &

C) concat

D) append

Correct Answer: A) +

Explanation: The + operator is used to concatenate strings, combining them into one.

What is the purpose of the break statement in a switch-case?

A) To stop the case condition from being true

B) To exit the loop

C) To prevent the case from falling through to the next one

D) To break out of the program

Correct Answer: C) To prevent the case from falling through to the next one

Explanation: In a switch-case, break is used to exit the switch block, stopping subsequent cases from executing once a match is found.

These exercises and questions offer practical and theoretical insights into JavaScript’s control structures and data handling, providing a robust foundation for more advanced programming concepts.