Introduction to JavaScript MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/2/2016

Course Overview Slide 2 New tools Weeks Using a web framework Weeks 6 -8 Using a mobile device IDE Weeks 9-10 The class project (It’s a bake off!) Weeks We are (still) here Arrays PDO MVC JavaScript / JSON

Objectives Slide 3 Where does JavaScript run? How is JavaScript syntax different from PHP? Where does the JavaScript go? What’s a good basic use of JavaScript?

Where does JavaScript run? Slide 4 URL, referencing a.php page HTTP Response Database PHP Interpreter Browser JavaScript Engine As a general rule, JavaScript lives here, in the browser, and does not interact with any resource outside the browser. This is called a “round trip”

Discuss: Similarities and Differences Slide 5 How is JavaScript syntax similar to PHP? Both draw syntax conventions from the C programming language Statements end in semicolon (usually) Use curly braces {} for code blocks functions declared and used in a similar manner Comparison and assignment operators the same Conditional statements and loops work the same. Case sensitive

Discuss: Similarities and Differences Slide 6 How is JavaScript syntax different from PHP? Variables do not need to start with $ JavaScript code is visible via the “View Source” feature of your browser. It appears inside the tag. Use document.write("Hello World!"); instead of echo("Hello World!"); Concatenation character is “ + ” not “. ” There is no variable substitution in strings. The library of functions is different Variables are declared using var The object operator is different. JavaScript uses a “.” and not a “ -> ” JavaScript has what’s known as the Document Object Model

The DOM (Document Object Model) Slide 7 JavaScript can change all the HTML elements in the page JavaScript can change all the HTML attributes in the page JavaScript can change all the CSS styles in the page JavaScript can remove existing HTML elements and attributes JavaScript can add new HTML elements and attributes JavaScript can react to all existing HTML events in the page JavaScript can create new HTML events in the page Source: All of these activities are accomplished through the properties and methods of objects.

Slide 8 We will see an example of this momentarily…

Where does JavaScript go? Slide 9 You can put a tag here, in the head. (My personal preference and what I see most often.) Or here… right before the closing body tag.

Where does JavaScript go? (2) Slide 10 Another option is to use the src attribute of the tag.

Let’s give it a try… Slide 11 See the example javascriptdemo.html Review its functionality. Do some refactoring: –Extract the contents of the tag into its own file, and refer to it using the src attribute of the tag. –Extract the contents of the tag into its own file, and refer to it using the href attribute of the tag.

Lot’s of things, actually. Whole applications can be written in JavaScript. Soon we will see how it can be used to asynchronously pull data from a web service. But for today we’ll consider a more simple case: form validation. In the most general terms, we use JavaScript to cut down on … So… what’s JavaScript good for? Slide 12

JavaScript for form validation Slide 13 Users can be notified of problems before their form is ever posted to the server Discuss: does this eliminate the need for server side validation of user provided data? Why?

To do Slide 14 See the example javascriptdemo2.html Review its functionality. Make special note of: –The onsubmit attribute of the form. If onsubmit is set to false, the form will not submit. –The user defined function named "validate". It will return either true or false. Complete the validation function so that all form fields are validated. –Note that JavaScript gives you a function called isNaN (short for “is not a number”) that returns true or false.

It’s time for challenge Slide 15