Download
1 / 61
610 likes | 926 Views
History. What is the relationship between:SGMLHTMLXHTMLCSSJavaScript. History. MarkupAnnotations instructing how the document should appear in printWord processors use different markup schemesSGMLIBM - Standard Generalized Markup LanguageMarkup instructions stored with ASCII fileAny compu
E N D
1. HTML/JavaScript/CSS INFSCI 1059
2. History What is the relationship between:
SGML
HTML
XHTML
CSS
JavaScript
3. 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
4. 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
5. 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>
6. History
7. 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
8. 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
9. History
10. History Extensible Markup Language XML
Extensible- can create own tags
Complete separation of content and style
11. 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
12. 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
13. 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
14. 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
15. 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
16. 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
To insert a JavaScript into an HTML page, we use the <script> tag (also use the type attribute to define the scripting language).
So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends:
By entering the document.write command between the <script type="text/javascript"> and </script> tags,
the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page:
To insert a JavaScript into an HTML page, we use the <script> tag (also use the type attribute to define the scripting language).
So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends:
By entering the document.write command between the <script type="text/javascript"> and </script> tags,
the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page:
17. 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
18. 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
19. 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!
20. 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
21. 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
22. 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;
23. 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
24. 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
25. 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
26. 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
27. Conditional Test Program Diagnostic messages indicate flow of control
var variable1 = 1; var variable2 = 2;
if(variable1 >= 0){
document.write(“<p> 1 is greater than 0 </p>");
}
document.write(“<p>Resuming execution after 'if'
statement</p>");
if(variable1 > variable2){
document.write(“<p>1 is greater than 2</p>");
}
else {
document.write(“<p>2 is greater than 1</p>");
}
document.write("Resuming execution after 'if/else‘
statement</p>");
28. 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
29. 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
30. 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!
31. 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
32. JavaScript Functions – Syntax JS function syntax
function myFunctionName (list of parameters) {
….JS code here…
}
33. 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
34. 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’)
35. 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)
36. 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>
37. 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
38. 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
39. 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?
40. 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
41. 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);
42. 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
43. 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!
44. JavaScript Functions – Parameter Sequence 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!!!
45. 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
46. 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
47. 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
48. JavaScript Functions Built-In Functions
Prompt
Alert
Confirm
http://www.w3schools.com/js/js_popup.asp
49. 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
50. 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
51. JavaScript and HTML Forms window [closed, location]
history [length]
document [bgColor, fgColor, URL, lastmodified,linkColor, vlinkColor]
images [properties]
links [properties]
frames [properties]
forms [properties]
52. 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
53. 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>
54. JavaScript and HTML Forms false #ffffff #000000 01/10/2001 17:18:30 Blue text on a yellow background. #ffffcc #0000ff
55. 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
56. 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>
57. 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>
58. 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
59. JavaScript and HTML Forms
60. 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>
61. JavaScript and HTML Forms
62. 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>
