DOM in JavaScript I: Basics

This course is designed for novice JS programmers who are already familiar with basic JS syntax, and would like to use JS to create interactive HTML pages. The student can then create their own dynamic pages using JS and DOM that respond to user events and collect and validate data using forms. The student can then continue their education in a specific front-end library (React, Angular, Vue...).

• Dynamically control elements on an HTML page using JavaScript
• Respond to user events
• Use browser-provided objects such as Document or Window
• Use and validate forms using program logic
• Use browser-provided storage such as cookies or LocalStorage
• Dynamically generate document content

• Basic knowledge of HTML at the [HTMLCSS] course level.
• Course-level knowledge of JavaScript syntax [JS_PROG1].

Introduction

• Scripting on web pages
• JavaScript language features (reminder)
• Incorporating JavaScript into HTML

Introduction to the Document Object Model (DOM)

• Using Objects
• Node, Element, Attribute and their properties and methods
• Finding an element in the DOM

Using events

• Inline registration
• DOM Property Event Handlers
• Standard approach using addEventListener
• Cancellation of the default event action
• Event bubbling

Document Object Model (DOM)

• Window object
• Document object
• Image object
• Navigator object

Creating interactive forms

• Form Elements
• Sending form data
• Access to form elements
• Validating form data

Modules

• Types of modules
• Lazy loading

Cookies and Web Storage Basics

• Cookies
  • Creating and reading cookies
  • Options and limitations of cookies
  • Security aspects and limitations
• Local Storage
  • Data storage
  • Data retrieval
  • Deleting data
  • Limitations and security aspects
• Session Storage
  • Differences between Local Storage and Session Storage
  • Application Examples

Previous courses

JS_PROG1 - JavaScript I: Basics [JS_PROG1]

Next courses

Communication with server using AJAX and Fetch API [JS_AJAX]

Asynchronous and reactive programming in JavaScript [JS_ASYNC]

Angular I: Basics [JS_ANGULAR1]

Redux and its implementation in Angular and React applications [JS_REDUXJS1]

React II: Advanced techniques [JS_REACT2]

React I: Basics [JS_REACT1]

DOM in JavaScript II: Advanced Techniques [JS_DOM2]

Introduction to Solid.js framework [JS_SOLID1]

Automated testing of JS applications using the Jest library [JS_TEST_JEST]

Introduction to the Svelte framework [JS_SVELTE1]

Introduction to Vue.js [JS_VUE1]

TypeScript - type checker for JavaScript [JS_TS1]

Creating JS applications using the WebSocket protocol [JS_WEBSOCKET]

jQuery Framework [JS_JQUERY]