1 / 24

COMM 1213 H1 COMP 4923 X1

COMM 1213 H1 COMP 4923 X1. JavaScript 1 (Readings: Ch. 10, 11 Knuckles). Outline. Intro to JavaScript Fitting JavaScript into HTML Variables and Operators Prompting for Input and other Functions Programming Errors Making Decisions with Boolean Logic. JavaScript.

Download Presentation

COMM 1213 H1 COMP 4923 X1

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. COMM 1213 H1COMP 4923 X1 JavaScript 1 (Readings: Ch. 10, 11 Knuckles)

  2. Outline • Intro to JavaScript • Fitting JavaScript into HTML • Variables and Operators • Prompting for Input and other Functions • Programming Errors • Making Decisions with Boolean Logic

  3. JavaScript • JavaScript – Runs within a browser, can manipulate most aspects of HTML webpage.html Browser JavaScript Interpreter Operating System Computer Hardware

  4. JavaScript • Originally “LiveScape”, developed independent of Java at NetScape by Brendan Eich • A small “scripting” language designed to enhance webpages by manipulating webpage objects • Code is embedded in HTML, and called by HTML • Can manipulated most aspects of a webpage • For generation of dynamic content but less complex computation and data manipulation

  5. JavaScript • Examples: • Movement of browser windows • Validation of entered FORM data • Event handling

  6. Why learn JavaScript? • 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 • JavaScript code can be saved and reused • Use existing libraries of JavaScript code

  7. To Eliminate the Annoying Security Message … • Open IE • Click Tools, Internet options, Advanced • Scroll down to Security • 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?) <HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript><!-- document.write("<B>I'm first, man!</B>"); //--> </SCRIPT> </HEAD> <BODY> <P>OK, buddy. That's fine.<BR> <SCRIPT LANGUAGE=JavaScript><!-- document.write("Last but not least."); //--></SCRIPT> </BODY> </HTML> Hides JavaScript from browers that cannot interpret it. JavaScript statements end with a “;” object - document, method - write() … also know as a function

  9. Variables: Types and Names • Variable is a named location in memory • Variables must first be declared: var x; var name,z; • Variables can be assigned values: x = 10; name = “Bubba”; z = x+1; x = x+1; • Can be initialized: var x = 10; • 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: • letters, numeric digits (except first char), underscore “_” Note the difference

  10. Prompting / Storing User Input Declare variable <HTML> <HEAD> <script LANGUAGE="Javascript"><!-- var x; x=prompt("Please enter your name.",""); document.write(x); //--></script> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P> </BODY> </HTML> Assign variable a value, default =“” Use variable in calling of method

  11. Math Operators on Variables <HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript><!-- var age; age=prompt("Please enter your age.",""); var dogage; dogage=age*7; document.write("You may be "); document.write(age); document.write(" years old but, if you were a dog, you would be "); document.write(dogage); document.write(" years old!"); //--></SCRIPT> </HEAD> <BODY> <P> </BODY> </HTML> • Math Operators: • + addition • - subtraction • * multiplication • / division

  12. Character Operators on Variables • Concatenation of strings: <HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript><!-- var dog; dog="Scooby"+" "+"Doo"; document.write(dog); //--></SCRIPT> </HEAD> <BODY> <P> </BODY> </HTML>

  13. Beware of Mixing Data Types and Operators <HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript><!-- var age,multiplier,dogyears; age = "2"; multiplier = "7"; dogyears=age * multiplier; 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 Converts string to floating point number (3.14159) <HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript><!-- var age,multiplier,dogyears; age = "2"; age = parseFloat(age); multiplier = "7"; multiplier = parseInt(multiplier); dogyears=age + multiplier; document.write("The dog's age in dog-years is ",dogyears,"."); //--></SCRIPT> </HEAD> <BODY> <P> </BODY> </HTML> Converts string to an integer (22, 107) If strings and numbers are mixed then a NaN value can be generated

  15. Functions • Procedural functions: • document.write(“hello”); • Returns no value • 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” • “Debugging” programs is a skill • Types: • Syntax Errors: • document.write(“Hello there”) • age=prompt(“Enter your age.”); • Logic Errors: • Avg=50+100/2; • User Errors: • age=prompt(“Enter your age.”); 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 • Have a friend look at the logic • Walk through code pretending to be the computer • Have a friend look at the code • 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: • true or false • var x; x = false; x=(a>c); • 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 X Y &&=AND ||=OR F F F F F T F T T F F T T T T T

  20. Making Decisions - Checking Strings <HTML> <HEAD> <script LANGUAGE="Javascript"><!-- var num,empty; num=prompt("Please enter your name.",""); empty=(num==""); if (empty) { num=prompt("Please, last chance to enter your name.",""); empty=(num==""); } document.write(num," , empty is ",empty); //--></script> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P> </BODY> </HTML>

  21. If .. Then .. Else <HTML> <HEAD> <script LANGUAGE="Javascript"><!-- var num,empty; num=prompt("Please enter your name.",""); empty=(num==""); if (empty) { num=prompt("Please, last chance to enter your name.",""); empty=(num==""); } else { document.write("Great .. you got it the first time!! <br>"); } document.write(num," , empty is ",empty); //--></script> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P> </BODY> </HTML>

  22. Further Examples: • An Interactive Pizza Order Programhttp://www.cknuckles.com/intro/lessons/source/L11/f11.5.html • Basic Input Verification • Procedure function alert(x) • Displays a small window with message X • Value function isNan(x) • 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.tizag.com/javascriptT/index.php • http://www.js-examples.com/page/javascripts.html • http://javascript.internet.com/

  24. THE ENDdanny.silver@acadiau.ca

More Related