COMM 1213 H1 COMP 4923 X1

11

COMM 1213 H1COMM 1213 H1COMP 4923 X1COMP 4923 X1

JavaScript 1JavaScript 1(Readings: Ch. 10, 11 Knuckles)(Readings: Ch. 10, 11 Knuckles)

22

OutlineOutline

• Intro to JavaScriptIntro to JavaScript

• Fitting JavaScript into HTMLFitting JavaScript into HTML

• Variables and Operators Variables and Operators

• Prompting for Input and other Prompting for Input and other FunctionsFunctions

• Programming ErrorsProgramming Errors

• Making Decisions with Boolean LogicMaking Decisions with Boolean Logic

33

JavaScriptJavaScript

• JavaScript – Runs within a browser, JavaScript – Runs within a browser, can manipulate most aspects of HTMLcan manipulate most aspects of HTML

webpage.html

JavaScript Interpreter

Operating System

Computer Hardware

Browser

44


• Originally “LiveScape”, developed independent of Originally “LiveScape”, developed independent of Java at NetScape by Brendan EichJava at NetScape by Brendan Eich

• A small “scripting” language designed to enhance A small “scripting” language designed to enhance webpages by manipulating webpage objectswebpages 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 webpageCan manipulated most aspects of a webpage• For generation of dynamic content but less For generation of dynamic content but less

complex computation and data manipulationcomplex computation and data manipulation

55


• Examples:Examples:– Movement of browser windowsMovement of browser windows– Validation of entered FORM dataValidation of entered FORM data– Event handlingEvent handling

66

Why learn JavaScript?Why learn JavaScript?

• A good first step to learning programmingA good first step to learning programming– All fundamental concepts are usedAll fundamental concepts are used– Object-Oriented Programming (OOP)Object-Oriented Programming (OOP)

• Allows you to quickly build dynamic Allows you to quickly build dynamic content for webpagescontent for webpages

• JavaScript code can be saved and reused JavaScript code can be saved and reused

• Use existing libraries of JavaScript codeUse existing libraries of JavaScript code

77

To Eliminate the Annoying To Eliminate the Annoying Security Message …Security Message …

• Open IEOpen IE

• Click Tools, Internet options, Click Tools, Internet options, AdvancedAdvanced

• Scroll down to SecurityScroll down to Security

• Enable “Allow active content to run Enable “Allow active content to run files on My Computer”files on My Computer”

88

JavaScript Placement in JavaScript Placement in HTMLHTML• Can be placed in the BODY or HEAD of an HTML Can be placed in the BODY or HEAD of an HTML

document (most typically in the HEAD .. Why?)document (most typically in the HEAD .. Why?)

<HTML><HTML><HEAD><HEAD><SCRIPT LANGUAGE=JavaScript>//--></SCRIPT></SCRIPT></HEAD></HEAD><BODY><BODY><P>OK, buddy. That's fine.<BR><P>OK, buddy. That's fine.<BR><SCRIPT LANGUAGE=JavaScript></SCRIPT>//--></SCRIPT></BODY></BODY></HTML></HTML>

Hides JavaScript from browers that cannot interpret it.

object - document,method - write() … also know as a function

JavaScript statements end with a “;”

99

Variables: Types and NamesVariables: Types and Names

• Variable is a named location in memoryVariable is a named location in memory• Variables must first be declared:Variables must first be declared:

var x; var name,z;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; 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 2006Numeric values such as 3.14159 or 2006– Character string values as “Please enter ID#” and “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 “_” letters, numeric digits (except first char), underscore “_”

Note the difference

1010

Prompting / Storing User Prompting / Storing User InputInput

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

Declare variable

Assign variable a value, default =“”

Use variable in calling of method

1111

Math Operators on VariablesMath Operators on Variables<HTML><HTML><HEAD><HEAD><SCRIPT LANGUAGE=JavaScript></SCRIPT>//--></SCRIPT></HEAD></HEAD><BODY><BODY><P><P></BODY></BODY></HTML></HTML>

Math Operators: + addition - subtraction * multiplication / division

1212

Character Operators on Character Operators on VariablesVariables

• Concatenation of strings:Concatenation of strings:<HTML><HTML><HEAD><HEAD><SCRIPT LANGUAGE=JavaScript></SCRIPT>//--></SCRIPT></HEAD></HEAD><BODY><BODY><P><P></BODY></BODY></HTML></HTML>

1313

Beware of Mixing Data Types Beware of Mixing Data Types and Operatorsand Operators

<HTML><HTML><HEAD><HEAD><SCRIPT LANGUAGE=JavaScript></SCRIPT>//--></SCRIPT></HEAD></HEAD><BODY><BODY><P><P></BODY></BODY></HTML></HTML>

Now try changing the * to a +

1414

Converting Strings to Converting Strings to NumbersNumbers

<HTML><HTML><HEAD><HEAD><SCRIPT LANGUAGE=JavaScript></SCRIPT>//--></SCRIPT></HEAD></HEAD><BODY><BODY><P><P></BODY></BODY></HTML></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

1515

FunctionsFunctions

• Procedural functions:Procedural functions:– document.write(“hello”);document.write(“hello”);– Returns no valueReturns no value

• Value functions:Value functions:– parseFloat(“3.14159”)parseFloat(“3.14159”)– Returns a numeric value of 3.14159Returns a numeric value of 3.14159– What other value functions have we What other value functions have we

used?used?

1616

Program ErrorsProgram Errors

• Programs almost always have “bugs”Programs almost always have “bugs”• ““Debugging” programs is a skillDebugging” programs is a skill• Types:Types:

– Syntax Errors:Syntax Errors:• document.write(“Hello there”)document.write(“Hello there”)• age=prompt(“Enter your age.”);age=prompt(“Enter your age.”);

– Logic Errors:Logic Errors:• Avg=50+100/2;Avg=50+100/2;

– User Errors:User Errors:• age=prompt(“Enter your age.”); age=prompt(“Enter your age.”); and user enters “twenty one”and user enters “twenty one”

1717

Avoiding Program ErrorsAvoiding Program Errors

• Design logic of code prior to sitting at Design logic of code prior to sitting at the keyboard - draw/write it down in the keyboard - draw/write it down in English English

• Have a friend look at the logic Have a friend look at the logic

• Walk through code pretending to be Walk through code pretending to be the computerthe computer

• Have a friend look at the codeHave a friend look at the code

• Verify input data types .. laterVerify input data types .. later

1818

Making Decisions – Boolean Making Decisions – Boolean VariablesVariables(Ch.11)(Ch.11)• Boolean variables or a Boolean expression Boolean variables or a Boolean expression

can have one of two literal values:can have one of two literal values:– true or falsetrue 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);x=(1<2);y=(3.14>3.14);y=(3.14>3.14);z=(3.14>=3.14);z=(3.14>=3.14);X1=((12-3)>((17+3)/2));X1=((12-3)>((17+3)/2));check=(1==2);check=(1==2);fin=(2!=1);fin=(2!=1);

!= is not equal

1919

Making Decisions – Making Decisions – Boolean Truth TablesBoolean Truth Tables

XX YY &&=AND&&=AND || ||=OR=OR

FF FF FF FF

FF TT FF TT

TT FF FF TT

TT TT TT TT

2020

Making Decisions - Checking Making Decisions - Checking StringsStrings

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

2121

If .. Then .. ElseIf .. Then .. Else

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

2222

Further Examples:Further Examples:

• An Interactive Pizza Order ProgramAn Interactive Pizza Order Program http://www.cknuckles.com/intro/lessons/source/L11/f11.5.htmlhttp://www.cknuckles.com/intro/lessons/source/L11/f11.5.html

• Basic Input VerificationBasic Input Verification– Procedure function alert(x)Procedure function alert(x)

•Displays a small window with message XDisplays a small window with message X

– Value function isNan(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.htmlhttp://www.cknuckles.com/intro/lessons/source/L11/f11.6.html

http://www.cknuckles.com/intro/lessons/source/L11/f11.5.html

http://www.cknuckles.com/intro/lessons/source/L11/f11.6.html

2323

ResourcesResources• http://www.w3schools.com/js/js_examples.asphttp://www.w3schools.com/js/js_examples.asp

• http://http://www.tizag.com/javascriptT/index.phpwww.tizag.com/javascriptT/index.php

• http://www.js-examples.com/page/javascripts.htmlhttp://www.js-examples.com/page/javascripts.html

• http://javascript.internet.com/http://javascript.internet.com/

http://www.w3schools.com/js/js_examples.asp

http://www.tizag.com/javascriptT/index.php

http://www.tizag.com/javascriptT/index.php

http://www.js-examples.com/page/javascripts.html

http://javascript.internet.com/

2424

THE ENDTHE END

[email protected]@acadiau.ca

Date post:	01-Jan-2016
Category:	Documents
Upload:	sydnee-cross
View:	27 times
Download:	0 times

COMM 1213 H1 COMP 4923 X1

Documents