![Page 1: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/1.jpg)
COP 3813COP 3813Intro to Internet Intro to Internet
ComputingComputing
Prof. Roy LevowProf. Roy Levow
Lecture 4Lecture 4
JavaScriptJavaScript
![Page 2: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/2.jpg)
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
![Page 3: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/3.jpg)
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 =
![Page 4: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/4.jpg)
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”);
![Page 5: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/5.jpg)
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
![Page 6: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/6.jpg)
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>
![Page 7: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/7.jpg)
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))
![Page 8: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/8.jpg)
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);
![Page 9: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/9.jpg)
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))
![Page 10: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/10.jpg)
Logical Values and OperatorsLogical Values and Operators
Logical Values areLogical Values aretruetrue falsefalse
Usual logical operatorsUsual logical operators!! &&&& ||||
Short-circuit evaluationShort-circuit evaluation
![Page 11: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/11.jpg)
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
![Page 12: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/12.jpg)
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))
![Page 13: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/13.jpg)
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
![Page 14: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/14.jpg)
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
![Page 15: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/15.jpg)
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
![Page 16: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/16.jpg)
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]
![Page 17: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/17.jpg)
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)
![Page 18: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/18.jpg)
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
![Page 19: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/19.jpg)
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
![Page 20: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/20.jpg)
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
![Page 21: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/21.jpg)
CookiesCookies
Accessed through Document cookie Accessed through Document cookie propertyproperty
Example: cookie.html fig. 12.15Example: cookie.html fig. 12.15
![Page 22: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 4 JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062519/5697c00f1a28abf838cca8db/html5/thumbnails/22.jpg)
Final ExampleFinal Example
final.html fig. 12.16final.html fig. 12.16