JavaScript, web development

Pataasin ang iyong marka sa homework at exams ngayon gamit ang Quizwiz!

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


Kaugnay na mga set ng pag-aaral

English 11a - Unit One: A Certain Shade of Green Lesson 1-4

View Set