JavaScript Examples Standard HTML | JavaScript Page | ASP Page| Back to Home Page| Back to Web Design

The blue paragraph disappeared. 2 hidden pictures appeared. The button you clicked turned dark gray. Button captions appeared & disappeared. Only the button with a caption will work. The page has not changed. All the elements still exist, but now some new stuff is visible while some old stuff is not. All these things were done with Javascript, used as a client-side script, which can adjust the information on the page. The script can run on it's own or respond to user input. Unfortunately everything must already exist on the page, so if I had 50 hidden pictures on this page then it would take a very long time to load.                    Try the next button. Javascript can move things around or change their appearance. Type a message and click the button below. Then watch the status bar of your browser (at the bottom) to see the message. (Your browser must be set to allow Javascript to change the status bar text or this won't work. Also you may have to adjust your browser settings to view the status bar.) This message could also be displayed in the title bar of your browser window or anywhere on the page.  It could even travel up and down the page. Enter another message & click the button a few more times... Notice anything else? This form could be an email page or any data gathering page you might need. Text Box JavaScript can limit your input type to numbers, letters, dates, etc. For example, here you may only type decimal numbers. Check Boxes Box 1  Box 2  Box 3 Check boxes allow you to make more than one choice. Javascript can check to see which boxes you checked. (try it.) Radio Buttons  #1   #2   #3 Radio buttons allow only one choice. But Javascript can check to see which selection you made just the same. List Box cyan blue brown coral crimson gold green lavender light yellow magenta olive purple red sky blue turquoise Javascript can react to your selection by making changes to any object on the page. For some browsers the change will work only after you click on another box. Password The password is required and must be at least 5 letters long. Try clicking the next button without filling it in. DHTML = HTML + JavaScript + Cascading Style Sheets Dynamic HTML (DHTML) describes web pages that react to user input. It usually involves a scripting language, like JavaScript along with normal HTML code. Typically Cascading Style Sheets are also used to define standards (font, size, color) which are applied throughout the web site. Did you notice your browser window changing size? If not, resize your browser window and refresh the page (the 'F5' key.) It should resize itself to 800 x 600 automatically (JavaScript must be enabled in your browser options for it to work.) JavaScript can manipulate your HTML page to make it react to your input. NOTE: The Javascript on this page was written specifically for MS Intenet Explorer 6. It was also checked on Firefox and Netscape Navigator 6. According to Browser Statistics MS Internet Explorer 6 is by far the dominantly used web browser on the market (65%), followed by FireFox (20%). To see the examples, click the button above.