Introduction to JavaScript
MIS 3502, Spring 2016
Jeremy Shafer
Department of MIS
Fox School of Business
Temple University
2/2/2016
Course Overview
We are (still) here
New tools
Weeks 1 - 5




Using a web
framework
Weeks 6 -8
Using a mobile
device IDE
Weeks 9-10
The class project
(It’s a bake off!)
Weeks 11-15
Arrays
PDO
MVC
JavaScript / JSON
Slide 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?
Slide 3
Where does JavaScript run?
URL, referencing a .php
page
PHP Interpreter
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”
Slide 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
Slide 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.
• 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
Slide 6
The DOM (Document Object Model)
All of these activities are
accomplished through the properties
and methods of objects.
•
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:
http://www.w3schools.com/js/js_htmldom.asp
Slide 7
We will see an example of this momentarily…
Slide 8
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.
Slide 9
Where does JavaScript go?
(2)
Another option is to
use the src
attribute of the
<script> tag.
Slide 10
Let’s give it a try…
• See the example javascriptdemo.html
• Review its functionality.
• Do some refactoring:
– Extract the contents of the <script> tag into its
own file, and refer to it using the src attribute of
the <script> tag.
– Extract the contents of the <style> tag into its own
file, and refer to it using the href attribute of the
<link> tag.
Slide 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 …
Slide 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?
Slide 13
To do
• 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.
Slide 14
It’s time for challenge
Slide 15