My JavaScript Notebook I

***** On Monday, 9/10/18, I started learning the fundamentals of JavaScript on sololearn.com. *****

***** On Saturday, 1/12/19, I completed the JavaScript Tutorial course and was issued the certificate. *****

TAKE NOTE THAT THIS IS NOT A .JS FILE BECAUSE IT WILL BE A PLAIN TEXT FILE. INSTEAD, JAVASCRIPT WILL BE IMPLEMENTED INTO A .HTML FILE. THIS CAN BE DONE VIA INTERNAL JAVASCRIPT OR EXTERNAL JAVASCRIPT.

Module 4: Functions

I. User-Defined Functions

JavaScript Functions

A JavaScript function is a block of code designed to perform a particular task.
The main advantages of using functions:
Code reuse: Define the code once, and use it many times.
Use the same code many times with different arguments, to produce different results.

Defining a Function

To define a JavaScript function, use the function keyword, followed by a name, followed by a set of parentheses ().

The code to be execeuted by the function is placed inside curly brackets {}.

Syntax:

function name() {
  //code to be executed
}

Calling a Function

To execute the function, you need to call it.
To call a function, start with the name of the function, then follow it with the arguments in parentheses.

Example:

→  JavaScript Code in JS  ←

function myFunction() {
  alert("Calling a Function!");
}

myFunction();
//Alerts "Calling a Function!"

Calling Functions

Once the function is defined, JavaScript allows you to call it as many times as you want to.

→  JavaScript Code in JS  ←

function myFunction() {
  alert("Alert box!");
}

myFunction();
//"Alert box!"

// some other code

myFunction();
//"Alert box!"

II. Function Parameters

Function Parameters

Functions can take parameters.
Function parameters are the names listed in the function's definition.

Syntax:

functionName(param1, param2, param3) {
  // some code
}

Using Parameters

After defining the parameters, you can use them inside the function.

→  JavaScript Code in JS  ←

function sayHello(name) {
  alert("Hi," + name);
}

sayHello("Samjat");
// Alerts "Hi, Samjat"

This function takes in one parameter, which is called name. When calling the function, provide the parameter's value (argument) inside the parentheses.

Function Parameters

You can define a single function, and pass different parameter values (arguments) to it.

→  JavaScript Code in JS  ←

function sayHello(name) {
  alert("Hi," + name);
}

sayHello("Samjat");
sayHello("Abe");
sayHello("Michael");

III. Using Multiple Parameters with Functions

Multiple Parameters

You can define multiple parameters for a function by comma-separating them.

Syntax:

function myFunc(x, y) {
  // some code
}

The parameters are used within the function's definition.

Syntax:

function sayHello(name, age) {
  document.write( name + " is " + age + " years old.");
}

When calling the function, provide the arguments in the same order in which you defined them.

→  JavaScript Code in JS  ←

function sayHello(name, age) {
  document.write( name + " is " + age + "years old.");
}

sayHello("Samjat", 24);
  // Outputs " Samjat is 24 years old."

After defining the function, you can call it as many times as needed.
JavaScript functions do not check the number of arguments received.

IV. The return Statement

Function Return

A function can have an optional return statement. It is used to return a value from the function.

This statement is useful when making calculations that require a result.

Use the return statement to return a value.

For example, let's calculate the product of two numbers, and return the result.

→  JavaScript Code in JS  ←

function myFunction(a, b) {
  return a * b;
}

var x = myFunction(5, 6);
// Return value will end up in x
// x equals 30

Another example:

→  JavaScript Code in JS  ←

function addNumbers(a, b) {
  var c = a+b;
  return c;
}

document.write( addNumbers(40, 2) );
// Outputs 42

V. Alert, Prompt, Confirm

The Alert Box

JavaScript offers three types of popup boxes, the Alert, Prompt. and Confirm boxes.

Alert Box
An alert box is used when you want to ensure that information gets through to the user.
When an alert box pops up, the user must click OK to proceed.
The alert function takes a single parameter, which is the text displayed in the popup box.

Example:

→  JavaScript Code in JS  ←

alert("Do you really want to leave this page?");

To display line breaks within a popup box, use a backslash followed by the character "n".

→  JavaScript Code in JS  ←

alert("Hello\nHow are you?");

The Prompt Box

A prompt box is often used to have the user input a value before entering a page.
When a prompt box pops up, the user will have to click either OK or Cancel to proceed after entering the input value.
If the user clicks OK, the box returns the input value. If the user clicks Cancel, the box returns null.

The prompt() method takes two parameters.

• The first is the label, which you want to display in the text box.
• The second is a default string to display in the text box (optional).

Example:

→  JavaScript Code in JS  ←

var user = prompt("Please enter your name");
alert(user);

The Confirm Box

A confirm box is often used to have the user verify or accept something.
When a confirm box pops up, the user must click either OK or Cancel to proceed.
If the user clicks OK, the box returns true. If the user clicks Cancel, the box returns false.

Example:

→  JavaScript Code in JS  ←

var result = confirm("Do you really want to leave this page?");
if (result == true) {
  alert("Thanks for visiting");
}
else {
  alert("Thanks for staying with us");
}

Go to top
« Previous 1 2 3 4 5 6 7 8 Next »