JavaScript Events

Understanding Events Events add interactivity between the web page and the user Events add interactivity between the web page and the user You can think of an event as a trigger that fires a specific JavaScript code in response to a given situation You can think of an event as a trigger that fires a specific JavaScript code in response to a given situation Examples Examples When a user clicks a button When a user clicks a button When a mouse travels over an area and it changes When a mouse travels over an area and it changes When a user enters in information When a user enters in information

HTML Tags and Events The most commonly used html tag that allows the to generate an event is a tag The most commonly used html tag that allows the to generate an event is a tag The input tag allows the user to interact with the page by typing in info or selecting an item The input tag allows the user to interact with the page by typing in info or selecting an item An input tag is created inside of a form tag and contains a “type” attribute which specifies the type of input An input tag is created inside of a form tag and contains a “type” attribute which specifies the type of input creates a text field creates a text field

Tags Tags age age 15-20

Event Handlers When an event occurs, a program executes JavaScript code that responds to the event When an event occurs, a program executes JavaScript code that responds to the event The code that executes because of an event is called an event handler The code that executes because of an event is called an event handler An example of an event handler is when the user clicks on a button and something happens because the button was clicked An example of an event handler is when the user clicks on a button and something happens because the button was clicked Two things that can occur on the click of a button is an alert display or a prompt display Two things that can occur on the click of a button is an alert display or a prompt display

Alert Display The alert method displays a pop-up dialog box with an OK button The alert method displays a pop-up dialog box with an OK button You can pass a single literal string or variable as an argument You can pass a single literal string or variable as an argument The literal string is contained inside single quotations, a variable is not placed inside quotes The literal string is contained inside single quotations, a variable is not placed inside quotes Onclick, Value, & Type are all attributes to the input tag Onclick, Value, & Type are all attributes to the input tag

Prompt Display Prompt method displays a pop-up dialog box with a message, a text box, an OK button, and a Cancel button Prompt method displays a pop-up dialog box with a message, a text box, an OK button, and a Cancel button Any text that is entered into the text box can be assigned to a variable Any text that is entered into the text box can be assigned to a variable The syntax for a prompt method is… The syntax for a prompt method is… variable_name=prompt(“message”, “default_text”); variable_name=prompt(“message”, “default_text”); Example Example var Age=prompt(“How old are you?”, “enter age”); var Age=prompt(“How old are you?”, “enter age”);

Prompt Method Now a value is assign to a variable, and an alert can now display the variable Now a value is assign to a variable, and an alert can now display the variable alert(‘Your age is’ + Age); alert(‘Your age is’ + Age); But in order to enter the amount into the prompt, the button must activate a function that contains the prompt and the alert But in order to enter the amount into the prompt, the button must activate a function that contains the prompt and the alert The onclick attribute is used to call the function, and then the function will display the prompt and the alert The onclick attribute is used to call the function, and then the function will display the prompt and the alert

Example JS Events JS Events function myage() { function myage() { var age=prompt(“How old are you?", "enter age"); var age=prompt(“How old are you?", "enter age"); alert('Your age is ' + age);} alert('Your age is ' + age);}