01. Forms

Forms are not of much use when your pages are done strictly with HTML and you don't have access to CGI (Abbreviation of Common Gateway Interface, a specification for transferring information between a World Wide Web server and a CGI program.
What is a CGI program? A CGI program is any program designed to accept and return data that conforms to the CGI specification.

Exercise 01

1. O que é um programa CGI?

However, JavaScript allows you to make effective use of forms to create clocks, scrolling messages, drop down menus, and mini applications. You create a form using the <FORM> </FORM> tags. Different variations of <INPUT> tags are then used to create the form elements we will be using in this class. Two variations of the <INPUT> tag are the text input box and the button. We will learn about some of the others later.

Here is the HTML code used to create a typical form that contains a text input box and button.
01. Open Notepad and Create an HTML file.
02. Type in the code below.

<FORM name="myform">
<INPUT type="text" name="myTextInput"
size=30 maxlength=30
value="this is a 1 line text box">
<P>
<INPUT type="button" name="myButton"
value="A Button">
</FORM>

03. Save your page in your student account and give it the name JavascriptForm.html
04. This is how it should render:



Including the name parameter in the <FORM> tag is important if you want to refer to the form object and its individual parts. We will soon see some examples of this.

Exercise 02

1. O que é possível criar usando formulários em Javascript?

2. Pesquise e descubra o que caracteriza uma scrolling message.

3. Dê uma tradução adequada para a oração “This is how it should render”, em português.

02. How to create an Alert Dialog Box

Below, you can see an example of the Alert Dialog box.
The alert dialog box is a method of the window object. The syntax for the alert box is very simple. This is all there is to it.
alert(message)
The single parameter, message, of the alert box is displayed in a pop-up modal window. A modal window is one that is displayed on top of all other windows until it is closed. A single 'OK' button is provided to close the alert box.

Exercise 03

01. De acordo com o texto, o que uma “pop-up modal window”?

Many novice JavaScript programmers like to use the alert box to welcome visitors to the first page of their site. I do not recommend this because it can become very annoying since it will pop up every time your visitor enters the page, even after following a link to one of your other pages and then returning. So, that's the reason for the message that appeared in the pop-up when you clicked on the link above.

Exercise 04

1. De que forma programadores principiantes gostam de utilizar o “alert Box”


2. O autor recomenda esse uso? Justifique.
.

The alert box is an excellent debugging tool that you can use when you are having a problem with getting your code to work. So far our code is simple and not really needing such a tool. But as your scripts get more complex, you will welcome a method of trouble shooting your code to see how the variables are set or what sequence the code is going though. So remember the alert box and learn how to use it in such situations. It is invaluable.
Let’s look at the code that was used to call the alert box in our demonstration above.

01. Type in the following code in your HTML page:
Click
<A href='JavaScript:alert("Use this wisely!")'>here</A>
to see an example of the Alert Dialog box.

02. Test your Alert Box.


Look at the value that the href attribute is set equal to. This example demonstrates that you can use the special technique shown to cause a function, or object method in this case, to be called instead of navigating to another URL.
JavaScript:functionName() is a valid location parameter for the href attribute of the anchor tag. Also note that our example contains both single and double quotes as we talked about in lesson on document.write, remember?

Exercise 05

01. Give the meaning of single and double quotes in Portuguese.


02. Qual é o significado de “instead of” em português?

I use the above technique with a message "not working yet" when I want to put a link from a page I am developing to another page that I plan to develop later. Doing this prevents me from having a dead link and also reminds me that I need to develop the page.

Exercise 06

1. Complete the blanks with information taken from the paragraph above:
Eu uso a técnica acima com uma mensagem quando eu um link de uma página que eu estou para página que eu mais tarde. Fazendo isso, eu de ter um e também me lembrar que eu preciso desenvolver a página.

2. Events in JavaScript

Here is another example using the alert box:




01. Add in this code in your plain HTML page:
<FORM NAME=”demo1”>
<INPUT TYPE=”button” NAME=”alertDemo” VALUE=”Alert Demo”
onClick=’alert(“Another way to call JavaScript.”)’>
</FORM>

This is a example of using an event handler to call a JavaScript function. Events are actions that take place in a document and are often caused by something that the user did. The event handler in this case is onClick. Some of the more popular event handlers that your might use are:
• onLoad, onUnload, and onBlur in the Window Object
• onClick, onMouseOver and onMouseOut in the Link Object

02. O que são events?



You place the Window Object event handlers in the body tag and the Link Object event handlers in the Anchor tag. You will learn about the event handlers in other objects as you gain more experience with JavaScript.

3. Confirm and Prompt Dialog Boxes

Two other Dialog boxes are available in the window object. We will give you a demo and display the code used for each below. We don't see a lot of practical use for either of these except for demonstrations. You will soon have enough knowledge to be able to do something similar using JavaScript that can be customized for your site.

01. Type in the code below in your page:

<FORM NAME="demo2">
<INPUT TYPE="button" NAME="confirmDemo"
VALUE="Demo of confirm dialog box"
onClick='confirm("Can you think of a use for this?")'>
</FORM>
<FORM NAME="demo3">
<INPUT TYPE="button" NAME="promptDemo"
VALUE="Demo of prompt dialog box"
onClick='prompt("Enter some information")'>
</FORM>

02. Save your work.

Exercise 06

1. Qual a opinião do autor em relação aos botões prompt e de diálogo?

The confirm dialog box returns a Boolean value, true, if OK is pressed and false if Cancel is pressed. You can use this in an if statement to perform some action if you want to. I think the fact that the buttons are labeled 'OK' and 'Cancel' also makes this awkward to use.
The prompt box returns the value of the text in the field if the OK button is clicked. It returns null if the cancel button is clicked.

Exercise 07

Assignment

01. Make a page that contains three links. Use these three links to demonstrate the three event handlers (onClick, onMouseOver, and onMouseOut) of the Link object.
02. Use the alert box for this exercise similar to the way we did for the demo of the onClick event handler for the button on a form.
03. Be aware that this problem is more challenging that you think at first because you need to have something for the href property of each of these links.
04. Place a dummy function in the HEAD section and call that from the href property of the link. Follow the example below for the onMouseOver handler:
<HTML>
<HEAD>
<TITLE>Event Demo</TITLE>
<SCRIPT language="JavaScript">
<!--
function doNothing(){
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="white">
<P>
<A href= "JavaScript:doNothing()"
onMouseOver="alert('Result of onMouseOver Event')">
onMouseOver Event Demo</A>
<P>

05. This is how your page should look like: