Skip to content

unioncollege-webtech/final-exam-study-guide

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 

Repository files navigation

Final Exam Study Guide

The final exam in Web Technologies covers basic JavaScript language features as well as important HTTP topics such as methods, status codes, and headers.

JavaScript

Data Types

JavaScript has 6 primitive data types:

  • string - a sequence of characters, "Howdy" or 'Howdy'
  • number - any numeric value, 42, or 3.141592
  • boolean - true and false
  • null - a special keyword denoting a null value
  • undefined - a value automatically assigned to variables that don't yet have a value
  • symbol - new in ECMAScript 6

And one complex data type:

  • object - containers that have properties, and often methods, constructors, and prototypes

Variable Declarations

The var keyword is used to declare a variable:

var counter;

A variable declaration can optionally initialize the variable with a value.

var counter = 0;

Strings

A string literal is zero or more characters enclosed in double (") or single (') quotation marks. There is no separate "char" type for individual characters.

var doubleQuoted = "This is a double-quoted string";
var singleQuoted = 'This uses single quotes';
var singleChar = 'a';

String Concatenation

The Addition (+) operator is used for string concatenation.

var hello = "Hello";
console.log( hello + " world" );
// => "Hello world"

String Properties and Methods

Strings have methods and properties defined on the String.prototype object:

  • .length: A property which reflects the number of characters in the string
"hello".length // => 5

Numbers

Numbers represent numeric values. Note that there is only one number type, represented in 64-bit double-precision floating-point format

var answer = 42;
var pi = 3.14159;

Arithmetic Operators

JavaScript defines several arithmetic operators which take numerical values (either literals or variables) as their operands and return a single numerical value.

  • + Addition operator

    3 + 4 // => 7
    
  • - Subtraction operator

    3 - 4 // => -1
    
  • * Multiplication operator

    3 * 4 // => 12
    
  • / Division operator

    3 / 4 // => 0.75
    
  • % Remainder operator

    4 % 3 // => 1
    

Assignment Operators

  • = Assignment operator: assigns a value to its left operand based on the value of its right operand.

    var x = 10;     // The variable `x` now has the value `10`
    console.log(x);
    // => 10
    
  • += Addition assignment: adds the value of the right operand to a variable and assigns the result to the variable

    var x = 10;
    x += 5;    // Equivalent to: x = x + 5
    
  • -= Subtraction assignment

  • *= Multiplication assignment

  • /= Division assignment

  • %= Modulus assignment

Assignment operators on MDN

Increment Operators

  • ++ Increment operator: increase a reference’s value by one and return the new value
    • Postfix: Return the original value before incrementing

      var a = 3;
      var b = a++;     // b: 3, a: 4
      
    • Prefix: Return the new (incremented) value

      var a = 3;
      var b = ++a;     // b: 4, a: 4
      

Operators: Decrement

  • -- Decrement operator: decrease a reference’s value by one and return the new value
    • Postfix: Return the original value before decrementing

      var a = 3;
      var b = a--;     // b: 3, a: 2
      
    • Prefix: Return the new (decremented) value

      var a = 3;
      var b = --a;     // b: 2, a: 2
      

Math

The global Math object has utilities for dealing with numbers.

  • Math.round(x) : Returns the value of a number rounded to the nearest integer.
Math.round(3.14)   // =>  3
Math.round(1.618)  // =>  2
Math.round(-3.14)  // => -3
Math.round(-1.618) // => -2

Booleans

Booleans represent one of two values: true or false. The keyword true (lowercase) and false (lowercase) are the only two boolean types.

var answer = true;
var differentAnswer = false;

Equality operators

  • == Equality
  • === Strict/identity equality
  • != Inequality
  • !== Strict/identity inequality

Equality operators

Equality operator

x == y

The equality operator converts the operands if they are not of the same type, then applies strict comparison.

console.log(1 == 1);      // => true
console.log(1 == '1');    // => true
console.log(true == '1'); // => true
console.log(0 == 0);      // => true
console.log(0 == '0');    // => true
console.log(0 == '');     // => true
console.log(false == '0');// => true
var x = {};
var y = x;
console.log(x == y);       // => true

Inequality operator

x != y

The inequality operator converts operands if they are not of the same type, then returns true if the operands are not equal.

console.log(1 != 1);      // => false
console.log(1 != '1');    // => false
console.log(true != '1'); // => false
console.log(1 != 0);      // => true
console.log('apples' != 'oranges'); // => true
var x = {};
var y = {};
console.log(x != y);      // => true

Identity / strict equality operator

x === y

The identity operator returns true if the operands are strictly equal (see above) with no type conversion.

console.log(1 === 1);      // => true
console.log(1 === '1');    // => false
console.log(true === '1'); // => false
console.log(0 === 0);      // => true
console.log(0 === '0');    // => false
console.log(0 === '');     // => false
console.log(false === '0');// => false
var x = {};
var y = x;
console.log(x === y);       // => true

Identity / strict inequality operator

x !== y

The non-identity operator returns true if the operands are not equal and/or not of the same type.

console.log(1 !== '1') // true
console.log(1 !== 2)   // true

Relational operators

  • > Greater than
    3 > 4 // => false
    4 > 4 // => false
    5 > 4 // => true
    
  • >= Greater than or equal
    3 >= 4 // => false
    4 >= 4 // => true
    5 >= 4 // => true
    
  • < Less than operator
    3 < 4 // => true
    4 < 4 // => false
    5 < 4 // => false
    
  • <= Less than or equal
    3 <= 4 // => true
    4 <= 4 // => true
    5 <= 4 // => false
    

Relational operators

If statement

if (condition)
   statement1
else               // optional `else`
   statement2

Executes statement1 if a condition is true. If condition is false, statement2 is executed.

if...else statement

Conditional (ternary) operator

condition ? expression1 : expression2

Return expression1 if condition is true, otherwise return expression2

Conditional (ternary) operator

Logical operators

  • &&   Logical AND
  • ||   Logical OR
  • !     Logical NOT

Logical operators

Truthiness

JavaScript coerces primitives and objects to a Boolean when a Boolean is expected.

Falsy

The following 6 values are considered false in a boolean context:

  • false
  • 0
  • '' (empty string)
  • null
  • undefined
  • NaN

Truthy

A value is “truthy” if it is not “falsy.”

The following values (among many others) are considered true in a boolean context:

  • true
  • "hi"
  • 12
  • -1
  • [] (empty array)
  • {} (empty object)

for loops

Syntax:

for ([initialization]; [condition]; [final-expression])
   statement
// Log the numbers 1 through 10
for (var i = 1; i <= 10; i++) {
   console.log( i );
}

for reference on MDN

for loops: Arrays

A common use case for for loops is looping through array values:

var scores = [89, 98, 92, 69, 87, 53];
for (var i = 0; i < scores.length; i++) {
   console.log( scores[i] );
}

Arrays

An array is an ordered set of numerically-indexed values.

Arrays can be created using the global Array function (not recommended) or by using the Array literal: []

var empty = [];
var scores = [88, 75, 84, 100, 77, 105, 86];
var books = ["To Kill a Mockingbird", "Prince Caspian", "The Hitchhiker’s Guide to the Galaxy"]

Array values can accessed or assigned by a numeric index

console.log( books[0] );  // => "To Kill a Mockingbird"
books[0] = "Fellowship of the Ring";
console.log( books[0] );  // => "Fellowship of the Ring"

Introduction to Arrays on MDN

Array methods: push

push() adds one or more elements to the end of an array and returns the resulting length of the array.

var myArray = ["1", "2"]
myArray.push("3"); // myArray is now ["1", "2", "3"]

Array methods: sort

sort([sortFunction]) sorts the elements of an array.

var myArray = ["Wind", "Rain", "Fire"];
myArray.sort(); 
// sorts the array so that myArray = [ "Fire", "Rain", "Wind" ]

sort() can also take a callback function to determine how array elements are compared. The function compares two values and returns one of three values:

  • if a is less than b by the sorting system, return -1 (or any negative number)
  • if a is greater than b by the sorting system, return 1 (or any positive number)
  • if a and b are considered equivalent, return 0.

For instance, the following will sort by the last letter of a string:

var sortFn = function(a, b){
  if (a[a.length - 1] < b[b.length - 1]) return -1;
  if (a[a.length - 1] > b[b.length - 1]) return 1;
  if (a[a.length - 1] == b[b.length - 1]) return 0;
}
myArray.sort(sortFn); 
// sorts the array so that myArray = ["Wind","Fire","Rain"]

Array methods: indexOf

indexOf(searchElement[, fromIndex]) searches the array for searchElement and returns the index of the first match.

var a = ['a', 'b', 'a', 'b', 'a'];
console.log(a.indexOf('b')); // logs 1
// Now try again, starting from after the last match
console.log(a.indexOf('b', 2)); // logs 3
console.log(a.indexOf('z')); // logs -1, because 'z' was not found

Array methods: forEach

forEach(callback[, thisObject]) executes callback on every array item.

var a = ['a', 'b', 'c'];
// log each item in the array
a.forEach(function(element) {
  console.log(element);
}); 

Array methods: map

map(callback[, thisObject]) returns a new array of the return value from executing callback on every array item.

var a1 = ['a', 'b', 'c'];
var a2 = a1.map(function(item) { return item.toUpperCase(); });
console.log(a2); // logs A,B,C

Array methods: filter

filter(callback[, thisObject]) returns a new array containing the items for which callback returned true.

var a1 = ['a', 10, 'b', 20, 'c', 30];
var a2 = a1.filter(function(item) {
  return typeof item == 'number';
});
console.log(a2); // logs 10,20,30

Objects

Objects are lists of values similar to arrays, except values are identified by keys instead of integers.

Here is an example:

var foodPreferences = {
  pizza: 'yum',
  salad: 'gross'
};

You can access and manipulate object properties –– the keys and values that an object contains –– using a method very similar to arrays.

console.log(foodPreferences['pizza']);

The above code will print the string 'yum' to the terminal.

Alternately, you can use dot notation to get identical results:

foodPreferences.pizza;

foodPreferences['pizza'];

The two lines of code above will both return yummy.

Functions

A function is a block of code that takes input, processes that input, and then produces output.

function example (x) {
  return x * 2;
}

We can call that function like this to get the number 10:

example(5);

Function Arguments

A function can be declared to receive any number of arguments. Arguments can be from any type. An argument could be a string, a number, an array, an object and even another function.

function example (firstArg, secondArg) {
  console.log(firstArg, secondArg);
}

We can call that function with two arguments like this:

example('hello', 'world');

Methods

A function that is a property of an object is known as a method. Methods can refer to their parent object by using the keyword this.

var student = {
  name: "Ben",
  speak: function() {
    console.log(this.name);
  }
};

student.speak();
// => "Ben"

Constructor Functions

JavaScript uses functions (not classes) to create user-defined objects. This requires two steps:

  • Define the object type by writing a function.
  • Create an instance of the object with new.

To define an object type, create a function for the object type that specifies its name and properties.

When the code new Foo(...) is executed, the following things happen:

  1. A new object is created, inheriting from Foo.prototype.
  2. The constructor function Foo is called with the specified arguments, and with this bound to the newly created object. new Foo is equivalent to new Foo(), i.e. if no argument list is specified, Foo is called without arguments.
  3. The object returned by the constructor function becomes the result of the whole new expression. If the constructor function doesn't explicitly return an object, the object created in step 1 is used instead. (Normally constructors don't return a value, but they can choose to do so if they want to override the normal object creation process.)
// Constructor function
function Car(color) {
  this.color = color
}

// New instance of Car()
var car1 = new Car('black');
var car2 = new Car('red'); 

console.log(car1.color);   // "black"
console.log(car2.color);   // "red"

new operator

Prototype

You can add a shared property to all instances of an object type by using the function's .prototype property. The function's prototype property is shared by all objects created with that function, rather than by just one instance of the object type. The following code adds a .drive() method to all Car instances. The this binding inside a prototype method refers to instance the method is being called for. For more information, see Object prototypes.

// Constructor function
function Car(color) {
  this.color = color
}
Car.prototype.drive = function () {
  console.log("The " + this.color + " car is driving")
}

// New instance of Car()
var car1 = new Car('black');
car1.drive();    // "The black car is driving"

HyperText Transfer Protocol

HTTP is an application level protocol for communication between a user-agent (typically a browser) and a server. From the HTTP 1.1 Specification:

The HTTP protocol is a request/response protocol. A client sends a request to the server in the form of a request method, URI, and protocol version, followed by a MIME-like message containing request modifiers, client information, and possible body content over a connection with a server. The server responds with a status line, including the message's protocol version and a success or error code, followed by a MIME-like message containing server information, entity metainformation, and possible entity-body content.

HTTP Methods

HTTP defines several Methods which indicate the action to take for the specified resource. See the Method Definitions in the HTTP 1.1 specification.

The OPTIONS method represents a request for information about the communication options available on the request/response chain identified by the Request-URI.

method allows the client to determine the options and/or requirements associated with a resource, or the capabilities of a server, without implying a resource action or initiating a resource retrieval.

The GET method means retrieve whatever information (in the form of an entity) is identified by the Request-URI.

The HEAD method is identical to GET except that the server MUST NOT return a message-body in the response.

The metainformation contained in the HTTP headers in response to a HEAD request SHOULD be identical to the information sent in response to a GET request. This method can be used for obtaining metainformation about the entity implied by the request without transferring the entity-body itself. This method is often used for testing hypertext links for validity, accessibility, and recent modification.

The POST method is used to request that the origin server accept the entity enclosed in the request as a new subordinate of the resource identified by the Request-URI. POST was originally designed to allow a uniform method to cover the following common functions:

  • Posting a message to a bulletin board, newsgroup, mailing list, or similar group of articles;
  • Providing a block of data, such as the result of submitting a form, to a data-handling process;
  • Annotating or altering existing resources.

The PUT method requests that the enclosed entity be stored under the supplied Request-URI.

The DELETE method requests that the origin server delete the resource identified by the Request-URI.

Specified in RFC 5789, the PATCH method requests that a set of changes described in the request entity be applied to the resource identified by the Request-URI.

Safe and Idempotent Methods

Safe Methods

GET and HEAD methods are considered "safe", meaning they SHOULD NOT have the significance of taking an action other than retrieval. GET and HEAD requests should not alter the resource being requested.

Idempotent Methods

The methods GET, HEAD, PUT and DELETE are considered "idempotent", meaning multiple identical requests for the same resource should have the same side-effects as a single request for that resource. POST methods are NOT expected to be idempotent.

HTTP statuses indicate the result of the attempt to understand and satisfy the request. The status consists of a Status-Code and a short textual description known as the Reason-Phrase. The Status-Code is a 3-digit integer. The first digit of the Status-Code defines the class of response. The last two digits do not have any categorization role. There are 5 values for the first digit:

  • 1xx: Informational - Request received, continuing process
  • 2xx: Success - The action was successfully received, understood, and accepted
  • 3xx: Redirection - Further action must be taken in order to complete the request
  • 4xx: Client Error - The request contains bad syntax or cannot be fulfilled
  • 5xx: Server Error - The server failed to fulfill an apparently valid request

The client SHOULD continue with its request. This interim response is used to inform the client that the initial part of the request has been received and has not yet been rejected by the server. The client SHOULD continue by sending the remainder of the request or, if the request has already been completed, ignore this response.

The request has succeeded. The information returned with the response is dependent on the method used in the request

The requested resource has been assigned a new permanent URI (identified by the Location field in the response) and any future references to this resource should use the new URI. This response is cacheable unless indicated otherwise.

The requested resource resides temporarily under a different URI. Since the redirection might be altered on occasion, the client SHOULD continue to use the Request-URI for future requests. This response is only cacheable if indicated by a Cache-Control or Expires header field.

If the client has performed a conditional GET request and access is allowed, but the document has not been modified, the server SHOULD respond with this status code. The 304 response MUST NOT contain a message-body, and thus is always terminated by the first empty line after the header fields.

The request could not be understood by the server due to malformed syntax. The client SHOULD NOT repeat the request without modifications.

The request requires user authentication.

The server understood the request, but is refusing to fulfill it. Authorization will not help and the request SHOULD NOT be repeated.

The server has not found anything matching the Request-URI. No indication is given of whether the condition is temporary or permanent.

The requested resource is no longer available at the server and no forwarding address is known. This condition is expected to be considered permanent.

The server encountered an unexpected condition which prevented it from fulfilling the request.

The server is currently unable to handle the request due to a temporary overloading or maintenance of the server.

Message Headers

HTTP header fields consist of a name followed by a colon (":") and the field value. There are four different categories of header fields:

  • general: have general applicability for both request and response messages, but which do not apply to the entity being transferred
  • request: allow the client to pass additional information about the request, and about the client itself, to the server. These fields act as request modifiers, with semantics equivalent to the parameters on a programming language method invocation.
  • response: allow the server to pass additional information about the response which cannot be placed in the Status- Line. These header fields give information about the server and about further access to the resource identified by the Request-URI.
  • entity: define metainformation about the entity-body or, if no body is present, about the resource identified by the request.

About

A study guide for the final exam in Web Technologies

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published