01 Properties & Write

Getting Started

Java, Javascript, C and C++ are very similar, and like VisualBASIC Javascript is an OOP - Object Oriented Programming language. In this exercise we will use Javascripts within an HTML (HyperText Markup Language) web page to make our first "Hello World" program and take a look at object properties.

Start by getting yourself organized. Start a new web page and type in a header, your name, the job number and the date. Save your new page to your Javascript folder, call it 11.htm.

Make your first form

In your body insert a form.

<FORM ACTION="" METHOD=POST name=form1>

<INPUT TYPE=text NAME=text1 VALUE="Tex Text" SIZE=50>

</FORM>

Simple Screen Output

Now for the Javascript bit: Type in the following:

<script language = Javascript>

hit return a couple of times

.....

type </script>

Between the script tags type the following Javascript code:

document.write("The object type is: " + document.form1.text1.type + "<br>");

document.write("The name of this object is: " + document.form1.text1.name + "<br>");

document.write("The value of this object is: " + document.form1.text1.value + "<br>");

document.write("The size of this object is: " + document.form1.text1.size + "<br>");

Preview your web page in a browser. Your web page should contain the results of your Javascript just below the form.

The field type is: text

The name of this field is: text1

The value of this field is: Tex Text

The size of this field is: 50

So now we have a way to input data and a method to write to the page. Later we will see that you can also write to a form object. Right now, if you change the contents of the form the results will not be reflected in your output since document.write implements just once when the page is loaded.

Internal Documentation

Screen Output

You can add HTML tags to your document.write statements to format screen output generated by Javascript. Just as the <br> tag adds a carriage return in HTML in the example above, other tags such as <B> (bold) , <I> (italic) or <CENTER> (centre) tags can be added as well. As with most HTML tags you need to remember to add the corresponding back-slash-tag, </B>, </I> or </CENTER>.

Review

• • All of this can be done using any simple text editor or a programming text editor like Notepad++ or Brackets.

  • document.write is the same as PRINT.

• You can use // for single line comments and /* */ for multi line comments.

• Add HTML tags to document.write to format your output.

Practice

1. Job 12: Save 11 AS 12. Add a second form (form2) and text field (text2). document.form2.text2.value is "And I am a code warrior!" Copy, Paste and modify the Javascript for form1 to work for form2. Add a multiline comment at the top of the script that states your name, the date and the job #. Add a single line comment that shows the start of the code that refers to form2.

2. Job 13: Save 12 AS 13. Add a third form (form3) and a check box (checkbox01). Copy and paste the following script into a new Javascript section.:

   1. document.write("The checkbox is " + document.form3.checkbox01.checked + "<br>");

      1. if (document.form3.checkbox01.checked == true)

      2. document.write("And I don't know what I am going to do!");

      3. else

      4. document.write(" hmmm");

   2. Job 14: Add document.write("<H3><B>"); just before the first document.write statement in job 13. Add document.write("</H3></B>"); just after the last document.write. Add 2 other text formatting tags to these statements. You can discover HTML tags by searching sites like w3schools.com.