2. JavaScript Events Java 4

3. Understanding Events 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 Examples – When a user clicks a button – When a mouse travels over an area and it changes – When a user enters in information

4. HTML Tags and Events 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 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 –

5. Tags Tags age 15-20

6. Event Handlers 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 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

7. Alert Display 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 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

8. Prompt Display 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 The syntax for a prompt method is… – variable_name=prompt(“message”, “default_text”); Example – var Age=prompt(“How old are you?”, “enter age”);

9. Prompt Method Now a value is assign to a variable, and an alert can now display the variable 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 The onclick attribute is used to call the function, and then the function will display the prompt and the alert

10. Java 4 function myage(){ var age=prompt(“How old are you?", "enter age"); alert('Your age is ' + age);}

11. JavaScript 4 Assignment Create a Web Page that contains… One button that displays a message when it is clicked on One button that displays a message that a user can type in One button that displays a number that the user types in and the number after an operation (display the number entered and the number after the operation) Comments for each bullet Text that will display on the web page that explains the function of each button