AI-enhanced Web3 Frontend Development Course

Previous Lesson
Next Lesson

Introduction to JavaScript for Web Development

 52min
AI-enhanced Web3 Frontend Development Course Introduction to JavaScript for Web Development

Introduction:

Welcome to the world of JavaScript, a versatile scripting/programming language at the heart of web development.

This lesson serves as an introduction to JavaScript fundamentals, laying the foundation for enhancing web pages and dApp interactivity. Tailored for beginners, we embark on a journey from understanding basic concepts to implementing them in web3 decentralized applications/websites (dApps/dWeb).

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:

  1. Grasp the core principles of JavaScript and its role in web development.
  2. Comprehend how JavaScript interacts with HTML and CSS to create dynamic web pages.
  3. Recognize the importance of JavaScript in building interactive and responsive dApps.

Lesson Video:

What Is Javascript?

JavaScript is a powerful scripting language that enables you to create dynamically updated content, control multimedia, animate images, and much more.

It’s an essential skill for any web developer, particularly in the world of decentralized applications (dApps)/decentralized websites (dWebsite).

Interaction Between JavaScript, CSS and HTML:

JavaScript works in harmony with HTML and CSS. While HTML structures the content and CSS styles it, JavaScript adds interactivity and dynamic features. This synergy is crucial for developing engaging user interfaces in web3 applications.

JavaScript Syntax Basics:

Just as CSS has selectors and declaration blocks, JavaScript has functions and statements that form the building blocks of your code:

  • Statements: Instructions that perform actions with variables, operators, values, and expressions.
  • Function: A set of statements that performs a task or calculates a value.

Example:

function greet() {
    alert('Hello, dPU students!');
}

In this example, greet is the function name, and the statements inside the curly braces display an alert with a greeting message.

Types of JavaScript:

  1. Inline JavaScript: Similar to inline CSS, it’s used directly in HTML elements using the onclick attribute and others. It’s quick but less clean and maintainable.
  2. Internal JavaScript: Placed within <script> tags, typically in the <head> or at the bottom of the <body> section of an HTML document. Good for scripts specific to one page.
  3. External JavaScript: Code is stored in a separate .js file and linked to an HTML document using the <script src="filename.js"> tag. It’s best for maintaining larger codebases across multiple pages.

Example of Inline JavaScript:

<button onclick="alert('Clicked!')">Click me</button>

Example of Internal JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Token Minter dApp</title>
    <!-- Internal JavaScript -->
<script>
    // Internal JavaScript
    function changeColor() {
        document.body.style.backgroundColor = '#630404e1';
    }
</script>
</head>
<body>
    <!-- HTML content goes here -->
     <button onclick="changeColor()">Change Background Color</button>
</body>
</html>

Example of External JavaScript:

JavaScript file (globalscript.js):

// External JavaScript
function changeColor() {
    document.body.style.backgroundColor = '#630404e1';
}

HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Token Minter dApp</title>
    <!-- External JavaScript -->
<script src="scripts.js"></script>
</head>
<body>
    <!-- HTML content goes here -->
     <button onclick="changeColor()">Change Background Color</button>
</body>
</html>

JavaScript Comment:

Comments in JavaScript are used to explain code, and they can be single-line or multi-line:

They are written as:

// This is a single-line JavaScript comment

/*
This is a
multi-line JavaScript 
comment
*/

JavaScript Specificity:

Unlike CSS, JavaScript doesn’t have specificity. Instead, the order of execution matters.

The last read line will override the ones before it if they conflict without conditionals or functions determining flow control.

JavaScript Events:

Events in JavaScript are actions that can be detected by your script.

They allow you to execute code when events occur, such as onclick for button clicks or onload for the loading of a page.

JavaScript Engines:

JavaScript engines parse, compile, and execute scripts, optimizing them at each step. Modern JavaScript is designed to be “safe,” preventing low-level access to memory or CPU, which is essential for browser security​​.

Names of JavaScript Engines and Their Environments:

  • JavaScript engines are programs that interpret and execute JavaScript code. Different browsers and environments use different JavaScript engines.
  • For example, Google Chrome uses the V8 engine, while Firefox uses SpiderMonkey.
  • JavaScript can also be run outside of a browser using environments like Node.js, which also uses the V8 engine.
  • Understanding these engines is important as they can affect how JavaScript code is executed and optimized.

JavaScript Versions and Capabilities:

Over the years, JavaScript has evolved significantly, with various versions introducing new features. Keeping abreast of these developments is crucial for modern web development​​.

JavaScript is standardized under the ECMAScript specification, with new versions introducing additional features and improvements.

  • Each version of ECMAScript brings new functionalities and enhancements to the language, influencing how JavaScript is written and used.
  • Understanding these updates is crucial for writing modern and efficient JavaScript code.

JavaScript Debugging with console.log and Browser Terminal:

  • Debugging in JavaScript is crucial for identifying and fixing issues in your code.
  • console.log() is a fundamental method used to output messages to the browser’s console, helping you track variable values and program flow.
  • Modern browsers come with built-in debugging tools. In Chrome, for instance, you can open developer tools with F12, select the Sources panel, and set breakpoints to pause code execution and inspect variables.
  • Advanced console methods like console.warn(), console.error(), and console.info() provide more specific types of logging, useful for highlighting different levels of information in your code.

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:

// JavaScript Code
document.addEventListener('DOMContentLoaded', function() {
    // Access the mint button
    const mintButton = document.querySelector('#mint button');

    // Event listener for the mint button
    mintButton.addEventListener('click', function() {
        alert('Token minting process initiated!');
    });
});

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

document.addEventListener('DOMContentLoaded', function() {
    // Access the mint button
    const mintButton = document.querySelector('#mint button');

    // Event listener for the mint button
    mintButton.addEventListener('click', function() {
        alert('Token minting process initiated!');
    });
});

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 -->
    <script src="/globalscript.js"></script> <!-- Link to external CSS file -->
    <!-- <script>
        // Internal JavaScript Code (In <head> tag of HTML file)
        document.addEventListener('DOMContentLoaded', function() {
            // Access the mint button
            const mintButton = document.querySelector('#mint button');

            // Event listener for the mint button
            mintButton.addEventListener('click', function() {
                alert('Token minting process initiated!');
            });
        });
    </script> -->
</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>

    <!-- <script>
        // Internal JavaScript Code (In <body> tag of HTML file)
        document.addEventListener('DOMContentLoaded', function() {
            // Access the mint button
            const mintButton = document.querySelector('#mint button');

            // Event listener for the mint button
            mintButton.addEventListener('click', function() {
                alert('Token minting process initiated!');
            });
        });
    </script> -->
</body>
</html>

Conclusion:

JavaScript is an essential programming language for creating dynamic and interactive web experiences. By combining it with HTML and CSS, you can create rich, engaging user interfaces that respond to user actions and bring your web pages to life.

This lesson marks the start of your JavaScript journey in web3 development. Embrace the challenges and use them as stepping stones towards mastering JavaScript for dynamic and responsive dApps.

Resources & References:

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

  1. MDN Web Docs – JavaScript Basics reference
  2. W3Schools – JavaScript Tutorial
  3. Freecodecamp – JavaScript Handbook

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.

Previous Lesson
Back to Course
Next Lesson
5 Comments
Collapse Comments
User Avatar Adeyanju Adelowokan June 10, 2024 at 10:55 pm

Good day Sir.
I noticed that the exercise/quiz under this lesson is for typescript and not javascript Sir.

Solomon Foskaay (Administrator) June 11, 2024 at 8:41 pm

Now removed.
Thanks for notifing me!

User Avatar Adeyanju Adelowokan June 12, 2024 at 2:07 pm

My pleasure always Sir.

User Avatar Gideon Okorie June 21, 2024 at 12:26 pm

Please sir, I think it could have been good if the concept of event listeners in JavaScript is explained also to ease the understanding of students

Solomon Foskaay (Administrator) June 26, 2024 at 5:32 pm

Noted. Probably if the course gets future updates. it might be considered.

Leave a Comment

By using this website you agree to accept our Privacy Policy and Terms & Conditions