COP 3813COP 3813Intro to Internet Intro to Internet

ComputingComputing

Prof. Roy LevowProf. Roy Levow

Lecture 4Lecture 4

JavaScriptJavaScript

JavaScriptJavaScript

JavaScriptJavaScript– Object-oriented programming languageObject-oriented programming language– Interpreted from source codeInterpreted from source code– Supported by most browsersSupported by most browsers– Executed on client system in browserExecuted on client system in browser– Program text output is treated as html Program text output is treated as html

and rendered by browserand rendered by browser– Includes extensive support for Includes extensive support for

generating web page and window generating web page and window elementselements

Variables and AssignmentVariables and Assignment

Variable names essentially as in C++Variable names essentially as in C++ No type in declarationNo type in declaration

var name1, name2, …;var name1, name2, …;

Assignment operator =Assignment operator =

ExpressionsExpressions Very similar to C++Very similar to C++ Arithmetic Operators: Arithmetic Operators:

+ - * / % ++ -- etc. as in C+++ - * / % ++ -- etc. as in C++ Comparison operators: < <= == …Comparison operators: < <= == … String concatenation with +String concatenation with +

– also converts other values to string if possiblealso converts other values to string if possible

Output with Output with document.writeln( str );document.writeln( str );

Input withInput withval = window.prompt(“msg”);val = window.prompt(“msg”);

Basic Control StructuresBasic Control Structures

if (cond)if (cond)stmtstmt

else // optional else partelse // optional else part

stmtstmt { … } // block{ … } // block while (cond)while (cond)

stmtstmt for (init; test; incr) stmtfor (init; test; incr) stmt

Use on Web PageUse on Web Page

Generates code where script is Generates code where script is executed in bodyexecuted in body

Functions can go in headFunctions can go in head Wrap withWrap with

<script type = “text/javascript”><script type = “text/javascript”><!--<!--

// code goes here// code goes here-->--></script></script>

ExamplesExamples

Class Average 2 (Class Average 2 (fig. 8.9fig. 8.9))

Analysis (Analysis (fig. 8.11fig. 8.11))

Interest Table (Interest Table (fig. 9.6fig. 9.6))

More Control StatementsMore Control Statements

switch (choice) {switch (choice) {case val: stmtcase val: stmt

break;break;……default: // optionaldefault: // optional

stmtstmt}}

do stmt while (cond);do stmt while (cond);

ExamplesExamples

Bullet lists with switch (Bullet lists with switch (fig. 9.7fig. 9.7))

Headings with do-while (Headings with do-while (fig. 9.9fig. 9.9))

Logical Values and OperatorsLogical Values and Operators

Logical Values areLogical Values aretruetrue falsefalse

Usual logical operatorsUsual logical operators!! &&&& ||||

Short-circuit evaluationShort-circuit evaluation

Defining FunctionsDefining Functions

function fname(parm1, parm2, …)function fname(parm1, parm2, …)

{{

//code//code

return expr;return expr;

}}

NotesNotes– No return typeNo return type– expr in return omitted if no return valueexpr in return omitted if no return value

ExampleExample

Table of Random NumbersTable of Random Numbers((fig. 10.4fig. 10.4))

– Note use of functions from class MathNote use of functions from class Math

Die Roll (Die Roll (fig. 10.5fig. 10.5)) Craps (Craps (fig. 10.6fig. 10.6))

ArraysArrays

Array is a classArray is a class Declare array withDeclare array with

var list = new Array(size);var list = new Array(size); Access with list[index];Access with list[index];

– Start with 0Start with 0 Can hold any type of valueCan hold any type of value Deallocation is automatic when another Deallocation is automatic when another

value is assigned to variablevalue is assigned to variable list.length returns lengthlist.length returns length

Arrays InitializationArrays Initialization

In constructorIn constructornew Array(“red”, “green”, “blue”);new Array(“red”, “green”, “blue”);

By array objectBy array objectx = [1, 2, 3, 4];x = [1, 2, 3, 4];

Can have undefined values; never Can have undefined values; never assignedassigned

Example: DieRoll, Example: DieRoll, fig. 11.6fig. 11.6

Reference ParametersReference Parameters

Arrays and objects are passed by Arrays and objects are passed by reference so a change in the function reference so a change in the function changes the calling valuechanges the calling value

Scalars are passed by valueScalars are passed by value

Two-dimensional ArraysTwo-dimensional Arrays

Declare an Array for rowsDeclare an Array for rows Then assign an Array to each Then assign an Array to each

elementelement Does not enforce rectangular formDoes not enforce rectangular form Access with Array[i][j]Access with Array[i][j]

ObjectsObjects

Similar to C++Similar to C++ Declared with newDeclared with new Math object has elements that are Math object has elements that are

standard math functionsstandard math functionsMath.sin(x)Math.sin(x)

StringsStrings

Class String supports character Class String supports character stringsstrings

Constants are surrounded by “ “Constants are surrounded by “ “ Can use usual C++ \ escapedCan use usual C++ \ escaped Has many methods for string Has many methods for string

manipulationmanipulation Operator + for concatenationOperator + for concatenation Example: SplitAndSubString.html fig. Example: SplitAndSubString.html fig.

12.612.6

Date ObjectDate Object

Access and format date and timeAccess and format date and time See definitions at W3SchoolsSee definitions at W3Schools Example: DateTime.html fig. 12.9Example: DateTime.html fig. 12.9

Document and Window ObjectsDocument and Window Objects

Document object allows access to all Document object allows access to all components of a documentcomponents of a document

See definitions at W3SchoolsSee definitions at W3Schools

Window object allows control of Window object allows control of window featureswindow features

See definitions at W3SchoolsSee definitions at W3Schools Example: Window.html fig. 12.13Example: Window.html fig. 12.13

CookiesCookies

Accessed through Document cookie Accessed through Document cookie propertyproperty

Example: cookie.html fig. 12.15Example: cookie.html fig. 12.15

Final ExampleFinal Example

final.html fig. 12.16final.html fig. 12.16