JavaScript Webpage Workout - M1 L1 Warm-up (Intro to CAMEL)

This warm-up is part of the “JavaScript Webpage Workout”. Read the Introduction here.

📺 Also available as a video.

I’m doing these lessons in CodePen but feel free to do them in your favorite text editor.

I’d like to show you a workflow sequence I use that I call CAMEL.

• CREATE - ACCESS - MANIPULATE - EVENTS - LISTENERS

Let’s give meaning to each of these through an example so you can start coding immediately.

Create

Start by CREATING an element using HTML.

1. CREATE a paragraph element

   • with an id of ‘text’
   • add some Lorem Ipsum for the text content

<!-- CREATE AN ELEMENT -->
<p id="text">Lorem ipsum dolor sit amet consectetur
  adipisicing elit. Dolore dolor fugiat aut voluptatum
  officiis ratione quis? Non blanditiis voluptatem
  veritatis asperiores labore. A nostrum cum praesentium
  delectus ad, recusandae laboriosam?</p>

2. Next let’s add some basic CSS

#text {
  font-size: 1rem;
  margin: 1.2rem;
  padding: 1.2rem;
  border: 1px solid black;
}

Access

Next, using JavaScript, we can ACCESS this element that we CREATED on the webpage (i.e. the document object model, or DOM) using a method called getElementById().

Let’s begin with typing in the JS area of CodePen (or in your script tags or file):

3. Type document then attach the method getElementById() to it using dot notation.

   • getElementById() requires an id name as its parameter, so type in quotes ‘text’ which will access the <p> tag with the id ‘text’ that we just created in the HTML section.

// ACCESSING the element on the DOM
document.getElementById('text');

To see what what we’ve accessed, let’s console.log it.

console.log(document.getElementById('text'));

You should see the entire paragraph element within in quotes just as we created it in the HTML.

"<p id="text">Lorem ipsum dolor sit amet consectetur
  adipisicing elit. Dolore dolor fugiat aut voluptatum
  officiis ratione quis? Non blanditiis voluptatem
  veritatis asperiores labore. A nostrum cum praesentium
  delectus ad, recusandae laboriosam?</p>"

Manipulate

Now that we have ACCESSED the element, we can MANIPULATE it with a ‘style’ property attached to getElementById().

4. Simply add the style property to the getElementById() method using dot notation

// ACCESS the element on the DOM
document.getElementById('text').style;

The style property may remind you of the style attribute when doing inline styling on an HTML element like the example below.

"<p id="text" style="color: red">Lorem ipsum dolor sit
  ... amet consectetur adipisicing elit. ... </p>"

With JavaScript, we use the style property along with the color property to change the text to red. (All properties in the ‘style’ object can be found here.)

In CSS we alter styles with key: value pairs, but in JavaScript we alter styles using dot notation and the assignment operator followed by a value.

document.getElementById('text').style.color = "red";

So these are doing the same thing, but one is inline styling in HTML and the other is manipulating the webpage with JavaScript using a method and some properties.

Let’s store the ACCESSED paragraph element in the variable ‘myParagraph’.

// ACCESS the element on the DOM and store it in a variable
const myParagraph = document.getElementById('text');

To make sure it’s what we think it is, let’s console.log our new variable ‘myParagraph’

console.log(myParagraph);

Next, let’s attach the style and color properties to ‘myParagraph’

myParagraph.style.color = "red";

Now, let’s put this text color change inside of a function which we can invoke or call at any time.

function makeRed() {
  paragraph.style.color = 'red';
}

Call the function to make sure it works. The paragraph’s text should turn red.

makeRed();

Our final step is to add user interaction: this is the last two parts of CAMEL, EVENTS and LISTENERS which listen for webpage events.

Let’s make the paragraph turn ‘red’ only after you click on the paragraph.

Writing this part under the function makeRed, let’s use our variable ‘myParagraph’ and add a new method called addEventListener() to it with dot notation.

myParagraph.addEventListener();

This method has some important parameters to help us: one is the event type that the user performs. So in our case, it’s the ‘click’ of the mouse. So add ‘click’ as the first argument and make sure to put it in quotes since it must be a string.

myParagraph.addEventListener('click');

The next important parameter is what to do after the ‘click’ event happens which is called an event handler and is a function. We can use the function makeRed that we created above. So after ‘click’ put a comma then type makeRed. Notice we aren’t using parenthesis to call this function, we’re just using it as a reference to the function to be called after the ‘click’ event happens.

myParagraph.addEventListener('click', makeRed);

So this line of code is saying:

1. add a listener to the myParagraph element
2. when the webpage ’hears’ a ‘click’ event within the dimensions of the paragraph
3. then call the function makeRed

Your JS code should look like this in total.

// ACCESS
const myParagraph = document.getElementById('text');

// MANIPULATE
function makeRed() {
  paragraph.style.color = 'red';
}

// EVENT and LISTENER
myParagraph.addEventListener('click', makeRed);

Save and refresh the page. The paragraph text is initially black. Click outside of the paragraph’s borders and nothing happens, it stays black. Click the paragraph and it turns red. So the click event must happen within the dimensions of the paragraph which includes its border.

In summary, we used a workflow sequence called CAMEL to make an element then change it through a user event.

Let’s keep practicing because repetition will be the secret to you really learning this. Go to exercise 1.

I’ve included some more vocabulary below if you want to see how the EVENT and LISTENER parts are broken down.

• CREATE - ACCESS - MANIPULATE - EVENTS - LISTENERS

  • EVENT TARGET - the event can only happen within the dimensions of this target element (e.g. the paragraph including its border)
  • EVENT LISTENER - the addEventListener() method
  • EVENT TYPE - user or browser events like click, mouseover, keydown, ‘keyup,scroll,change,load`, etc. A complete list here.
  • EVENT HANDLER - some action (e.g. a function) you want to execute after the event type happens

// The template
target.addEventListener(eventType, eventHandlerFunction);
// The real example
myParagraph.addEventListener('click', makeRed);

This blog lesson in video format.

Keep practicing! Go on to exercise 1.