Html JavaScript and 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


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


History
 Extensible Markup Language XML
 Extensible- can create own tags
 Complete separation of content and style


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
 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 />
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.
2.
3.
4.

var variable1 = 1; var variable2 = 2;

1.
2.

if(variable1 > variable2){

if(variable1 >= 0){
document.write(“<p> 1 is greater than 0

</p>");
5.
}
6.
document.write(“<p>Resuming execution after
'if'
7.
statement</p>");
8.

3.
4.
5.
6.
•

document.write(“<p>1 is greater than
2</p>");
}
else {
document.write(“<p>2 is greater than
1</p>");
}
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

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!

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>
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 – Parameter
Sequence


1.
2.
3.
4.
5.
6.
7.

1.
2.

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

function calculateDensity(height, width, depth, mass){
var volume = height * width * depth;
var density = mass / volume;
return density;
}
……………………………………………….
var hth = 2, wth = 3, dth = 4, mass = 10;
var result = calculateDensity(2, 10, 3, 4);
//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

 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

 window [closed, location]
history [length]
document [bgColor, fgColor, URL,
lastmodified,linkColor, vlinkColor]





images [properties]
links [properties]
frames [properties]
forms [properties]

 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




















<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

 false
#ffffff
#000000
01/10/2001 17:18:30 Blue text on a yellow
background.
#ffffcc
#0000ff

Interactive Programming on the Internet, Knuckles

 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

 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>

<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

 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


Interactive Programming on the Internet
,Knuckles



























<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript><!-function plus(){
var n1;
var n2;
n1=document.addmult.num1.value;
n1=parseFloat(n1);
n2=parseFloat(n2);
document.addmult.result.value=n1+n2;
}
function times(){
var n1;
var n2;
n1=parseFloat(n1);
n2=parseFloat(n2);
document.addmult.result.value=n1*n2;
}

Interactive Programming on the Internet ,Knuckles
















//--></SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFCC">
<P><FORM name=addmult>
<P>Enter a number in each field:
<INPUT TYPE=text NAME=num1 VALUE="" SIZE=5>
<INPUT TYPE=text NAME=num2 VALUE=""
SIZE=5><BR>
<INPUT TYPE=button VALUE="+" onclick="plus()">
<INPUT TYPE=button VALUE="*"
onclick="times()"><BR>
<INPUT TYPE=reset VALUE="Reset Form"><BR>
<TEXTAREA NAME=result ROWS=3 COLS=27
WRAP=virtual></TEXTAREA>
</FORM>
</BODY>
</HTML>

Form for submitting info for server side processing

Interactive Programming on the Internet
,Knuckles





























<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript><!-function verify(){
with(document.infoform){
if((fullname.value=="")||(address.value=="")||
(email.value=="")){
alert("You have left one or more fields blank. Please
supply the
necessary information, and resubmit the form.");
}
else {
display.value="The following information has been
added to our
guestbook:r"+fullname.value+"r"+ address.value +"r"
+email.value;
}
}
}
//--></SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFCC">
<P><FORM name=infoform>
<P><TABLE BORDER=0>
<TR>
<TD WIDTH=83>
<P>Name:
</TD>
<TD>
<P><INPUT TYPE=text NAME=fullname VALUE=""
SIZE=32>
</TD>
</TR>




<TR>





<TD WIDTH=83>
<P>Address:
</TD>
<TD>
<P><INPUT TYPE=text NAME=address VALUE=""
SIZE=32>
</TD>
</TR>
<TR>
<TD WIDTH=83>
<P>E-mail:
</TD>
<TD>
<P><INPUT TYPE=text NAME=email VALUE=""
SIZE=32>
</TD>
</TR>
<TR>
<TD WIDTH=83>
<P><INPUT TYPE=button VALUE="Submit"
onclick="verify()">
</TD>
<TD>
<P><INPUT TYPE=reset VALUE="Clear Your
Information">
</TD>
</TR>
<TR>
<TD COLSPAN=2>
<P><TEXTAREA NAME=display ROWS=5 COLS=41
WRAP=virtual></TEXTAREA>
</TD>
</TR>
</TABLE>





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



























Html JavaScript and CSS

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Html JavaScript and CSS (20)

Recently uploaded (20)

Html JavaScript and CSS

Editor's Notes