JavsScript Tutorials

CA Projects

CA1

USER REGISTRATION FORM:
Use ReactJS to build a user registration form with validation.

CA1

TO DO LIST:
Use ReactJS to build a to-do list app, with options to add, view and remove list items.

CA2

See this web page

Please submit to Moodle on or before 22 December 2022.

JavaScript Fundamentals

Creating an account for web hosting on GitHub

1: Adding JavaScript to a Web Page

Efficiently adding JavaScript code to a web page, and working with the JavaScript Console in your web browser’s Developer Tools.

View Tutorial

2: Objects, Properties, and Methods

Exploring the navigator (web browser) object, the window object, the location (web address) object, and the document (web page) object.

View Tutorial

3: Variable Types in JavaScript

Working with string, numeric and boolean variables, assigning values with the const and let keywords, and using the typeof opertor to investigate a variable’s type.

View Tutorial

4: Working with the DOM

Understanding the Document Object Model (DOM), and accessing elements in a web page that have or do not have a unique ID.

View Tutorial

5: Working with Strings

Working with string index positions and length, joining and slicing strings, querying strings, and replacing characters.

View Tutorial

Installing and customising Visual Studio Code for web designers

6: Working with Numbers

Performing arithmetic, and using Math object methods for finding max and min values, and generating random numbers.

View Tutorial

Functions in JavaScript

8: Function Declarations

Creating function declarations, passing values to them, and returning a value from a function back to the calling code.

View Tutorial

9: Anonymous Functions

Creating a function expression whose value is stored in a variable. And working with a type of an function expression called an anonymous function.

View Tutorial

10: Arrow Functions

Creating arrow functions, passing values to them, and writing short-hand single-statement arrow functions with implicit returns to the calling code.

View Tutorial

Functions and Events

11: Event Handlers

Invoking functions using event handlers in the HTML file, or with anonymous or arrow functions in the JavaScript code.

View Tutorial

12: Event Listeners

Invoking functions with event listeners, using external function declarations or internal anonymous or arrow functions.

View Tutorial

Loops and Arrays

15: Working with Loops

Creating a for loop with a counter variable, a starting value, a loop condition, and an increment or decrement operator.

View Tutorial

16: Working with Arrays

Creating arrays in JavaScript, populating them with elements, and reading and updating array elements

View Tutorial

17: Arrays and Loops

Using the JavsScript for and forEach loops for accessing and updating the elements of an array,

View Tutorial

Data Tables

Creating and styling HTML tables, adding and deleting table rows with JavaScript, and populating a table from an array of objects.

View Tutorial

The Fetch API

Using the Promise and Response objects of the Fetch API and get plain-text and JSON formatted data from remote web servers.

View Tutorial

Projects

Counter

An increment and decrement counter that changes the colour of the number displayed on the web page.

View Project

Colours

Uses an array of hexadecimal values to randomly generate a background colour for the web page.

View Project

Data Tables

Populates an HTML table with data stored in an array. Includes the option to remove data items.

View Project

Random Quote Generator

Uses the Fetch API to retrieve a randomly-choosen selection of ten inspiring quotations.

View Project

Movies Listings

Uses the Fetch API to retrieve a searchable list of movie titles and images from the Internet Movie Database.

View Project