Event Driven Programming - Introduction to Java Script - Lecture Slides, Slides of Javascript programming

Download Event Driven Programming - Introduction to Java Script - Lecture Slides and more Slides Javascript programming in PDF only on Docsity!

Event-Driven Programming

Page Section:

• Section or div ision of an HTML page
• Generic block element
• Example:
• What's the difference between

  and

  ?

  • Use

    for paragraphs of text. Use

    as a generic container for everything else. 2

    Look at me!

Text Field:

• Attribute type must be set to "text"
• Example: 3

Button:

• Attribute type must be set to "button"
• Attribute value determines label of button
• Example: 4

Event-Driven Programming

• event-driven programming : programming paradigm in which the flow of the program is determined by events (e.g. mouse clicks, key presses)
• event handler : function that is called when a particular event occurs 5

Button Click Event Handler

• Set the onclick attribute to a function call
• Function must be declared in JavaScript file
• Example:
• Example event handler: 6

function myFunction() { alert("Hello, world!"); }

Reading User Input

• Imagine the following web page with a text box to type your name:
• Clicking the button results in a popup box:
• The JavaScript function handling the click event needs access to the text field. 7

Recall: HTML Element

8

Identifying HTML Elements

• Any HTML element can be given an ID via the id attribute
• ID's on an HTML page should be unique
• Example: 9

Accessing HTML Elements In JavaScript

• In JavaScript, you can access specific HTML elements by using a pre-defined variable called document and requesting the element by ID.
• Accessing an HTML element by ID, general syntax: document.getElementById(" < ID > ")
• Example: document.getElementById("name") 10

Accessing Attributes Of HTML Elements

• Once you have access to a particular HTML element, you can access all its attributes using the "dot" operator.
• Accessing an element's attribute, general syntax: document.getElementById(" < ID > "). < attribute >
• Example: document.getElementById("name").value (text fields store the user input in the value attribute) 11

Previous Example

• HTML snippet
• JavaScript file 12

function welcome() { var name = document.getElementById("name").value; alert("Hi, " + name + "!"); }

Example

• HTML snippet 13

Example

• JavaScript file 14 function checkAge() { var userName = document.getElementById("name").value; var age = document.getElementById("age").value; if (age < 21) { alert(userName + ", you can't drink!"); } else { alert("Hi " + userName + ", drink away!"); } }

Changing Attribute Values

• Can also change the values of attributes
• HTML snippet
• JavaScript file 15

function welcome() { var name = document.getElementById("name").value; alert(name + ", I don't like your name. You are now Bob."); document.getElementById("name").value = "Bob"; alert("Hi Bob!"); }

Accessing CSS Properties

• Accessing CSS properties, general syntax: document.getElementById(" < ID > ").style. < property >
• Property names in JavaScript are identical to those in CSS, but with namesLikeThis instead of names- like-this - Examples: backgroundColor instead of background-color fontFamily instead of font-family
• Example: 16 document.getElementById("name").style.backgroundColor = "yellow";

Additional Events

• The XHTML 1.0 Strict Reference has a listing of all HTML elements and their attributes. Attributes whose names begin with on (like onclick) can be set to event handlers. - http://www.december.com/html/x 17