CSCE 102 General Application Programming Section 1,2,3

1
CSCE 102 General Application ProgrammingSection
1,2,3

• Instructor Jin Jin
• jinj_at_cse.sc.edu

2
Objects and Properties

• Document Objects--The JavaScript Document object
  is the container for all html head and body
  objects associated within the html tags of an
  html document.
• Document Object Properties
• URL - The location of the current document.
• title - The name of the current document as
  described between the header title tags.
• document.body.style.color- Modifies the CSS color
  style of the body tag.
• document.body.style.backgroundColorModifies the
  CSS backgroundColor style of the body tag.

3
Objects and Properties

• document.tag.property
• First reference the page, then reference the
  appropriate tag, then reference the property or
  attribute of that tag that you want to modify.
• Examples document.body.style.color
  document.body.style.backgroundColor
• How to use?
• document.body.style.color"red"
• var thisColordocument.body.style.color

4
Objects and Properties

• document.titleshow the title of the document
• document.titleI changed the title on
  the title bar of the browser
• document.URLcan NOT be changed, fixed
• Note
• Do NOT use bgColor or fgColor mentioned in the
  textbook
• document.URL correct
• document.url wrong

5
Introduction to Javascript

• Click button and click events
• Input elements allows the user to input info and
  interact with the webpage. Examples button,
  check box, text box
• Events Something happens to an input element
  (object) or a specific element of event.
  Examples Click event, select event, mouseover
  event
• Event handler When an event occurs in an object,
  we can activate an event handler for that object,
  which will handle the event when it occurs and
  take appropriate action. Example onclick

6
Introduction to Javascript

• ltformgt
• ltinput type"button" value"Click here"
  idb1 nameb1 onclick"alert('Nice going!')"
  /gt
• lt/formgt
• Note name attribute is required in XHTML. Form
  element is a block-level element.
• lta hrefURL onmouseoveralert(Are you
  sure?) onclickalert(Are you sure?)gt Click
  herelt/agt

7
Using button to change color

• ltform idchange_colors namechange_colorsgt
• ltinput idbgcolor namebgcolor typebutton
• onclick"document.body.style.backgroundColorred'
  alert('The background color was changed')"
  value"Change bgcolor to red / gt
• lt/formgt