What is Javascript?

(Adapted from www.javascriptmall.com/)

Javascript is a language which has many interesting characteristics.

It is fast:

JavaScript is 100% text, just like HTML is. Therefore it loads quickly from the server to your computer. JavaScript runs on your computer and does not have to download any additional applications to do its job.

It can be mixed with HTML:

You use the HTML tag combination <SCRIPT> </SCRIPT> to identify JavaScript. This makes it HTML friendly.

It can be annoying to your visitors:

  • if you use too much.
  • are more interested in doing cute things rather than adding functionality to your page
  • take away some of the browser features that your visitor relies on, example using the status bar at the bottom of your browser for something that keeps your visitor from seeing normal messages.

It can be frustrating to develop:

When you make a mistake and try to trouble shoot. But so can HTML! Have you ever left off a closing tag such as </FONT> and spent some time trying to find the mistake among the many tag combinations on your page.

Exercise 01

a. According to the text above, name, in Portuguese, advantages and disadvantages of Javascript. 

Javascript is Object Oriented:

JavaScript is composed of what is called objects that have properties and methods. The window that you are now using is an object that has properties such as height and width. Methods do things for us. For instance, you can use a JavaScript method to open a pop-up window. Some pop-up windows contain a close button. Pressing the button causes another JavaScript method to run and close the window.

Exercise 02

a. Complete: altura e largura são exemplos de .
b. Dê um exemplo de método citado no texto. .

It is not Java:

Java is a compiled language, i.e. put into machine language before it gets to your computer. JavaScript is an interpreted language, i.e. put into machine language on your computer. The coding in JavaScript is somewhat similar to Java but it is much less restrictive. For example, JavaScript allows you to assign any type of value to your variables. Java does not. Java is a language that experienced programmers use to develop applications. JavaScript is for us less experienced web developers. JavaScript was originally developed independent of Java by Netscape under the name of LiveScript. Netscape changed the name to JavaScript in 1995 as a result of an agreement with Sun, the developer of Java.

It is called jscript by Microsoft:

Microsoft Internet Explorer browsers have what is called jscript. The results from a browser that has jscript is basically the same as one that has JavaScript. The documentation that Microsoft provides makes it look a little different. Call it what you want to, the bottom line is that JavaScript works on the Internet Explorer browsers.

Exercise 03

a. De acordo com o texto, qual a diferença entre Java e Javascript?

b. Complete: Java é uma linguagem mais apropriada para programadores , enquanto é mais apropriada para .

Our First Script

Let's start our journey into the learning of JavaScript by typing in the following HTML code.

<HTML>
<HEAD>
<TITLE>Our First Script</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Our First Script</H1>
</CENTER>
<P>Today is
</BODY>
</HTML>


Save this code as script1.html. It looks something like this when we load it into our browser by using File/Open on the menu.


Not very exciting! Lets add some JavaScript to our code. Add the following script after the line <P>Today is

<SCRIPT Language="JavaScript">
var today = new Date()
document.write(today)
</SCRIPT>


Your HTML code should now look like this.

<HTML>
<HEAD>
<TITLE>Our First Script</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Our First Script</H1>
</CENTER>
<P>Today is
<SCRIPT Language="JavaScript">
var today = new Date()
document.write(today)
</SCRIPT>
</BODY>
</HTML>


Save this script and reload it into you browser. It should render something like this:

Still not real exciting, but remember this is only our first script and does demonstrate something you can't do with plain HTML.

Exercise 04

a. O resultado do script anterior mostra um/uma .
b. O script anterrior demonstra o que você fazer com HTML puro.

The <SCRIPT> tags

As a quick review, a simple HTML tag has the following syntax:

<TAG-NAME [ATTRIBUTE=["VALUE"]....]>

(some text)

</TAG-NAME>


The HTML tags that are used to identify JavaScript are:
<SCRIPT language="JavaScript"> and </SCRIPT>. All text between these two tags is interpreted as JavaScript code by the browser that has the capability (Netscape 2+ and Internet Explorer 3+). The tag contains one attribute language that has the value "JavaScript". You will probably find that your scripts will work if you leave this attribute out. This is not recommended since:
(1) the attribute identifies the code as JavaScript to someone reading your source and,
(2) future browsers may require that this attribute be defined to distinguish it from other languages.

Most browsers in use today have some version of JavaScript built in. However, there are still a few in use that don't understand JavaScript. These browsers will ignore the <SCRIPT> tag but will display the text between the tags. To prevent this, the JavaScript code is enclosed by a combination of the HTML comment tag <!-- --> and the double slash ( //) that is used in JavaScript to identify a comment. The result looks like this <!-- //-->.

Exercise 5

a. De acordo com o texto, navegadores antigos Javascript. Por isso, o código Javascript vem acompanhado por uma de tags que é usada em Javascript .

The complete template for JavaScript is therefore:

<SCRIPT language="JavaScript">
<!-- hide from old browsers

(some text that is JavaScript code)

//-->
</SCRIPT>


Another format of this same template that is more compact is

<SCRIPT language="JavaScript"><!--

(some text that is JavaScript code)

//--></SCRIPT>


Use whichever template that you feel the most comfortable with.

Exercise 6

a. A melhor tradução para "template" é .

 

Our completed first Script

Ok, add the two necessary lines to our first script to hide it from older browsers. Our completed HTML code should now look that shown below. Make sure that you reload the script in the browser to prove that it still works the same.

<HTML>
<HEAD>
<TITLE>Our First Script</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Our First Script</H1>
</CENTER>
<P>Today is
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
var today = new Date()
document.write(today)
//-->
</SCRIPT>
</BODY>
</HTML>

A little about the JavaScript code in our first Script

Look closer at the completed version or our first Script. You should now be able to identify the <SCRIPT> tags and the text that is used to hide our code from the older browsers. The remaining two lines between the <SCRIPT> tags is JavaScript code. The first line initializes a date object. The other line of our code is a method of the document object. For now, all you need to know about it is that you can use this method to write information to the document contained in your browser.


Where to put Scripts

We already know that we can put scripts between the <BODY> and </BODY> tags because that's where we put our first script. You can put JavaScript anywhere in the BODY section of HTML code. You can also put JavaScript in the HEAD section. The word function used in JavaScript may be used several times in the HEAD section of a HTML document. So it turns out that JavaScript can be placed most anywhere in our HEAD and/or our BODY sections. As you learn more about JavaScript, you will understand when you should put it in the HEAD section and when it should go in the BODY of the document.

Our first JavaScript Error (hopefully!)

I say hopefully because you might have already experienced this if had a typo in our script right above. Now to demonstrate one of the important characteristics of JavaScript, Change the words document.write to all caps like this DOCUMENT.WRITE(today). Save your file and reload it into the browser. Surprise! What happened? You got your first JavaScript error. Better get use to it. I try to do my work in small chunks so I can weed out the errors more easily. The more practice with error messages you have the easier it will be to decipher them.

a. O autor tenta trabalhar usando , de forma que ele possa os erros .
b. Qual é a melhor tradução em português para: The more practice with error messages you have the easier it will be to decipher them.

Here is a sample of how the error will look on the Netscape and Internet Explorer browsers. Yours may vary a little from this.

Netscape 4

Internet Explorer 4

Internet Explorer 5

 

So, what caused our error here? The answer is "JavaScript is case sensitive". When I was first setting up this demo I entered Date as date. It took me a while to find out what was wrong. So be careful when you are entering JavaScript code to get the case right and be aware that it is likely that the wrong case could be your problem when you get a JavaScript error.

Notice that all of the error messages show a line number that the error occurred on. In our simple case the line number is exactly where the error occurred. This will not always be the case as our scripts get more complex. However, it will give you some clue as to where to start looking. The error call out can be a little confusing and needs some getting use to.

You probably want to change the case for "document.write" back to all small letters in our example script, save it and make sure it runs ok before we proceed further.

Exercise 07

a. Check True or False.

01. The combination of tags: <!--  //--> is used for newer browsers to understand Javascript code.
02. In the tag: <SCRIPT language="JavaScript"> the name JavaScript is called the attribute.
03. The symbol // is called double slash.
04. document.write is a method used to write information to the document contained in your browser.
05. Error messages usually show the line number where the error is.
06. Javascript is case-sensitive.

 

 

More about document.write()

The document.write() method is one that you will be using a lot. For now, don't worry too much about what a method is beyond our basic explanation we gave when we talked about JavaScript being Object Oriented. Just realize that you can use this method to write a string to the document while it is loading. The syntax for the document.write() method is as follows:

document.write("string")

So, what is a string? It is nothing more than a series of characters. You put the characters in quote marks, except when the string is something that is returned by another method, which was the case in our first script, or is a variable which you will also learn in the future.

Exercise 8

a. De acordo com a passagem acima um "string" é .

So if we wanted to write Welcome to my Web Page using document.write(), this is how we would do it:

document.write("Welcome to my Web Page")

You can include HTML tags in this string if you want. For instance, we can make our welcome bold by doing the following. I will add a second line too.
document.write("<P><B>Welcome to my Web Page</B>")
document.write("<BR>Glad you stopped by!")

Now suppose we want to use document.write() to insert an image in the document. Normally we would use the <IMG SRC > tag to do this. For instance, the tag would look something like this if we were inserting a pet's picture named pet.gif.

<IMG src="pet.gif">

We will need to put quotes around this when we use it with the document.write() method. This will mean that we will have quotes within quotes. This will not work but there is a solution. You alternately use single quotes and double quotes in JavaScript if you need to put quotes within quotes. Heres how we would do our image:
document.write('<IMG src="pet.gif">')

or
document.write("<IMG src='pet.gif'>")

Either way will work fine.
Ok, so it is true that we can do this much simpler by just typing our words into the document itself without all this document.write() stuff. After we learn a little more JavaScript we will be using this method to dynamically create sections of a web page which is actually what we did with our first script. In fact you can create the complete document for a web page using document.write().

Don't forget that you must put our above example scripts between the <SCRIPT> </SCRIPT> tags for them to work.

Confused yet?

So are you completely confused yet? If you can

  • Identify the <SCRIPT> tag.
  • Know how to hide your scripts from older browsers.
  • Look at someone else's source code and identify the parts that are JavaScript (by identifying the <SCRIPT> </SCRIPT> tags of course and knowing that all in between is JavaScript).
  • Know that you can use the document.write() method to write to the document as it is loading.
  • Understand that the results you get from JavaScript may be different for different browsers and in fact may not work in some cases.

Then I would say you have learned a great deal in this lesson and are ready to move on and learn the basics on JavaScript.

Assignment

  • Surf the web and try to determine where JavaScript was used. Note pages that used JavaScript in an effective way.

1. Make a very simple web page using a series of document.write() methods to generate everything that you will see on the screen. This means that all of your BODY section will be a series of document.write() methods.
2. Write My Javascript Page with <H2>.
3. Include at least one image in your web page.
4. Include the date as we learned how to do in our first script.
5. Include a link to IFRN website. 
5. Save the page as My Javascript Page.html in your account.


OBS. Realize that this is not the best way to do this simple web page but it does prepare us to do bigger things soon.

Back to top

 

00: Plano de Ensino
Unit 01: Creating a folder
Unit 02: Reading in English
Unit 03: What is Grammar
Unit 04: Yahoo Account 
Unit 05: What is a computer
Unit 06: Guidelines for writing an Abstract
Unit 07: PC System
Unit 08: Linking Devices

Basic HTML
Unit 09: Faces of the Internet
Unit 10: Website Review I
Unit 11: Website Review II
Unit 12: Talking About Computers
Unit 13: Writing about yourself
Unit 14: Website Basics

 

©Sandro L. Sousa