Presentation is loading. Please wait.

Presentation is loading. Please wait.

1 COMM 1213 H1 COMP 4923 X1 JavaScript 1 (Readings: Ch. 10, 11 Knuckles)

Similar presentations


Presentation on theme: "1 COMM 1213 H1 COMP 4923 X1 JavaScript 1 (Readings: Ch. 10, 11 Knuckles)"— Presentation transcript:

1 1 COMM 1213 H1 COMP 4923 X1 JavaScript 1 (Readings: Ch. 10, 11 Knuckles)

2 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 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 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 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 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 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 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?) OK, buddy. That's fine. OK, buddy. That's fine. Hides JavaScript from browers that cannot interpret it. object - document, method - write() … also know as a function JavaScript statements end with a “;”

9 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 10 Prompting / Storing User Input

Declare variable Assign variable a value, default =“” Use variable in calling of method

Declare variable Assign variable a value, default =“” Use variable in calling of method"> 10 Prompting / Storing User Input <HTML><HEAD> <!-- var x; var x; x=prompt(

11 11 Math Operators on Variables

Math Operators: + addition - subtraction * multiplication / division

Math Operators: + addition - subtraction * multiplication / division"> 11 Math Operators on Variables <HTML><HEAD> <!-- var age; var age; age=prompt(

12 12 Character Operators on Variables Concatenation of strings: Concatenation of strings:

"> 12 Character Operators on Variables Concatenation of strings: Concatenation of strings:<HTML><HEAD> <!-- var dog; var dog; dog=

13 13 Beware of Mixing Data Types and Operators

Now try changing the * to a +

Now try changing the * to a +"> 13 Beware of Mixing Data Types and Operators <HTML><HEAD> <!-- var age,multiplier,dogyears; var age,multiplier,dogyears; age =

14 14 Converting Strings to Numbers

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

Converts string to floating point number (3.14159) Converts string to an integer (22, 107) If strings and numbers are mixed then a NaN value can be generated"> 14 Converting Strings to Numbers <HTML><HEAD> <!-- var age,multiplier,dogyears; var age,multiplier,dogyears; age =

15 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 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 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 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 19 Making Decisions – Boolean Truth Tables XY&&=AND ||=OR FFFF FTFT TFFT TTTT

20 20 Making Decisions - Checking Strings

"> 20 Making Decisions - Checking Strings <HTML><HEAD> <!-- var num,empty; var num,empty; num=prompt(

21 21 If.. Then.. Else

"> 21 If.. Then.. Else <HTML><HEAD> <!-- var num,empty; var num,empty; num=prompt(

22 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 23 Resources

24 24 THE END


Download ppt "1 COMM 1213 H1 COMP 4923 X1 JavaScript 1 (Readings: Ch. 10, 11 Knuckles)"

Similar presentations


Ads by Google