Week 4: JavaScript Basics 1

INFO 153A/253A: Front-end Web Architecture

Kay Ashaolu

JavaScript Chapter 1: Course Introduction

What is Front-End Web Architecture?

  • The structure and organization of client-side web applications
  • Encompasses HTML, CSS, and JavaScript
  • Focuses on user interface and user experience

Course Objectives

  1. Understand the fundamentals of web architecture
  2. Learn JavaScript as a core language for front-end development
  3. Explore modern front-end frameworks and libraries
  4. Develop practical skills for building responsive web applications

Why JavaScript?

  • Versatile language for both front-end and back-end
  • Powers dynamic and interactive web experiences
  • Extensive ecosystem of libraries and frameworks
  • Constantly evolving with new features and capabilities

Course Structure

  1. JavaScript fundamentals
  2. DOM manipulation and events
  3. Asynchronous programming
  4. Modern JavaScript (ES6+)
  5. Introduction to popular frameworks (React, Vue, Angular)

JavaScript Chapter 2: Variables, Data Types, Methods, and More

Variables in JavaScript

  • Containers for storing data values
  • Declared using var, let, or const 
let name = "John Doe";
const PI = 3.14159;
var age = 30; // Avoid using var in modern JavaScript

Data Types

  1. Primitive Types

    • Number
    • String
    • Boolean
    • Undefined
    • Null
    • Symbol (ES6)
    • BigInt (ES11)

  2. Object (Reference Type)

Numbers and Strings

// Numbers
let integer = 42;
let float = 3.14;

// Strings
let singleQuotes = 'Hello';
let doubleQuotes = "World";
let templateLiteral = `Hello, ${name}!`;

Booleans, Null, and Undefined

// Booleans
let isTrue = true;
let isFalse = false;

// Null and Undefined
let emptyValue = null;
let undefinedValue;

console.log(undefinedValue); // Output: undefined

Methods and Functions

  • Reusable blocks of code
  • Can accept parameters and return values
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Alice")); // Output: Hello, Alice!

// Arrow function (ES6)
const multiply = (a, b) => a * b;

Scope and Hoisting

  • Scope: Visibility and accessibility of variables
  • Hoisting: Variable and function declarations are moved to the top of their scope
console.log(x); // Output: undefined
var x = 5;

// The above is interpreted as:
var x;
console.log(x);
x = 5;

JavaScript Chapter 3: Arrays and Objects

Arrays

  • Ordered collections of values
  • Zero-indexed
  • Can contain mixed data types
let fruits = ["apple", "banana", "orange"];
console.log(fruits); // Output: banana

fruits.push("grape");
console.log(fruits.length); // Output: 4

Array Methods

  • push(), pop(): Add/remove from end
  • unshift(), shift(): Add/remove from beginning
  • slice(), splice(): Extract/modify portions
  • map(), filter(), reduce(): Transform arrays
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8, 10]

Objects

  • Collections of key-value pairs
  • Properties can be accessed using dot notation or bracket notation
let person = {
  name: "John Doe",
  age: 30,
  isStudent: false
};

console.log(person.name); // Output: John Doe
console.log(person["age"]); // Output: 30

Object Methods

  • Functions stored as object properties
let calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: (a, b) => a - b
};

console.log(calculator.add(5, 3)); // Output: 8
console.log(calculator.subtract(10, 4)); // Output: 6

Destructuring

  • Extract values from arrays or properties from objects
// Array destructuring
let [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first, second, rest); // Output: 1 2 [3, 4, 5]

// Object destructuring
let { name, age } = person;
console.log(name, age); // Output: John Doe 30

Spread Operator

  • Expands arrays or objects
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // Output: [1, 2, 3, 4, 5]

let obj1 = { x: 1, y: 2 };
let obj2 = { ...obj1, z: 3 };
console.log(obj2); // Output: { x: 1, y: 2, z: 3 }

JSON (JavaScript Object Notation)

  • Lightweight data interchange format
  • Used for storing and transporting data
let jsonString = '{"name": "Alice", "age": 25}';
let parsedObject = JSON.parse(jsonString);
console.log(parsedObject.name); // Output: Alice

let newJsonString = JSON.stringify(parsedObject);
console.log(newJsonString); // Output: {"name":"Alice","age":25}

Recap

  • Variables and data types form the foundation of JavaScript
  • Arrays and objects are powerful data structures
  • Methods and functions enable code reusability
  • Modern JavaScript features enhance productivity

Next Steps

  1. Explore DOM manipulation
  2. Learn about asynchronous JavaScript
  3. Dive into modern frameworks (React, Vue, Angular)
  4. Practice building real-world web applications

Thank You!

Questions? Let's discuss!