HTML and JavaScript
Download
Report
Transcript HTML and JavaScript
HTML and JavaScript
CPSC 222
Ellen Walker
Hiram College
Web Servers & Clients
• Browser is a web client
• It sends requests to a server (e.g.
cs.hiram.edu) - GET ~walkerel/cs222
• Server responds with the text of the file
• Browser formats the text and displays the
file.
• (Restaurant example)
Getting HTML & JavaScript
Examples
• Use “view source” on any web site to see
what is there!
– Choose sites that end in .htm or .html
– You will get the html in a separate window
• Use “save as” to make your own copy
HTML Commands
• Structure
– <head>…</head>
• Formatting
– <h1>This is a major heading </h1>
• Links
– <a href=http://cs.hiram.edu/~walkerel/cs222>
• Scripts (ignored by HTML)
– <script> JavaScript goes here </script>
Reading HTML
• <env opt1=val1 opt2=val2 …>
– Begin environment and set options
• </env>
– End the environment (in reverse order)
– <env1> … <env2> … </env2> … </env1>
• Other text (except scripts and comments)
– Display directly, ignore tabs and ends of lines
Limitations of HTML
• HTML is only for text formatting
• It cannot respond to user input
• It cannot respond to its environment (e.g.
current date)
• It cannot do computations
Web Page Computation
• On the server
– CGI (Common Gateway Interface)
– ASP (Active Server Pages - MS)
– PHP (Multiplatform command language)
• On the client
– Java applets: compiled on the server, runs on
the client
– JavaScript: source code in the web page
Running on the Server
•
•
•
•
Client requests a page
Server runs a program based on the address
Program generates a web page
Page is delivered to the client, which
displays it
Running on the Client
• Client requests a page
• Server delivers the page
• Client interprets (part of) the page as a
program and runs the program
• Program includes “write” statements to
display its result
Why JavaScript?
• No compiler needed
• No server needed
– Clients can read and interpret files on their own
computers
• Similar structure to Java
– Syntax
– Object-oriented
Reading JavaScript
• Java like statements
– Sum = a + b; if (sum > 10) … else …
• Input (built-in functions)
– alert(“You have to click OK now”);
– name = prompt(“What is your name?”)
• Input (interaction controls)
– <form>… <input type=“button” onclick =
“alert(‘you clicked!’)”> … </form>
More JavaScript
• Output (directly into page)
– document.writeln(“JavaScript worked!”);
• Creating and using variables
– var query = “How old are you,” + name + ”?”
• Defining functions
– function name (parameters){ … }
Putting it together
<head>
<title>test</title>
</head>
<body>
My first java script.
<script>
name = prompt("what is your name? ");
document.writeln("<p>Hello, " + name);
</script>
</body>