JavaScript Flashcards
What is JavaScript?
- JS is a programming language written for the web. It’s the final piece along with HTML and CSS
- Brandon Ike created in 1995 to make it easier to add dynamic and interesting elements to websites
- Now there are endless opportunities with JS, even outside of the web
Truthy and Falsy
- Every value in JavaScript has an inherent boolean value. When that value is evaluated in the context of a boolean expression, the value will be transformed into that inherent boolean value.
* A value is falsy if it converts to false when evaluated in a boolean context. For example, an empty String “” is falsy because, “” evaluates to false.
* A value is truthy if it converts to true when evaluated in a boolean context. For example, the number 1 is truthy because, 1 evaluates to true.
* Essentially, if it’s not in the list of falsy values, then it’s truthy!
Ternary operator
provides you with a shortcut alternative for writing lengthy if…else statements.
conditional ? (if condition is true) : (if condition is false)
What are functions?
Reusable chunks of code that are repeated without rewriting
What is scope?
part of the program where a particular identifier such as a variable name is visible or accessible
2 kinds of scope in JS: global scope and function scope
* When trying to access an identifier, the JavaScript Engine will first look in the current function. If it doesn't find anything, it will continue to the next outer function to see if it can find the identifier there. It will keep doing this until it reaches the global scope.
Shadowing
AKA scope overriding: using the same variable name in more than 1 different scope
Hoisting
- In most languages, you have to declare a function before you call it. Basically, code is read from top to bottom. This is not true in JS.
before any JS is executed, all function definitions are “hoisted” to the top of their CURRENT SCOPE.
* However, for variables, the declaration will be hoisted but NOT the assignment. Because of these odd behaviors, best practice is to declare functions at the top of their scripts and variables at the top of their functions. That way, the way the code looks and the way the code behaves are consistent with each other.
Anonymous function
A function with no name, which you can store in a variable, because anything in JS can be stored in a variable
Syntax: var catSays = function(max) { // code here };
* All function declarations are hoisted and loaded before the script is actually run. Function expressions are not hoisted, since they involve variable assignment, and only variable declarations are hoisted. The function expression will not be loaded until the interpreter reaches it in the script.
Callback functions
- Being able to store a function in a variable makes it really simple to pass the function into another function. A function that is passed into another function is called a callback. Let’s say you had a helloCat() function, and you wanted it to return “Hello” followed by a string of “meows” like you had with catSays. Well, rather than redoing all of your hard work, you can make helloCat() accept a callback function, and pass in catSays.
What is an object in JS?
- An object is a data structure in JavaScript that lets you store data about a particular thing, and helps you keep track of that data by using a “key”
- It’s common to format objects so that each key-value pair is on its own line to improve readability
JSON
- JavaScriptObjectNotation. JSON is a popular and simple format for storing and transferring nested or hierarchal data. It’s so popular that most other programming languages have libraries capable of parsing and writing JSON (like Python’sJSON library). Internet GET and POST requests frequently pass data in JSON format. JSON allows for objects (or data of other types) to be easily encapsulated within other objects. See theMDNorJSON.orgfor more details.
Why use jQuery?
- JQuery is there so you can focus on UX, not browser compatibility
- jQuery is a FUNCTION (and therefore also an object)
- The $ symbol is the same as writing “jQuery”. It returns the same exact function.
- It’s just a pointer to the same JavaScript object we saw when we wrote “jQuery”. It’s like a functionname.
- Some other JS libraries use the $ symbol as well, like MooTools, which maps the dollar sign to a variable
- The dollar sign is just a function
- jQuery (the dollar sign) returns an array-like object called a jQuery collection. It looks and behaves like an array, but also has some additional methods.
- The $ symbol is the same as writing “jQuery”. It returns the same exact function.
jQuery DOM traversal methods
- .parent()
* Goes up 1 level- .parents()
- Goes up many levels (all the way to the top)
- .children()
- Creates a jQuery collection of all IMMEDIATE children (1 level down)
- .find()
- Children’s children, etc. Similar to parent and parents. This traverses many levels DOWN in the DOM tree
- Can pass in a star (in quotes) because a selector parameter is not optional. A star means all of the descendants. This is not always the case.
- .siblings()
- Any elements that have the same parent
- .parents()
Example of jQuery function
$(‘.example’).each(function() { $(this).text(); }) // returns text of each example element
Event listeners in jQuery
- ntro to Event Listening:
- Events give you the power to set up automatic responses based on what users do when they’re on your page
- You can do it with no libraries at all, but jQuery recommended
- What are browser events?
- Specific actions at specific times
- Think of the even as a ball going through a hoop. The resulting action is that the team gets points.
- Browser events:
- Every time you move your mouse, click a link, submit a form, or anything really, your browser makes announcements about what is happening
- Google Chrome has handy function monitorElements(elementToWatch);
- It can only be used in the console in dev tools, NOT in a JS file (causes reference error)