Web Technologies Lecture Week 3: Javascript Basics

Internet Software Architecture

• This is a course, or lecture, on Internet Software Architecture.
• Page 1 displays the course title alongside the institution logo.

Web Technologies Lecture Week 3

• This is a further lecture/course on Web Technologies—Week 3.
• Page 2 displays the course title, week number, and topic—Introduction to Javascript.

This Week's Agenda

• Introduction to Javascript
• Exploring the console
• Declaring variables and functions
• Conditional statements
• Javascript loops
• Understanding objects and arrays

Introduction to Javascript

• Javascript was created to make web pages interactive.
• Javascript code is written as plain text.
• Javascript programs can run when a webpage loads.
• Javascript programs do not require special preparation or compilation.
• Javascript can run in browsers, servers, or devices with a Javascript Engine.
• Different Javascript engines have different codenames: (V8-Google Chrome & Opera, SpiderMonkey -Firefox, ChakraCore - Microsoft Edge, Nitro & SquirrelFish -Safari)
• Understanding these engines is important for referencing developer articles.

Introduction to Javascript

• Javascript code can be written directly into the HTML document.
• Or, written in a separate ".js" file; this is generally preferred.
• If writing directly into HTML, it must be enclosed in a <script> tag.
• Separate files do not require a <script> tag.

Exploring the Console

• The console is an in-browser tool used while coding with Javascript.
• The console is a Read-Evaluate-Print-Loop (REPL).
• It reads user input (Javascript code), evaluates it, and prints the result.
• It allows repeated evaluation and input in a looped manner.
• The console is used for debugging.

Exploring the Console

• The console is considered an object within the browser and can be used to access the browser's debug console.
• Console objects function solely in the browser console; they do not function on pages.
• Popular console methods include: console.log(), console.table(), and console.clear().

Declaring Variables

• Javascript variables can be declared using three keywords: var, let, and const
• Each keyword defines a variable with different scopes.
• var is a global scope variable.
• let creates a block scope variable.
• const defines a variable with a constant value.

Declaring Variables Examples (var)

• var is used as a global scope variable
• The values of the variables declared using var can be modified.

Declaring Variables Examples (let)

• let is a block-scoped variable.
• The values for variables declared with let can be modified.

Declaring Variables Examples (const)

• const is a block-scoped variable with a fixed value.
• Any attempt to modify const variable will cause an error.

Declaring Functions

• Functions are the fundamental building blocks of Javascript programs.
• A function is a set of instructions to perform a task or calculation.
• Function declaration consists of: the function keyword, the name of the function, the parameter list, and the code block.
• The return statement is used for returning values from functions.

Declaring Functions: Return Value

• Functions should always return a value (object, boolean etc).
• When return is absent, a undefined value will be returned

Conditional Statements

• if statements specify a block of code for execution when a condition is true.
• else statements specify code to be executed when the condition is false.
• else if clauses allow for testing new conditions when prior conditions are false.
• switch statements handle alternative code blocks based on different conditions for a single variable.

If Statement Example

• if statements execute conditionally based on a condition.

If...Else Statement Example

• if...else statements execute different code blocks based on whether a condition is true or false.

If... Else If... Else Example

• if...else if...else execute a series of conditional statements, testing different conditions.

Switch Statement Examples

• Multi-branching condition evaluations using switch statements.

Javascript Loops

• Javascript uses loops to repeat blocks of code.
• for loops iterate a set number of times (based on counters)
• for...in loops iterate over properties of objects
• while loops iterate as long as a certain condition is true
• do...while loops also iterate until a condition is fulfilled, but will always run at least once.

Javascript Loop: For Example

• for loops are used to execute code repeatedly.

Javascript Loop: For...in Example

• for...in loops, iterate through the properties of an object.

Javascript Loop: While Example

• while loops continue to execute as long as a condition is met.

Javascript Loop: Do While Example

• do...while loops execute at least once based on a condition being met.

Javascript Objects

• Objects in Javascript are similar to real-world objects (with properties and behaviours)
• Objects in Javascript have properties (values) and methods (behaviours).
• Javascript does not use classes like C++ or Java.
• Objects are created directly and based on templates.
• In javascript everything is an object, including variables with string values.

Creating Javascript Objects

• Objects can be created by defining properties and methods or using predefined properties and methods.
• Three ways to create Javascript objects (Literal, Instance and Constructor Notation).

Javascript Objects: Literal Notation Example

• Simple way to create Javascript objects—useful for small programs.

Javascript Objects: Instance of an Object Example

• Creating new objects with the new keyword and the Object constructor.

Javascript Arrays

• Arrays are collections of homogeneous items, although javascript does not enforce homogeneity on the contents.
• Javascript arrays store values contiguously in memory, unlike Java.
• Arrays can contain a range of data types: strings, numbers, booleans, objects
• Arrays' index starts from zero.

Javascript Arrays: Literal Example

• Demonstrates how arrays can be created with literals.

Javascript Arrays: Instance Example

• Illustrates instantiating arrays using the new Array() approach. (Similar to object creation example).

Summary of Week 3 Lecture

• This page lists the topics covered in week 3 of the course, linked to the specific slide within the presentation.

What to Expect in Lab

• The expectations for the practical lab sessions include revisions of Javascript basics, a first Javascript program exercise, and practical exercises building on the lecture content. Research is stressed.

Before you come to Lab, Research!

• These are topics to research/understand before the practical sessions.

This quiz covers essential concepts from Week 3 of the Web Technologies course, focusing on Introduction to Javascript. You will explore the console, variables, functions, conditional statements, loops, and the fundamentals of objects and arrays in Javascript. Test your knowledge on the interactive features and functionalities that Javascript brings to web pages.