A second look at JavaScript Jeremy Shafer Department of MIS Fox School of Business Temple University

Objectives Where does JavaScript run? How is JavaScript syntax different from PHP? Where does the JavaScript go? What’s a good basic use of JavaScript? Details regarding syntax and usage

Where does JavaScript run? PHP Interpreter URL, referencing a .php page Browser JavaScript Engine HTTP Response Database 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 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 are used in a similar manner Comparison and assignment operators the same Conditional statements and loops work the same. Case sensitive

Discuss: Similarities and Differences 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 <script> tag. Instead of echo("Hello World!"); you can use alert("Hello World!"); or document.write("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

Whoah… let’s take a look….

The DOM (Document Object Model) 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 All of these activities are accomplished through the properties and methods of objects. Source: http://www.w3schools.com/js/js_htmldom.asp

Where does JavaScript go? You can put a <script> 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) Another option is to use the src attribute of the <script> tag.

So… what’s JavaScript good for? 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 …

JavaScript for form validation 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?

JavaScript: Facts and Opinions Joy: All these facts and opinions look the same. I can't tell them apart.  Bing Bong: Happens to me all the time. Don't worry about it. -- from the movie Inside Out

NEW!

JavaScript functions Optionally followed by a semi-colon.

The “use strict” directive

Adding an event handler (1 of 2)

Adding an event handler (2 of 2)