Skip to content
JavaScript Reference
Search
Ctrl
K
Cancel
GitHub
Select theme
Dark
Light
Auto
Welcome!
To-Do
Welcome to JavaScript
The JS Ecosystem
Vorbereitungen
Check your understanding
JS Basics
Data Types
Understanding Variables
If/else statements
Operators
JS Concepts
Destructuring
JS Best Practices
Write declarative code
Functions with a purpose
Manage scope
Reduce state changes
Don't mutate
Transitions and Animations
CSS transitions
Animations
Functions
Introduction to Functions
Callback Functions
Default parameters
Arrays and Loops
Introduction to Arrays
Array Methods
Loops
Advanced Array Methods
Arrays Rest and Spread
Node List vs. Array
Objects
Introduction to Objects
Enhanced Object Literals
Looping through objects
Objects Rest and Spread
The DOM
Introduction to the DOM
Changing Classes
Setting and getting CSS properties
Changing attributes
Finding an element's size and position
DOM traversals
Changing Text and HTML
Creating HTML Elements
Removing Elements from the DOM
Events
Listening to events
Event propagation
Event delegation
Removing Event Listeners
The Event Loop
Forms
Introduction to Forms
Selecting form fields with JavaScript
Date and Time
The Date object
Getting the time
Local time and UTC time
Setting a specific date
Setting a Date with Date methods
Adding or subtracting date and time
Comparing Dates and Times
Keyboard and Focus
Keyboard - Übersicht
Keyboard Events
Tabindex
Focus
Fokus setzen
Preventing people from tabbing into elements
Keyboard Shortcuts
Creating single-key shortcuts
Async JS
Fetch API
Build things
01 Off-Canvas Navigation
Building an OCN
Animating the OCN
Adding keyboard interaction
02 Modal
Building a Custom Modal
Adding keyboard interaction
Native Modal
03 Accordion
Building an Accordion
Accordion Event delegation
Accordion Animations
Accordion useful JavaScript features
Accordion Refactor
Adding keyboard interaction
04 Tabby
Building a tabbed component
Tabby - Event delegation
Useful JavaScript features
Adding keyboard interaction
Tabby – refactoring
05 Carousel
Carousel – HTML and CSS
Switching slides with JavaScript
Working the dots
Positioning slides with JavaScript
Event delegation
Carousel - Animations
Useful JavaScript features
Carousel - first refactor
Refactoring the dots part
Previous and next buttons
Carousel - second refactor
Creating dots with JavaScript
Carousel - Adding keyboard interaction
06 Calculator
Step 1
CSS-Framework
00_intro
Theme-Entwicklung
Backend-Ansicht
01_abstracts
_breakpoint.scss
_colors.scss
_mixins.scss
_sizes.scss
_tokens.scss
_typography.scss
02_base
_a11y.scss
_debug.scss
_general.scss
_html-elements.scss
_reset.scss
_root.scss
_tinyMCE.scss
03_components
_buttons.scss
_forms.scss
_layout-latest-a11y.scss
_navigation_pagination.scss
_news.scss
_tables.scss
05_contao-templates
_content-accordion.scss
_content-downloads.scss
_content-gallery.scss
_content-image-var.scss
_content-links.scss
_content-media.scss
_content-swiper.scss
_content-text.scss
06_layout
_content-element-groups.scss
_footer.scss
_header.scss
_mod_article.scss
_mod_article_theme.scss
_sticky-footer.scss
07_rsce-templates
_rsce_hero.scss
_rsce_text_bild.scss
08_utilities
Utility-Klassen
image-sizes
Bildgrößen
templates
block_searchable.html5
component
_headline.html.twig
content-element
element-group.html.twig
text.html.twig
mod_article.html.twig
nachrichten
image_newsteaser_ohne_link.html5
mod_newslist_gridcontainer.html5
news_latest.html5
rsce
rsce-hero.html.twig
rsce-text-bild.html.twig
Guides
Example Guide
Functions Collection
Syntax CheatSheet
GitHub
Select theme
Dark
Light
Auto
Backend-Ansicht
Backend-Ansichten anpassen (z.B. Elementgruppen):
Contao-Ninja