Section 11: JavaScript: The Basics - Adding Interactivity To Websites

The goals

💪🏻What & Why?

✌🏻Core JavaScript Syntax

👍🏻Examples!

 

What is JavaScript?

A programming language that can be executed by browsers.

The only programming language browsers can execute!

HTML: Define structure and semantics

CSS: Style the elements and page content

JavaScript: Change the page dynamically (without loading a different HTML file), do "behind the scenes" calculations and work & much more!

 

JavaScript Applications & Use-Cases

• Update displayed data behind the scenes (e.g. weather data, stocks data, chat messages, ...)
• Display or use a timer
• Validate user input and show error message + attach error styles to elements
• Display & manage complex overlays
• Re-order, hide / show or remove elements on the screen (e.g. drag-and-drop list)
• Keep (parts of) websites working, even if the internet connection is lost

What is Syntax?

When referring to a programming language, the syntax is a set of rules for grammar and spelling. In other words, it means using character structures that a computer can interpret. For example, if a user tries to execute a command without proper syntax, the compiler finds this error and generates a syntax error, usually causing the program to fail.

Core JavaScript Syntax & Features

Understanding Values

string, number, boolean, undefined, null...

 

Understanding Variables

Variables are "labeled data containers"

 

Understanding Array

In JavaScript, an array is an ordered list of values. Each value is called an element specified by an index.

An JavaScript array has the following characteristics:

1. First, an array can hold values of mixed types. For example, you can have an array that stores elements with the types number, string, and boolean.
2. Second, the size of an array is dynamic and auto-growing. In other words, you don’t need to specify the array size upfront.

Understanding Object

It is used to store various keyed collections and more complex entities. Objects can be created using the Object() constructor or the object initializer / literal syntax.

In JavaScript, an object is an unordered collection of key-value pairs. Each key-value pair is called a property.

The key of a property can be a string. And the value of a property can be any value, e.g., a string, a number, an array, and even a function.

JavaScript provides you with many ways to create an object. The most commonly used one is to use the object literal notation.

The following example creates an empty object using the object literal notation:

let empty = {};

To create an object with properties, you use the key:value within the curly braces. For example, the following creates a new person object:

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

The person object has two properties firstName and lastName with the corresponding values 'John' and 'Doe'.

When an object has multiple properties, you use a comma (,) to separate them like the above example.

Understanding Function

Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. To use a function, you must define it somewhere in the scope from which you wish to call it.

 

Function declarations

A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:

• The name of the function.
• A list of parameters to the function, enclosed in parentheses and separated by commas.
• The JavaScript statements that define the function, enclosed in curly brackets, { /* … */ }.

 Methods

A Javascript method is an action done on an object, and it is a property that holds a function definition, for example, suppose you have a function that has firstName, lastName, regno, and a method with the name of fullName that returns the first name and the last name of a person i-e the full name of a person. The fullName is the property and the function is the value.

 

const student = {
  firstName: "Jhon",
  lastName: "Cena",
  Regno: 12311,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

alert(student.fullName());

The fullName() is the method of the student object and acts as a property. The fullName is executed like a function when invoked with () however it should be kept in mind that it is a property.

 

 

We used this keyword in the above example because we wanted to access the property of an object within a method of the same object.

Suppose we invoked the fullName without the parenthesis () then it will simply return the function definition:

 

 

Method Addition to an Object

We can also add a new method to an object in JavaScript easily. We will change the above example code slightly to achieve our purpose i-e we will add a method to an object:

 

const student = {
  firstName: "Jhon",
  lastName: "Cena",
  Regno: 12311,
};

student.name = function() {
  return this.firstName + " " + this.lastName;
};

alert("Student Full Name: " + student.name());

Built-In JavaScript Methods

 

Built-in methods or functions are predefined pieces of code in a program or programming framework or a programming language that performs some specific task. This makes programming easy as programmers don’t have to create a new method or function and can simply directly use the built-in methods in their application. Like any other programming language, JavaScript also offers some Built-in methods for example:

 

let name = "Jhon Cena";

alert(name.toUpperCase());

In the above example, we declared a name and then alert that name by using the inbuilt method toUpperCase() and we can see in the screenshot above that the name was converted to upper case. Apart from the toUpperCase(), there are also numerous built-in methods that we can use, for example:

 

• Date()
• Date.now()
• Math.round(num)
• Math.floor(num)
• string.length()
• string.toLowerCase()
• Array.length
• array.push()

JavaScript Arithmetic Operators

 

 

Sources

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions

Functions - JavaScript | MDN

https://linuxhint.com/what-is-a-method-in-javascript/

What is a method in JavaScript?

https://www.w3schools.com/jsref/jsref_operators.asp

JavaScript Operators Reference