Next Lesson

JavaScript Variables, Data Types, and Operators

AI-enhanced Web3 Frontend Development Course JavaScript Variables, Data Types, and Operators

Introduction:

In this lesson, we delve into the core components of JavaScript: variables, data types, and operators.

These elements form the building blocks of any JavaScript program, especially in the realm of web3 applications.

Remember, watching the lesson video will offer a deeper understanding of this topic.

Learning Objectives:

By the end of this lesson, you will be able to:

Understand the concept and use of variables in JavaScript.
Familiarize yourself with JavaScript data types.
Learn about different operators and their usage in JavaScript programs.

Lesson Video:

What Are JavaScript Variables?

Variables are containers for storing data values.

In JavaScript, we use the var, let, and const keywords to declare variables. var is function-scoped, while let and const are block-scoped, with const being used for constants whose value should not change.

When learning JavaScript as part of your journey into Web3 frontend development, you’ll encounter the concept of variables. Think of variables as little containers or boxes where you can store information that your code can use later.

1. Declaring Variables:

In JavaScript, we use var, let, and const to declare variables. These are like labels on our boxes, telling us what kind of data we’re dealing with.

2. var: The Old-School Way

var stands for variable. It’s the original way to declare a variable in JavaScript.
Function-Scoped: This means if you declare a variable with var inside a function, it can only be accessed within that function, not outside of it. Example:

  function setTokenName() {
      var token = 'dPU Token';
      console.log(token); // Works fine here
  }
  console.log(token); // Error! 'token' is not accessible outside the function.

3. let: The Modern Alternative

let is a newer way to declare variables, introduced to solve some of the limitations of var.
Block-Scoped: Unlike var, let is limited to the block (like loops or if statements) where it is declared. If you declare a variable with let inside a block, it can’t be accessed outside of that block. Example:

  if(true) {
      let tokenPrice = 200;
      console.log(tokenPrice); // Works fine here
  }
  console.log(tokenPrice); // Error! 'tokenPrice' is not accessible outside the block.

4. const: For Constants

const is similar to let, but it’s used for values that you know won’t change. Once you assign a value to a const variable, you can’t change it later.
Block-Scoped: Like let, const is also limited to the block where it’s declared. Example:

  const maxSupply = 1000000;
  maxSupply = 2000000; // Error! You can't change a 'const' variable.

Understanding Scopes in JavaScript:

Global Scope:

When you declare a variable outside of any function or block, it is in the global scope.
Global variables can be accessed from any part of your code, whether it’s inside or outside of functions.
However, relying too much on global variables can lead to conflicts and bugs, especially in large applications. Example:

   var globalVar = "Accessible everywhere";

   function testScope() {
       console.log(globalVar); // This works because globalVar is globally scoped
   }

Local Scope (Function Scope and Block Scope):

Function Scope: Created when you declare a variable with var inside a function. Such a variable is only accessible within that function, not outside of it.
Block Scope: When you use let or const within a block (like within {} in if statements, loops, etc.), the variable is block-scoped and is accessible only within that block. Function Scope Example:

   function testFunctionScope() {
       var localVar = "I'm inside a function";
       console.log(localVar); // Works fine
   }
   console.log(localVar); // Error! localVar is not accessible outside the function.

Block Scope Example:

   if(true) {
       let blockVar = "I'm inside a block";
       console.log(blockVar); // Works fine
   }
   console.log(blockVar); // Error! blockVar is not accessible outside the block.

Accessing let and const Outside Functions:

If let or const are used inside a function or a block, they cannot be accessed from outside that function or block.
This is different from var, which is function-scoped but can be accessed outside of a block (like an if statement) if declared within the function.

Why Understanding Scope is Important in Web3 Development:

In Web3 development, you often deal with sensitive data like wallet addresses, transaction details, and smart contract interactions. Properly scoping your variables ensures data integrity and security.
Mismanagement of scopes can lead to unexpected behaviors in your code, potentially leading to vulnerabilities in your applications.
Understanding scopes also aids in writing clean, well-structured, and maintainable code, which is crucial when working on complex decentralized applications (dApps).

Remember, JavaScript scopes can seem a bit tricky at first, especially when transitioning from global to local scopes, but with practice, you’ll become more comfortable with them. Properly managing your variable scopes is a key skill in developing secure and efficient Web3 dApps/dWebs.

What Are JavaScript Data Types?

In JavaScript, data types define the type of data that a variable can hold. Here’s an overview of the common data types:

Data Type	Description	Common Examples
String	Textual data that are used for storing and manipulating text.	`"Hello, World!"`, `'dPU University'`
Number	Numeric data that are used for integers and floating-point numbers.	`42`, `3.14`
Boolean	Logical values that represent truthiness.	`true`, `false`
Array	A List-like used to store a collection of data.	[1, ‘hello’, true]
Object	Complex data structures are used for storing collections of data.	`{ name: "dPU", type: "University" }`
Undefined	A variable declared but not assigned a value.	`let x; // x is undefined`

Strings: They are sequences of characters used for storing text. Strings in JavaScript can be enclosed in single quotes (‘ ‘), double quotes (” “), or backticks (), the latter allowing for dynamic expressions using template literals.
Numbers: JavaScript does not differentiate between different types of numbers. Whether it’s an integer or a decimal, it is classified as a ‘Number’. It handles arithmetic operations and can represent special numeric values like Infinity and NaN (Not-a-Number).
Booleans: These are logical data types that can only be either true or false. They are often used in conditional testing to determine the flow of program execution based on certain conditions.
Array: Arrays are used to store multiple values in a single variable. They are important for managing lists or collections of data.
Objects: In JavaScript, objects are key-value pairs where you can store a collection of data and more complex entities. Objects can contain various properties and methods.
Undefined: This data type represents a variable that has been declared but has not been assigned a value yet. It’s different from null, a data type that represents the intentional absence of any object value.

Understanding these data types is crucial as you start your journey in JavaScript, especially in the context of Web3 development, where data integrity and type are essential for interacting with blockchain technologies and smart contracts.

NOTE:

Remember, JavaScript is a loosely typed language (not a typed programming language like Solidity), meaning you don’t need to declare the type of a variable explicitly. The type is dynamically determined by the value assigned to it.

As you get more comfortable with these data types, you’ll be better equipped to handle various programming scenarios in your Web3 projects.

What Are Javascript Operators?

Operators in JavaScript are symbols that tell the interpreter to perform specific mathematical, relational, or logical operations and produce a final result. Here’s an overview of common operators in JavaScript:

Operator Type	Description	Common Examples
Arithmetic Operators	Used for performing mathematical calculations.	`+` (Addition), `-` (Subtraction), `*` (Multiplication), `/` (Division)
Assignment Operators	Used to assign values to variables.	`=` (Assign), `+=` (Add and assign), `-=` (Subtract and assign)
Comparison Operators	Used for comparing two values.	`==` (Equal to), `===` (Strict equal to), `>` (Greater than), `<` (Less than)
Logical Operators	Used in logical expressions.	`&&` (Logical AND), `\|\|` (Logical OR), `!` (Logical NOT)

Arithmetic Operators: These operators are used to perform common mathematical operations. For instance, + adds two numbers, while * multiplies them. It is also used to concatenate strings
Assignment Operators: These are used to assign values to JavaScript variables. For example, x = 10 assigns the value 10 to the variable x, and x += 5 adds 5 to the current value of x.
Comparison Operators: These operators compare two values and return a Boolean value, either true or false. For instance, x == y checks if x is equal to y, while x > y checks if x is greater than y.
Logical Operators: Used mainly in conditional statements, they help in making decisions based on multiple conditions. For example, x && y returns true if both x and y are true.

Understanding these operators is vital for making decisions and calculations in your code, especially in Web3 development where you might need to calculate transaction values, compare wallet addresses, or execute functions based on certain conditions.

Each operator type plays a specific role in how you can manipulate and evaluate data in your JavaScript programs. As you get more familiar with these operators and how they work, you’ll be able to write more complex and functional scripts for your Web3 projects.

Understanding String Concatenation in JavaScript

In JavaScript, string concatenation is the process of joining two or more strings together. It’s a fundamental concept, especially in Web3 frontend development, where you might need to display dynamic data or messages.

1. Basic Concatenation with + Operator:

The + operator is commonly used to concatenate strings. It joins two strings into one.

Example:

javascript let tokenName = 'dPU'; 
let tokenType = 'Utility Token'; 
let concatenatedString = tokenName + ' is a ' + tokenType; 
// Result: 'dPU is a Utility Token'

2. Concatenation with Template Literals:

Template literals (enclosed by backticks “) provide a more readable way to concatenate strings.
They allow for embedding expressions (like variables) inside a string using ${expression} syntax.
Example:
javascript let tokenName = 'dPU'; let tokenType = 'Utility Token'; let concatenatedString = `${tokenName} is a ${tokenType}`; // Result: 'dPU is a Utility Token'
Template literals are particularly useful in Web3 when you need to display dynamic data, such as wallet addresses or transaction details, within text.

Benefits of Template Literals:

Multiline Strings: Easily create strings spanning multiple lines without concatenation.
Expression Interpolation: Dynamically insert expressions within strings.
Readability: Enhances readability, especially when dealing with complex strings.

When to Use Which Method:

Use the + operator for simple concatenations or when working with legacy code.
Use template literals for more complex scenarios, especially when the string involves multiple variables or spans multiple lines.

Understanding these two methods of string concatenation is crucial for efficient and clean coding in JavaScript. As you develop Web3 applications, you’ll frequently need to construct messages, URLs, or interact with smart contracts using strings that are dynamically generated based on user input or blockchain data. Being comfortable with both methods will greatly enhance your ability to handle such scenarios effectively.

Example Codes for Practical Application:

Expanding the Capstone Project

Expanding on our Token Minter dApp, let’s enhance its features using what you learned from this lesson.

Existing Capstone Project* Code from Previous Lesson:*

Javascript Code:

N/A

CSS Code:

/* External CSS */

/* IMPORTS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* CSS Variables for consistent theming and easy maintenance */
:root {
    --font-family: 'Roboto', sans-serif;
    --bg-color: #f4f4f4;
    --bg-gradient: linear-gradient(to right, #630404, #e040fb, #6a027c);
    --nav-hover-bg-color: #630404;
    --nav-hover-text-color: #f3e40d;
    --text-color-white: #ffffff;
    --header-bg-color: #333;
    --header-text-color: white;
    --subtitle-text-color: #aaa;
    --paragraph-color: #cfbdbd;
    --main-border-color: #333;
    --article-border-color: grey;
    --form-border-color: #ddd;
    --input-border-color: #ccc;
    --button-hover-color: #f5f121;
    --invalid-input-border-color: red;
    --placeholder-color: #888;
}

/* BODY */
body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    background: var(--bg-gradient);
}

/* NAVIGATION */
nav > ul > li {
    display: inline;
    margin-right: 20px;
    text-align: center;
    padding: 10px;
    flex: 1;
}

nav a:hover, nav a:focus {
    background-color: var(--nav-hover-bg-color);
    color: var(--nav-hover-text-color);
}

/* HYPERLINKS */
a[href^="#"] {
    text-decoration: none;
    color: var(--text-color-white);
}

/* HEADINGS */
header {
    background: var(--header-bg-color);
    color: var(--header-text-color);
    padding: 10px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h1 {
    font-weight: 700;
    position: relative;
}

h1::after {
    content: '...the future of token minting';
    display: block;
    text-align: center;
    color: var(--subtitle-text-color);
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    font-size: 0.55em;
}

h1, h2, h3 {
    font-weight: 700;
}

h2 + p {
    color: var(--paragraph-color);
}

/* MAIN */
main {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* ARTICLE */
article {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid var(--article-border-color);
    flex: 1;
}

article p {
    margin-bottom: 20px;
    border: 1px solid var(--article-border-color);
    padding: 15px;
}

/* IDs */
#mint {
    background-color: #eaeaea;
    padding: 15px;
    margin-top: 10px;
}

#mint form {
    padding: 10px;
    border: 1px solid var(--form-border-color);
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#mint input,
#mint button {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--input-border-color);
    flex: 1;
}

/* PARAGRAPH */
p {
    line-height: 3.5;
}

/* MEDIA QUERY */
@media (min-width: 768px) and (max-width: 1024px) {
    body {
        background: var(--bg-gradient);
    }
    main {
        flex-direction: row;
    }
}

@media (max-width: 767px) {
    nav ul {
        flex-direction: column;
    }
    .button {
        padding: 15px;
    }
}

/* ANIMATION AND TRANSITION */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.button {
    animation: pulse 2s infinite;
}

a {
    transition: color 0.5s ease;
}

a:hover {
    color: var(--button-hover-color);
}

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

input:invalid {
    border-color: var(--invalid-input-border-color);
}

::placeholder {
    color: var(--placeholder-color);
    opacity: 1;
}

HTML Code:

<!DOCTYPE html> <!-- Defines document type and HTML version -->
<html lang="en"> <!-- Sets the language of the page -->

<head>
    <meta charset="UTF-8"> <!-- Sets character encoding for the document -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ensures proper rendering on mobile devices -->
    <title>Token Minter dApp</title> <!-- Title of the webpage -->
    <link rel="stylesheet" href="/globalstyles.css"> <!-- Link to external CSS file -->
</head>

<body>
    <header>
        <!-- Site header with navigation -->
        <h1>Token Minter dApp</h1>
        <nav>
            <!-- Navigation links -->
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#mint">Mint Tokens</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <!-- Main content section -->
        <article id="home">
            <!-- Introduction article -->
            <h2>Introduction to Token Minting</h2>
            <p>This dApp allows users to mint their own tokens on the blockchain.</p>
        </article>
        
        <section id="mint">
            <!-- Token minting form section -->
            <h2>Mint Your Tokens</h2>
            <form action="#">
                <!-- Form for token minting -->
                <input type="email" placeholder="Enter your email">
                <input type="number" placeholder="Token amount">
                <button class="button" type="submit">Mint</button>
            </form>
        </section>
        
        <aside>
            <!-- Sidebar with additional information -->
            <h3>Learn More:</h3>
            <p>Explore more about blockchain technology.</p>
        </aside>
    </main>
    
    <footer>
        <!-- Footer with contact information -->
        <p>Contact us at <a href="mailto:hello@dProgrammingUniversity.com">hello@dProgrammingUniversity.com</a></p>
    </footer>
    
</body>
</html>

Enhance the Capstone Project with New Features from this Lesson:

Javascript Code:

// External JavaScript file for the global script

// Declare a variable to track the total minted tokens
let totalMintedTokens = 0;

document.addEventListener('DOMContentLoaded', function() {
    // Access the mint button and input fields
    const mintButton = document.querySelector('#mint button');
    const walletInput = document.querySelector('#walletAddress');
    const tokenInput = document.querySelector('#tokenAmount');

    // Event listener for the mint button
    mintButton.addEventListener('click', function() {
        let walletAddress = walletInput.value;
        let tokenAmount = parseInt(tokenInput.value);

        // Update the total minted tokens without validation
        updateMintedTokens(tokenAmount);

        // Notify the user about the minting process
        alert(`Minting ${tokenAmount} tokens to wallet: ${walletAddress}`);

        // TODO: In the next lesson, we will add validation to check the correctness of the wallet address and token amount. 
        // It's important to validate and sometimes sanitize user inputs for security and functionality.
    });
});

// Function to update the total minted tokens
function updateMintedTokens(amount) {
    // Add the specified amount to the total minted tokens
    totalMintedTokens += amount;
    document.getElementById('totalMinted').textContent = `Total Minted: ${totalMintedTokens}`;
}

AFTER:

Your code may look something like the following after applying the above adjustment from this lesson:

Javascript Code:

// External JavaScript file for the global script

// Declare a variable to track the total minted tokens
let totalMintedTokens = 0;

document.addEventListener('DOMContentLoaded', function() {
    // Access the mint button and input fields
    const mintButton = document.querySelector('#mint button');
    const walletInput = document.querySelector('#walletAddress');
    const tokenInput = document.querySelector('#tokenAmount');

    // Event listener for the mint button
    mintButton.addEventListener('click', function() {
        let walletAddress = walletInput.value;
        let tokenAmount = parseInt(tokenInput.value);

        // Update the total minted tokens without validation
        updateMintedTokens(tokenAmount);

        // Notify the user about the minting process
        alert(`Minting ${tokenAmount} tokens to wallet: ${walletAddress}`);

        // TODO: In the next lesson, we will add validation to check the correctness of the wallet address and token amount. 
        // It's important to validate and sometimes sanitize user inputs for security and functionality.
    });
});

// Function to update the total minted tokens
function updateMintedTokens(amount) {
    // Add the specified amount to the total minted tokens
    totalMintedTokens += amount;
    document.getElementById('totalMinted').textContent = `Total Minted: ${totalMintedTokens}`;
}

CSS Code:

/* External CSS */
 
/* IMPORTS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
/* CSS Variables for consistent theming and easy maintenance */
:root {
    --font-family: 'Roboto', sans-serif;
    --bg-color: #f4f4f4;
    --bg-gradient: linear-gradient(to right, #630404, #e040fb, #6a027c);
    --nav-hover-bg-color: #630404;
    --nav-hover-text-color: #f3e40d;
    --text-color-white: #ffffff;
    --header-bg-color: #333;
    --header-text-color: white;
    --subtitle-text-color: #aaa;
    --paragraph-color: #cfbdbd;
    --main-border-color: #333;
    --article-border-color: grey;
    --form-border-color: #ddd;
    --input-border-color: #ccc;
    --button-hover-color: #f5f121;
    --invalid-input-border-color: red;
    --placeholder-color: #888;
    --info-text-color: #521f1f;
}
 
/* BODY */
body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    background: var(--bg-gradient);
}
 
/* NAVIGATION */
nav > ul > li {
    display: inline;
    margin-right: 20px;
    text-align: center;
    padding: 10px;
    flex: 1;
}
 
nav a:hover, nav a:focus {
    background-color: var(--nav-hover-bg-color);
    color: var(--nav-hover-text-color);
}
 
/* HYPERLINKS */
a[href^="#"] {
    text-decoration: none;
    color: var(--text-color-white);
}
 
/* HEADINGS */
header {
    background: var(--header-bg-color);
    color: var(--header-text-color);
    padding: 10px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
h1 {
    font-weight: 700;
    position: relative;
}
 
h1::after {
    content: '...the future of token minting';
    display: block;
    text-align: center;
    color: var(--subtitle-text-color);
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    font-size: 0.55em;
}
 
h1, h2, h3 {
    font-weight: 700;
}
 
h2 + p {
    color: var(--paragraph-color);
}
 
/* MAIN */
main {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
 
/* ARTICLE */
article {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid var(--article-border-color);
    flex: 1;
}
 
article p {
    margin-bottom: 20px;
    border: 1px solid var(--article-border-color);
    padding: 15px;
}
 
/* IDs */
#mint {
    background-color: #eaeaea;
    padding: 15px;
    margin-top: 10px;
}
 
#mint form {
    padding: 10px;
    border: 1px solid var(--form-border-color);
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
 
#mint input,
#mint button {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--input-border-color);
    flex: 1;
}

#totalMinted {
    color: var(--info-text-color);
}
 
/* PARAGRAPH */
p {
    line-height: 3.5;
}
 
/* MEDIA QUERY */
@media (min-width: 768px) and (max-width: 1024px) {
    body {
        background: var(--bg-gradient);
    }
    main {
        flex-direction: row;
    }
}
 
@media (max-width: 767px) {
    nav ul {
        flex-direction: column;
    }
    .button {
        padding: 15px;
    }
}
 
/* ANIMATION AND TRANSITION */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
 
.button {
    animation: pulse 2s infinite;
}
 
a {
    transition: color 0.5s ease;
}
 
a:hover {
    color: var(--button-hover-color);
}
 
@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}
 
input:invalid {
    border-color: var(--invalid-input-border-color);
}
 
::placeholder {
    color: var(--placeholder-color);
    opacity: 1;
}

HTML Code:

<!DOCTYPE html> <!-- Defines document type and HTML version -->
<html lang="en"> <!-- Sets the language of the page -->
 
<head>
    <meta charset="UTF-8"> <!-- Sets character encoding for the document -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ensures proper rendering on mobile devices -->
    <title>Token Minter dApp</title> <!-- Title of the webpage -->
    <link rel="stylesheet" href="/globalstyles.css"> <!-- Link to external CSS file -->
    <script src="/globalscript.js"></script> <!-- Link to external CSS file -->
</head>
 
<body>
    <header>
        <!-- Site header with navigation -->
        <h1>Token Minter dApp</h1>
        <nav>
            <!-- Navigation links -->
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#mint">Mint Tokens</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>
    </header>
     
    <main>
        <!-- Main content section -->
        <article id="home">
            <!-- Introduction article -->
            <h2>Introduction to Token Minting</h2>
            <p>This dApp allows users to mint their own tokens on the blockchain.</p>
        </article>
         
        <section id="mint">
            <!-- Token minting form section -->
            <h2>Mint Your Tokens</h2>
            <form action="#">
                <!-- Form for token minting -->
                <input type="text" placeholder="Enter your wallet address" id="walletAddress">
                <input type="number" placeholder="Token amount" id="tokenAmount">
                <button class="button" type="button">Mint</button>
            </form>
            <p id="totalMinted">Total Minted: 0</p>
        </section>
         
        <aside>
            <!-- Sidebar with additional information -->
            <h3>Learn More:</h3>
            <p>Explore more about blockchain technology.</p>
        </aside>
    </main>
     
    <footer>
        <!-- Footer with contact information -->
        <p>Contact us at <a href="mailto:hello@dProgrammingUniversity.com">hello@dProgrammingUniversity.com</a></p>
    </footer>
</body>
</html>

Conclusion:

Grasping the essentials of JavaScript variables, data types, and operators is a significant step in your journey to becoming a proficient web3 frontend developer.

These elements are the foundation upon which the dynamic functionality of web applications is built.

Resources & References:

To deepen your understanding of this lesson, you can explore the following resources:

These resources provide comprehensive guides and examples that will be invaluable as you learn and apply them in your journey of Web3 frontend development.

Support:

If you need help with this lesson, questions, suggestions and improvement. The best way to get help is to use the comment below:
1. First check existing comments if your questions have been answered before posting.
2. If no existing related question with an answer, then you can post a new one (kindly avoid duplicating previously asked and answered questions).

NOTE: This is the most recommended way of getting support directly from the instructor of this course. Posting on other platforms like Discord may get support from other community members and not from the course instructor directly.

Images|Videos|Links: To support your question with a screenshot, Github repo link or other media, kindly upload it somewhere online like Drive/Dropbox or Github (for codes) first, then post the link to it in your comment. Please do not upload media/codes directly, it may fail or cause your comment to be deleted.

Please ONLY post questions that are specific to this lesson not the entire course to ensure others can find it helpful. Each lesson allows comments relating to it ONLY. Off-lesson questions will be deleted even if they relate to this course as a whole but as long as they are not specific to this lesson, they are not allowed.

Lesson Content

EXERCISE For JavaScript Variables, Data Types, and Operators

Previous Lesson

Back to Course

Next Lesson

AI-enhanced Web3 Frontend Development Course

JavaScript Variables, Data Types, and Operators

Introduction:

Learning Objectives:

Lesson Video:

What Are JavaScript Variables?

Understanding Scopes in JavaScript:

Why Understanding Scope is Important in Web3 Development:

What Are JavaScript Data Types?

What Are Javascript Operators?

Understanding String Concatenation in JavaScript

Example Codes for Practical Application:

Expanding the Capstone Project

Existing Capstone Project Code from Previous Lesson:

Javascript Code:

CSS Code:

HTML Code:

Enhance the Capstone Project with New Features from this Lesson:

Javascript Code:

AFTER:

Javascript Code:

CSS Code:

HTML Code:

Conclusion:

Resources & References:

Support:

Leave a Comment Cancel reply

Existing Capstone Project* Code from Previous Lesson:*