JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Stimulus is a JavaScript framework that is purposed to enhance your HTML. Stimulus will monitor your HTML and wait for its `data-controller` attribute to be declared on an element. Thats when you controller JavaScript is connected and its methods triggered.

The first thing you need to do is add the `data-controller` attribute the to html that you want to connect to Stimulus.

We added `data-controller="example"` so Stimulus expects an `example_controller.js` file to exist.

In our ExampleController class, we are going to use the `connect` method to show that we've connected our controller to the dom.

Connect a Stimulus Controller to your html

In our Stimulus App, we change the `connect` method to a `greet` action (this method name can be anything. 

We then wire that action up to our HTML button by adding `data-action` to it and passing the function that we want to fire, in this case, its `click->example#greet`.

Fire a Stimulus Controller Action on a Click Event

We will use `data-target` to tell our controller which input element we are getting our value from. 

We need to declare `static targets = ['name']` in our controller to tell which element we are referencing. We then reference the value in the input element with `this.nameTarget.value`.

Intro to Stimulus

Ian Jones

Course Content