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