1 / 30

HCI 201

HCI 201. JavaScript - Part 1. 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. Dynamic web pages. Display or behavior can change during viewing

shadi
Download Presentation

HCI 201

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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> <!-- lecture 5 IT-130 --> <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> This script is in the html body Download pic to try this example. javascript.jpg

  7. Prompt window

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

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

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

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

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

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

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

  15. Common errors… document.write("Hello " + yourname + ", and welcome !"); • 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

  16. 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 */

  17. 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.

  18. 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

  19. Valid variable names • tempInFahr • temp_in_fahrenheit • TEMP_IN_FAHR • SUM • current_age • Sum2Date

  20. 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 Blanks in name Reserved word

  21. Reserved words (Pg. 63)

  22. <!- - Hide this script from browsers that don’t support JavaScript // Stop hiding from other browsers - -> Hiding JavaScript from old browsers • Within the <script> tag, include HTML comment lines such as: <script language=“JavaScript”> script commands and comments</script> • When a Web browser that doesn’t support scripts encounters this code, it ignores the content of the <script> tag.

  23. Components of JavaScript Example • Objects (hierarchy, dot syntax) • Instance • Properties • Values • Events and Event Handlers • Variables • Arrays • Methods • Operators (Assignment, Comparison, etc.) • Functions

  24. 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 falsevarisOk = true;

  25. Creating a Date object • JavaScript doesn’t have a Date data type. You need to create a date object that contains date information. dateVariable = newDate(“month, day, year, hours:minutes:seconds”); ordateVariable = newDate(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 ();

  26. 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);

  27. Date methods Example For retrieving date and time value • dateVariable.getFullYear(); • dateVariable.getMonth(); • dateVariable.getDate(); • dateVariable.getDay(); • dateVariable.getHours(); • dateVariable.getMinutes(); • dateVariable.getSeconds(); taxDay = new Date (2005,15,3,0,0,0); • ThisMonth = Today.getMonth()+1; taxDay.getMonth(); //returns 3

  28. 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;

  29. 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

More Related