JavaScript, web development
quotation mark delimiter
'\' --- use the backslash to escape the quotation mark delimiter EXAMPLE: const talkSome = "I said \"hi there\""; * `\` is also used to break long strings into separate lines
function call sign
( ) .... refers to the arguments or parameters — if any — that get passed to a function
data types
A kind of value that a variable can have: string (text), number, boolean, object, null, undefined
Git
A version control system (used to keep track of changes in files within a project)
API
Application Interface
event listeners
An event listener consists of two parts. First you have to specify which event to listen for. Second, you have to provide a callback function that runs whenever the event occurs.
API
Application programming interface (API) is a set of routines, protocols, and tools for building software applications. An API specifies how software components should interact.
CORS
CORS (Cross-Origin Resource Sharing) is a system, consisting of transmitting HTTP headers, that determines whether to block or fulfill requests for restricted resources on a web page from another domain outside the domain from which the resource originated.
CSS
Cascading Style Sheets -used for APPEARANCE of web pages -used for presentation layer - set up a SELECTOR then DECLARATION BLOCK-{PROPERTY: & VALUE;}
control flow
Control flow dictates how programs execute different sets of instructions based on differing conditions. You might have one branch that executes if a condition is true, and another that executes if it's false.
DNS
Domain Name System -resource that finds IP address for name of server *phone book analogy*
CSS selectors
Element selectors (e.g., p {...}) Combination selectors (e.g., .foo.bar {...}) Multi selectors (e.g., .foo, .bar {...}) Descendant selectors (e.g., .foo li {...}) Direct child selectors (e.g., .foo > li {...}) Before and after pseudo-elements selectors (e.g., li::before {...}) Anchor pseudo-classes (e.g., a:hover {...}) Attribute selectors (e.g., input[type="text"] {...})
HTML
Hyper Text Markup Language -used for structure -used for content layer -tells browser WHAT to represent & how to structure it
IP address
Internet Protocol address -unique "name" of every computer
media queries
Media queries are a tool that CSS gives us to apply blocks of CSS rules to only certain viewports. @media only screen and (min-width: 640px) { .foo { /* do something to over-ride default settings*/ } }
control flow
Refers to the tools provided by a programming language to conditionally determine which set of instructions run * dictates how programs execute different sets of instructions based on differing conditions
DOM
The DOM, or document object model, is the browser's representation of the current state of the HTML content of a page. The DOM is not to be confused with the HTML file for a page. When the browser first loads an HTML page, the DOM will look a lot like the HTML source code, but as JavaScript scripts begin to take over, HTML elements can be added and removed, regardless of whether or not they appeared in the HTML file.
<fieldset> element
The main reason to use fieldsets is that they help web crawlers and screen readers understand how inputs are grouped together -------------------------------------------------------- *used to group related inputs and labels:===> <fieldset name="contact-info"> <legend>Contact info</legend> (a title for fieldset items) <label for="first-name">First name</label> (title for input) <input placeholder='Dweezel' type="text" name='first-name' id='first-name' />
URL
Uniform Resource Locator * the absolute URL would include the page within the site
algorithm
a step-by-step procedure for solving a problem
<form> element
Used for forms....wraps all our inputs and labels. To progressively support all users you'll want to set the action (the URL of the server endpoint) and method (usually to method="post") attributes
AJAX
asynchronous JavaScript & XML request *refers to making calls to the server after the page has initially loaded
break command
breaks out of a loop if the condition in an `if` block is true
undefined
data type that hasn't been assigned a value. You wouldn't want to purposefully assign `undefined` as a value but you can always to see if a variable is (or is not)
null
data type that represents a variable with no assigned value
jQuery
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
concatenate
to connect.....use the `+` operator
built in array methods
* .push (add item to end of array) * .length (gives number of items in array) * .pop (removes the final item from an array & returns the discarded item) * .map (used to create a new array from existing array by going over an array and applying same function to each item) EX= function double(num) { return 2 * num; } const myNumbers = [1, 2, 3, 4]; const doubledNumbers = myNumbers.map(double); console.log(doubledNumbers); // => [2, 4, 6, 8]; const doubledNumbersAlt = myNumbers.map(num => 2 * num); console.log(doubledNumbersAlt); // => [2, 4, 6, 8];
logical operators
* == -SIMPLE EQUALITY * === -STRICTER, APPLIES TO BOOLEAN TRUTHINESS * && -LOGICAL and * || -OR * ! -NOT * <= -less than or equal to * >= -greater than or equal to * !== -not equal to
logical assertions
* An assertion is a statement that evaluates to either true or false * Used in combination with `if` and `else`, logical assertions allow us to write conditional logic into our programs.
function
* a block of instructions that can be called on in code * a little "machine" that does a specific thing
object
* a complex data type combining different types of data * key:value pairs
state
* has to do with persisting values over time in a program *the state of a program is defined as its condition regarding stored inputs
responsive design
* responsive, content-driven, mobile-first design, can provide users with a good experience no matter their viewport dimensions and pixel density.
conditionals
* used to CONTROL FLOW (along with try/catch/finally blocks) * To use a conditional, begin with the command (if, else, else if), followed by an expression wrapped in parentheses (true === true). Between the curly brackets ({...}) comes the statement(s) to be executed if the expression evaluates to true. ---------------------------------------------------
`while` loop
* used to continue running the loop as long as a certain logical condition is present/true EXAMPLE: const myCounter = 20; let count = 1; while (count <= myCounter) { console.log(count); count++; }
`for` loop
* used to run through a set of instructions a specific number of times EXAMPLE: const countTo10 = 10; for (let i=0; i <= 10;i++) { console.log(i) }
for loops
* used to run through a set of instructions a specific number of times. const countTo = 10; for (let i = 1; i <= countTo; i++) { console.log(i); }
accessibility profiling
**figuring out where our accessibility shortcomings are, & knowing why a particular choice is bad for users, and how that choice can be improved * aXe is chrome extension to profile the accessibility of webpages/apps and report back the a11y violations.
function
*A function is a mini program that you define once in your code and invoke or call elsewhere. * A repeatable process or behavior. -------------------------------------------------- function sayHello(personName) { const greeting = "Hi there, " + personName; console.log(greeting); }
CSS position property: values
*All about the FLOW of elements in an HTML document --------------------------------------------------- static==(default, and most common), will have normal flow...order in which block level elements appear in HTML markup --------------------------------------------------- absolute== outside the normal flow and can be offset, but unlike fixed elements, they are offset in relation to the first parent container with a non-static position. --------------------------------------------------- relative== still in normal flow but can use offset properties (left, right, top, bottom) with relative elements. --------------------------------------------------- fixed== stays in place even when user scrolls, useful for nav bars
array
*Arrays are used to store lists of items in JavaScript. List items can be of different types, and can even be other lists. *use the square brackets ([ ]). We separate items in the array with commas. * const emptyArray = []; const nonEmptyArray = [1, 'two']; * Array contents are accessed by index — you can access an item in an array by asking for the item in a given position in the array. const allTheThings = ['cats', 'dogs', 42, ['foo', 'bar'], true, function() { console.log('hello')}]; console.log(`The first thing is ${allTheThings[0]}`);
Express
*a "minimalist web framework for Node.js" that simplifies creating modern server-side web applications in Node * An Express app is a stack of middleware functions that requests are sent through
variable
*a name that is attached to a value. They give us a way to manage STATE....the way values persist over time in a program. *variables declare space in memory to store values (let & const should be used....var is in legacy code) ------------------------------------------------------- * let=> variable who's value can (but doesn't need to be) reassigned -------------------------------------------------------- * const => variable with a CONSTANT value...can't be reassigned -------------------------------------------------------- * var => similar to let, value can be reassigned, different from `let` in terms of variable scope. Might use it because it is supported in all browsers.
Node.js
*an open-source, cross-platform JavaScript run-time environment for executing JavaScript code server-side. *Node.js applications are event-based and run asynchronously.
CSS float property: values
*mostly used to get text to wrap around image/container OR in RESPONSIVE GRIDS -------------------------------------------------- float: left/right== pushes elements to left, right *moves them out of normal flow -------------------------------------------------- clear: left/right== puts element on its own next line
DOM
*the way developers can manipulate webpages using JS
Global scope/variables
*when variables are declared outside of a function * variables declared globally can even be called from other files *can have unintended side effects
data types
-string(letters/words/unicode characters) -number (whole or decimal numbers) -boolean (true/false) -null (no assigned value) -undefined (don't assign this type) -functions (not technically a data type) -objects (complex data type--combines primitive data types)
attribute
-used for setting the properties on an HTML element -consists of a name= and a value enclosed in quotes
arrow functions
=> const add = (num1, num2) => num1 + num2; add(2, 3) // => 5; // same as above...just uses function keyword instead of arrow const addAlt = function(num1, num2) { return num1 + num2; }
HTTP
Hypertext Transfer Protocol
determinate
In regards to FUNCTIONS...Given the same inputs on separate invocations, the result should be exactly the same.
coercion
JS "forcing" a data type to match that of another when you use an operator such as `+`. EXAMPLE: const stringVar = 'Kilroy was here '; const numVar = 12; const combined = stringVar + numVar; typeof combined; // => string console.log(combined); // => Kilroy was here 12
ternary operators
JS shortcut for else/if statements syntax: condition ? expr1 : expr2 If condition is true, the operator returns the value of expr1; otherwise, it returns the value of expr2.
JSON
JavaScript Object Notation- a serialized version of javascript *All that means is it's a way that we can represent a JavaScript object as a string that can be transmitted between a server and client. Web APIs provide JSON data, and we write JavaScript client code that translates JSON back into in-memory JavaScript objects.
hoisting
JavaScript engine sets up memory for variables and functions that you have made. It is a way browsers reads through JS...first from top to bottom it identifies all variables and declares space for them THEN it goes through and executes commands (like functions)
jQuery
Popular 3rd party Javascript library
const
Prefix keyword to make a variable constant, you can't change its value
let
Prefix keyword to make a variable that you CAN (but don't need to) change its value * can be declared without initially setting a value (example=> let myVar;
loop
a construct that allows you to repeat a set of instructions a specific number of times, or until a specific condition is true
syntax highlighting
a feature of text editors that are used for programming, scripting, or markup languages, such as HTML. The feature displays text, especially source code, in different colors and fonts according to the category of terms.
cascade
a process browsers follow to determine which CSS values get applied for all the properties on a given element
JavaScript
a programming language- the only one available in All modern browsers included in HTML: <script src="app.js"></script>
GitHub
a service that allows you to save and share Git repositories (that is, projects where you've activated Git for version control) in the cloud
program
a set of instructions for a computer to carry out
variable scope
a set of rules that define which parts of your code can access a particular variable. It's what allows us to reuse variable names at different points in our code, without things breaking.
logical assertion
a statement that evaluates to either true or false
template strings
a way to refer to variables and execute JavaScript code inside of a string: surround text in `(backticks) and variables/code is referred to by ${} const foo = 'foo'; function sayHello() { return 'hello ';} const myString = `foo is set to ${foo}. Let's say hello: ${sayHello()}`;
event delegation
allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
wireframe
an image or set of images which displays the functional elements of a website or page, typically used for planning a site's structure and functionality. ------------------------------------------------------- from thinkful- the process for every section of the page is the same: find a distinct horizontal section and draw a box around it. Ask, what, if anything, special do I need to do to get this box to behave in the way the design calls for. Then work inwards to the next level of element within that box, until you're down to the smallest details.
var
an older way to declare a variable, used in legacy code, differs from `let` slightly when it comes to variable scope
recursion
calling a function on itself *not unique to JS
command line
command line (or command line interface): a tool for browsing and interacting with your computer by typing commands
function expression
const myFunction = function(arg1, arg2) { console.log("myFunction"); }; **this is a valid way to create a function and some development teams MAY prefer this way
function declaration
function myFunction() { console.log("myFunction"); }
<input> element attributes
placeholder== sets text that appears in input, as an example ----------------------------------------------------- required== any required child inputs on the form, the browser will display a message telling the user where they need to supply data. might go as attribute in <label> ------------------------------------------------------ pattern== used to supply regular expression patterns that the user's input must match with in order to be valid ------------------------------------------------------- type== "tel", "email", "radio", "text"...... determines how the element looks and how its validation works. For instance, an input with type='email' will be valid if the user inputs text that has an @ with text before and after.
event listener
procedure that executes a method when a specific event occurs.
web API
provides endpoints, which are URLs that we can make requests to in order to write or retrieve data
Text Editor
simple text editing program used to write, edit or save web design code -specialized text editors include Sublime Text, Atom
string methods
some examples are: const fooBar = 'foo bar foo bar'; fooBar.length; // => 15 fooBar.charAt(0); // => "f" fooBar.slice(4); // => "bar foo bar" fooBar.slice(4, 7); // => "bar" fooBar.split(" "); // => ["foo", "bar", "foo", "bar"] fooBar.toUpperCase(); // => "FOO BAR FOO BAR" fooBar.replace('foo', 'bar'); // => 'bar bar foo bar'
programming
the process of taking a problem stated in plain language and writing a set of instructions to handle the problem (algorithm) in terms your computer can understand (programming language)
CSS display property: values
use to solve most layout problems -------------------------------------------- *inline==value for CSS display property *displays inline with parent element *use with`span`,`button`,`input`,`em` * can NOT set height, width, margin... --------------------------------------------- block== *displays on new line --------------------------------------------- inline-block== *displays inline but you can set width, height, padding, margin
special character escaping
used to "escape" quotation marks ------------------------------------------------ const heSaid = "He said, \"Foo!\""; console.log(heSaid); // => He said "Foo!" ------------------------------------ \n is used for new line.... *whole list on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation
tag
used to mark the beginning and end of an element <...> and </...>
element
usually consists of some content wrapped by opening & closing tags. Some are self closing (ie-- <img> )
a11y
web accessibility for disabled users of any kind
block scope
when a variable is defined within a function...only available within that function
semantic HTML
when choosing an HTML element, choose the one that most CLEARLY ALIGNS with the MEANING of your content - <div> & <span> are elements that hold NO semantic value, used for styling purposes only
conditional application logic
writing programs that can behave differently depending on their inputs * using `if`, `else`, or `else if` * SEE CONTROL FLOW
