Week 9_Lesson 1

Objects in JavaScript

• Objects are containers for properties and methods.
• Properties are named values and methods are functions stored as properties.

Built-in Objects in JavaScript

• JavaScript has built-in objects that provide pre-defined functionality.
• These objects offer methods and properties for common tasks.
• Built-in objects are available for use without needing to create them.

Document Object Model (DOM)

• The DOM represents the structure of an HTML document as a tree.
• It provides a way to interact with and manipulate web page elements.
• Accessing and manipulating elements allows for dynamic website content.

Browser Object Model (BOM)

• The BOM allows JavaScript to interact with the browser.
• It includes objects like Window, Navigator, Location, History, and Screen.
• Through the BOM, JavaScript can control browser features and behavior.

JavaScript Math Object

• The Math object provides properties and methods for mathematical operations.
• These objects are accessed using the Math keyword followed by a dot and the property or method name.
• There are 8 mathematical constants:
  • Math.E (Euler's constant)
  • Math.PI (pi)
  • Math.SQRT1_2 (square root of 1/2)
  • Math.SQRT2 (square root of 2)
  • Math.LN2 (natural logarithm of 2)
  • Math.LN10 (natural logarithm of 10)
  • Math.LOG2E (base-2 logarithm of E)
  • Math.LOG10E (base-10 logarithm of E)
• There are many methods for mathematical operations like:
  • Math.abs() (absolute value)
  • Math.ceil() (round up)
  • Math.floor() (round down)
  • Math.round() (round to nearest integer)
  • Math.min() (find the minimum value)
  • Math.max() (find the maximum value)
  • Math.pow() (power of a number)
  • Math.sqrt() (square root)

JavaScript Date Object

• Represents dates and times in JavaScript.
• Date objects are created using the new Date() constructor.
• There are methods to get and set date and time information.
• Date objects can be compared for different operations.

JavaScript String Object

• Represents sequences of characters.
• Strings are immutable, modifying them creates a new string.
• String methods provide various manipulations.
• The length property returns the length of the string.

Arrays in JavaScript

• Arrays are a special type of object.
• Arrays can hold a collection of elements of different data types.
• Arrays are accessed using indexes.
• They have built-in properties and methods for various manipulations.

Array Properties and Methods

• length property: Returns the number of elements in the array.
• push() method: Adds one or more elements to the end of the array.
• pop() method: Removes the last element from the array.
• shift() method: Removes the first element from the array.
• unshift() method: Adds one or more elements to the beginning of the array.
• join() method: Converts all elements to strings and combines them into a single string.
• slice() method: Extracts a part of an array and returns a new array.

Looping Through Arrays

• Use a for loop to iterate over the elements of an array.
• Access elements using the index within the loop.
• This allows performing tasks on each element of the array.

Built-in Objects

• JavaScript objects are containers for properties (named values) and methods (functions stored as properties).

The Document Object Model (DOM)

• The DOM represents the structure of an HTML document.
• Using JavaScript, you can access and manipulate HTML elements.
• Events can be added to elements to enhance page interactivity.

The Browser Object Model (BOM)

• Enables JavaScript to interact with the web browser.
• Includes objects like Window, Navigator, Location, History, and Screen.

JavaScript Math Object

• Provides mathematical constants and methods for working with numbers.
• Properties (Constants):
  • Math.PI (π)
  • Math.E (Euler's number)
  • Math.LN2 (natural logarithm of 2)
  • Math.LN10 (natural logarithm of 10)
  • Math.LOG2E (base 2 logarithm of E)
  • Math.LOG10E (base 10 logarithm of E)
  • Math.SQRT1_2 (square root of 1/2)
  • Math.SQRT2 (square root of 2)
• Methods:
  • Math.round(number) - Rounds to the nearest integer.
  • Math.ceil(number) - Rounds up to the nearest integer.
  • Math.floor(number) - Rounds down to the nearest integer.
  • Math.trunc(number) - Removes the fractional part.

The Date Object

• Represents dates and times in JavaScript.
• Creating Date Objects:
  • new Date() - Creates a Date object representing the current date and time.
  • new Date(year, month, day) - Creates a Date object with specified year, month (zero-indexed), and day.
  • new Date(year, month, day, hours, minutes, seconds, milliseconds) - Creates a Date object with specific time components.
• Methods:
  • Get Methods:
    • getFullYear() - Returns the year (four digits).
    • getMonth() - Returns the month (zero-indexed).
    • getDate() - Returns the day of the month.
    • getDay() - Returns the day of the week (0-6).
    • getHours() - Returns the hours (0-23).
    • getMinutes() - Returns the minutes (0-59).
    • getSeconds() - Returns the seconds (0-59).
    • getMilliseconds() - Returns the milliseconds (0-999).
  • Set Methods:
    • setFullYear() - Sets the year.
    • setMonth() - Sets the month (zero-indexed).
    • setDate() - Sets the day of the month.
    • setHours() - Sets the hours (0-23).
    • setMinutes() - Sets the minutes (0-59).
    • setSeconds() - Sets the seconds (0-59).
    • setMilliseconds() - Sets the milliseconds (0-999).

JavaScript String Object

• Strings are primitive and immutable in JavaScript.
• Length Property:
  • string.length - Returns the length of the string (number of characters).
• String Methods:
  • Character Access:
    • charAt(index) - Returns the character at the specified index.
  • String Manipulation & Conversion:
    • toUpperCase() - Converts the string to uppercase.
    • toLowerCase() - Converts the string to lowercase.
    • trim() - Removes leading and trailing whitespace.
    • replace(oldString, newString) - Replaces occurrences of oldString with newString.
    • substring(startIndex, endIndex) - Extracts a substring from the specified indices.
    • split(separator) - Splits the string into an array based on the separator.

JavaScript Arrays

• A special type of object.
• Use indexes to access elements.
• Creating Arrays:
  • new Array() - Creates an empty array.
  • [] - Creates an empty array.
• Adding Elements:
  • push(element) - Adds an element to the end of the array.
• Length Property:
  • array.length - Returns the number of elements in the array.
• Looping through Arrays:
  • For loop:
    • for (let i = 0; i < array.length; i++) { ... }
  • forEach loop:
    • array.forEach(element => { ... });
• Arrays can contain different data types, including other objects and arrays.

Understanding Objects

• Objects are containers for named values called Properties and functions called Methods.

Built-in Objects

• Document Object Model (DOM) - The Document Object Model represents the HTML page as a tree structure.
• Browser Object Model (BOM) - The BOM lets JavaScript interact with the browser.
• Math Object - Provides mathematical constants and methods.
  • Math Properties:
    • Access mathematical constants using Math.property.
    • JavaScript provides 8 predefined mathematical constants like Math.PI and Math.E.
  • Math Methods:
    • Methods operate on a given number using Math.method(number).
    • Includes methods for rounding numbers, finding the maximum or minimum of values, calculating square roots, and more.
• The Date Object:
  • Represents dates and times in JavaScript.
  • Use the new Date() constructor to create new Date objects.
  • Nine ways to create a Date object including setting year, month, day, hour, minute, and second.
  • Date Methods:
    • Get methods - retrieve information from existing Date objects (e.g., getDay(), getMonth(), getFullYear()).
    • Set methods - modify the date and time of existing Date objects (e.g., setDate(), setMonth(), setFullYear()).
• The String Object:
  • String Length: Find the length of a string using the length property (e.g., myString.length).
  • String Methods:
    • String methods create new strings, leaving the original string unaltered.
• The Array Object:
  • Arrays are a special type of object.
  • The typeof operator identifies arrays as objects.
  • Arrays use indexes to access elements.
  • Create arrays using new Array(), or recommended, use square brackets [].
  • Array Properties and Methods:
    • Length property: Returns the number of elements in an array (e.g., myArray.length).
    • Push method: Adds an element to the end of an array (e.g., myArray.push("newElement")).
    • Other useful methods: pop(), shift(), unshift(), concat(), splice(), join(), slice(), among others.
  • Looping through Arrays:
    • Use for loops to iterate through each element in an array.
    • Example:

      for (let i = 0; i < myArray.length; i++) {
          console.log(myArray[i]);
      }
      

• Arrays and Objects:
  • Arrays are a kind of object.
  • You can have objects and functions within an array.
  • You can even have arrays inside of other arrays (multi-dimensional arrays).

Objects in JavaScript

• Objects in JavaScript are containers for properties and methods.
• Properties are named values, and methods are functions stored as properties.

Built-in Object

• Built-in objects are pre-defined objects in JavaScript that provide specific functionalities.

The Document Object Model (DOM)

• The DOM allows JavaScript to interact with the HTML document.
• It provides access to all elements on the HTML page.
• It allows JavaScript to modify the structure, style, and content of the HTML document.

The Browser Object Model (BOM)

• The BOM allows JavaScript to interact with the browser itself.
• It offers access to browser features and functionalities like windows, history, location, and screen details.

JavaScript Math Object

• The Math object provides various constants and methods for mathematical operations on numbers.
• Constants can be accessed using the syntax Math.property.
• The Math object has 8 built-in constants like Math.PI, Math.E, and Math.SQRT2.
• Methods can be accessed using the syntax Math.method(number).
• The Math object offers methods like Math.round(), Math.floor(), Math.ceil(), and Math.abs().

Date Object

• The Date object represents dates and times in JavaScript.
• Date objects are created using the new Date() constructor.
• There are different ways to create a Date object, including specifying year, month, day, hour, minute, second, and millisecond.
• Date methods allow you to manipulate and retrieve information from Date objects.
• Get methods like getFullYear(), getMonth(), getDate(), and getDay() are used to retrieve specific parts of a date.
• Set methods like setFullYear(), setMonth(), setDate(), and setHours() are used to modify specific parts of a date.
• Date objects can be compared using operators like > and <.

JavaScript String Object

• The String object in JavaScript represents a sequence of characters.
• The length property provides the number of characters in a string.
• String methods are used to manipulate and extract information from strings.
• All string methods produce new strings and don't modify the original string.
• Some common string methods include toUpperCase(), toLowerCase(), indexOf(), lastIndexOf(), and substring().

Arrays in JavaScript

• Arrays are objects that store collections of values.
• The typeof operator returns "object" for arrays.
• Arrays are best described as arrays and use indexes to access their elements.
• Arrays can be created using the new Array() constructor or the literal notation [].
• Array elements can be of different types, including objects, functions, and other arrays.
• Arrays have properties and methods that allow you to manipulate and access their elements.
• The length property returns the number of elements in an array.
• The push() method adds a new element to the end of an array.
• Arrays can be looped through using a for loop.

This quiz covers various aspects of JavaScript including objects, built-in objects, the Document Object Model (DOM), and the Browser Object Model (BOM). Understand how these elements enhance web development and dynamic content manipulation. Test your knowledge on Math object methods as well.