No.5 Script

JavaScript

In a web page, we learned that HTML is used to define the structure, and CSS is used to define the design.

However, with only HTML and CSS, you can’t add movement to the page.

To create an interactive webpage, we must write a program.  One programming language used on web is JavaScript.

JavaScript and Java is a different language.  Be careful when buying a book of reference.

”Program” and “Script” is basically the same thing.  Short programs are usually refered to as scripts.

JavaScript can as well be written in a different file like CSS.  To avoid confusion, in this class we will write the JavaScript program in a separate file as HTML.

Exercise 05-1(☆)
  1. Make “ex05-1.js" and write the following.
  2. Make “ex05-1.html" in the same directory and write the following.
  3. Open ex05-1.html via browser.
  4. Edit ex05-1.js and change “world” to your name.
  5. Edit ex05-1.js and type in the same sentence.
  6. Change “Hello” in the second line to “Goodbye”.

Hello world is a traditional program begginners make.

Executing a Program

Procedures

JavaScript is a language that instructs browsers to execute commands. For instance, “alert” is a command that displays a text inside a dialog box.

Browsers execute programs when a script element exists.  when there are multiple commands, they will be executed in order(up to down).

Exercise 05-2(☆☆)
  • Edit ex05-1.html and write the following.  What changed?

How to use Scatchpad

There are times when we want to try changing a small part of a program and see what happens, but strarting up a browser each time is quite irratating.  In such a case, you can use scartchpad on Firefox to directly change and execute the program.

Exercise 05-3(☆)
  1. Select Tools→WebDeveloper→Scratchpad,
  2. Type in  alert('Hello, world!');
  3. Execute the program and see what happens.

How to use Console

When there are errors in a program, the program would (obviously) not move.  If there are no clues when searching for the error, it would take a tremendous amount of time and effort, so browsers have the function to give us error messages.

Exercise 05-4(☆)
  1. Select Tool→Web Developer→Web Console
  2. Edit ex05-1.js and change alert to “alart”
  3. Reload the browser and confirm the console.
  4. Fix ex05-1.js, reload the page and confirm the console.

Basic Syntax

We will study JavaScript from now, and here are some basics to remember.

  • Always remember to close parentheses.
  • Enclose string literals(text used as data, the “hello world!”) with single or double quotations.
  • Spaces and new lines can be set anywhere(except the middle of a word).
  • Comments are enclosed with /*  */ .  // can be used to comment out the text behind, on the same line.
  • Non-English characters can only be used in string literals and commnets, and other parts of the code must be written with ASCII characters.
  • Make a habit to close statements(the smallest unit of a program that can be executed) with a semi-colon.  There are cases when you don’t need, but you should to prevent any trouble.
Exercise 05-5(☆☆☆)
  1. Open the following JavaScript files via browser and save the file(File→Save as…)
  2. Make a HTML file that reads these JavaScript files.
  3. Open the HTML file and check the errors on the console.
  4. Fix the errors.

We went through the trouble of saving the JavaScript file, making a HTML file that reads these files, and starting up a browser… , but if all you want to do is search for errors, you can simply use scrathpad.

Calculating a Formula

Easy Formulas

We can write fomulas inside alert instead of texts, and the result will be displayed.

The basic arithmetic operations can be written as you would in math.

Exercise 05-6(☆)
  • Edit ex05-1.js and write the following. Open the file via browser.

Calculations using Functions

To calculate more complicated formulas, we use functions.  For instance, when we want to calculate the square root of a number, there is a function called Math.sqrt.

Exercise 05-7(☆)
  • Edit ex05-1.js and write the following. Open the file via browser.

alert(Math.sqrt(1+1)) , alert(Math.sqrt(2)) , and alert(1.4142135623730951) is the same meaning.

When a function is used to calculate a formula, we call this calling out a function.  When a result is comes back from a function, we call this returning a value.  For instance, when we call out the function Math.sqrt(2), the value 1.4142135623730951 is returned.

Calcuting via Console

It is annoying to edit the Javascript file each time we want to evaluate an equasion.  Instead, we can click on the bottom line of the console, type in the function, and the result will be displayed.

Exercise 05-8(☆)

Execute the following functions via console.

  • 1+1
  • Math.sqrt(1+1)
  • alert(Math.sqrt(1+1))

alert is also a type of function.  It is not used to calculate a value, but is used to display a alert box.  This function returns a special value undefined.

Exercise 05-9(☆☆)
  1. Calcutate the square root of 2 and 3.
  2. What happens when you divide 1 with 0?
  3. What happens when you divide 0 with 0?
  • Infinity means that the result is a number larger than what JavaScript can handle.
  • NaN stands for “Not A Number”.  This means tje result cannot be displayed as a numeral.

Data Type

There are various types of data that can be used with JavaScript, and we call this data type.  A numbers or letters are data types.  Different methods are used to calculate each data type.  When calculating different data types with each other, the browser automatically converts them or returns errors.

  • For example 12 is a number, but ’12’ is a string literal made of the letter ‘1’ and ‘2’.
  • + is the simbol meaning add, but when used with the data type string, it can be used to connect string literals.
  • The Number function converts string literals to numeric values.
Exercise 05-10(☆)

Execute the following functions via console.

  • 2+3
  • '2'+'3'
  • Number('2')+Number('3')
  • '2'+3
  • Number('2')+3

Execution by Events

The program “Hello world” is executed when the browser reads the page, and after the alert box shows up, there is no movement.  This is a little boring, so let’s make a program that corresponds with the users actions.

The trigger for executing a command is called an Event.  There are many types of events, and if there is a program you want to execute on the cue of an event, you must define the event handler that corresponds with HTML elements.

Exercise 05-11(☆☆)
  1. Make the file ex05-11.html and fill in the following.
  2. Open the file via browser and click on the button.

  3. Make a copy of the input element and edit onclick to ondblclick. and change “hello world” to text of your choice.  Reload the browser and try clicking or double clicking the button.

In this case, onclick and ondblclick are the event types, and the part enclosed with quotations is the event handler.  A JavaScript program is written inside the event handler.

onclick is generally used for events concerning buttons, and other elements will work too as long as the event handler is correct.

Exercise 05-12(☆☆☆)

Edit the header “Practicing Event Handlers” so that “Hello, world!” shows up when you click it.

Even if the onclick event handler is set to headers or paragraph,
visitors cannot see it. You should tell them “click here” by changing color or underlining.

Exercise 05-13(☆☆☆☆☆)

Look at the Reference below, and make events that shows messages when moving the cursor or changing the text inside a textbox, etc…

Points to Check
  • What is a program used for?
  • In what order are the statements inside a program executed?
  • What does “calling out a funtion” mean?
  • What does “returning a value” mean?
  • What is an Event?
  • What is an Event Handler?