1 COMM 1213 H1 COMP 4923 X1 JavaScript 1 (Readings: Ch. 10, 11 Knuckles)
2 Outline Intro to JavaScript Intro to JavaScript Fitting JavaScript into HTML Fitting JavaScript into HTML Variables and Operators Variables and Operators Prompting for Input and other Functions Prompting for Input and other Functions Programming Errors Programming Errors Making Decisions with Boolean Logic Making Decisions with Boolean Logic
3 JavaScript JavaScript – Runs within a browser, can manipulate most aspects of HTML JavaScript – Runs within a browser, can manipulate most aspects of HTML webpage.html JavaScript Interpreter Operating System Computer Hardware Browser
4 JavaScript Originally “LiveScape”, developed independent of Java at NetScape by Brendan Eich Originally “LiveScape”, developed independent of Java at NetScape by Brendan Eich A small “scripting” language designed to enhance webpages by manipulating webpage objects A small “scripting” language designed to enhance webpages by manipulating webpage objects Code is embedded in HTML, and called by HTML Code is embedded in HTML, and called by HTML Can manipulated most aspects of a webpage Can manipulated most aspects of a webpage For generation of dynamic content but less complex computation and data manipulation For generation of dynamic content but less complex computation and data manipulation
5 JavaScript Examples: Examples: –Movement of browser windows Movement of browser windowsMovement of browser windows –Validation of entered FORM data Validation of entered FORM dataValidation of entered FORM data –Event handling Event handlingEvent handling
6 Why learn JavaScript? A good first step to learning programming A good first step to learning programming –All fundamental concepts are used –Object-Oriented Programming (OOP) Allows you to quickly build dynamic content for webpages Allows you to quickly build dynamic content for webpages JavaScript code can be saved and reused JavaScript code can be saved and reused Use existing libraries of JavaScript code Use existing libraries of JavaScript code
7 To Eliminate the Annoying Security Message … Open IE Open IE Click Tools, Internet options, Advanced Click Tools, Internet options, Advanced Scroll down to Security Scroll down to Security Enable “Allow active content to run files on My Computer” Enable “Allow active content to run files on My Computer”
8 JavaScript Placement in HTML Can be placed in the BODY or HEAD of an HTML document (most typically in the HEAD.. Why?) Can be placed in the BODY or HEAD of an HTML document (most typically in the HEAD.. Why?)<HTML><HEAD> <!-- document.write(" I'm first, man! "); //--></SCRIPT></HEAD><BODY> OK, buddy. That's fine. OK, buddy. That's fine. <!-- document.write("Last but not least."); //--></SCRIPT></BODY></HTML> Hides JavaScript from browers that cannot interpret it. object - document, method - write() … also know as a function JavaScript statements end with a “;”
9 Variables: Types and Names Variable is a named location in memory Variable is a named location in memory Variables must first be declared: Variables must first be declared: var x; var name,z; Variables can be assigned values: Variables can be assigned values: x = 10; name = “Bubba”; z = x+1; x = x+1; Can be initialized: var x = 10; Can be initialized: var x = 10; Can be of different types of values: Can be of different types of values: –Numeric values such as or 2006 –Character string values as “Please enter ID#” and “2006” Variable names can be composed of: Variable names can be composed of: –letters, numeric digits (except first char), underscore “_” Note the difference
10 Prompting / Storing User Input <HTML><HEAD> <!-- var x; var x; x=prompt("Please enter your name.",""); x=prompt("Please enter your name.",""); document.write(x); document.write(x);//--></script></HEAD> <P></BODY></HTML> Declare variable Assign variable a value, default =“” Use variable in calling of method
11 Math Operators on Variables <HTML><HEAD> <!-- var age; var age; age=prompt("Please enter your age.",""); age=prompt("Please enter your age.",""); var dogage; var dogage; dogage=age*7; dogage=age*7; document.write("You may be "); document.write("You may be "); document.write(age); document.write(age); document.write(" years old but, if you were a dog, you would be "); document.write(" years old but, if you were a dog, you would be "); document.write(dogage); document.write(dogage); document.write(" years old!"); document.write(" years old!");//--></SCRIPT></HEAD><BODY><P></BODY></HTML> Math Operators: + addition - subtraction * multiplication / division
12 Character Operators on Variables Concatenation of strings: Concatenation of strings:<HTML><HEAD> <!-- var dog; var dog; dog="Scooby"+" "+"Doo"; dog="Scooby"+" "+"Doo"; document.write(dog); document.write(dog);//--></SCRIPT></HEAD><BODY><P></BODY></HTML>
13 Beware of Mixing Data Types and Operators <HTML><HEAD> <!-- var age,multiplier,dogyears; var age,multiplier,dogyears; age = "2"; age = "2"; multiplier = "7"; multiplier = "7"; dogyears=age * multiplier; dogyears=age * multiplier; document.write("The dog's age in dog-years is ",dogyears,"."); document.write("The dog's age in dog-years is ",dogyears,".");//--></SCRIPT></HEAD><BODY><P></BODY></HTML> Now try changing the * to a +
14 Converting Strings to Numbers <HTML><HEAD> <!-- var age,multiplier,dogyears; var age,multiplier,dogyears; age = "2"; age = "2"; age = parseFloat(age); age = parseFloat(age); multiplier = "7"; multiplier = "7"; multiplier = parseInt(multiplier); multiplier = parseInt(multiplier); dogyears=age + multiplier; dogyears=age + multiplier; document.write("The dog's age in dog-years is ",dogyears,"."); document.write("The dog's age in dog-years is ",dogyears,".");//--></SCRIPT></HEAD><BODY><P></BODY></HTML> Converts string to floating point number ( ) Converts string to an integer (22, 107) If strings and numbers are mixed then a NaN value can be generated
15 Functions Procedural functions: Procedural functions: –document.write(“hello”); –Returns no value Value functions: Value functions: –parseFloat(“ ”) –Returns a numeric value of –What other value functions have we used?
16 Program Errors Programs almost always have “bugs” Programs almost always have “bugs” “Debugging” programs is a skill “Debugging” programs is a skill Types: Types: –Syntax Errors: document.write(“Hello there”) document.write(“Hello there”) age=prompt(“Enter your age.”); age=prompt(“Enter your age.”); –Logic Errors: Avg=50+100/2; Avg=50+100/2; –User Errors: age=prompt(“Enter your age.”); age=prompt(“Enter your age.”); and user enters “twenty one” and user enters “twenty one”
17 Avoiding Program Errors Design logic of code prior to sitting at the keyboard - draw/write it down in English Design logic of code prior to sitting at the keyboard - draw/write it down in English Have a friend look at the logic Have a friend look at the logic Walk through code pretending to be the computer Walk through code pretending to be the computer Have a friend look at the code Have a friend look at the code Verify input data types.. later Verify input data types.. later
18 Making Decisions – Boolean Variables (Ch.11) Boolean variables or a Boolean expression can have one of two literal values: Boolean variables or a Boolean expression can have one of two literal values: –true or false var x; x = false; x=(a>c); var x; x = false; x=(a>c); True or False ?: True or False ?:x=(1<2);y=(3.14>3.14);z=(3.14>=3.14);X1=((12-3)>((17+3)/2));check=(1==2);fin=(2!=1); != is not equal
19 Making Decisions – Boolean Truth Tables XY&&=AND ||=OR FFFF FTFT TFFT TTTT
20 Making Decisions - Checking Strings <HTML><HEAD> <!-- var num,empty; var num,empty; num=prompt("Please enter your name.",""); num=prompt("Please enter your name.",""); empty=(num==""); empty=(num==""); if (empty) { if (empty) { num=prompt("Please, last chance to enter your name.",""); num=prompt("Please, last chance to enter your name.",""); empty=(num==""); empty=(num==""); } document.write(num,", empty is ",empty); document.write(num,", empty is ",empty);//--></script></HEAD> <P></BODY></HTML>
21 If.. Then.. Else <HTML><HEAD> <!-- var num,empty; var num,empty; num=prompt("Please enter your name.",""); num=prompt("Please enter your name.",""); empty=(num==""); empty=(num==""); if (empty) { if (empty) { num=prompt("Please, last chance to enter your name.",""); num=prompt("Please, last chance to enter your name.",""); empty=(num==""); empty=(num==""); } else { } else { document.write("Great.. you got it the first time!! "); document.write("Great.. you got it the first time!! "); } document.write(num,", empty is ",empty); document.write(num,", empty is ",empty);//--></script></HEAD> <P></BODY></HTML>
22 Further Examples: An Interactive Pizza Order Program An Interactive Pizza Order Program Basic Input Verification Basic Input Verification –Procedure function alert(x) Displays a small window with message X Displays a small window with message X –Value function isNan(x) Returns “TRUE” if x is not a number (NaN) Returns “TRUE” if x is not a number (NaN)
23 Resources
24 THE END