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> </SCRIPT></HEAD><BODY> OK, buddy. That's fine. OK, buddy. That's fine. </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 3.14159 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> </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> </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> </SCRIPT></HEAD><BODY><P></BODY></HTML>

13 Beware of Mixing Data Types and Operators <HTML><HEAD> </SCRIPT></HEAD><BODY><P></BODY></HTML> Now try changing the * to a +

14 Converting Strings to Numbers <HTML><HEAD> </SCRIPT></HEAD><BODY><P></BODY></HTML> 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

15 Functions Procedural functions: Procedural functions: –document.write(“hello”); –Returns no value Value functions: Value functions: –parseFloat(“3.14159”) –Returns a numeric value of 3.14159 –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> </script></HEAD> <P></BODY></HTML>

21 If.. Then.. Else <HTML><HEAD> </script></HEAD> <P></BODY></HTML>

22 Further Examples: An Interactive Pizza Order Program http://www.cknuckles.com/intro/lessons/source/L11/f11.5.html An Interactive Pizza Order Program http://www.cknuckles.com/intro/lessons/source/L11/f11.5.html http://www.cknuckles.com/intro/lessons/source/L11/f11.5.html 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) http://www.cknuckles.com/intro/lessons/source/L11/f11.6.html

23 Resources http://www.w3schools.com/js/js_examples.asp http://www.w3schools.com/js/js_examples.asp http://www.w3schools.com/js/js_examples.asp http://www.tizag.com/javascriptT/index.php http://www.tizag.com/javascriptT/index.php http://www.tizag.com/javascriptT/index.php http://www.js-examples.com/page/javascripts.html http://www.js-examples.com/page/javascripts.html http://www.js-examples.com/page/javascripts.html http://javascript.internet.com/ http://javascript.internet.com/ http://javascript.internet.com/

24 THE END danny.silver@acadiau.ca

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:

Similar presentations

About project

Feedback

Log in

Auth with social network:

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:

Similar presentations

About project

Feedback