Programming in HTML5 with Javascript and CSS3 Flashcards
- npm install
- npm install -g
- installs locally
- installs globally
Class : blueprint of an object
Object: instance of a class
jQuery promises
- always( )
- done( )
- fail( )
- progress( )
REST
Representational state transfer
- Post (create)
- Get
- Put (update)
- Delete
AJAX
Asynchronous Javascript and XML
- XSS
- CORS
- Cross-site scripting
- Cross origin resource sharing
- rel
- lang
- relation
- language
- tr
- td
- th
- row
- detail
- header
- var jsonObject = JSON.parse(xmlhttp.response);
- result.innerHTML = jsonObject.result;
- The response string needs to be converted to an object and the JSON.parse method can accomplish the task
- In addition, the URL must be pieced together by taking the values from text boxes to build this QueryString
- var xmlhttp=new XMLHttpRequest();
- xmlhttp.open(“GET”,”/addition?x=5&y=10”,false);
- xmlhttp.send();
- var xmlDoc=xmlhttp.responseXML;
- The first line creates a new XMLHttpRequest object and assigns it to the xmlhttp variable.
- The next line sets up the request to use the GET method with a relative URL of /addition and QueryString of x=5&y=10.
- The last parameter (false) indicates whether the operation is to be performed asynchronously when false means that operation is synchronous.
padding: 5px 15px;
- 5px for the top and the bottom
- 15 px for the right and the left
AJAX codes
- 0 Uninitialized The open method has not been called yet.
- 1 Loading The send method has not been called yet.
- 2 Loaded The send method has been called; headers and status are available.
- 3 Interactive Downloading; the response properties hold the partial data.
- 4 Completed All operations are finished.
Handling errors
- xmlhttp.addEventListener(“error”, failed, false);
- xmlhttp.addEventListener(“abort”, canceled, false);
- function transferFailed(evt) {
- alert(“An error occurred”);
- }
- function canceled(evt) {
- alert(“canceled by the user”);
- }
Progress event
- xmlhttp.addEventListener(“progress”, updateProgress, false);
- function updateProgress(evt) {
- if (evt.lengthComputable) {
- var percentComplete = evt.loaded / evt.total;
- //display percenComplete
- } else {
- // Need total size to compute progress
- }
- }
Promise object
The promise object has the done, fail, always, and progress methods that accept
a function parameter, which enables you to subscribe to state change. The then()
method on the promise object enables you to subscribe to done, fail, and progress
Deferred object
The deferred object is a wrapper for the promise object. The deferred object provides control of the promise object, which is read-only
$.when() method
Use the $.when() method to monitor the completion of many parallel asynchronous
calls. Use the $.when() method with no parameters to create a resolved promise object
A web worker
A web worker provides asynchronous code execution
TCP
Transmission Control Protocol
URL
Uniform Resource Locator
URI
Uniform resource identifier
- ws://
- wss://
- Websocket
- Secure websocket
- http://
- https://
- Hypertext Transfer Protocol
- Secure Hypertext Transfer Protocol
The readyState property contains one of the following values
- CONNECTING = 0 Connection is not yet open
- OPEN = 1 Connection is open and ready to communicate
- CLOSING = 2 Connection is in the process of closing
- CLOSED = 3 Connection is closed or couldn’t be opened
WebSocket protocol
The WebSocket protocol provides a standardized way for the server to send content to the browser without being solicited by the client, and it allows messages to be passed back and forth while keeping the connection open
MIME types
- Multipurpose Internet Mail Extensions
- Content-types
Codec
A codec is a device or computer program capable of encoding or decoding a digital data stream or signal
The four parameters of the rect method
The first and second parameters are the x and y coordinates of the upper-left
corner of the rectangle. The third parameter is the width, and the fourth parameter is the height
SVG
Scalable Vector Graphics
JSON
Javascript Object Notation
API
Application Program Interface
UI
User Interface
- article
- aside
- figcaption
- figure
- footer
- header
- hgroup
- mark (highlighted text)
- nav
- progress
- section
body > article
article > section
- figure
- figcaption
- for images
- for captions
- getElementById
- getElementsByClassName
- getElementsByTagName
- querySelector
- querySelectorAll
- Gets an individual element on the page by its unique id attribute value
- Gets all the elements that have the specified CSS class applied to them
- Gets all the elements of the page that have the specified tag name or element name
- Gets the first child element found that matches the provided CSS selector criteria
- Gets all the child elements that match the provided CSS selector criteria
window.onload = function ()
Tells the runtime to run your code after the window finishes loading
querySelector
The querySelector method returns the first element it finds that matches the selector criteria passed to it
querySelectorAll
The querySelectorAll method returns all elements that match the selector criteria passed in
appendChild
Use this method to add a new HTML element to the collection of child elements belonging to the calling container
- childNodes
- first child
- lastChild
- hasChildNodes
- A collection of all child nodes of the parent element
- A reference to the very first child node in the list of child nodes of the parent node
- A reference to the very last child node in the list of the child nodes of the parent node
- A useful property that returns true if the parent element has any child nodes at all. A good practice is to check this property before accessing other properties, such as firstChild or lastChild
- beginPath
- moveTo
- lineTo
- stroke
- lineWidth
- strokeStyle
- Resets/begins a new drawing path
- Moves the context to the point set in the beginPath method
- Sets the destination end point for the line
- Strokes the line, which makes the line visible
- Accepts a value that determines the line width
- Lets you change the line color
- arc
- quadradicCurveTo
- bezierCurveTo
- A standard arc based on a starting and ending angle and a defined radius
- A more complex arc that allows you to control the steepness of the curve
- Another complex arc that you can skew
- X, Y
- radius
- startAngle, endAngle
- counterclockwise
- The first two parameters are the X and Y coordinates for the center of the circle
- The third parameter is the radius. This is the length of the distance from the
center point of the circle to the curve - The fourth and fifth parameters specify the starting and ending angles of the arc to be drawn. This is measured in radians, not in degrees
- The final parameter specifies the drawing direction of the arc
context.transform(a,b,c,d,e,f);
- a Scales the drawing horizontally
- b Skew the the drawing horizontally
- c Skew the the drawing vertically
- d Scales the drawing vertically
- e Moves the the drawing horizontally
- f Moves the the drawing vertically
style
style=”property:value”
ex.: style=”font-style:italic”
Geolocation API functions
- watchPosition
- getCurrentPosition
Hide an element
style=”display:none”
Mutiple columns
- columns: column-count column-width
- ex.: columns: 2 auto;
Drop shadow
- box-shadow: vertical offset horizontal offset blur distance color value;
- ex.: box-shadow: 10px 10px 20px black;
- text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;
CSS style set
The element that occurs last will be applied
Variables declared in the global namespace will be parsed before functions
Variables declared in functions need to be declared before they are invoqued
Focus on an element
element.focus();
Rectangle method
- .rect(x, y, width, height);
- .fillRect(x, y, width, height);
- Rotate
- Translate
- Skew
- Scale
- transform: rotate(90deg);
- transform: translate(50px,0px);
- transform: skew(10deg, 10deg);
- transform: scale(1.5);
Display or hide
- style.display = ‘none’;
- style.display == ‘inline’
- visible
- hidden
- collapse
- inherit
- Sets the property to visible to show the element
- Hides the element
- Collapses the element where applicable, such as in a table row
- Inherits the value of the visibility property from the parent