COMM 1213 H1 COMP 4923 X1

COMM 1213 H1COMP 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 • JavaScript – Runs within a browser, can manipulate most aspects of HTML webpage.html Browser JavaScript Interpreter Operating System Computer Hardware

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

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

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

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”

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> </SCRIPT> </HEAD> <BODY> <P>OK, buddy. That's fine.<BR> <SCRIPT LANGUAGE=JavaScript></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

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

Prompting / Storing User Input Declare variable <HTML> <HEAD> <script LANGUAGE="Javascript"></script> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P> </BODY> </HTML> Assign variable a value, default =“” Use variable in calling of method

Math Operators on Variables <HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript></SCRIPT> </HEAD> <BODY> <P> </BODY> </HTML> • Math Operators: • + addition • - subtraction • * multiplication • / division

Character Operators on Variables • Concatenation of strings: <HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript></SCRIPT> </HEAD> <BODY> <P> </BODY> </HTML>

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

Converting Strings to Numbers Converts string to floating point number (3.14159) <HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript></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

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?

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”

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

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

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

Making Decisions - Checking Strings <HTML> <HEAD> <script LANGUAGE="Javascript"></script> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P> </BODY> </HTML>

If .. Then .. Else <HTML> <HEAD> <script LANGUAGE="Javascript"></script> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P> </BODY> </HTML>

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

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/

THE ENDdanny.silver@acadiau.ca

COMM 1213 H1 COMP 4923 X1