Docstoc

html_javascript_intro

Document Sample
html_javascript_intro Powered By Docstoc
					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
   <FONT SIZE=14 FACE=Swing>

   <B>Bryan Moore</B><BR>

   </FONT>

   <FONT SIZE=12 FACE=Textile>

   1234 Sunset Ave. <BR>

   Walla Walla, WA 12345 <BR>

   (123)123.4567<BR>

   </FONT>




 Web Applications and Real World Design - Knuckles
                                       History

 Browser parse tree




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

    Parse tree using CSS



                                                    Still need to reference
                                                    Information based on
                                                    “second string after BR”
                                                    Information is not
                                                    meaningful




Web Applications and Real World Design - Knuckles
                                        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/1380


   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…

       <html>
            <head><title>JavaScript HelloWorld!</title></head>
            <body>
              <script language="JavaScript">
        
                 document.write('Javascript says "Hello World!"')
        
              </script>
            </body>
       </html>


   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

   <html>
    <head>
      <script language=“JavaScript”>
       document.write (“<b> This is first </b>);
      </script>
    </head>

    <body>
      Now where does this print on the web page???? <br />

      <script language=“JavaScript”>
        document.write ( “This might be last?”)
      </script>

    </body>
   </html>

   Lets See what the answer is!
                      What is JavaScript

 Now, let JavaScript generate HTML for us…

     <html>
       <head><title>JavaScript HelloWorld!</title></head>
       <body>
         <script laguage="JavaScript">
  
           document.write("<h2>Javascript-Generated output:</h2>
      <p>This paragraph generated by JavaScript</p>
     <p>It can even insert an image</p>
     <img src='../assigns/RayWeb/images/cathedral.jpg' />")
  
         </script>
       </body>
     </html>
 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
    Conditional Statements– if/else

if (some boolean expression is true){

 execute these statements, otherwise skip
 to „else‟ clause
}
else {
  execute these statements if boolean
  expression is false
}
Resume execution here in either case
            Conditional Test Program

   Diagnostic messages indicate flow of control
      1.        var variable1 = 1; var variable2 = 2;
      2.
      3.        if(variable1 >= 0){
      4.          document.write(“<p> 1 is greater than 0
            </p>");
      5.         }
      6.         document.write(“<p>Resuming execution after
            'if'
      7.                         statement</p>");
      8.


      9.        if(variable1 > variable2){
      10.          document.write(“<p>1 is greater than
            2</p>");
      11.        }
      12.        else {
      13.          document.write(“<p>2 is greater than
            1</p>");
      14.        }
      15.          document.write("Resuming execution after
                            Strings

 Strings are sequences of keyboard characters enclosed
  in quotes
   “Hello World” or „Hello World‟


 Variables can hold strings
     var greeting = “Hello World”


 String can be empty, i.e., contain no characters
     var myAnswer = “”


 Use „\‟ (escape symbol) to „type‟ prohibited characters
     \b for backspace, \n for newline, \t for tab, \” for double
      quote
 JavaScript Functions – Basic Principles

 Abstraction
   Experience has taught us that much code is duplicated
    throughout program

     Functions let us write the functionality once, then reuse
      it
JavaScript Functions – Basic Principles

 Encapsulation
     Functions encapsulate a specific capability or feature

     Function name allows us to access a function in our
      program


 Parameterization
     We can customize the function‟s result by passing in
      different values each time we use it


 Must use functions to write serious software!
JavaScript Functions – Basic Principles

 Reasons to use functions
     Ease of communication
     Problem simplification
     Easier construction
     Code readability
     Reusability
     Maintainability

 In JS, functions are the primary encapsulation
  mechanism
       JavaScript Functions – Syntax

 JS function syntax


 function myFunctionName (list of parameters) {

     ….JS code here…

 }
         JavaScript Functions -- Issues

 Key issues about using functions
     Naming functions
     Passing in parameters
     Using local variables within functions
     How to call (i.e., invoke) functions
     How to handle a function‟s return value
     Where to put JS functions in your webpage
       JavaScript Functions – Naming

 Function names
    Name describes what function does
    Name is an identifier, so follow JS identifier syntax rules
     & course coding standards


 Example,
        findMaxValue(„put some parameters here‟)
     JavaScript Functions -- Parameters

 Passing parameters to the function
    Parameters provide functions with input
    Implicitly declared variables that can be accessed by
     code within function body
    You provide actual input values when you call the
     function
    Parameters are named variables separated by commas

 Example,
       function findMaxValue(num1, num2, num3)
  JavaScript Functions – Where to put?

 Put functions within <script>….</script> tags within
  the <head> section of the web page

<head>
 <script language=“JavaScript”>

  declare functions here….

 </script>
</head>
 JavaScript Functions – Local Variables

 If needed, you can declare local variables within a
  function

 local variable is visible only within the function body
  after it’s declared

 Commonly used to store results of an intermediate
  calculation
JavaScript Functions – Local Variables

      function findMaxValue(num1, num2,num3) {
       var tempMax; //local var

        if (num1 >= num2) {
        tempMax = num1;
        }

        else {
          tempMax = num2;
        }

        if(num3 >= tempMax) {
        tempMax = num3;
        }

        return tempMax;

      } //end function
      JavaScript Functions -- Calling

 To call a function from your program, add a statement
 that contains the function name with values for the
 parameters the function requires

 Example…somewhere in the <body>….,
     var x = 1, y = 4, z = 2;

      findMaxValue(x, y, z);

 What value does the function return?
 What happens with the result?
       JavaScript Functions -- Return

 Return keyword tells function to return some value
  and exit immediately

 Function can have multiple return statements but
  only 1 can be executed in any given function call

 Normally used to return the final result of a
  calculation to the calling program

 For an example, see findMaxValue function
       JavaScript Functions -- Return

 Good Example
    Uses var maxNumber in calling program
    Function‟s return value is assigned to maxNumber
    Display of maxNumber has correct value for inputs

 Code snippet
    var x = 1, y = 4, z = 2;

 var maxNumber = findMaxNumber(x, y, z);

 document.write(“The maximum is: “ + maxNumber);
         JavaScript Functions -- Return

 The return must be handled properly or it will be „lost‟


 Usually, you want to assign the result of a function to
  a variable

 Bad Example1,
     Declares var maxNumber in calling program, then
      displays it
     Value is „undefined‟ because maxNumber is never
      initialized & the return value is never assigned to it
        JavaScript Functions -- Return

 Bad Example 2
    Declares var tempMax in calling program because that‟s
     the name of the var being returned from function

    Attempts to display tempMax but value is undefined

    the tempMax in calling program may have the same
     name as var being „returned‟ but they are different
     variables!
JavaScript Functions – Parameter Sequence

     When calling functions, must enter parameters in same order
      as specified in function argument list.


 1.       function calculateDensity(height, width, depth, mass){
 2.               var volume = height * width * depth;
 3.               var density = mass / volume;
 4.               return density;
 5.      }
 6.      ……………………………………………….
 7.      var hth = 2, wth = 3, dth = 4, mass = 10;

 8.     var result = calculateDensity(2, 10, 3, 4);
 9.     //returns .07 but correct answer is .42!!!
JavaScript Functions – Global Variables

 Global variables are those declared outside of
  functions
 Global variables are „visible‟ from anywhere in the
  program, including inside functions

  var globalHello = “Hello!”;

 function writeHello() {
   document.write(globalHello);
 }
 // outputs “Hello!”

  Example program
       JavaScript Functions – Testing


 Test each function thoroughly before proceeding with
 next programming task

    Using multiple sets of inputs, be sure to test all possible
     outcomes

    For each test, be sure calling program is properly
     handling return values
      JavaScript Functions – Debugging


 Use diagnostic output statements to trace program
  execution

 Good places for diagnostic outputs
     Just before entering function
     Immediately upon entering function
     Before/In/After complex logic or computation
     Just before function return statement
     Immediately after function returns to calling program
              JavaScript Functions

 Built-In Functions
   Prompt

   Alert

   Confirm

 http://www.w3schools.com/js/js_popup.asp
           JavaScript and HTML Forms

 JavaScript Objects
   Var truck = new Object();

   Expression on right is a constructor

   Properties
     truck.color=“white”
     document.write(color);

 Primitives
   In JavaScript variable primitive types are number, string and
    Boolean
               JavaScript and HTML Forms

 Object Model for the Browser Window
   Compound object structure is created when a web page loads
    into a browser
         Hierarchy
     Window is an object, the HTML document is an object and its
      elements are objects
     These objects have primitives associated with them
            JavaScript and HTML Forms

 window [closed, location]

      history [length]

      document [bgColor, fgColor, URL, lastmodified,linkColor,
       vlinkColor]
        images [properties]

        links [properties]

        frames [properties]

        forms [properties]
             JavaScript and HTML Forms

 Window object is parent of structure
     window.closed is primitive that is Boolean
     window.location primitive contains string of the URL of the
      HTML file
     window.document object is primary focus
 When web page is loaded the HTML elements assign values
  to most of these window.document primitives
 Often the word window is excluded as in document.write
  but need it if referring to multiple open windows
 Properties can also be objects
               JavaScript and HTML Forms

   <HTML>
   <HEAD>
     <TITLE>Document Properties</TITLE>
   <SCRIPT LANGUAGE=JavaScript><!--
   document.write(closed);
   document.write("<BR>"+ document.bgColor);
   document.write("<BR>"+document.fgColor);
   document.write("<BR>"+document.lastModified);
   //--></SCRIPT>
   </HEAD>
   <BODY TEXT="#0000FF" BGCOLOR="#FFFFCC">
   <P>Blue text on a yellow background.<BR>
   <SCRIPT LANGUAGE=JavaScript><!--
   document.write("<BR>"+ document.bgColor);
   document.write("<BR>"+document.fgColor);
   //--></SCRIPT>
   </BODY>
   </HTML>

        Interactive Programming on the Internet Knuckles
             JavaScript and HTML Forms

 false
 #ffffff
 #000000
 01/10/2001 17:18:30 Blue text on a yellow
 background.

 #ffffcc
 #0000ff



    Interactive Programming on the Internet, Knuckles
           JavaScript and HTML Forms

 Methods
   Behavior associated with an object

   Essentially functions that perform an action

   Some are built in and others user made

 Built-In Methods of the window object
   Confirm

   Alert

   Prompt
               JavaScript and HTML Forms

 User Events
   An event occurs when a user makes a change to a form element
         Ex. Click a button, mouseover an image
     Detection of an event done by event handlers
     Event handler is an attribute of the HTML button
     <form>
         <input type=button value=“please click” onclick=“function
          name()”>
     </form>
                   JavaScript and HTML Forms

   <HTML>
   <HEAD>
   <SCRIPT LANGUAGE=JavaScript><!--
   function changecolor(){
         document.bgColor="#ff0000";
   }
   //--></SCRIPT>
   </HEAD>
   <BODY>
   <P><FORM >
     <P><INPUT TYPE=button VALUE="Click Me" onclick="changecolor()">
   </FORM>
   </BODY>
   </HTML>



     Interactive Programming on the Internet ,Knuckles
           JavaScript and HTML Forms

 Form Object
   Window.document.form
   A form is a property of the document but is also an object
   Form elements are properties of a form and are also objects
   Access to form‟s properties is done through the NAME
    attribute of the FORM tag
   Access to the properties of the form elements is done through
    the NAME attributes of the particular form element
                                          JavaScript and HTML Forms




Interactive Programming on the Internet
,Knuckles
                       JavaScript and HTML Forms
   <HTML>                                                           //--></SCRIPT>
   <HEAD>                                                           </HEAD>
   <SCRIPT LANGUAGE=JavaScript><!--                                 <BODY BGCOLOR="#FFFFCC">
   function plus(){                                                 <P><FORM name=addmult>
              var n1;                                                <P>Enter a number in each field:
              var n2;                                                <INPUT TYPE=text NAME=num1 VALUE="" SIZE=5>
              n1=document.addmult.num1.value;                        <INPUT TYPE=text NAME=num2 VALUE="" SIZE=5><BR>
              n2=document.addmult.num2.value;                        <INPUT TYPE=button VALUE="+" onclick="plus()">
                                                                     <INPUT TYPE=button VALUE="*" onclick="times()"><BR>
             n1=parseFloat(n1);                                      <INPUT TYPE=reset VALUE="Reset Form"><BR>
             n2=parseFloat(n2);                                      <TEXTAREA NAME=result ROWS=3 COLS=27
                                                                     WRAP=virtual></TEXTAREA>
              document.addmult.result.value=n1+n2;                  </FORM>
   }                                                                </BODY>
   function times(){                                                </HTML>
              var n1;
              var n2;
              n1=document.addmult.num1.value;
              n2=document.addmult.num2.value;

             n1=parseFloat(n1);
             n2=parseFloat(n2);

             document.addmult.result.value=n1*n2;
   }




              Interactive Programming on the Internet ,Knuckles
        JavaScript and HTML Forms

Form for submitting info for server side processing




                                                      Interactive Programming on the
                                                      Internet ,Knuckles
                             JavaScript and HTML Forms
   <HTML>                                                                        <TR>
   <HEAD>                                                                            <TD WIDTH=83>
   <SCRIPT LANGUAGE=JavaScript><!--                                                    <P>Address:
   function verify(){                                                                 </TD>
    with(document.infoform){                                                          <TD>
                                                                                       <P><INPUT TYPE=text NAME=address VALUE="" SIZE=32>
                   if((fullname.value=="")||(address.value=="")||(email.valu           </TD>
    e=="")){                                                                         </TR>
                  alert("You have left one or more fields blank. Please             <TR>
    supply the                        necessary information, and re-submit
    the form.");                                                                       <TD WIDTH=83>
                  }                                                                    <P>E-mail:
                  else {                                                              </TD>
                  display.value="The following information has been added             <TD>
    to our                                                                              <P><INPUT TYPE=text NAME=email VALUE="" SIZE=32>
    guestbook:\r"+fullname.value+"\r"+ address.value +"\r"                             </TD>
    +email.value;                                                                    </TR>
               }                                                                    <TR>
    }                                                                                 <TD WIDTH=83>
   }                                                                                   <P><INPUT TYPE=button VALUE="Submit"
   //--></SCRIPT>                                                                 onclick="verify()">
   </HEAD>                                                                            </TD>
   <BODY BGCOLOR="#FFFFCC">                                                           <TD>
   <P><FORM name=infoform>                                                             <P><INPUT TYPE=reset VALUE="Clear Your Information">
      <P><TABLE BORDER=0>                                                             </TD>
       <TR>                                                                         </TR>
        <TD WIDTH=83>                                                               <TR>
          <P>Name:                                                                    <TD COLSPAN=2>
        </TD>                                                                          <P><TEXTAREA NAME=display ROWS=5 COLS=41
        <TD>                                                                      WRAP=virtual></TEXTAREA>
          <P><INPUT TYPE=text NAME=fullname VALUE="" SIZE=32>                         </TD>
        </TD>                                                                       </TR>
       </TR>                                                                      </TABLE>

                                                                                  </FORM>
                                                                                  </BODY>
                                                                                  </HTML>