1. Dynamic Web Pages
JavaScript
Jill Thomas
Oct 14, 2003

2. Dynamic Web Pages General Information JavaScript Overview
Learning JavaScript
Alternative Languages
Links

3. General Information Dynamic Versus Static?
Static pages use HTML code only
Static pages do not allow interaction by the user other than clicking on links
Blurry: More and more pages today have at least some dynamic element. Thus a page that appears static, might still have something dynamic going on.
The iSchool homepage for instance, is basically a static page. Yet there are JavaScript functions in it. They’re used for style only, but they do allow the page to change dynamically as a user mouses over a link.

4. General Information The user can interact with a dynamic page
As in this example, the user can click on the checkbox and determine which information he/she would like

5. General Information
Users can make requests which will be assembled “on the fly” by an intermediary scripting language
Intermediary scripting language such as javascript and others, which I’ll also mention
Users request information located in a database on the server that will be assembled on the fly according to what is requested.
Obviously, the ability to be dynamic and change “on the fly” is essential for many web sites. The primary purpose of so many sites is to allow users to interact and discover the content they need.

6. JavaScript JavaScript vs. Java The two are fundamentally different
Client-side vs. server-side
Java is a complicated interpreted language used on the Web to create powerful applications – applets
Server-side are executed on the server and you need special software “clients” to run them
Client-side scripts are executed within the browser
Applets have to be downloaded separately so they take more time whereas javascripts download with the html and can thus run automatically

7. JavaScript
A “scripting language” is a lightweight programming language
Usually found embedded in HTML
Introduced in the 90’s, name was first Mocha then changed to LiveScript and finally JavaScript in 1996.
It was created by Netscape.
It is used by millions of web pages
Scripting languages are usually only used to enhance html

8. JavaScript JavaScript lets you… Perform calculations Check forms
Add special effects
Create security passwords
Write interactive games
Include Pop-up windows
The first js I ever wrote converted Fahrenheit to Celsius, for example
You can check forms to make sure all the information is included, etc
Add special effects, like mouseovers
JavaScript hangman, etc.

9. JavaScript

10. JavaScript

11. JavaScript
While you can create some really helpful, useful pages using JS, beware using it just because you can.
Some js features are really good for helping you navigate. Mouseovers can draw your attention and notify you that ‘this is a link’
There really are javascripts out there for just about anything you can imagine from changing background colors to
There are many scripts out there that just let you do annoying things that you would ideally never want on a professional looking site
Pop-up windows for instance, are rampant!
JS lets you do some cool things, but if they’re irrelevant, they should not be on your page! Don’t want a cluttery page

12. Learning JavaScript JavaScript is relatively easy to learn
There are many tutorials on the Web
Some of these tutorials are aimed at programmers, others are really aimed at nonprogrammers
The best let you interact with the tutorial so you can change the code and really get a good sense for what’s going on.
The best way to learn Javascript is to examine code and see how and why it works.

14. Learning JavaScript JavaScript is relatively easy to learn
There are many tutorials on the Web
There are also tons of free scripts available
The best way to learn Javascript is to examine code and see how and why it works. There are sites out there just have tons of scripts that you can preview and grab the code.
Getting a script, even if it’s not quite what you want is a great starting point, you can learn how it works then manipulate it so it does what you want
The last slide of this presentation has lots of links to tutorials and script search sites.

15. Learning JavaScript
Writing scripts that work across different browsers can be tricky
Some older browsers can’t handle JavaScript
I’d love to go on with this part of the tutorial and really teach you some of the ins and outs of javascript, but I suppose that’s outside the scope of a twenty minute presentation…
I would like to give one small heads up, however…
Remember, js is run by the browser, but some older browsers don’t know how to handle JS. They’ll just ignore js all together and try to put all the code on the page with your html. This probably isn’t such a big deal anymore, most people have upgraded, but you’ll definitely still come across this when you look at scripts on the web.
When you’re looking at code, you’ll notice these comments put around the script. They’re included to hide the code from older browsers. The browser will see everything inside as just a comment.

16. Alternative Languages
While JavaScript is the most popular, there are many languages to choose from
Client-side
VB Script
Server-side
CGI – Common Gateway Interface
JSP – Java Server Pages
PHP – Hypertext Preprocessing
ASP – Active Server Pages
VB Script is based on Microsoft’s Visual Basic and it only really works on Microsoft products so IE which is why you don’t see it very often.
Remember client-side run on browser, server-side uses some client program on the server to run the script
You’ve probably noticed web pages with .php or .asp or .jsp these files are html flagged so that they’ll be run properly on the client.
JSP is Java server pages
There are many other languages you can use besides these, one of the beauties of js though is that it is just so well documented on the web
Clever ASP programming can minimize the network traffic
To run ASP scripts you need Microsoft’s Personal Web Server or Internet Information Services (IIS), and you really should be using at least Windows 2000
PHP is open-source so you can download the client free. There’s also lots of documentation on it on the Web
It is fairly simply to learn if you use an online tutorial.
It’s good for your more involved scripting needs
PHP is a scripting language (like JavaScript) but it cannot be executed in the browser
Need a PHP client
It can do other stuff as well…

17. Alternative Languages
Advantage of using server-side scripting –
Since JavaScript and other client-side languages run on the browser they are limited in what they can do
Server-side languages can access server-side resources like databases, catalogs, pricing information, and the like.

18. Alternative Languages
DHTML – Dynamic HTML
Not a language itself, it’s the art of making html more interactive through the use of
JavaScript for interaction
CSS for style
Finally, I wanted to mention DHTML because you may come across it, it’s not actually an alternative language though. It’s just a fancy term tossed out for dynamic pages

19. Links
Tutorials

20. Links
Scripts

21. General Information
Users can make requests which will be assembled “on the fly” by an intermediary scripting language
Intermediary scripting language such as javascript and others, which I’ll also mention
Users request information located in a database on the server that will be assembled on the fly according to what is requested.
Obviously, the ability to be dynamic and change “on the fly” is essential for many web sites. The primary purpose of so many sites is to allow users to interact and discover the content they need.

22. General Information The user can interact with a dynamic page
As in this example, the user can click on the checkbox and determine which information he/she would like