text string & string methods notes

Browser Object Model | BOM

• no official standards for BOM

Window Object

• supported by all browsers
• all global objects, functions and variables automatically become members of window object
• even the document object (HTML DOM) is a property of the window object

Window Size

• two properties can be used to determine size of browser window
• window.innerHeight & window.innerWidth

Other Window Methods

• window.open()
• window.close()
• window.moveTo()
• window.resizeTo()

Window Screen

properties
• screen.width - returns width of visitor screen in pixels
  document.getElementById("demo").innerHTML = "Screen Width: " + screen.width;
  result: Screen Width: 1707
• screen.height
• screen.availWidth
  minus interface features like taskbar
• screen.availHeight
• screen.colorDepth - returns number of bits used to display one colorDepth
  all modern computers use 24 or 32 bit hardware for color resolution
  24 bits = 16,777,216 'true colors'
  32 bits = 4,294,967,296 'true colors'
• screen.pixelDepth

Window Location

• window.location.href - returns href(URL) of current page
• window.location.hostname - returns domain name of web host
• window.location.pathname - returns path and filename of current page
• window.location.protocol - returns web protocol used - http: or https:
• window.location.assign() - loads new document
• window.location.port - returns number of internet host port of current page

Window History

contains browser history - limited for privacy
• history.back() - clicking back
• history.forward() - clicking forward

Window Navigator

contains info about visitors browser
• navigator.cookieEnabled - true or false
• navigator.appName - returns application name of browser - deprecated
• navigator.appCodeName - application code name of browser - deprecated
• navigator.platform - returns the browser platform (OS)
• navigator.language
• navigator.javaEnabled()
• navigator.onLine

Strings

String Length

Escape Character

• \' = ' = single quote
• \" = " = double quote
• \\ = \ = backslash

other escape sequences
• \b = backspace
• \f = form feed
• \n = new line
• \r = carriage return
• \t = horizontal tabulator
• \v = vertical tabulator

Strings as Objects

Can be defined as objects with keyword new.
This slows down and complicates code.

String Reference

• zero-based index
• all string methods return new value, do not change original variable

String Methods
• charAt() - returns character a specified index
• charCodeAt() - returns unicode at specified index
• concat()
• endsWith()
• fromCharCode() - returns Unicode values as characters
• includes()
• indexOf()
• lastIndexOf()
• length
• localeCompare()
• match()
• prototype() - add properties and methods to object
• repeat() - returns new string with a num of copies of a string
• replace() - search for pattern, returns string where first match is replaced
• replaceAll()
• search() - returns index position of match
• slice() - extracts part of string and returns new
• split() - splits into array of substrings
• startsWith() - checks whether string begins with specific character
• substr() - extracts num of characters from a start index
• toLowerCase()
• toString()
• toUpperCase()
• trim() - removes white spaces
• trimEnd() - removed white space from end
• trimStart()
• valueOf() - returns primitive value

String HTML Wrapper Methods

return a string wrapped inside an HTML tag
• anchor()
• big()
• blink()
• bold()
• fixed()
• fontcolor()
• fontsize()
• italics()
• link()
• small()
• strike()
• sub()
• sup()

Extracting String Parts

• slice(start, end)
  end position not included
• substring(start, end)
  start and end values less than 0 are treated as 0
• substr(start, end)
  second parameter specifies length of extracted part

Replacing String Content

Replaces only the first match
• case sensitive

Converting to an Array

String split()
• text.split(",") // split on commas
• text.split(" ") // split on spaces
• text.split("|") // split on pipe

Regular Expressions

• sequence of characters that forms a search pattern
• can be used for text search and replace operations

syntax: /pattern/modifiers;

• often used with search() and replace()
• search() uses an expression to search for a match and returns the position of the match
• replace() returns modified string where pattern is replaces

Regular Expression Modifiers
• i | case-insensitive
• g | global match - find all rather than stop at first
• m | multiline matching

Regular Expression Patterns
• [abc] | find any characters between brackets
• [0-9] | find any digits between brackets
• (x|y) | find any alts separated with pipe

Metacharacters
• \d | find digit
• \s | find whitespace
• \b | find match at beginning of a word or at end of a word \b
• \uxxxx | find unicode specified by hex number xxxx

Quantifiers
• n+ | any string with at least 1 n
• n* | any string with 0 or more occurences of n
• n? | any string with 0-1 occurences of n

RegExp Object
• test() - searches for pattern and returns true/false
• exec() - search for pattern, return as object or null

indexOf()
• retrns index of first occurrece of string in a string
• lastIndexOf() - last occurrence

search()
• returns position of match

Template Literals

• use backticks instead of quotes
• can use single and double quotes in string
• allow multiline strings
• interpolation method
  ${...}
  allow variables in strings

Expression Substitution

automatic replacing of expressions with real values is called string interpolation

HTML Templates

Quiz study questions

• dev can call the same function w/ different events and get different results if the event passes ___ to the function