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

Here is my collection on JavaScript lectures. It includes tutorials as well as general concepts explanations. Particularly these slides contain: Event Driven Programming, Event Handler, Html Element, Accessing Css Properties, Html Snippet, General Syntax

Typology: Slides

2013/2014

Uploaded on 01/29/2014

surii
surii 🇮🇳

3.5

(13)

121 documents

1 / 17

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
Event-Driven Programming
docsity.com
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe
pff

Partial preview of the text

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!


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

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

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

Example

  • HTML snippet 13

Name:
Age:

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!"); } }

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