JavaScript Boot Camp - Day 1

Jul 15, 2024

JavaScript Boot Camp - Day 1 Summary

Instructor: Anam Khan, Let's Subgrade

Introduction

  • Five-day boot camp on JavaScript, one hour each day.
  • Covers basics to advanced topics.
  • Interactive sessions.
  • Importance of attendance for certification.

Tools and Setup

  • Browser: Firefox Developer Edition recommended (any browser works).
  • Code Editor: Visual Studio Code.
  • Live Server extension for real-time page refresh.

Attendance and Certification

  • Mark attendance using shared link.
  • Rate session and provide feedback.
  • Attendance required for certification (at least 50% attendance).
  • Certificate available after the last session.

Key Concepts in JavaScript

JavaScript Overview

  • High-level, just-in-time compiled programming language.
  • Not to be confused with Java.
  • Provides functionality and interactivity to web pages.

Just-in-Time (JIT) Compilation

  • Combination of compiler and interpreter for faster execution.
  • Improves code performance by optimizing on the fly.
  • Cross-platform compatibility.

Browsers and JavaScript Engines

  • V8 for Chrome, SpiderMonkey for Firefox, JavaScriptCore for Safari.

JavaScript is Beginner-Friendly

  • Less complexity: hides low-level interaction details.
  • Development is faster and more creative-focused.
  • Suitable for building both simple and complex applications.

Starting with JavaScript

Setup in VS Code

  • Create an HTML file (index.html) and a JavaScript file (app.js).
  • Link the JavaScript file in HTML using <script src="app.js"></script>.

Sample Project: Fortune Teller

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fortune Teller</title>
</head>
<body>
    <h1>What's Your Future?</h1>
    <p>Enter your favorite color:</p>
    <input type="text" id="favColor">
    <button onclick="tellFortune()">Tell Me</button>
    <p id="fortune"></p>
    <script src="app.js"></script>
</body>
</html>

JavaScript Code

function tellFortune() {
    let favColor = document.getElementById('favColor').value;
    let career;

    if (favColor === 'red') {
        career = 'You might be a passionate leader';
    } else if (favColor === 'green') {
        career = 'The world of creativity awaits you';
    } else if (favColor === 'blue') {
        career = 'You have the potential to be a problem solver';
    } else {
        career = 'The future holds many exciting surprises for you!';
    }

    document.getElementById('fortune').innerHTML = career;
}

Explanation

  • HTML Structure: Basic tags like <!DOCTYPE html>, <html>, <head>, <body>, <title>, and form elements (<input> and <button>).
  • Connecting JavaScript: Using <script src="app.js"></script> to link an external JavaScript file.
  • JavaScript Basics: Defines a function tellFortune(), uses document.getElementById to fetch input value, and conditional statements (if-else) for logic.
  • Function Call: onclick="tellFortune()" is used to call the tellFortune function on button click.

Important Concepts Covered

Variables

  • Javascript uses var, let, and const for variable declarations.
  • let and const introduced after ES6 (2015).
  • const is used for variables that do not change.
  • let is used for variables that can change.
  • var is older practice and less commonly used post ES6.

Functions

  • Functions help in reusability of code.
  • Declared using function keyword followed by function name and parentheses.

Conditional Statements

  • if, else if, and else used for decision making.
  • Syntax: if (condition) { // code }.
  • else if and else to handle multiple conditions and default cases.

Comparison Operators

  • Double equals (==) vs Triple equals (===).
  • == checks for value equality, may perform type conversion.
  • === checks for both value and type equality, no type conversion.

DOM Manipulation

  • document.getElementById() to fetch elements from the DOM.
  • innerHTML to change the content of HTML elements dynamically.

Best Practices

  • Keeping JavaScript code in an external file for better organization.
  • Using Live Server for real-time updates without manual refresh.

Interaction and Queries

  • Active chat interaction with users from various backgrounds.
  • Q&A covered installation issues and clarifications on concepts.

Conclusion

  • Emphasis on practicing code and completing assignments.
  • Importance of joining community channels for updates and support.

Next session preview: Building a Rock-Paper-Scissors game using JavaScript.

Full transcript