Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Event driven programming

From: Foundations of Programming: Fundamentals

Video: Event driven programming

Right now all our code executes as soon as the page loads our script file. It runs through it as fast as possible and finishes. But that's not good enough anymore. What I want to be able to do is start to react to some input from the user. And by input, I don't just mean prompting them for their name, but just being able to react to a whole bunch of different things. Does the user clicks somewhere on the screen, does the user resize the window, do they move the mouse? What do they do? What I want to do is start responding to events.

Event driven programming

Right now all our code executes as soon as the page loads our script file. It runs through it as fast as possible and finishes. But that's not good enough anymore. What I want to be able to do is start to react to some input from the user. And by input, I don't just mean prompting them for their name, but just being able to react to a whole bunch of different things. Does the user clicks somewhere on the screen, does the user resize the window, do they move the mouse? What do they do? What I want to do is start responding to events.

This is what's called event-driven programming. And the ability to do this is built into most languages now, including JavaScript. Now here is the great thing. These events are already happening and they've been happening all along. When the page is loaded, that's considered an event. When the user clicks somewhere on the screen, that's another event. When they move their mouse, that's a whole bunch of events. When they scroll the screen up and down, that's an event. If they click into a text field, that's an event. As they're typing, every key press is another event.

When they leave the form, it's another event. So these events are going on all the time. Your job as a programmer is to say, which ones do I care about? And the way that we can do this is by writing some functions and then saying, instead of just running this function when the page loads, only run it when the user clicks a button or moves their mouse. Now we don't have to keep asking, if the user is pressing their button. The operating system is going to take care of that.

We just need to say what events do we want to react to? We write what are called event handlers or event listeners. We can pick our own term there. That just means a function that's waiting for an event to happen. These events are all part of JavaScript and there are special words to describe them. And they're typically written all lowercase and they begin with the word on, like onload, onclick, onmouseover, onfocus, onblur. And what we can do is write functions and hook them up to these events.

You can have one event call multiple functions; you can have one function being called by multiple events. It's up to you how you start to wire them up. There are several ways to handle an event in JavaScript. For our purposes in this course, I'm just going to talk about one because we're trying to illustrate just a general principle here. And the basic idea in any language when working with event-driven programming is there are two pieces of information that you need: what's the event and what do you want to do. But bear in mind that with events, they can happen on different pieces of the page, different pieces of your user interface.

It's the idea of a click event, but that could be a click event on a button or a click event on an image or a click event on some other part of the screen. So the general format in JavaScript is not just the event name but element.event name. what element and what event. So you'll have things like this: window.onload, the load event of the window object. The window here represents the browser window. This is an event we can react to when the page loads. If I have say a complicated form with lots of text fields to fill out, we could have something like this: nameField.onblur.

The onblur event happens when I leave a field. Say I'm typing my e-mail address and I click out or hit the Tab key. This event will be called. This is one of the most common ones: myelement.onclick. Now what I've called myelement here? I'm presuming that I've created somewhere using the DOM. I've grabbed hold of it. I have a variable that represents an element on the page, whether that's an h1 or an image or a paragraph. Then I say .onclick and then I have to say, okay, that's the event, so what do I want to do? Well, the typical format is this. We actually create a function here.

And we've seen this before. The idea of the word function, followed by parentheses, followed by the opening and closing curly braces. Now usually when you say the word function, you also give it a name. You're creating a function giving it a name. We're not doing that here. This is what's called an anonymous function. This is actually very common in JavaScript. It might look a little odd, but all it means is a function without a name. It's synonymous. Well, we know that the function is really just a bunch of code wrapped up. That's all we're doing here. We're using the word function saying when this event happens, run whatever is inside this block of code.

I don't need to name this function because naming it would be a waste of time. I'm saying exactly what it does and I'm saying exactly when it's executed. Tight here on the click event of whatever my element is. Now if you start reading more JavaScript, you're likely to see one thing that looks a little different. Usually when I declare a function, I just have the opening and closing curly braces. When you see this format, you'll typically see the semicolon after the closing curly brace. It looks a little unusual because we don't need that after a closing curly brace for an if statement or a while or even a usual function.

And in fact here, we're putting that semicolon not because this is a function, but because the entire line is a statement: myelement.onclick = this function and whatever is inside it. So let me show you an example. I've got an identical two files that I had earlier. A very basic HTML page with a headline which has the ID of mainHeading. And that's my name that I just made up for that section. And then script.js, which I brought over from the previous one.

What this is doing right now is grabbing hold of that headline by using document.getElementById. We're using the DOM here. And right now, it's actually changing that immediately. But I've decided I don't want that to happen immediately. I want to start reacting to events. I only want to call this line if they've clicked the headline. So here's what I'm going to do. I know that the first line of code that's executed grabs hold of the headline and then I'm going to say headline.onclick.

I'm going to set up an event handler for them clicking the headline. Equals, and we're going to write an anonymous function, the word function, opening and closing parentheses, and the opening and closing curly braces. I'm going to put my semicolon in here. It would work without it, but this is the best practice. Now I'm going to grab this line of code that sets the inner HTML, the actual text value of this headline. And I'm going to paste it indented inside this anonymous function.

Change this message one little bit, to "You clicked the headline." I'll save this and I'll open up the webpage that contains it. Now we're finally having code that doesn't immediately run. We're not changing the value of the headline yet. It's going to wait until we click on it. So events are actually happening. When I move the mouse, that's considered an event. If I resize this page, that's considered multiple events. But I didn't say I cared about that.

The only one I care about is the click event on the element called headline, which means the only thing that's going to react to, it's no click events anywhere else on the page. I can all over the page right now. But if I click on the headline, we'll change it. We're now reacting to that. And this is the great thing. With very little code, we're now allowing the page to call back into our script. We've got an event-driven program that's communicating two ways, between our user interface, the visible part of our webpage, and our code behind the scenes.

A simple example here, but it's illustrating a really powerful principle of event-driven programming.

Show transcript

This video is part of

Image for Foundations of Programming: Fundamentals
Foundations of Programming: Fundamentals

61 video lessons · 84654 viewers

Simon Allardice
Author

 
Expand all | Collapse all
  1. 4m 14s
    1. Welcome
      1m 16s
    2. Making the most of this course
      2m 8s
    3. Using the exercise files
      50s
  2. 22m 11s
    1. What is programming?
      5m 45s
    2. What is a programming language?
      4m 48s
    3. Writing source code
      5m 34s
    4. Compiled and interpreted languages
      6m 4s
  3. 16m 29s
    1. Why JavaScript?
      4m 45s
    2. Creating your first program in JavaScript
      6m 54s
    3. Requesting input
      4m 50s
  4. 31m 38s
    1. Introduction to variables and data types
      5m 16s
    2. Understanding strong, weak, and duck-typed languages
      3m 51s
    3. Working with numbers
      5m 4s
    4. Using characters and strings
      4m 5s
    5. Working with operators
      4m 47s
    6. Properly using white space
      6m 46s
    7. Adding comments to code for human understanding
      1m 49s
  5. 24m 49s
    1. Building with the if statement
      7m 35s
    2. Working with complex conditions
      4m 10s
    3. Setting comparison operators
      6m 59s
    4. Using the switch statement
      6m 5s
  6. 17m 56s
    1. Breaking your code apart
      4m 1s
    2. Creating and calling functions
      2m 57s
    3. Setting parameters and arguments
      6m 7s
    4. Understanding variable scope
      2m 23s
    5. Splitting code into different files
      2m 28s
  7. 13m 32s
    1. Introduction to iteration
      4m 28s
    2. Writing a while statement
      5m 24s
    3. Creating a for loop
      3m 40s
  8. 19m 28s
    1. Cleaning up with string concatenation
      4m 30s
    2. Finding patterns in strings
      8m 3s
    3. Introduction to regular expressions
      6m 55s
  9. 19m 59s
    1. Working with arrays
      5m 47s
    2. Array behavior
      5m 29s
    3. Iterating through collections
      5m 18s
    4. Collections in other languages
      3m 25s
  10. 10m 50s
    1. Programming style
      5m 55s
    2. Writing pseudocode
      4m 55s
  11. 25m 55s
    1. Input/output and persistence
      3m 6s
    2. Reading and writing from the DOM
      8m 11s
    3. Event driven programming
      7m 47s
    4. Introduction to file I/O
      6m 51s
  12. 24m 26s
    1. Introduction to debugging
      5m 57s
    2. Tracing through a section of code
      7m 5s
    3. Understanding error messages
      3m 21s
    4. Using debuggers
      8m 3s
  13. 14m 17s
    1. Introduction to object-oriented languages
      5m 18s
    2. Using classes and objects
      6m 29s
    3. Reviewing object-oriented languages
      2m 30s
  14. 11m 14s
    1. Memory management across languages
      5m 11s
    2. Introduction to algorithms
      4m 2s
    3. Introduction to multithreading
      2m 1s
  15. 29m 20s
    1. Introduction to languages
      1m 42s
    2. C-based languages
      4m 40s
    3. The Java world
      3m 13s
    4. .NET languages: C# and Visual Basic .NET
      6m 17s
    5. Ruby
      3m 4s
    6. Python
      2m 56s
    7. Objective-C
      4m 3s
    8. Libraries and frameworks
      3m 25s
  16. 1m 2s
    1. Where to go from here
      1m 2s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Foundations of Programming: Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.