JavaScript Resources

JavaScript Fundamentals: Understanding Events – Timothy Robards

JavaScript Fundamentals: Master the DOM! (Part 1) –Timothy Robards

getElementById()

Instant Action When Dropdown Selection Is Made – Will Bontrager

Summary: Someone makes a selection from a dropdown list and an action occurs, it occurs immediately. What happens can be pretty much anything that you can code with JavaScript — examples are redirecting to another web page, initiating a download of the selected option, and setting a cookie with a hat size selection for a shopping cart.

There are two parts to this instant-action functionality:

1. The onchange attribute in the HTML select tag. The attribute sends information to the JavaScript whenever a dropdown list selection has changed.
2. The JavaScript. The JavaScript does whatever action you code it to do, probably something related to the dropdown list option that was selected.

Javascript Functions – Parameter, Argument, Property?

What does the “x” mean/do in function (x)?

• Question: What is the “x” inside the parenthesis (x) called – a parameter, an argument, a property?
• Answer: Parameter

Parameter (source: Hackinbits)

Functions in Javascript

A javascript function takes parameters as input and returns a value.

function addTwoNumbers(a, b) {
	return a+b;
}

Javascript function definition starts with the function keyword, followed by:

1. Name of the function (eg: addTwoNumbers)
2. Parameters, if any, wrapped with parenthesis and separated by a comma (eg: a, b)
3. The function body – series of statements inside curly brackets { } (eg: return a+b;)

function greetings(name) {
	alert('Hi' + name);
}

1. function – function keyword
2. greetings – function name
3. (name) – parameter
4. alert('Hi' + name); – function body with 1 statement

Parameter (source: MDN Mozilla Developer Network)

A parameter is a named variable passed into a function. Parameter variables are used to import arguments into functions.

function example(parameter) {
  console.log(parameter); // Output = foo
}
const argument = "foo";
example(argument);

Note the difference between parameters and arguments:

• Function parameters are the names listed in the function’s definition.
• Function arguments are the real values passed to the function.
• Parameters are initialized to the values of the arguments supplied.

Two kinds of parameters:

• input parameters
  • the most common kind; they pass values into functions. Depending on the programming language, input parameters can be passed in several ways (e.g., call-by-value, call-by-address, call-by-reference).

• output/return parameters
  • primarily return multiple values from a function, but are not recommended since they cause confusion

The () Operator Invokes the Function

Using the examples below, toCelsius refers to the function object, and toCelsius() refers to the function result.

Accessing a function without () will return the function object instead of the function result.

Convert Fahrenheit to Celsius by accessing the function result toCelsius(77) (with the () operator); see line 4:

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);

Convert Fahrenheit to Celsius by accessing the function object toCelsius (without the () operator); see line 4:

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

Source: JavaScript Functions – W3Schools

Functions – MDN (Mozilla Developer Network)

Defining functions: The function declaration:

The parameters of a function call are the function’s arguments.

function name([parameter[, parameter[, ... parameter]]]) {
  statements
}

• name: The function name.
• parameter: The name of an argument to be passed to the function.
• statements: The statements comprising the body of the function.

Function declarations

The following code defines a simple function named square:

function square(number) {
  return number * number;
}

The function square takes one parameter, called number. The function consists of one statement that says to return the parameter of the function (that is, number) multiplied by itself. The statement return specifies the value returned by the function:

return number * number;

Calling functions

Defining a function does not execute it. Defining it names the function and specifies what to do when the function is called.

Calling the function actually performs the specified actions with the indicated parameters. For example, if you define the function square, you could call it as follows:

square(5);

The preceding statement calls the function with an argument of 5. The function executes its statements and returns the value 25.

Functions must be in scope when they are called, but the function declaration can be hoisted (appear below the call in the code). The scope of a function declaration is the function in which it is declared (or the entire program, if it is declared at the top level).

Prototype

Inheritance and the prototype chain – MDN (Mozilla Developer Network)

When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property which holds a link to another object called its prototype.

When trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end of the prototype chain is reached.

Following the ECMAScript standard, the notation someObject.[[Prototype]] is used to designate the prototype of someObject.

Inspecting prototypes: a deeper dive – MDN (Mozilla Developer Network)

In JavaScript, functions are able to have properties. All functions have a special property named prototype.

Note: The code below is free-standing. For the best learning experience, it is highly recommended that you open a console, navigate to the “console” tab, copy-and-paste in the below JavaScript code, and run it by pressing the Enter/Return key.

We can add properties to the prototype of doSomething(), as shown below:

function doSomething() {}
doSomething.prototype.foo = 'bar';
console.log(doSomething.prototype);

We can now use the new operator to create an instance of doSomething() based on this prototype. To use the new operator, call the function normally except prefix it with new. Calling a function with the new operator returns an object that is an instance of the function. Properties can then be added onto this object.

Try the following code:

function doSomething() {}
doSomething.prototype.foo = 'bar'; // add a property onto the prototype
const doSomeInstancing = new doSomething();
doSomeInstancing.prop = 'some value'; // add a property onto the object
console.log(doSomeInstancing);