top of page

Javascript

Advanced JavaScript: Web Development and Beyond

This course provides an in-depth exploration of JavaScript, the primary programming language for client-side web development. Students will gain hands-on experience designing, coding, testing, and debugging JavaScript programs. While the focus will be on client-side development, the course will also touch on server-side scripting with Node.js.

Prerequisites: Intro to Programming, Data Structures, Web Development.

JavaScript Fundamentals Review

  • Variable declarations, types, and scope

  • Control structures: loops, conditionals

  • Functions: declaration, hoisting, closures

  • Objects, Prototypes, and Inheritance

Advanced JavaScript Concepts

  • ES6+ features: Arrow functions, classes, promises

  • Asynchronous JavaScript: callbacks, promises, async/await

  • Error handling and debugging

Document Object Model (DOM) Manipulation and Events

  • DOM tree and methods

  • Event handling and propagation

  • Creating and modifying HTML elements

AJAX and JSON

  • AJAX concepts and examples

  • Working with JSON data

  • Fetch API

JavaScript Libraries and Frameworks (Part I)

  • Introduction to jQuery

  • DOM manipulation with jQuery

  • AJAX with jQuery

JavaScript Libraries and Frameworks (Part II)

  • Introduction to React

  • Building components in React

  • State management in React

Server-Side JavaScript with Node.js

  • Node.js basics

  • Building a RESTful API with Express.js

  • Connecting to databases with MongoDB

Testing and Debugging JavaScript

  • Unit testing with Jest

  • Debugging tools and techniques

Required Texts and Resources:

  • "Eloquent JavaScript, 3rd Edition: A Modern Introduction to Programming" by Marijn Haverbeke

  • "You Don't Know JS (book series)" by Kyle Simpson

  • MDN Web Docs (Mozilla Developer Network)

JavaScript Fundamentals Review

 

Introduction and Variable Declarations

  1. Introduction to JavaScript: Origin, usage, importance in modern web development.

  2. Variables: Understanding var, let, and const keywords. Differences in scope and hoisting.

  3. Data Types: Exploring JavaScript's dynamic typing, various data types like String, Number, Boolean, Null, Undefined, Symbol, and Object.

 

Control Structures

Building upon variable knowledge, we'll discuss control structures in JavaScript.

  1. Conditionals: The if, else, else if statements, and switch statement. Understand truthy and falsy values.

  2. Loops: Working with for, while, and do while loops. Introduction to for of and for in loops.

 

Functions

  1. Function Declarations vs. Function Expressions: Understand hoisting.

  2. Arrow Functions: ES6's new way to write functions.

  3. Scope: Differences between global scope, function scope, and block scope.

  4. Closures: What they are and why they're useful.

 

Objects, Prototypes, and Inheritance

Understanding objects is crucial to mastering JavaScript.

  1. Objects: Creating objects, properties, and methods. Understand property value shorthand and computed properties.

  2. Prototypes: Understanding the prototype chain, __proto__ vs .prototype.

  3. Inheritance: Prototypal inheritance, classes and inheritance in ES6.

The latest features of JavaScript that are widely used in the industry today.

  1. Arrow Functions: Compact syntax and the handling of this.

  2. Classes: Introduction to ES6 classes, constructors, and methods. Comparison with traditional constructor functions.

  3. Promises: Understanding asynchronous programming with Promises, creation of Promises, and handling responses with .then() and .catch().

 

Asynchronous JavaScript: Callbacks, Promises, Async/Await

  1. Callbacks: What are callbacks, how they are used for asynchronous operations, and their drawbacks.

  2. Promises: Review of Promises, chaining promises.

  3. Async/Await: Modern approach to handle asynchronous JavaScript, error handling with try/catch.

 Error Handling and Debugging

Understanding how to handle errors is crucial in any programming language, including JavaScript.

  1. Error types in JavaScript: ReferenceError, TypeError, SyntaxError etc.

  2. Try/Catch/Finally: Handling errors gracefully.

  3. Throwing Errors: How to throw custom errors.

DOM Tree and Methods

We'll start with a deep dive into the Document Object Model (DOM) - an API for HTML and XML documents.

  1. Introduction to the DOM: We'll cover the purpose of the DOM, its role in connecting web pages to scripts or programming languages.

  2. DOM Tree: An in-depth look at the hierarchical structure of the DOM, covering concepts of nodes and elements. We'll learn about the different types of nodes - Element, Text, Comment, etc., and their relationship as parent, child, and sibling nodes.

  3. DOM Methods: We'll examine various methods to access DOM elements like getElementById, querySelector, and more. For example, to select the first paragraph in a document, we might use document.querySelector('p').

Event Handling and Propagation

JavaScript enables web pages to respond to user interactions through events.

JavaScript Events: We'll cover different types of JavaScript events such as click, mouseover, keydown, etc. We'll use event listeners to respond to these events. For example, to create a reaction to a button click, we might write:

button.addEventListener('click', () => 

{ console.log('Button clicked!'); });

Event Handling: An in-depth look at addEventListener and removeEventListener methods, including a discussion on anonymous functions and named functions as handlers.

Event Propagation: A deep dive into the event flow - capturing and bubbling phases. We'll discuss methods like event.stopPropagation and event.preventDefault to manipulate the default event propagation.

 

Creating and Modifying HTML Elements

We'll explore creating and modifying DOM elements to make dynamic web pages.

  1. Creating Elements: We'll use the createElement method to create new elements. For instance, to create a new paragraph element, we would write: let newParagraph = document.createElement('p').

  2. Adding Elements: We'll add newly created elements to our HTML document using appendChild and insertBefore.

  3. Modifying Elements: We'll cover methods like setAttribute, getAttribute, removeAttribute, classList and more to manipulate elements. For example, we might change the text of our new paragraph with newParagraph.textContent = 'Hello, world!'.

 

AJAX and JSON

We'll conclude this section by introducing AJAX and JSON for fetching data asynchronously.

  1. Introduction to AJAX: Overview of AJAX (Asynchronous JavaScript and XML) and its importance in fetching data without reloading the page.

  2. Working with JSON: Understanding JSON (JavaScript Object Notation), a lightweight data-interchange format. We'll learn to convert JSON data into a JavaScript object using JSON.parse() and convert JavaScript objects into JSON data using JSON.stringify().

  3. Making AJAX requests: Introduction to the Fetch API, a modern interface for making AJAX requests. We'll cover how to fetch data from a URL, and how to handle the response and errors. For instance, fetching JSON data from an API might look like this:

    fetch('https://api.example.com/data')

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error('Error:', error));

bottom of page