Dynamic Web Pages JavaScript Jill Thomas Oct 14, 2003

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

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.

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

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.

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

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

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.

JavaScript

JavaScript

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

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.

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.

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.

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…

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.

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

Links Tutorials

Links Scripts

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.

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