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
- Understand the fundamentals of web architecture
- Learn JavaScript as a core language for front-end development
- Explore modern front-end frameworks and libraries
- 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
- JavaScript fundamentals
- DOM manipulation and events
- Asynchronous programming
- Modern JavaScript (ES6+)
- 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
, orconst
let name = "John Doe";
const PI = 3.14159;
var age = 30; // Avoid using var in modern JavaScript
Data Types
-
Primitive Types
- Number
- String
- Boolean
- Undefined
- Null
- Symbol (ES6)
- BigInt (ES11)
-
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
- Explore DOM manipulation
- Learn about asynchronous JavaScript
- Dive into modern frameworks (React, Vue, Angular)
- Practice building real-world web applications
Thank You!
Questions? Let's discuss!
Week 4 - JavaScript Basics 1
By kayashaolu