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

• Markup
  • Annotations instructing how the document should appear in print
  • Word processors use different markup schemes
  • SGML
    • IBM - Standard Generalized Markup Language
    • Markup instructions stored with ASCII file
      • Any computer could render document
      • Lilly Example

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

Web Applications and Real World Design - Knuckles Browser parse tree

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

Parse tree using CSS Web Applications and Real World Design - Knuckles Still need to reference Information based on “second string after BR” Information is not meaningful

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

• http://www.sis.pitt.edu/~perkoski/is10/forms.html
• http://www.w3schools.com/html/html_forms.asp
• Client Server Model
  • Client Side Processing
    • JavaScript downloaded from web page and processed by the client –

typically form checking

• JavaScript can interact directly with form data
• Server Side processing
• Information from a form sent to server for processing
• PHP Perl C++
• Server can interact directly with the form data

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

• Syntax is similar to Java, but it’s not Java per se
• Usually JavaScript code is embedded within HTML code using the script tag:
• Can have more than one pair of script tags in a page
• Semicolons: C++ and JAVA require them but in JavaScript it’s optional

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

• JavaScript statements in head write to the beginning of the body section but don’t violate HTML code already there.
• JavaScript statements in body write based on their location
• JavaScript interpreted first then HTML interpreted second
  • Document.write writes to the HTML document not the web page

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

Identifier Etiquette

• Identifier– The name of a variable (or function)
  • Starts with a letter, can contains digits & underscores
  • Case Sensitive!!
  • Should be meaningful to someone reading your code
• Good: accountBalance, amountDue
• Bad: bal, due,
• Just plain wrong: 2bOrNotToBe, +var, total-value

Variables

• Must declare variables before they’re used in the program
  • Declare at the top of the program & terminate each statement with ‘;’
  • Intialize variables when appropriate
  • Local variables (declared within a function) destroyed after function exit. - Can only be accessed within the function
• Example – Note Assignments
  • var candyBarPrice = 2.50;
  • var taxRate = .075;
  • var candyBarsPurchased;

Assignment Operator

• Assignment ‘looks like’ equal sign but does NOT behave like it - subTotal = subTotal + 1.50 - subTotal ‘is assigned the value’ that is currently in subTotal plus the value of 1.50

Expressions

• An expression is a statement that describes a computation
• Usually look like algebra formulas
  • total = subTotal * taxRate
• Operators (+, - , *, /, etc.) have different levels of precedence, similar to algebra - Don’t rely on it! For clarity, use parentheses
• w3Schools operator reference page

Conditional Statements--if

if (some boolean expression is true){ execute the statements within the curly braces, otherwise skip to the first statement after the closing brace } Resume execution here in either case