Book of Coding

Table of content

JavaScript (Beginners)

A short introduction for beginners, with the most important topics in JavaScript (for more details: Advanced).

JavaScript Introduction

• 1. async and defer - attributes to control the loading behavior of JavaScript
• 2. Output from JavaScript
• 2.1. Standard dialogs
• 2.2. Output to the console
• 2.3. Output to the website
• 3. The use of variables in JavaScript
• 3.1. Initalize and assign values
• 3.2. Define constants
• 4. Overview of JavaScript data types
• 4.1. data type number
• 4.2. data type string
• 4.3. data type boolean
• 4.4. Data type undefined and null
• 4.5. Data type object
• 4.6. Convert data types
• 5. Arithmetic operators for calculation
• 6. Conditional statements
• 6.1. true or false
• 6.2. Comparison operators
• 6.3. Use if branches
• 6.4. Use selection operator
• 6.5. Logical operators
• 6.6. Multiple branching with switch
• 7. Loops - repeat program instructions several times
• 7.1. Increment and decrement operator
• 7.2. for loop
• 7.3. while loop
• 7.4. do-while loop
• 7.5. End statement block with break
• 7.6. Jump to loop start with continue

Arrays, functions and objects

• 1. Functions in JavaScript
• 2. Arrays
• 3. Strings and regular expressions
• 4. Object-oriented programming
• 5. More global objects

DOM : Document Object Model

• 1. Introduction to the DOM of an HTML document
• 2. The document object
• 3. The DOM programming interface
• 4. Access elements in the DOM
• 5. Change HTML element, attribute or style
• 6. React to JavaScript events
• 7. Handle the events with the event handler
• 8. Overview of popular JavaScript events
• 9. Events with the event object
• 10. Prevent default action of events
• 11. The event flow (event propagation)
• 12. Add, change and remove HTML elements
• 13. HTML forms and JavaScript

Introduction to Web APIs

• 1. Video and audio media API
• 2. The Canvas 2D API
• 3. Determine the location with the geolocation API
• 4. Drag & Drop-API
• 5. Web Storage - Databases for offline applications
• 6. Web Workers
• 7. Update without requests with server sent events
• 8. More Web-APIs

An introduction to Ajax and jQuery programming

• 1. An Introduction to Ajax Programming
• 1.1. A simple example during execution
• 1.2. Create the XMLHttpRequest object
• 1.3. Make a request to the server
• 1.4. Send data
• 1.5. Get the status of the XMLHttpRequest object
• 1.6. Forward the response from the server
• 1.7. A more complex Ajax example with XML and DOM
• 1.8. The JSON data format with Ajax
• 2. Introduction to JavaScript library jQuery
• 2.1. Include jQuery in the HTML document
• 2.2. The basic use of jQuery
• 2.3. The convenient jQuery selectors
• 2.4. jQuery events
• 2.5. Query and set content and HTML attributes with jQuery
• 2.6. Add and delete HTML elements with jQuery
• 2.7. Manipulate CSS with jQuery
• 2.8. jQuery effects and animations
• 2.9. Use jQuery and Ajax together
• 2.10. More jQuery plug-ins

The Bootstrap framework

• 1. What is Bootstrap?
• 2. Download and integrate Bootstrap
• 3. Create layouts with Bootstrap
• 4. Use components

Basics of React

• 1. What is React?
• 2. Prepare the use of React
• 3. Start a React project
• 4. "Hello World" in React
• 5. JSX (JavaScript XML)
• 5.1. Use JSX for the UI
• 5.2. JSX with HTML attributes
• 5.3. Case distinction
• 5.4. Lists with React
• 6. Render elements
• 7. React components and props
• 7.1. Functional components
• 7.2. Class components
• 7.3. Props
• 8. State management in React
• 8.1. Changing the state object
• 8.2. Children props
• 9. Events and their handlers
• 9.1. Pass arguments to event handler
• 10. Life cycle of components
• 10.1. Mounting
• 10.2. Updating
• 10.3. Unmounting
• 10.4. React.Fragment
• 11. The React-Hooks-API
• 11.1. Local state in function components with useState
• 11.2. The component lifecycle with useEffect
• 11.3. Access to the context with useContext
• 11.4. Custom Hooks
• 12. CSS and React
• 12.1. Styling with the style attribute
• 12.2. Use CSS classes in JSX
• 12.3. CSS modules in React
• 12.4. CSS in JavaScript - Styled Components
• 13. Forms in React
• 13.1. Controlled Components
• 13.2. Uncontrolled Components
• 13.3. Accessing the native DOM via a reference

JavaScript (Advanced)

JavaScript explained in detail.

Language core

Variables in JavaScript

• 1. Define variables
• 2. Define constants
• 3. Valid variable names

The different data types in JavaScript

• 1. Numbers
• 2. Strings
• 3. Boolean values
• 4. Objects
• 5. Special data types
• 6. Symbols

A short introduction to JavaScript arrays

The different operators in JavaScript

• 1. Operators for working with numbers
• 2. Operators for simple assignment
• 3. Operators for working with strings
• 4. Operators for working with Boolean values
• 5. Operators for working with bits
• 6. Operators for comparing values
• 7. Optional Chaining Operator
• 8. Logical Assignment Operators
• 9. Operators for special operations

Control program flow in JavaScript

• 1. Conditional statements
• 2. Define branches
• 3. Use selection operator
• 4. Define multiple assignments
• 5. Define counting loops
• 6. Defining head-controlled loops
• 7. Define foot-controlled loops
• 8. Aborting loops and loop iterations prematurely

JavaScript functions - create reusable code blocks

• 1. Define functions
• 2. Call functions
• 3. Pass and evaluate function parameters
• 4. Define return values
• 5. Define default values for parameters
• 6. Use elements from an array as parameters
• 7. Define functions using shorthand notation
• 8. Changing strings via functions
• 9. Functions in detail
• 10. Call functions through user interaction

Error handling in JavaScript

• 1. Principle of error handling
• 2. Catching and handling errors
• 3. Trigger error.
• 4. Errors and the function call stack
• 5. Calling certain instructions regardless of errors that have occurred

Debug JavaScript code

• 1. Define breakpoints
• 2. View variable assignments
• 3. Running a program step-by-step
• 4. Define multiple breakpoints
• 5. Define further breakpoints
• 6. View the function call stack

Types of reference

Difference between primitive data types and reference types

• 1. The principle of primitive data types
• 2. The principle of reference types
• 3. Primitive data types and reference types as function arguments
• 4. Determine the type of a variable

Encapsulate state and behavior in objects

• 1. Introduction to object-oriented programming
• 2. Create objects via the literal notation
• 3. Create objects via Object.entries()
• 4. Create objects via constructor functions
• 5. Create objects using classes
• 6. Create objects using the Object.create() function
• 7. Access properties and call methods
• 8. Add or overwrite object properties and object methods
• 9. Delete object properties and object methods
• 10. Output object properties and object methods
• 11. Use symbols to define unique object properties
• 12. Prevent changes to objects

Arrays

• 1. Create and initialise arrays
• 2. Access elements of an array
• 3. Add elements to an array
• 4. Remove elements from an array
• 5. Sorting arrays
• 6. Use arrays as a stack
• 7. Use arrays as a queue
• 8. Find elements in arrays
• 9. Copy elements within an array
• 10. Convert arrays into strings

Extract values from arrays and objects

• 1. Extract values from arrays
• 2. Extract values from objects
• 3. Extract values within a loop
• 4. Extract arguments of a function
• 5. Copy object properties to another object
• 6. Copy object properties from another object

Strings

• 1. Determine the length of a string
• 2. Search within a string
• 3. Extract parts of a string

Maps and Sets in JavaScript

• 1. Use maps
• 1.1. Basic operations
• 1.2. Iterate over maps
• 1.3. Use Weak Maps
• 2. Use sets
• 2.1. Basic operations
• 2.2. Iterate over sets
• 2.3. Use Weak Sets

The global objects Date and Math

• 1. Date and time with JavaScript
• 2. Performing complex calculations with Math

Regular expressions

• 1. Define regular expressions
• 2. Test characters against a regular expression
• 3. Character classes
• 4. Limit the start and end of the regular expression
• 5. Quantifier
• 6. Search for instances
• 7. Search for all instances within a string
• 8. Access to individual parts of an instance
• 9. Search for specific strings
• 10. Replace instances within a string
• 11. Search for instances
• 12. Split strings

Functions as reference types

• 1. Use functions as arguments
• 2. Use functions as return value
• 3. Standard methods for each function

Change websites dynamically

• 1. Document Object Model (DOM)
• 2. Select elements
• 3. Work with text nodes
• 4. Work with elements
• 5. Work with attributes

Handle and trigger events

• 1. Concept of event-driven programming
• 2. React to events
• 3. The different types of events
• 4. Influence the flow of events
• 5. Trigger events programmatically

CSS

Introduction to CSS, all important topics for designing websites.

CSS Guide

• 1. Introduction to CSS
• 2. The CSS selectors
• 3. Inheritance and the cascade
• 4. The box model of CSS
• 5. CSS positioning
• 6. Responsive layouts with CSS
• 7. Styling with CSS
• 8. Testing and organizing

HTML

Introduction to HTML, all important topics for creating websites.

HTML Guide

• 1. Introduction to HTML
• 2. Structure of a HTML document
• 3. The header data of an HTML document
• 4. The visible area of an HTML document
• 5. Tables and hyperlinks
• 6. Graphics and multimedia
• 7. Forms and interactive elements