1 HCI 201 JavaScript - Part 1

2 Static web pages l Static pages: what we have worked with so far l HTML tags tell the browser what to do with the content l Pages don’t change during viewing l Like reading a book or magazine

3 Dynamic web pages l Display or behavior can change during viewing l Can prompt for entry of information l Can store information in memory l 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 NOT Javamore 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 JavaScript example yourname = prompt("Please enter your name", ""); document.write("Hello " + yourname + ", and welcome !"); I hope you will enjoy learning JavaScript. Download pic to try this example. javascript.jpgjavascript.jpg This script is in the html body

7 Prompt window

8

9 Look at the script closer… yourname = prompt("Please enter your name", ""); document.write("Hello " + yourname + ", and welcome !");

10 Prompt statement yourname = prompt("Please enter your name", ""); Your message

11 Prompt statement yourname = prompt("Please enter your name", ""); Default entry value

12 Prompt statement yourname = prompt("Please enter your name", “Joe"); Default entry value

13 Write statement document.write("Hello " + yourname + ", and welcome !"); l Forms a text string given to the browser for processing

14 Write statement document.write("Hello " + yourname + ", and welcome !"); l Forms a text string given to the browser for processing l + concatenates (joins) strings and variables

15 Write statement document.write("Hello " + yourname + ", and welcome"); l Forms a text string given to the browser for processing l + concatenates (joins) strings and variables l String can contain HTML tags!

16 Common errors… document.write("Hello " + yourname + ", and welcome !"); l Missing quote marks l Misspelled reserved words l With Internet Explorer, turn on detailed error reporting with: Tools > Internet Options > Advanced and 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 l A variable is a named element in a program, used to store and retrieve information l Name must start with a letter l Case sensitive: “A” and “a” are different! l No space allowed in name l No “special characters” like $ or # l Underscore is OK to join parts of name.

19 Variables l 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 l tempInFahr l temp_in_fahrenheit l TEMP_IN_FAHR l SUM l current_age l Sum2Date

21 Invalid variable names l $pay_amount l 2hotForU l Count# l count of widgets l 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 tag, include HTML comment lines such as: script commands and comments <!- - 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 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, , 5.1E2 (5.1x10 2 ) 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 false var 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”); or dateVariable = 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