- 2 Executing a Program
- 3 Basic Syntax
- 4 Calculating a Formula
- 5 Execution by Events
In a web page, we learned that HTML is used to define the structure, and we can add pictures or CSS.
However, with only HTML and CSS, the web page is pretty much static For example the text that you specify with the “paragraph” <p> tags will remain unchanged.You can’t really add “movement” to the page. This also means that the page is not really interactive with users.
The way you access your exercise should be using your web browser , through URL, for example: web.sfc.keio.ac.jp/~t12345xx/exercise/ex05-1.html , NOT through file:// (it means do not open your HTML by either right clicking and opening using Chrome or using File-Open File through Chrome’s menu
- Create “
- Store the both files (html and js) under your exercise directory , access
ex05-1.jsand change “world” to your name.
ex05-1.jsand type in the same sentence.
- Change “Hello” in the second line to “Goodbye”.
Executing a Program
Browsers displays the content on HTML in order (top to bottom) but it executes programs when it recognizes a script element. When there are multiple commands, they normally will be executed in order.
Edit ex05-1.htmland write the following. What have changed?
- You will see and experience later on that the location of the <script> tag could affect the behaviour of your program/web page, because as mentioned above the browser interpret the lines in order, from top to the bottom, in general.
How to use Scratchpad (only for Firefox web browser -not available as a built-in feature in Chrome-need to install an “extension”)
There are times when we want to try changing a small part of a program and see what happens, but starting up a browser each time is quite irritating. In such a case, you can use scratchpad on Firefox to directly change and execute the program.
- Select Tools→WebDeveloper→Scratchpad,
- Type in
- Execute the program by selecting Execute→ Run and see what happens.
How to use Console
When there are errors in a program, the program would (obviously) not run. However, If there are no clues, it would take a tremendous amount of time to find the error. Therefore, browsers have a function that gives us error messages.
ex05-1.jsand change alert to
- Reload the browser and check the console.
ex05-1.js, reload the page and re-check the console.
- 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 comments, and other parts of the code must be written with ASCII characters (ASCII will be covered in the 8th lesson).
- 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 to do it, but it is a good practice and preferable for preventing any trouble.
- Access the HTML file and check the errors on the console.
- Fix the errors.
Calculating a Formula
We can write formulas inside
alert instead of texts, and the result will be displayed.
The basic arithmetic operations can be written as you would normally do in math.
ex05-1.jsand write the following. Access 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
ex05-1.jsand write the following. Open the file via browser.
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 given 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”.
Calculating via Console
Execute the following functions via console.
alertis also a type of function. It is not used to calculate a value, but is used to display an alert box. This function returns a special value
undefined (this function does not really return a value).
- Calculate the sum of square root of 2 and 3.
- What happens when you divide 1 with 0?
- What happens when you divide 0 with 0?
NaNstands for “Not A Number”. This means that the result cannot be displayed as a numeral value.
- For example
12is a number, but it is a string literal made of the letter 1 and 2.
+is the symbol meaning add, but when used with the data type
string, it can be used to connect string literals.
Numberfunction converts string literals to numeric values.
To understand the difference between data type Number and String (VERY IMPORTANT!), Execute the following functions via console.
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 that you want to execute when there is an event, you must define the “event handler” that corresponds with HTML elements.
- Create the file
ex05-11.htmland fill in the following.
1234567891011121314<!DOCTYPE html><html><head><meta charset="utf-8"><title>Exercise 05-11</title></head><body><h1>Practicing Event Handlers</h1><input type="button" value="click here" onclick="alert('Hello, world!');"></body></html>
- Make a copy of the input element and edit
ondblclick.Change “hello world” to text of your choice. Reload the browser and try clicking or double clicking the button.
In this case,
onclick is generally used for events associated with buttons. It will however works with other elements too as long as the event handler is correct.
Edit the header (Heading 1/<h1>) “Practicing Event Handlers” so that “Hello, world!” shows up when you click it.
onclickevent handler is set to headers or paragraph,
visitors cannot see it. You should tell them “click here” by changing color or underlining it (use <u> tag).
Look at the Reference below, and make events that shows messages when moving the cursor or changing the text inside a textbox, etc…(you need to find out which events that are associated with cursor movement and changes of input in a text box). Hints: for cursor movement find it under Mouse Events, for changes of input in a text box find it under Form Events)
- What is a program used for?
- In what order are the statements inside a program executed?
- What does “calling out a function” mean?
- What does “returning a value” mean?
- What is an Event?
- What is an Event Handler?