Learn

Now that Alejandra has her website looking polished, she’s realized that she wants the site to be more interactive. She would like to build a shopping cart feature that allows her users to buy travel packages directly from her website.

To accomplish this, Alejandra is going to need to learn JavaScript. Any website that provides more than just static information probably utilizes JavaScript in some way. Here are some familiar examples of website features most often built with JavaScript:

  • popup ads
  • animated graphics (2D or 3D)
  • interactive audio and video
  • maps and other features access the user’s geographic location
  • and much more!

One of the defining features of JavaScript is its ability to respond to browser events. These events happen in real time and can be triggered by a wide variety of user interactions, including:

  • the user clicking on a button
  • the user pressing enter on their keyboard
  • a video file finishing loading
  • the user re-sizing their window
  • the user hovering over text on the webpage

Instructions

1.

One of the classic browser events that JavaScript can respond to is the position of the mouse. When a user puts the mouse near an HTML element, the onmouseover event is fired.

Hover over the text in the browser to see how it responds to the onmouseover event.

2.

What else is happening here?

JavaScript uses functions, which are reusable blocks of code designed to perform a specific task.

drawText is a function that is being run on line 2. Change the text that says 'hello world' to 'JavaScript' to pass a different value into this function.

Check out the browser to see what changed! One of the benefits of functions is that they are reusable. The drawText function allows us to take advantage of the reusability of functions because it can render any input text without us needing to rewrite the logic of the function.

Confused? Don’t worry, we’ll cover functions more thoroughly in the next exercise.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?