Download - Html JavaScript and CSS
HTML/JavaScript/CSS
History
What is the relationship between: SGML HTML XHTML CSS JavaScript
History
MarkupAnnotations instructing how the document
should appear in printWord processors use different markup
schemesSGML
IBM - Standard Generalized Markup LanguageMarkup instructions stored with ASCII file
Any computer could render document Lilly Example
History
HTMLTim Berners-Lee created HTML – subset of
SGMLNot platform or application specificOnly 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
Web Applications and Real World Design - Knuckles
Browser parse tree
History
Problems with extracting dataNeed 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
CSSCan alter the look of entire file with a simple
coding changeCan keep styles in an external file Increases the knowledge needed to code
pagesInitial 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 XMLExtensible- can create own tagsComplete 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
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
JavaScriptHTML files are text filesJavaScript is interpreted not compiledObject 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 fileHead section
Ensures script is loaded before trigger eventBody section
Script executes when body loadsExternal
Allows scripts to run on several pagesExamples:
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 secondDocument.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 algebraDon’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 control1. 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.
1. if(variable1 > variable2){ 2. document.write(“<p>1 is greater than
2</p>"); 3. } 4. else { 5. document.write(“<p>2 is greater than
1</p>"); 6. } • document.write("Resuming execution after
'if/else‘1. statement</p>");
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
AbstractionExperience 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 – 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;
1. var result = calculateDensity(2, 10, 3, 4);2. //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 PromptAlertConfirm
http://www.w3schools.com/js/js_popup.asp
JavaScript and HTML Forms
JavaScript ObjectsVar truck = new Object();Expression on right is a constructorProperties
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 WindowCompound object structure is created when a
web page loads into a browserHierarchy
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#00000001/10/2001 17:18:30 Blue text on a yellow background.
#ffffcc#0000ff
Interactive Programming on the Internet, Knuckles
JavaScript and HTML Forms
MethodsBehavior associated with an objectEssentially functions that perform an actionSome are built in and others user made
Built-In Methods of the window objectConfirmAlertPrompt
JavaScript and HTML Forms
User EventsAn event occurs when a user makes a change
to a form elementEx. Click a button, mouseover an image
Detection of an event done by event handlersEvent 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 ObjectWindow.document.formA form is a property of the document but is
also an objectForm elements are properties of a form and
are also objectsAccess to form’s properties is done through
the NAME attribute of the FORM tagAccess to the properties of the form elements
is done through the NAME attributes of the particular form element
JavaScript and HTML Forms
Inte
ractive
Pro
gra
mm
ing
on
the
In
tern
et ,K
nu
ckles
JavaScript and HTML Forms <HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript><!-- function plus(){ 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; } function times(){ 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; }
//--></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>
Interactive Programming on the Internet ,Knuckles
JavaScript and HTML FormsForm for submitting info for server side processing
Inte
ractive
Pro
gra
mm
ing
on
the
In
tern
et ,K
nu
ckles
JavaScript and HTML Forms <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 re-submit 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>