Announcements
• No posting of code in the forum
• Programming Document
– http://www.cs.umd.edu/~nelson/documents/SuggestionsForWritingComputerPrograms.htm
© 2019 Dept of Computer Science UMD 1
Organization
• Create a folder named cmsc122 (or anything you like)
• In the cmsc122 folder create two folders:
– lectures
– projects
© 2019 Dept of Computer Science UMD 2
JavaScript
• JavaScript programming language that can appear in html pages
• It allow us to:
– To dynamically create web pages
– To control a browser application
• Open and create new browser windows
• Download and display contents of any URL
– To interact with the user
– Ability to interact with HTML forms
• Process values provided by checkbox, text, buttons, etc.
• JavaScript is not Java, however …
– JavaScript constructs are similar to Java’s constructs (in many cases
identical)
– JavaScript can interact with java programs
• Example: SqrTable.html
– We will go over the details of this example later on
© 2019 Dept of Computer Science UMD 3
JavaScript
• JavaScript Interpreter Process JavaScript code
• To write JavaScript programs you need
– A web browser
– A text editor
• A JavaScript program can appear
– In a file by itself typically named with the extension .js
– In html files between a <script> and </script> tags
• Client-Side JavaScript the result of embedding a JavaScript
interpreter in a web browser
• Template for JavaScript Programs
• Example: TemplateJS.html
© 2019 Dept of Computer Science UMD 4
Strict Mode
• "use strict";
– Prevents some common mistakes
• Make sure it appears inside of the <script></script> tags
© 2019 Dept of Computer Science UMD 5
Execution of JavaScript Programs
• HTML parser Takes care of processing an html document
• JavaScript interpreter Takes care of processing JavaScript code
• HTML parser Must stop processing an html file when JavaScript
code is found (JavaScript interpreter will then be running)
– This implies a page with JavaScript code that is computationally
intensive can take a long time to load
© 2019 Dept of Computer Science UMD 6
JavaScript
• Let’s go over several basic constructs that allow us to define JavaScript
programs
• Some definitions
– string Any set of characters in double quotes (“ “)
– function/method
• An entity that completes a particular task for us
• It may take values necessary to complete the particular task
• It can return values
• Generating output with the document.writeln method
– Allow us to add text to the html file (Example: Writeln.html) by
providing the required text in “ “
– You can specify html code and results of JavaScript constructs
© 2019 Dept of Computer Science UMD 7
JavaScript
• Example: Date.html
• Illustrates how we can generate HMTL output
• Notice how we can use Date() to specify a particular date format
Date() is part of JavaScript
• The + allow us to concatenate strings
– Example: “Mary” + “Land” “MaryLand”
– Example: “Time is: “ + new Date()
© 2019 Dept of Computer Science UMD 8
JavaScript (Variables)
• Variable – A memory location that can store a value. In JavaScript variables are declared
using var or let
var temperature;
let area;
• We prefer let
• Variables names must start with a letter, underscore or dollar sign and can be followed by
any number of letters, underscores, dollar signs or digits
• Variables must be declared before they are used
• A variable can hold different type of values
• Values we can assign to variables
– Integer 0, 10, 40, 6, -7
– Floating-point 3.2, .67, 1.48E-20
– String literals “hello”, “goodbye”
• Operators
• Assignment operator (=)
– Typical arithmetic operators (+, -, *, /)
• Example: Variables.html
© 2019 Dept of Computer Science UMD 9
Reserved Words
• Reserved words – words you cannot use as identifiers
• Some of them are:
– break
– do
– if
– catch
© 2019 Dept of Computer Science UMD 10
Spaces, Semicolons, and Comments
• JavaScript ignores spaces, tabs, and newlines between tokens
• Use spaces to create nicely indented code
• The rules are usually one tab for indentation or three spaces. You need to
satisfy this requirement in programming assignments
• A semicolon is generally used to mark the end of a statement and is
optional when a statement appears on a separate line. For example, the
following two set of statements are equivalent
x = 1;
y = 2;
x=1
y=2
• In this course we will always use a semicolon to mark the end of a
statement
© 2019 Dept of Computer Science UMD 11
Comments
• Comments in JavaScript
– Used to provide information to the programmer
– Used to identify sections in your code
– Ignored by the JavaScript interpreter
• Two types of comments
– Inline comment // This is a comment until the end of the line
– Block comment
/* The following is a comment
that spans several
lines */
– We can use a block comment for a single-line comment
© 2019 Dept of Computer Science UMD 12
Tools
• Indentation http://jsbeautifier.org/
• Finding errors in JS http://jshint.com/
© 2019 Dept of Computer Science UMD 13
