1 hci 201 javascript - part 1. 2 static web pages l static pages: what we have worked with so far l...

1

HCI 201

JavaScript - Part 1

2

Static web pages

Static pages: what we have worked with so far

HTML tags tell the browser what to do with the content

Pages don’t change during viewing

Like reading a book or magazine

3

Dynamic web pages

Display or behavior can change during viewing

Can prompt for entry of information

Can store information in memory

Display can incorporate user’s input or the result of computations

A fun example

A fancy example

4

What is JavaScript?

JavaScript is NOT Java …more details… JavaScript is an interpreted web scripting

language run from the Web browser. JavaScript is the scripting language of

choice for creating interactive web pages.

5

Key differences Java/JavaScript

Java is a full-blown programming language; JavaScript is a limited scripting language.

Java is relatively complex; JavaScript is usually easier to learn.

Java must be compiled and interpreted; JavaScript needs only to be interpreted.

Java makes larger files and is slower on the Internet; JavaScript creates smaller files and is faster.

Java can run without a browser; JavaScript requires a browser... it works only in a WWW environment.

Java Applets are applications designed specifically for the WWW.

6

JavaScript is coded within HTML documents

<html>



<head> <title> JavaScript example </title> </head>

<body>

<script type="text/javascript">

yourname = prompt("Please enter your name", "");

document.write("Hello " + yourname + ", and welcome !");

</script>

<p> I hope you will enjoy learning JavaScript. </p>

<hr>

<img src="javascript.jpg">

</body>

</html>

Download pic to try this example. javascript.jpg

This script is in the html body

7

Prompt window

9

Look at the script closer…



10

Prompt statement


Your message

11

Prompt statement


Default entry value

12

Prompt statement

yourname = prompt("Please enter your name", “Joe");

Default entry value

13

Write statement


Forms a text string given to the browser for processing

14

Write statement



+ concatenates (joins) strings and variables

15

Write statement

document.write("Hello <i>" + yourname + "</i>, and welcome");


+ concatenates (joins) strings and variables

String can contain HTML tags!

16

Common errors…


Missing quote marks

Misspelled reserved words

With Internet Explorer, turn on detailed error reporting with: Tools > Internet Options > Advancedand click on: Display a notification about every script error

17

Keep in mind …

JavaScript is case sensitive. Each JavaScript command line must end

with a semi-colon (;) One-line comment: // comment Multi-line comment: /* comment */

18

Variables

A variable is a named element in a program, used to store and retrieve information

Name must start with a letter

Case sensitive: “A” and “a” are different!

No space allowed in name

No “special characters” like $ or # or @

Underscore is OK to join parts of name.

19

Variables

When you have more than one word in a variable name, start with a lowercase first letter and capitalize the first letter of any subsequent word. Ex: currentDate

20

Valid variable names

tempInFahr

temp_in_fahrenheit

TEMP_IN_FAHR

SUM

current_age

Sum2Date

21

Invalid variable names

$pay_amount

2hotForU

Count#

count of widgets

final

$ not valid in name

Can’t start with a digit

# not valid in name

Reserved word

Blanks in name

22

Reserved words (Pg. 63)

23

Hiding JavaScript from old browsers

Within the <script> tag, include HTML comment lines such as:<script language=“JavaScript”>

script commands and comments

</script>

<!- - Hide this script from browsers that don’t support JavaScript// Stop hiding from other browsers - ->

When a Web browser that doesn’t support scripts encounters this code, it ignores the content of the <script> tag.

24

Components of JavaScript

Objects (hierarchy, dot syntax) Instance Properties Values Events and Event Handlers Variables Arrays Methods Operators (Assignment, Comparison, etc.) Functions

Example

25

Types of variables

Numeric: 13, 22.3,-3.1415, 5.1E2 (5.1x102) String: any group of characters within

quotation marks. “This is a string”, ‘another string’, ‘3.14’, “” (the empty string)

Boolean: can only be true or falsevar isOk = true;

26

Creating a Date object

JavaScript doesn’t have a Date data type. You need to create a date object that contains date information.

dateVariable = new Date(“month, day, year, hours:minutes:seconds”);

ordateVariable = new Date(year, month, day, hours,minutes,seconds);Examples:

• taxDay = new Date (“April, 15,2005,24:0:0”);or taxDay = new Date (2005,3,15,24,0,0);

• today= new Date ();

27

Time in JavaScript

Seconds and minutes: 0-59 Hours:0-23 Week Days:0 (Sunday) – 6 (Saturday) Day: 1-31 (day of the month) Months:0 (January) –11 (December) Year: since 1900 Time: in millisecond since 6 p.m on 12/31/69

Example:

taxDay = new Date(2005,15,3,0,0,0);

28

Date methods

For retrieving date and time value dateVariable.getFullYear(); dateVariable.getMonth(); dateVariable.getDate(); dateVariable.getDay(); dateVariable.getHours(); dateVariable.getMinutes(); dateVariable.getSeconds();

taxDay.getMonth(); //returns 3

taxDay = new Date (2005,15,3,0,0,0);

Example

ThisMonth = Today.getMonth()+1;

29

Working with Expressions and Operators

Expressions are JavaScript commands that assign values to variables. Example: use the expression, daysLeft=999, to

assign the value 999 to the daysLeft variable

Expressions are created using variables, values, and operators.

One of the most commonly used operators is the + operator, which performs the action of adding or combining two elements. Example: use the plus operator in a program with

the following command:var ThisMonth = Today.getMonth()+1;

30

Addition and Concatenation

result = var1 + var2 If both are number variables:

Adds var1 to var2 Assigns the result to the variable result result is a number variable

If at least one of the two is a string: Concatenate var1 and var2 Assigns the result to the variable result result is a string variable

1 hci 201 javascript - part 1. 2 static web pages l static pages: what we have worked with so far l...

Documents