Intermediate JavaScript Flashcards
What is the DOM
Document Object Model
What is the Virtual DOM?
A virtual DOM is a lightweight JavaScript representation of the DOM used in declarative web frameworks such as React, Vue.js, and Elm. Updating the virtual DOM is comparatively faster than updating the actual DOM.
Window Object
Represents the browser window
Document Object
Represents the web page
Image Object
Represents an HTML IMG tag
History Object
Contains browser history
Navigator Object
Contains niformation about the visitor’s browser
All global JS objects, functions and variables automatically become….
members of the window object
Global variables (Window object) are…
properties of the window object
Global functions (window object) are..
methods of the window object
Some methods of the Window Object
window. open
window. close
window. moveTo
window. resizeTo
Finding HTML (Document Object), few examples
getElementsById
getElementsByTagName
getElementsByClassName
Changing HTML (Document Object)
element. innerHTML =
element. attribute =
element. setAttribute (attribute,value)
Adding or Deleting Elements (Document Object)
document. createElement(element)
document. removeChild(element)
document. appendChild(element)
Event Handler (Document Object)
document.getElementById(id).onclick = function () {code}
Create an Image Object
const x = document.createElement(“IMG”)
Some Image Object properties
complete
naturalHeigth
naturalWidth
src
Image rollover?
Two images. Change onMouseOver and onMouseOut
Return the anchor part of a URL (Location Object)
var x = location.hash;
Which Methods are there for the Location Object?
assign() Loads a new document
reload() Reloads the current document
replace() Replaces the current document with a new one
Difference between replace or assign (location object)
After using replace the current page will not be saved in the session history
Which Navigator propertie returns the version of the browser?
appVersion
Which Navigator object returns the operating system?
platform
Which Navigator property returns the name of the browser?
appName
Which three methods to extract a part of String are there?
slice(start, end)
substring(start, end)
substr(start, length)
What does slice()? (String)
extracts a part of a string and returns the extracted part in a new string.
What doest the substring() method?
substring() is similar to slice().
The difference is that substring() cannot accept negative indexes.
What does the substr() method?
substr() is similar to slice().
The difference is that the second parameter specifies the length of the extracted part.
Difference between indexOf() and search() method?
The search() method cannot take a second start position argument. The indexOf() method cannot take powerful search values (regular expressions).
String.match….
The match() method searches a string for a match against a regular expression, and returns the matches, as an Array object.
What is a regular expression? Regexp
A regular expression is a sequence of characters that forms a search pattern.
The search pattern can be used for text search and text replace operations.
In JavaScript, regular expressions are often used with the two string methods: search() and replace().
The search() method uses an expression to search for a match, and returns the position of the match.
The replace() method returns a modified string where the pattern is replaced.
Regular Expression Patterns
Brackets are used to find a range of characters:
Expression
[abc] Find any of the characters between the brackets
[0-9] Find any of the digits between the brackets
(x|y) Find any of the alternatives separated with |
Metacharacters are characters with a special meaning:
Metacharacter
\d Find a digit
\s Find a whitespace character
\b Find a match at the beginning of a word like this: \bWORD, or at the end of a word like this: WORD\b
\uxxxx Find the Unicode character specified by the hexadecimal number xxxx
RegExp Object
In JavaScript, the RegExp object is a regular expression object with predefined properties and methods.
Reg Exp Object methods
exec() Tests for a match in a string. Returns the first match
test() Tests for a match in a string. Returns true or false
toString() Returns the string value of the regular expression
What type of error is most likely to debug using watchpoints?
Logical
What is a typical watchpoint in JS?
alert()
What type of error after script has loaded?
Run-time
What are run time erros typically caused by?
Improper use of commands
Syntax-error
Load time (also called compiler / interpreter error)
What to use to repeat a group of statement fora particular range of values?
For loop
Control structures…
Make decisions based on Boolean values
Substitute for the neste if..else statement?
Switch
Purpose of the switch statement?
To compare a value against another to search for a match
Purpose of the break statement?
To exit a control structure
Continue statement..
Force the flow of control back to the top of the loop
How to check if Java is enabled?
Use javaEnabled() method (navigator object)
Limitation of virtual DOM?
Changes aren’t directly reflected on the webpage
The history object has one property….
length
What is the JS equivalent fo the browser’s back button?
history.go(-1);
What is the default object in JS?
Window
How to bring a window object to the top?
window.moveTo()
Create a new history entry?
pushstate()
Diffing =
comparing the new virtual DOM with previous version
window.open() method uses 3 segments
URL, window name and list of window
Comma delimited list from array
Use myArray.join(“,”);
Declare a regular expression:
var ex = /Ron/;
Difference between shift and pop
shift removes and returns the first element, pop the last element
How to extract username from var email = ron@outlook.com
email.substring(0, email.indexOf(“@”)
0 = starting index
@ = starting index –> up to (in this case @ )
To use any Data or Time you must create a new instance or copy
var mydate = new Date();
How to repeat a method or command after x-time
setTimeOut()
function.setTimeOut(time);
The join() method, by default, uses the….
comma seperator
Why use regular expression instead of string for matching?
regular expression can match a large number of strings
Math.random returns…
any value in range 0 - 1 with 0 included and 1 excluded
getDate() returns…
The date number (17 if it’s 17th of november)
Regex, string, Math, Array, Date are….
language objects
String length is…
string.length (NOT a method so no brackets)
floor, ceil, sin are…
Math objects
substr() method takes two parameters…
- Starting index
2. Number of characters to extract
charAt() example..
firstName.charAt(4);
What is a JS class?
A JavaScript class is not an object. It is a template for JavaScript objects.
THe prototype is available in …… JS object
every
Inheritance =
class-based and prototype based
Yield operator
Pause or resume a generator function
Add additional fields to custom object…
Use prototype
Which object can access items in a collection?
Iterator
Call the functions on a paretn object?
Use the super keyword
