1. Introduction to JavaScript
Jeremy Shafer
Department of MIS
Fox School of Business
Temple University

2. 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

3. 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”

4. 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 declared and used in a similar manner
Comparison and assignment operators the same
Conditional statements and loops work the same.
Case sensitive

5. 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

6. Whoah… let’s take a look….

7. 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:

9. 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.

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

11. 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 …

12. 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?

13. 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

22. JavaScript functions
Optionally followed by a semi-colon.

23. The “use strict” directive

24. Adding an event handler (1 of 2)

25. Adding an event handler (2 of 2)

26. Let’s try this out…