JavaScript Flashcards
• What is the purpose of a boolean?
To give us true or false values. -if this-then this
or not this
• What does the = operator mean in JavaScript?
Assigns a value to a variable
What does string concatenation mean?
take two strings and adding them
what does the + plus operator do?
+= takes right value and adds to left variable and new value is asigned to left variable
• What data type is returned by an arithmetic operation?
number
• What data type is returned by comparing two values (, ===, etc)?
boolean
• Describe the parts of a function call.
Function name, parenthesis, and any arguments
Why are parameters useful?
You can think of a parameter as a placeholder. It is basically a variable whose value is not known until we call the function and pass an argument. When the function’s code block is run, the parameter is will be holding the value of the argument. Here’s an example of passing the string “friend” as an argument to sayHello.
• What two effects does a return statement have on the behavior of a function?
a return stops the function from running further.
return xxx;
you can’t write more code after
and it has a return value if you run it
Causes the function to produce a value we can use in our program.
Prevents any more code in the function’s code block from being run.
what does iteration mean?
single run of the loops code black?
• When does the condition expression of a while loop get evaluated?
• When does the initialization expression of a for loop get evaluated?
Before the loop begins
Before Anything
when does the condition expression of the for loop get evaluated?
before each iteration, after initialization.
• When does the final expression of a for loop get evaluated?
after the last iteration
• Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
Break
splice()
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)
slice()
The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.
slice()
slice(start)
slice(start, end)
Math.random()
Return value
A floating-point, pseudo-random number between 0 (inclusive) and 1 (exclusive).
Math.floor(Math.random() * x)
function getRandomInt(max) {
return Math.floor(Math.random() \* max);
}
console.log(getRandomInt(3)); // expected output: 0, 1 or 2
.unshift(x)
The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array. const array1 = [1, 2, 3];
console.log(array1.unshift(4, 5)); // expected output: 5
console.log(array1); // expected output: Array [4, 5, 1, 2, 3]
shift()
The shift() method removes the first element from an array and returns that removed element. This method changes the length of the array. const array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1); // expected output: Array [2, 3]
console.log(firstElement); // expected output: 1
split(x)
The split() method divides a String into an ordered list of substrings, puts these substrings into an array, and returns the array. The division is done by searching for a pattern; where the pattern is provided as the first parameter in the method’s call.
split()
split(separator)
split(separator, limit)
const str = ‘The quick brown fox jumps over the lazy dog.’;
const words = str.split(' ');
console.log(words[3]);
// expected output: "fox"
const chars = str.split('');
console.log(chars[8]);
// expected output: "k"
const strCopy = str.split(); console.log(strCopy); // expected output: Array ["The quick brown fox jumps over the lazy dog."]
Loop iteration (FOR)
You can think of a loop as a computerized version of the game where you tell someone to take X steps in one direction, then Y steps in another. For example, the idea “Go five steps to the east” could be expressed this way as a loop:
for (let step = 0; step \< 5; step++) {
// Runs 5 times, with values of step 0 through 4.
console.log('Walking east one step');
}
For Loops
A for statement looks as follows:
for ([initialExpression]; [conditionExpression]; [incrementExpression])
statement
Copy to Clipboard
When a for loop executes, the following occurs:
The initializing expression initialExpression, if any, is executed. This expression usually initializes one or more loop counters, but the syntax allows an expression of any degree of complexity. This expression can also declare variables.
The conditionExpression expression is evaluated. If the value of conditionExpression is true, the loop statements execute. Otherwise, the for loop terminates. (If the conditionExpression expression is omitted entirely, the condition is assumed to be true.)
The statement executes. To execute multiple statements, use a block statement ({ … }) to group those statements.
If present, the update expression incrementExpression is executed.
Control returns to Step 2.
A while statement executes its statements as long as a specified condition evaluates to true. A while statement looks as follows:
he condition test occurs before statement in the loop is executed. If the condition returns true, statement is executed and the condition is tested again. If the condition returns false, execution stops, and control is passed to the statement following while.
To execute multiple statements, use a block statement ({ … }) to group those statements.
Example 1
The following while loop iterates as long as n is less than 3:
let n = 0;
let x = 0;
while (n < 3) {
n++;
x += n;
}
DOM
- What console method allows you to inspect the properties of a DOM element object?
console.dir(‘variable)
- Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
because it has to go through all the hetml
- What does document.querySelector() take as its argument and what does it return?
it takes a string (class etc) and returns the first instance of it
reminiscent of a css selector
- What does document.querySelectorAll() take as its argument and what does it return?
takes argument of string, takes the chunk of whatever class or attribute it is assigned too
CSS selecter
Return value is a Node list, what we would call an array like object
- What is a DOM Tree?
- An organization representing the html site or a chunk of the page, built as JS objects for the page
Node list
example of an array structure of a list of data, not an array, and not supposed to change it after it’s been created.
It is not a Dom Element
just a collection of Dom Elements
why the $dollarSign?
Names we choose can make or break your code.
format that is used for variables that contain dom elements. Not variables with data pulled form something
like not $class
3 different kinds of events
INTERACTIONS CREATE EVENTS
Events occur when users click or tap on a link, hover or swipe over an element, type on the keyboard, resize the window, or when the page they requested has loaded.
EVENTS TRIGGER CODE
When an event occurs,
or fires, it can be used
to trigger a particular function. Different code can be triggered when users interact with different parts of the page.
CODE RESPONDS TO USERS
In t he last chapter, you
saw how the DOM can
be used to update a page. l The events can trigger the
~
1
’
j
I
1
-kinds of changes the DOM
is capable of. This is how a
How events trigger JS code
1.Select t he element node(s) you want the script to respond to.
For example, if you want to trigger a function when a user clicks on a specific link, you need to get the DOM node for that link element. You do this using a DOM query (see Chapter 5).
- Indicate which event on the selected node(s) will trigger the response.
Programmers call this binding an event to a DOM node.
The previous two pages showed a selection of the popular events that you can monitor for.
3State the code you want to run when the event occurs.
W hen the event occurs, on a specified element, it will trigger a function. This may be a named or an anonymous function
In this example, the event listener appears on the last line of the JavaScript. Before you write an event listener, two things are put in place:
- If you use a named function when the event fires on your chosen DOM node, write that function first. (You could also use an anonymous function.)
- The DOM element node(s) is stored in a variable. Here the text input (whose id attribute has a value of username) is placed into a variable called el Username
The addEventli stener () method takes three properties:
i) The event you want it to listen for. In this case, the b1ur event.
ii) The code that you want it
to run when the event fires.
In this example, it is the checkUsername(} function. Note that the parentheses are omitted where the function is called because they would indicate that the function should run as the page loads (rather than when the event fires).
iii) A Boolean indicating how events flow, see p260. (This is usually set to false.)
CD ® ® BROWSER SUPPORT
Internet Explorer 8 and earfier versions of IEdo not support the addEventli stener() method, but they do support a method called attachEvent(} and
you will see how to use this on p258.
Also, as with the previous example, IE8 and older versions of IE would not know what this referred to in the conditional statement.·An alternative approach for dealing with it is shown on p270.
EVENT NAMES
Unlike the HTML and traditional
DOM event handlers, when you specify the name of the event that you want to react to, the event name is not preceded by the word “on”.
If you need to remove an event listener, there is a function called removeEventLi stener(} which removes the event listener from the specified element (it has the same parameters).
Add event listener
CallBack function
What is the purpose of events and event handling?
- Eventhandlers handle the response to that event.
capture vs. bubbling
use bubbles
don’t need to use boolean false
bubbles find an element like button but uses the whole html
cpture does the oppostie, zero’s in dont use
- What method of element objects lets you set up a function to be called when a specific type of event occurs?
You can add an addeventlister
callback functions
allow us cto create a function to have it be called when the event actually happens
- What object is passed into an event listener callback when the event fires?
the object that will only be called by the browser, the eventhandler is being called by the browser say when a click happens, we dont call the function thebrowser does
the ‘event’ i
- What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
target property of the event object
target property stores the dom element and also the start point of when the event occured.
The element of where the event actually originated from
like on a button element, if you span the text of the button in html, it might show you text versus the button element in the console. click me!
click me!
USE SPAN IF you dont want to make 1000’s event listeners and make one
What is the difference between two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
First one: gets called when the button is clicked. sets up event lister on this element, that when this element is clicked,
(function definition)
second one: gets called the second you press enter, that function is called.
will say that it is undefined,
point is function being returned (aka func (event) console.log….}
returns undefined by itself - but if you
- Give four examples of CSS transform functions.
What does the transform property do?
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
scale, skew rotate or translate
puts where element is on coordinnate plane x, y ,z
these are simialr to positiong, but moving where origin point
coordinate point starts in top left corner
- What is the className property of element objects?
it allows to get or set the attribute
- How do you update the CSS class attribute of an element using JavaScript?
element. className = newValue
Creating an object with a user-defined constructor function requires two steps:
:; selection
You can make whatever you like highlight on a page a certain color
