Getting Started with JavaScript for Web Development

Overview

• Course will cover basic Javascript concepts through multiple projects suitable for portfolio building:
  • Digital Clock
  • Stopwatch
  • Calculator
  • Rock Paper Scissors Game
  • Image Slider
  • Weather App with API Integration
• Emphasis on interactive and dynamic web development.
• Recommended prior knowledge: HTML and CSS

Introduction to JavaScript

• JavaScript: A programming language to create dynamic and interactive web pages.
• Runs in web browsers (e.g., Chrome, Safari, Edge).
• Can respond to user actions and process user inputs to enhance interactivity.
• Utilized along with HTML for structure and CSS for styling.

Setting Up Development Environment

1. Text Editor: VS Code recommended.
2. Creating a Project Folder:
   • Use VS Code’s Explore to open a folder for your project.
   • Create folder (e.g., 'website') on your desktop for convenience.
3. File Structure:
   • HTML file (index.html): The homepage.
   • CSS file (style.css): For styling website elements.
   • JavaScript file (index.js): For adding interactivity.

Basic HTML Setup

• Generate base HTML structure using ! followed by the Tab key in VS Code.
• Modify the title of the webpage in the generated code.

Linking CSS and JavaScript Files

1. Linking CSS:
   • Use <link> tag in HTML to link style.css.
2. Linking JavaScript:
   • Use <script> tags at the bottom of the HTML document body to link index.js.

Live Server Extension

• Install Live Server extension in VS Code for real-time update previews.
• Use Live Server to automatically refresh the webpage upon saving changes.

Basic HTML Tags and Elements

• Headings: <h1> for main headings.
• Paragraphs: <p> for paragraphs; generate placeholder text with lauram in VS Code.

Basic CSS Styling

• Select elements using CSS and update styles such as font, color, and font size.
• Example: Change the body font to Verdana and set the font size.

JavaScript Fundamentals

Adding Basic Output

• Using console.log to output text for debugging.
• Example: console.log('Hello') outputs Hello in the browser’s console.
• Inspect element and open console to view outputs.

Adding User Interactions

• Using alert boxes to display pop-up messages.
• Adding comments in Javascript using // for single-line and /* */ for multi-line comments.

Modifying HTML Elements with JavaScript

• Selecting elements with document.getElementById and changing their text content.
• Example: Changing an <h1> tag content via Javascript.

Variables in JavaScript

Declaring and Using Variables

• Variables store data values: use let or const for declarations.
• Example: let age = 25; assigns the value 25 to the variable age.
• Variables can be numbers, strings, booleans, etc.

Basic Data Types in JavaScript

• Numbers: Used for arithmetic operations.
• Strings: Series of characters, enclosed in quotes.
• Booleans: true or false values to indicate conditions.

Simple Math Operations

• Arithmetic operations: Addition (+), Subtraction (-), Multiplication (*), and Division (/).
• Use augmented assignment operators for shorthand arithmetic operations.*

Creating a Calculator App

HTML Setup

• Create a basic HTML structure with buttons for numbers and operations.

Basic JavaScript for Simple Calculations

• Setting up event listeners for button clicks.
• Using eval() function for evaluating simple arithmetic expressions.

Note: For extended content, see the video or detailed lecture notes. This summary captures foundational steps and instructions for getting started with JavaScript and basic interactive elements on a webpage via practical projects.