HTML and CSS - Introduction to Java Script - Lecture Slides, Slides of Javascript programming

Download HTML and CSS - Introduction to Java Script - Lecture Slides and more Slides Javascript programming in PDF only on Docsity!

HTML/JavaScript/CSS

History

• What is the relationship between:
• SGML
• HTML
• XHTML
• CSS
• JavaScript

History

• HTML
  • Tim Berners-Lee created HTML – subset of SGML
  • Not platform or application specific
  • Only server software needed to publish file s on the net
• Structure versus content
  • Browser parses HTML file into a tree

History

• Sample HTML File
  • Bryan Moore
    
  • 1234 Sunset Ave.
    
  • Walla Walla, WA 12345
    
  • (123)123.4567
    
  • Web Applications and Real World Design - Knuckles

History

• Problems with extracting data
  • Need to write a computer program to extract the names and addresses by selecting text strings following font tags
• Content and structure of document become intertwined
• Not the intention of SGML and original HTML
• Cascading Style Sheets
  • Attempt to separate content and style

History

• CSS
  • Can alter the look of entire file with a simple coding change
  • Can keep styles in an external file
  • Increases the knowledge needed to code pages
    • Initial rationale of HTML was to appeal to the masses

History

• Extensible Markup Language XML
  • Extensible- can create own tags
  • Complete separation of content and style Web Applications and Real World Design - Knuckles

History

• Releases
  • HTML 4.0 1997
  • XML 1.0 1998
• XML and HTML need to better cooperate
  • XHTML 1.0 2000
• XHTML
  • Contains elements and attributes of HTML
  • Elements must have closing tags
  • Lowercase
  • Attributes must have values
  • Attributes in single or double quotes
    • http://www.w3schools.com/xhtml/default.asp

HTML Forms and JavaScript

• JavaScript
  • HTML files are text files
  • JavaScript is interpreted not compiled
  • Object oriented
    • HTML forms are objects and can be manipulated via JavaScript
    • Dynamic HTML – merger of JavaScript and HTML
  • Different implementations of DHTML by software companies

What is JavaScript

• Scripting language (object-oriented)
  • Lightweight programming language developed by Netscape
  • Interpreted, not compiled
• Designed to be embedded in browsers
  • Ideal for adding interactivity to HTML pages
  • Detect browser versions
  • Work with info from user via HTML forms
  • Create cookies
  • Validate form data
  • Read and write HTML elements
• Supported by all major browsers
  • Internet Explorer has JScript (started in IE3)
  • http://www.faqts.com/knowledge_base/view.phtml/aid/
• It’s free, no license required

What is JavaScript

• HelloWorld example program…
• Let’s open it in the browser

What is JavaScript

• Javascript can be located in the head, body or external file
  • Head section
    • Ensures script is loaded before trigger event
  • Body section
    • Script executes when body loads
  • External
    • Allows scripts to run on several pages
  • Examples:
    • http://www.w3schools.com/js/js_whereto.asp

What is JavaScript

• - - - - Now where does this print on the web page????
  - - - - Lets See what the answer is!

What is JavaScript

• Now, let JavaScript generate HTML for us…
• Let’s open it in the browser