4. Adding Interactivity with JavaScript Flashcards
Powerful programming language that provides significant value in web development
add interactivity to websites
JavaScript
Server-side JavaScript development
Node.js
Scripts run directly within your users’ browsers
Client-side interactivity
Responsive and interactive user
interfaces
Broad API and third-party service integration that permit
multi-tier applications
Development through frameworks like React Native and Iconic
Cross-platform mobile app development
Vast ecosystem of libraries, frameworks and tools
Near-universal browser support
JavaScript can be included in your web pages by referencing an external .js file as an attribute of the
<script> tag </script>
You can drop your JavaScript code between the
tags in the
Header section of your HTML
Since the adoption of “___________” you no longer need to add the text/javascript as an attribute of the
tag.
HTML5
JavaScript is the default scripting language for
HTML
Comments accomplished by
//
Character concatenates all values in sentence
+
To get to command line
F12
right click browser and select INSPECT
Representation of the page code
Elements tab
Live JavaScript environment
Console
Built-in JavaScript function that allows you to output messages or values to the console.
console.log()
Primary tool for storing and processing data and is a location in memory that’s identified in your code by a name - more descriptive the better
variable
Similar to a variable in that it’s also a named storage location but it represents a value that can’t be reassigned or changed once it is assigned.
ie - lastname
constant
data meant to be read literally and not treated as say numbers
string
value of either true or false
boolean
Another way of saying that some variables can be valid more widely than others.
Block Scope
Variable values can be accessed from any place and at any level of a program
global
Variable values are available only within a limited block of code
local
A method for hanging the execution of specific code on the status of a condition.
If block
Ordered collection of multiple values listed within square brackets
best for ordered lists of elements
arrays
unordered collection of key-value pairs where each key is a string or symbol and each value can be of any type
appropriate for representing structured dta with named properties and behaviors.
objects
Special value in JavaScript that represents the absence of value
assigned to values that have been declared but have not been assigned a value or to function params that have not been provided with arguments.
undefined
Special value in JavaScript that represents the intentional absence of any object value
assigned explicitly to indicate the absence of an object or the intentional clearing of an object reference.
null
Represents a value that is not a valid number and is returned when a mathematical operation or function expects a numerical result but fails to produce one.
NaN
“Not-a-Number”
The process of converting a value from one datataype to another.
Type Conversion
Type Coercion
JavaScript variables can hold values of different data types and JavaScript automatically performs this when necessary
Dynamically Typed
Occurs implicitly (not directly expressed) automatically converts from one type to another based on
context
Operator used to increase the value of a variable by 1 and can be placed before or after the variable to influence behavior
++
When ++ is placed before the variable is incremented and its
++x
NEW value is returned
When placed after the variable (X++) the variable is incremented but its
ORIGINAL value is returned.
Operator used to decrease the value of a variable by 1
decrement (–)
when placed after like in x– the variable is decremented but its
ORIGINAL value is returned
A short way of writing x = x + y
+=
subtraction assignment operator
-=
multiplication
*=
Fantastic way to get time consuming, boring, and repetitive work done fast.
JavaScript Control Structures
In a switch this statement is used after each case to exit the switch statement once a match is found
break
loop skips the rest of the body for the next iteration and proceeds to the next
while loop
operator that performs type coercion that tries to convert the operands to a common type before making the comparison.
==
Operator that performs strict equality comparison without any type of coercion and if the types are different, the comparisons immediately return as false.
===
inequality
!=
strict inequality
!==
Checks coercion if it is not equal
if of different values they are coerced
!=
boolean value false
number zero
empty string
the absence of any value (or, null)
undefined variables
NaN
javascript falsy
any other types of values that are not javascript falsy
truty
represents the structure and content of an HTML document as a tree-like structure where each element, attribute and text node in the HTML document is represented as a node in the DOM tree and provides a way to interact with and manipulate the elements of HTML document using JavaScript
DOM
Document Object Model
The ability to access, modify and add elements dynamically, change styles and classess, handle events and perform other operations on
documents
Top-level object representing the HTML document. that serves as the entry point for accessing the DOM tree and provides methods for navigating and manipulating the document.
Document
Represents an HTML element in the DOM tree and has properties that allow you to access and modify attributes, styles and content
Element
common select methods
getElementById
getElementByTagName
getElementsByClassName
base class for all types of nodes in the DOM tree and can be elements, text nodes, comment nodes - etc.
They have properties and methods for common operations, such as accessing parent and child nodes, manipulating node content and more.
Node
Attached to modes to respond to events like clicks, keypresses, mouse movements
Event Listeners
You can interact with the HTML DOM to dynamically modify the content and behavior of an HTML page.
Using JavaScript
method to select elements by their id attribute and it modifies the element’s contents and properties using dom manipulation
getElementById
Dom manipulation that sets the HTML content inside the selected element. In this case, we change the heading’s text to New Heading
innerHTML
Dom manipulates accessing the CSS styles of the selected element that set the paragraph’s text color to red.
Style
Dom manipulation that sets the text conent of the selected element that we update the paragrah’s text to “This is an updated paragraph”
textContent
displays an alert box with the message button clicked
showMessage
Changes the background color of the <div> element with the id of myDiv to red when button is clicked
changeColor
