coreservlets.

com custom onsite training

JavaScript:
Getting Started
Slides 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.

coreservlets.com custom onsite training

For customized training related to JavaScript or

Java, email [email protected]
Marty is also available for consulting and development support

Taught by lead author of Core Servlets & JSP,

co-author of Core JSF (4th Ed), and this tutorial.

Available at public venues, or

custom versions can be held on-site at your organization.
Courses developed and taught by Marty Hall
JavaScript, jQuery, Ext JS, JSF 2.3, PrimeFaces, Java 8 programming,
Spring Framework, Spring MVC, Android, GWT, custom mix of topics
Courses available in any state or country.
Maryland/DC companies can also choose afternoon/evening courses.
Courses developed
Slides and
2016 Marty taught
Hall, by coreservlets.com experts (edited by Marty)
[email protected]
Hadoop, Hibernate/JPA, HTML5, RESTful Web Services

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial

Contact [email protected] forsection
detailscontains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
 Topics in This Section
Intro
Interactive JavaScript practice
Variables
Operators
Functions: basics

coreservlets.com custom onsite training

Intro

Slides 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
 Overview of JavaScript
Used primarily for Web pages (i.e., runs in browser)
To make them more interactive
To get updates from the server without reloading the page (Ajax)
Use growing in contexts other than Web browsers
Node.js for running JavaScript on server
Mozilla Rhino for running JavaScript on desktop
Simpler than most other programming languages (arguably)
So a good starting point for beginning programmers
Second-most popular language behind Java (arguably)
So many jobs available
Not closely related to Java
Despite the similar-sounding names
6

JavaScript Popularity: Job Postings

http://www.indeed.com/jobtrends

Y axis tracks percent of total job postings, not absolute numbers. So, for example, when all the curves go down, it is likely due to a stronger economy with many more teacher and construction jobs. Only the relative values are important.
JavaScript Popularity: Google Searches
https://www.google.com/trends/

Google is deliberately vague about their y-axis scale, but other testing shows it is not absolute number of searches, but some sort of relative scale.

JavaScript Popularity: PYPL Index

http://pypl.github.io

Note the logarithmic scale

for the y axis. See sidebar at
right for absolute numbers.
 Books
JavaScript the Definitive Guide
By David Flanagan, OReilly. The only really complete reference on the JavaScript language.
JavaScript: The Good Parts
By Douglas Crockford (of JSON and YUI fame), OReilly
Outstanding advanced guide to best practices in core JavaScript, especially functions, objects, and
regular expressions. Very short. No coverage of Ajax or DOM scripting.
The Effective Java of JavaScript.
Professional JavaScript for Web Developers
By Nicholas Zakas of Yahoo, Wrox. Good general intro to JavaScript, little Ajax coverage
Pro JavaScript Techniques
By John Resig (of jQuery fame), Apress. Good guide to best practices; not a thorough reference
JavaScript Cookbook
By Shelley Powers, OReilly. Gives good examples of many common
techniques; not a thorough reference
10

Online References
JavaScript tutorial (language syntax)
https://developer.mozilla.org/en-US/docs/Web/JavaScript
http://www.w3schools.com/js/
JavaScript API references (builtin objects)
http://www.w3schools.com/jsref/
http://www.devguru.com/technologies/ecmascript/QuickRef/
http://www.devguru.com/technologies/JavaScript/
http://www.javascriptkit.com/jsref/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
HTML DOM reference (with JavaScript Examples)
http://www.w3schools.com/htmldom/dom_reference.asp
Official ECMAScript specification
http://www.ecma-international.org/publications/standards/Ecma-262.htm
11
coreservlets.com custom onsite training

Interactive JavaScript
Practice
Slides 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.

Firebug or Google Chrome Tools

Install Firebug in Firefox
http://getfirebug.com/
Use Firebug command line for interactive testing
http://getfirebug.com/commandline
More details on Firebug usage
http://getfirebug.com/wiki/
Chrome development tools also good
Many JavaScript developers say development tools for Google Chrome are now just
as good as Firebug
Other browsers catching up
Firefox now has decent native JavaScript development and debugging tools
Even Internet Explorer and Microsoft Edge now have reasonable tools
13
 One Time Only: Configure Firebug
Open Firebug
Open simple HTML file, click Firebug icon or hit F-12, click Console tab
Tell Firebug to open in separate window (optional)
Click icon in top right of Firebug window
Tell Firebug to use multi-line input editor (optional)
Click icon in bottom right of Console window
Tell Firebug to use vertical panels (optional)
Click Firebug icon in top left Options Vertical Panels
Enter JavaScript in bottom panel, click Run
Results will be shown in the top panel

14

Configure Firebug: Details

Open Firebug
Open simple HTML file, click Firebug icon or hit F-12, click Console tab

Enter JavaScript commands here, hit ENTER,

and see results in the panel above. Or, follow
configuration steps shown in next bullets to get
larger input area.

Tell Firebug to open in separate window (optional)

Click icon in top right of Firebug window

If you are just going to be entering core

JavaScript commands, it is more convenient to
have a separate Firebug window as here. But,
if you are going to enter JavaScript commands
that affect the HTML in the page, it is more
convenient to attach Firebug to the main
window, as above.

15
 Configure Firebug: Details
Tell Firebug to use multi-line input editor (optional)
Click icon in bottom right of Console window

Enter JavaScript commands here, click Run at the top.

See results here.

Tell Firebug to use vertical panels (optional)

Click Firebug icon in top left Options Vertical Panels

Enter JavaScript commands here, click Run at the top.

See results here.

16

Simplest JavaScript Practice: Use Firebug Directly

Bring up Firebug
Open Firefox on a Web page you wrote; sample page:
<!DOCTYPE html><html>
<head><title>Testing JavaScript</title></head>
<body>
<h1>A Simple Page for Testing</h1>
</body></html>
Then click on Firebug logo or hit F12
Click on Console tab
Enter commands at bottom and see results in main window
Or, click arrow at bottom right to expand command line into larger editor region
Chrome alternative is similar
Bring up Chrome via Chrome menu, then
17
More Tools Developer Tools, or via Control-Shift-J
 More Powerful: Use script Tag with Firebug
Make JavaScript file
E.g., my-script.js
Make HTML file in same folder
E.g., my-page.html
Have HTML file load the JavaScript file
<!DOCTYPE html><html>
<head><title>Testing JavaScript</title>
<script src="scripts/my-code.js"></script>
</head><body></body></html>
Practice
Put function definitions in my-script.js
Reload the HTML page in the browser every time you make changes
Enter function calls in Firebug
18

JavaScript Testing
Problem
Java: very strict compliance tests to be called Java
You can have very high confidence that code written in Java 8 on Windows version will
run identically (except for some differences in how GUIs look) on Java 8 on MacOS,
Linux, Solaris, and other Windows versions. True for Java from Oracle, Apple, IBM, or
open source version from Brazil.
JavaScript: every browser vendor makes own version, with no outside checks
Behavior of same JavaScript program can vary substantially from browser to browser,
and even from one release of the same browser to another
Consequence
Before final deployment, you must test on all browsers you expect to support
Most developers
Do initial testing and development on either Chrome or Firefox
But test also on Internet Explorer, Microsoft Edge, and Safari before final deployment

19
coreservlets.com custom onsite training

Variables

Slides 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.

Variables
Introduce with var
For global variables (!) and local variables.
No var for function arguments
You do not declare types
Some people say JavaScript is untyped language, but technically it is
dynamically typed language
JavaScript is very liberal about converting types
There are only two scopes
Global scope
Be very careful with this when using Ajax
Can cause race conditions
Function (lexical) scope
There is not block scope as in Java
21
 Variables: Examples
var firstName = "Jane"; // String
firstName; "Jane"
var price = 23.7; // Number
var isDiscounted = true; // Boolean
var quarterlySales = [12, 18, 15, 9];
/* Array -- arrays are covered later */
var customer = { firstName: "Jane", lastName: "Doe" };
/* Object -- objects are covered later */
var x = 5;
function square(x) { return(x * x); }
x; 5
square(7); 49
x; 5
22

Variables: Firebug Examples

coreservlets.com custom onsite training

Operators

Slides 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.

Operators and Statements: Overview

Almost same set of operators as Java
+ (addition and String concatenation), -, *, /
&&, ||, ++, --, etc
The == comparison is more akin to Javas equals
The === operator (less used) is like Javas ==
Statements
Semicolons are technically optional
But highly recommended
Consider
return x
return
x
They are not identical! The second one returns, then evaluates x.
You should act as though semicolons are required as in Java.
Comments
25 Same as in Java (/* multiline comment */ and // single-line comment)
 Mathematical Operators
*, /, +
Multiply, divide, add
var x = 7;
x * 2; 14
%
Remainder
var x = 7;
x % 6; 1
++
Increment (add one to)
var x = 7;
x; 7
x++; // Same as x = x + 1;
x; 8
26

String and Boolean Operators

+
String concatenation; same operator as addition!
var s = "Hello";
s = s + ", World"; // At least one side is a String
s; "Hello, World";
==
Test if equal
var x = 7;
x == 7; true
x == 8; false
<, >, !, &&, ||, etc.
Less than test, greater than test, etc.
Covered in the section on conditionals
var x = 7;
27 x < 8; true
coreservlets.com custom onsite training

Functions: Basics

Slides 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.

Functions
Quick summary now
No types for the parameters
Declare (global) functions with function
Use return if you want return values
Defining a function really just makes a variable whose value is a function

> function square(x) { return(x * x); }

> square(10); 100
> var f = square; // Not the same as var f = square();
> f(10) 100

More details later

29
Lots more detail on functions in upcoming section
 Variable Scoping
Global scope
Variables that are known everywhere; rarely used in real life
var x = 7;
Function (lexical) scope
Variables that are known only within a function; common in real life
function(x) { }

function() {
var x = 7;

}
Usage
Global-scope variables can be seen inside functions and on the outside
Function-scope variables can be seen inside their own function but not on outside
30 See interactive example

Functions and Scoping: Examples

coreservlets.com custom onsite training

Wrap-up

Slides 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.

Summary
Use Firebug or Chrome for practice, testing, and debugging
Install Firebug from http://getfirebug.com/
Get a reference book
JavaScript the Definitive Guide (Flanagan, OReilly)
Bookmark online references
https://developer.mozilla.org/en-US/docs/Web/JavaScript
http://www.w3schools.com/js/
Load JavaScript file from Web page
<script src="scripts/some-script.js"></script>
Practice basic JavaScript syntax
Declare local variables with var
Use *, /, +, etc., and note + can be either addition or concatenation
Declare functions with function
33
coreservlets.com custom onsite training

Questions? More info:

http://www.coreservlets.com/javascript-jquery-tutorial/ -- Tutorial on JavaScript, jQuery, and jQuery UI
http://courses.coreservlets.com/Course-Materials/java.html General Java programming tutorial
http://www.coreservlets.com/java-8-tutorial/ Java 8 tutorial
http://courses.coreservlets.com/java-training.html Customized Java training courses, at public venues or onsite at your organization
http://coreservlets.com/ JSF 2, PrimeFaces, Java 8, JavaScript, jQuery, Ext JS, Hadoop, RESTful Web Services, Android, HTML5, Spring, Hibernate, Servlets, JSP, GWT, and other Java EE training
Many additional free tutorials at coreservlets.com (JSF, Android, Ajax, Hadoop, and lots more)

Slides 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.