Introduction to Javascript

Introduction to Javascript

• Javascript is implemented during the implementation phase of the SDLC

Javascript - What it is

• Javascript is a client-side scripting language
• Javascript runs on the client machine
• Javascript interacts with a copy of the webpage loaded into a web browser on the client's machine
• Javascript adds interactivity to HTML pages
• Javascript is case sensitive

Benefits of Javascript

• Javascript improves user experience
• Javascript Functions control the behavior of the page
• Javascript is used to create pop-ups, transitions, scrolling animations
• Javascript has autocomplete with inbuilt functions
• Node.js can be used for backend development
• Javascript can be used for full stack development

Javascript - Disadvantages

• Javascript depends on the browser type, which requires more testing
• Javascript code is visible to anyone
• Some browsers disable Javascript content as harmful

Inspect in Chrome

• The Chrome console can be used to interact with code and print output
• Access the console by right-clicking and selecting "Inspect - Developer Tools"

How to Write Javascript

• Javascript is similar to CSS
• Embed Javascript within <script> tags in the HTML: <script> ... </script>
• Use a separate file with a .js extension in the head of the HTML
• The <script> tag can also be placed just before the end of the body

Async Defer in <script>

• Without Async/Defer, parsing stops, the script downloads and executes, then parsing continues
• With Async, the script downloads asynchronously, parsing stops, the script executes, then parsing continues
• With Defer, the script downloads asynchronously then executes after parsing is complete

Debugging

• console.log("message") is similar to print statements
• alert("message") displays a pop-up message and pauses execution until the user acknowledges

Other Important Console Methods

• console.log() displays a general log message
• console.error() displays an error message
• console.warn() displays a warning message
• console.assert() displays an error message if the assertion is false
• console.clear() clears the console

Variables

• The var keyword declares variables
• Example: var a = 5; var b = 6; console.log(a, b)
  • This would output: 5 6

Variable Scope

• Javascript uses the keywords const and let

Variable keywords:

• var: Declares a variable, optionally initializing it to a value
• let: Declares a block-scoped, local variable, optionally initializing it to a value
• const: Declares a block-scoped, read-only named constant
• let and const are block scoped within curly brackets {}

Data Types

• Primitive:

  • Number
  • String
  • Boolean
  • Values (Null, Undefined)
  • BigInt for larger numbers

• Object collection of properties:

  • Objects (name: value)
  • Arrays (list of values)
  • Symbol: It serves as non-string property names, everytime returns a unique value

Arrays

• Arrays are a list of values
• Arrays can be created in two ways:
  • Using square brackets: var myArray = [value1, value2]
    • Square brackets [] mark the start and end of the array
    • Elements are separated by commas and can be of any data type.
  • Using the new Array() constructor: var myArray = new Array()

Length of Array

• The length of an array is the number of elements in the array
• You can get the length of an array using .length such as myArray.length

Index of an Array

• The index of an array refers to the position of the element within the array
• The first element has an index of 0
• To retrieve the third element use myArray[2]

Array example

> myArray = ["This", "is", "BT3103"]
< (3) ['This', 'is', 'BT3103']
> myArray.length
< 3
> myArray[0]
< "This"
> myArray[1]
< "is"
> myArray[3]
< undefined

Add elements to Array

• Assign values using square brackets, e.g., myArray[3] = "Class"
  • If the element already exists, it is overwritten
  • Otherwise, a new element is added

Appending and Removing Array Elements

• You can add elements to an array using the .push() method; this adds elements to the end of the array

• You can remove elements from an array using:

  • .shift() to removes the first array element
  • .pop() to removes the last array element

Slice for multiple elements

• Slice(n): This slices all values after the index position n

• Slice(a,b): This slices values from index a (including) to index b (excluding)

Functions

• Function Definition:

function functionName(param1, param2) { 
  statement1; 
  statement2; 
}

• Example:

function displayMsg(userName) { 
  alert("Hello " + userName); 
  }

Invoke Functions

• Invoke a function using the function name followed by parenthesis () which pass the function paramaters

Return from Functions

• The return keyword is used to return a value from a function after processing
• return (functionResult);

Use in Websites - Interactive DOM

• Access elements in Javascript for dynamic websites:
  • CSS:
    • .class{}
    • #id{}
  • Javascript:
    • document.getElementsByClassName
    • document.getElementById

getElementbyId

• document.getElementById("idName") the name of the element retrievable using Javascript

getElementsByClassName

• document.getElementsByClassName("className") is used to retrieve elements that are accessible through javascript by their main class

Events

• An event is a message issued by the browser
• Web pages issue events in response to conditions and user actions
• An event always has a type, which indicates the nature of the event

Common Events

• onchange: When an HTML element has been changed
• onclick: When the user clicks an HTML element
• onmouseover: When the user moves the mouse over an HTML element
• onmouseout: When the user moves the mouse away from an HTML element
• onkeydown: When the user pushes a keyboard key
• onload: When the browser finishes loading the page

Listening to Events

• In order to respond to an event, we need to write code that listens for the event occurring
• This code is the event listener
• The event listener detects the event and evaluates the expression that performs some action in response to the event

Event Handlers

• When an event listener is triggered, the expression it executes is a function or a method call
• The function or method call is the event handler
• Example: <button onclick="myFunction()">Click me</button> - In this example: - Onclick is the Event - myFunction() is the method to be called when the event occurs

Document Object Model (DOM)

• The web browser creates a DOM of a webpage when it loads

• The DOM model is created as a tree of objects

• With DOM, JavaScript can add new elements, update existing elements and react to events

DOM Manipulations

• Javascript changes in the HTML elements of the page
• Javascript changes in the HTML attributes in the page
• Javascript changes in the CSS styles in the page

Example Methods to Manipulate HTML Elements

• getElementById(): Finding HTML elements by id
• getElementsByTagName(): Finding HTML elements by tag name
• getElementsByClassName(): Finding HTML elements by class

Dynamic HTML

• Web pages changed as they are loaded and rendered in the browser

• Such changes are immediately rendered on the screen.

Conditional Statement

• Conditional statements help to display user-specific content

Promises

• Promises are a Javascript object that links producing code and consuming code

Asynchronous

• A task should be performed alongside the original task, without waiting
• Promises have one of these states: -pending: initial state, neither fulfilled or rejected -fulfilled: the operation completed successfully -rejected: the operation failed

Resolving promise methods | .then() and .catch()

• Both Promise.prototype.then() and Promise.prototype.catch() return promises that can be chained
• CCXT (CryptoCurrency eXchange Trading Library)*
• CCXT is a library that provides tools for trading in multiple cryptocurrency exchanges
• All exchanges are derived from the base Exchange class with common methods
• The API's are well bundled in the library CCXT
  • Adding the below to a script grants access to ccxt in code

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ccxt.browser.js"></script>

Retrieving Cryptocurrency Data with CCXT (Illustrative Example)

• To resolve returns the result, a Javascript .then() is used on the promise
• To retrieve the last value:
  • Assign z.then((x) => {} a variable
    • Call the variable index

To implement CCXT with Async/Await:

• Writing async in front of a function makes it asynchronous, it guarantees that the function will then return a promise
  • If data is not returned, await may not have been enabled

Real Time price tracker

• Design cryptocurrency tracker for 5 crypto coins, using CCXT, you are free to use any CSS and prices should be in real time.