Tony Chase

Posted on Sep 19

Learning JS in 30 Days - Day 1

#beginners #javascript #tutorial

Recently became interested in JavaScript and decided to start a 30-day learning plan. Each day will focus on one core JavaScript concept, sharing the learning process and insights here.

This series of articles is mainly to record the learning journey, while also hoping to help friends who are just starting to learn JavaScript. The approach will be to explain concepts in the most accessible way possible and share problems encountered during the learning process along with solutions.

Today is day one, starting with the basics of JavaScript.

📚 Today's Learning Objectives

Understand the history and development of JavaScript
Comprehend JavaScript's role in web development
Learn to set up a JavaScript development environment
Write the first JavaScript program

🌟 Introduction to JavaScript

JavaScript is a high-level, interpreted programming language originally developed by Brendan Eich in 1995 for the Netscape browser. Today, JavaScript has become one of the core technologies in web development.

Characteristics of JavaScript

Interpreted Language: No compilation required, runs directly in the browser
Dynamic Typing: Variable types are determined at runtime
Cross-platform: Can run on browsers, servers, mobile devices
Event-driven: Based on user interactions and system events
Functional Programming Support: Functions are first-class citizens

Application Areas of JavaScript

Frontend Development: Web page interactions, animations, form validation
Backend Development: Node.js server development
Mobile Development: React Native, Ionic frameworks
Desktop Applications: Electron application development
Game Development: HTML5 games

🛠️ Development Environment Setup

1. Browser Developer Tools

Modern browsers come with powerful built-in developer tools:

// Enter the following code in the browser console
console.log("Hello, JavaScript!");

How to open developer tools:

Chrome/Edge: F12 or Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac)
Firefox: F12 or Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac)
Safari: Cmd+Option+I (need to enable developer menu first)

2. Recommended Code Editors

Visual Studio Code: Free, powerful, rich plugins
Sublime Text: Lightweight, fast startup
WebStorm: JetBrains product, comprehensive features
Atom: GitHub developed, open source and free

3. Local Development Environment

Create a simple HTML file to run JavaScript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Learning - Day 1</title>
  </head>
  <body>
    <h1>Welcome to JavaScript Learning!</h1>
    <div id="output"></div>

    <script>
      // Write JavaScript code here
      console.log("JavaScript is running!");

      // Get page elements
      const outputDiv = document.getElementById("output");
      outputDiv.innerHTML = "<p>Hello, JavaScript World!</p>";
    </script>
  </body>
</html>

🎯 First JavaScript Program

Write a simple interactive program:

// 1. Variable declaration
let userName = "JavaScript Learner";
const welcomeMessage = "Welcome to the JavaScript world!";

// 2. Function definition
function greetUser(name) {
  return `Hello, ${name}! ${welcomeMessage}`;
}

// 3. Function call
let greeting = greetUser(userName);
console.log(greeting);

// 4. DOM manipulation
document.addEventListener("DOMContentLoaded", function () {
  const body = document.body;
  body.style.backgroundColor = "#f0f8ff";
  body.style.fontFamily = "Arial, sans-serif";

  // Create dynamic content
  const dynamicDiv = document.createElement("div");
  dynamicDiv.innerHTML = `
        <h2>🎉 Congratulations on completing your first JavaScript program!</h2>
        <p>${greeting}</p>
        <button onclick="showAlert()">Click here!</button>
    `;
  document.body.appendChild(dynamicDiv);
});

// 5. Event handling
function showAlert() {
  alert("Awesome! You've learned the basics of JavaScript!");
}

📝 Practice Exercises

Exercise 1: Console Output

Run the following code in the browser console and observe the output:

console.log("Hello World!");
console.log("JavaScript is interesting!");
console.log("Today is the first day of learning JavaScript");

Exercise 2: Simple Calculator

Create a simple calculator:

// Define calculation functions
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

function multiply(a, b) {
  return a * b;
}

function divide(a, b) {
  if (b === 0) {
    return "Error: Cannot divide by zero";
  }
  return a / b;
}

// Test the calculator
console.log("Addition:", add(10, 5));
console.log("Subtraction:", subtract(10, 5));
console.log("Multiplication:", multiply(10, 5));
console.log("Division:", divide(10, 5));

Exercise 3: User Interaction

Create a simple user interaction program:

// Get user input
let userAge = prompt("Please enter your age:");
let userName = prompt("Please enter your name:");

// Process user input
if (userAge && userName) {
  let message = `Hello ${userName}, you are ${userAge} years old!`;
  console.log(message);
  alert(message);
} else {
  alert("Please provide complete information!");
}

🔍 Today's Key Points Summary

What is JavaScript: A programming language for web development
Development Environment: Browser + code editor + developer tools
Basic Syntax: Variables, functions, DOM manipulation
Importance of Practice: Hands-on practice, try code in the console

📚 Tomorrow's Preview

Tomorrow will learn about JavaScript variables and data types, which are fundamental concepts in programming. Will explore in depth:

Variable declaration and usage
Basic data types
Type conversion
Variable naming conventions

💡 Learning Tips

Practice Hands-on: Run every piece of code yourself
Think More: Understand the execution logic of code
Practice More: Try modifying code and observe result changes
Record Questions: Note down unclear concepts promptly

This concludes the introduction to day one's learning content. Tomorrow will continue learning about JavaScript variables and data types.

DEV Community