Intro to JavaScript CS 115 Computing for the Socio-Techno Web - - PowerPoint PPT Presentation

Intro to JavaScript

CS 115 Computing for the Socio-Techno Web Instructor: Brian Brubach

Announcements

• Assignment 3 posted, due next Monday night
• My office hours 2-3pm today
• Andrea office 3-6pm today
• Project teams
• Please add brief description of your topic if you haven’t yet
• Meeting times
• Project questions?

JavaScript

• JavaScript à programming language that can appear in html pages
• Dynamically create web pages
• Control a browser application
• Open and create new browser windows
• Download and display contents of any URL
• Interact with the user
• Interact with HTML forms
• Process values provided by checkbox, text, buttons, etc.
• Example file à simple-sqrt-table.js,

JavaScript is not Java, but…

• JavaScript constructs are similar to Java’s constructs (in many cases

identical)

• Example à Math.sqrt() in simple-sqrt-table.html
• JavaScript can interact with java programs

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 <script> and </script> tags
• Client-Side JavaScript à the result of embedding a JavaScript interpreter

in a web browser

• Template for JavaScript Programs (within an HTML file)
• Example file à templateJS.html

Strict mode

• "use strict"; à Activates strict mode (include quotes and semicolon)
• Prevents some common mistakes
• Ignore warning about function form for now
• Should be first line inside of the <script></script> tags

<script> "use strict"; /* Some JavaScript code */ </script>

Execution of JavaScript programs

• Execute à run a program
• JavaScript interpreter
• Takes care of processing JavaScript code
• HTML parser
• Takes care of processing an html document
• Stops processing HTML file when JavaScript code is found (JavaScript interpreter

will then be running)

• Computationally intensive JavaScript code can cause a page to load

slowly

• Example à simple-sqrt-table.html with a number over 10,000

Some basic constructs for JavaScipt programs

• String à Any set of characters in double quotes (“ ”)
• Function/method
• An entity that completes a particular task for us
• Can take input values and/or return output values
• JS method example à Math.sqrt(x)
• 𝑔 𝑦 =

𝑦

• Input à 𝑦
• Output à

𝑦

Output

• Generating output with the document.writeln(“ ”) method
• Add text to the html file by providing the required text in “ ”
• Generating output with the getElementById(’some_id’).innerHTML

method

• Access HTML inside element with corresponding id
• Example file à write_html.html
• The + allow us to concatenate strings
• Example à “Mary” + “Land” becomes “MaryLand”
• Example à “Time is: “ + new Date()
• Examples in reading à

http://cs.wellesley.edu/~cs115/readings/JSProgramming.html

JavaScript Variables

• Variable à Memory location that can store a value
• JavaScript variables declared using var or let

var temperature; let area;

• We prefer let for this course
• Variables names must start with a letter, underscore, or dollar sign
• Can be followed by any number of letters, underscores, dollar signs, or digits
• Variables must be declared before they are used
• Part of “use strict”; requirement

JavaScript Variables

• A variable can hold different type of values
• 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

Reserved words

• Reserved words à words you cannot use as identifiers/variables
• Have meaning in the JavaScript language
• Some of them are
• break
• do
• if
• catch

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
• Optional when a statement appears on a separate line, the following are

equivalent: x = 1; y = 2; x = 1 y = 2

• In this course, always use a semicolon to mark the end of a statement

Comments

• 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 */

• Can also use a block comment for a single-line comment

Linking a JavaScript (.js) file

• <script src=“file.js”></script>
• Like having the contents of the file appear between the script tags