What is Javascript?

• a lightweight programming language ("scripting language")

– used to make web pages interactive
– insert dynamic text into HTML (ex: user name)
– react to events (ex: page load user click)
– get information about a user's computer (ex: browser type)
– perform calculations on user's computer (ex: form validation)
• a web standard (but not supported identically by all browsers)
• NOT related to Java other than by name and some syntactic similarities

1
Linking to a JavaScript file: script

<script src="filename" type="text/javascript"></script>

HTML
• script tag should be placed in HTML page's head
• script code is stored in a separate .js file
• JS code can be placed directly in the HTML file's body or head (like CSS)
– but this is bad style (should separate content, presentation, and behavior

2
Event-driven programming

 split breaks apart a string into an array using a delimiter

 can also be used with regular expressions (seen later)
 join merges an array into a single string, placing a delimiter between them

3
 Event-driven programming

 you are used to programs start with a main method (or implicit main like in PHP)
 JavaScript programs instead wait for user actions called events and respond to them
 event-driven programming: writing programs driven by user events
 Let's write a page with a clickable button that pops up a "Hello, World" window...

4
Buttons
<button>Click me!</button> HTML

• button's text appears inside tag; can also contain images

• To make a responsive button or other UI control:
1. choose the control (e.g. button) and event (e.g. mouse 1. click) of interest
2. write a JavaScript function to run when the event occurs
3. attach the function to the event on the control

5
JavaScript functions
function name() {
statement ;
statement ;
...
statement ;
} JS
function myFunction() {
alert("Hello!");
alert("How are you?");
} JS
 the above could be the contents of example.js linked to our HTML page
 statements placed into functions can be evaluated in response to user events

6
Event handlers
<element attributes onclick="function();">...
HTML

<button onclick="myFunction();">Click me!</button>

HTML
• JavaScript functions can be set as event handlers
• when you interact with the element, the function will execute
• onclick is just one of many event HTML attributes we'll use
• but popping up an alert window is disruptive and annoying
• A better user experience would be to have the message appear on the page...

7
 Document Object Model (DOM)
• most JS code manipulates elements on an HTML page
• we can examine elements' state
• e.g. see whether a box is checked
• we can change state
• e.g. insert some new text into a div
• we can change styles
• e.g. make a paragraph red

8
DOM element objects

9
Accessing elements:
document.getElementById
var name = document.getElementById("id");
JS

<button onclick="changeText();">Click me!</button>

<span id="output">replace me</span>
<input id="textbox" type="text" /> HTML

function changeText() {
var span = document.getElementById("output");
var textBox = document.getElementById("textbox");

textbox.style.color = "red";

} JS

10
Accessing elements:
document.getElementById
 document.getElementById returns the DOM object for an element with a given id
 can change the text inside most elements by setting the innerHTML property
 can change the text in form controls by setting the value property

11
Variables
var name = expression; JS

var clientName = "Connie Client";

var age = 32;
var weight = 127.4; JS
• variables are declared with the var keyword (case sensitive)
• types are not specified, but JS does have types ("loosely typed")
• Number, Boolean, String, Array, Object, Function, Null, Undefined
• can find out a variable's type by calling typeof

12
Number type
var enrollment = 99;
var medianGrade = 2.8;
var credits = 5 + 4 + (2 * 3);
JS
• integers and real numbers are the same type (no int vs. double)
• same operators: + - * / % ++ -- = += -= *= /= %=
• similar precedence to Java
• many operators auto-convert types: "2" * 3 is 6

13
 Math object
var rand1to10 = Math.floor(Math.random() * 10 + 1);
var three = Math.floor(Math.PI);
JS

 methods: abs, ceil, cos, floor, log, max, min, pow, random,
round, sin, sqrt, tan
 properties: E, PI

14
Popup boxes
alert("message"); // message
confirm("message"); // returns true or false
prompt("message"); // returns user input string
JS

15
Arrays
var name = []; // empty array
var name = [value, value, ..., value]; // pre-filled
name[index] = value; // store element
JS

var ducks = ["Huey", "Dewey", "Louie"];

var stooges = []; // stooges.length is 0
stooges[0] = "Larry"; // stooges.length is 1
stooges[1] = "Moe"; // stooges.length is 2
stooges[4] = "Curly"; // stooges.length is 5
stooges[4] = "Shemp"; // stooges.length is 5
JS

16
 Array methods
var a = ["Stef", "Jason"]; // Stef, Jason
a.push("Brian"); // Stef, Jason, Brian
a.unshift("Kelly"); // Kelly, Stef, Jason, Brian
a.pop(); // Kelly, Stef, Jason
a.shift(); // Stef, Jason
a.sort(); // Jason, Stef
JS
 array serves as many data structures: list, queue, stack, ...
 methods: concat, join, pop, push, reverse, shift, slice, sort, splice, toString, unshift
 push and pop add / remove from back
 unshift and shift add / remove from front
 shift and pop return the element that is removed

17
String type
var s = "Connie Client";
var fName = s.substring(0, s.indexOf(" ")); // "Connie"
var len = s.length; // 13
var s2 = 'Melvin Merchant';
JS
• methods: charAt, charCodeAt, fromCharCode, indexOf, lastIndexOf, replace, split, substring, toLowerCase, toUpperCase
• charAt returns a one-letter String (there is no char type)
• length property (not a method as in Java)
• Strings can be specified with "" or ''
• concatenation with + :
• 1 + 1 is 2, but "1" + 1 is "11"

18
Splitting strings: split and join
var s = "the quick brown fox";
var a = s.split(" "); // ["the", "quick", "brown", "fox"]
a.reverse(); // ["fox", "brown", "quick", "the"]
s = a.join("!"); // "fox!brown!quick!the"
JS

 split breaks apart a string into an array using a delimiter

 can also be used with regular expressions (seen later)
 join merges an array into a single string, placing a delimiter between them

19
 What is HTML5?
• HTML5 is the newest version of HTML, only recently gaining partial support by the makers of web
browsers.
• It incorporates all features from earlier versions of HTML, including the stricter XHTML.
• It adds a diverse set of new tools for the web developer to use.
• It is still a work in progress. No browsers have full HTML5 support. It will be many years – perhaps
not until 2018 or later - before being fully defined and supported.

New Elements in HTML5

<article> <figcaption> <progress>
<aside> <footer> <section>
<audio> <header> <source>
<canvas> <hgroup> <svg>
<datalist> <mark> <time>
<figure> <nav> <video>
Other New Features in HTML5

 Built-in audio and video support (without plugins)

 Enhanced form controls and attributes
 The Canvas (a way to draw directly on a web page)
 Drag and Drop functionality
 Support for CSS3 (the newer and more powerful version of CSS)
 More advanced features for web developers, such as data storage and offline
applications.
 First Look at HTML5

Remember the DOCTYPE declaration from XHTML?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

In HTML5, there is just one possible DOCTYPE declaration and it is simpler:

<!DOCTYPE html>

Just 15 characters!

The DOCTYPE tells the browser which type and version of document to expect. This should be the last time the
DOCTYPE is ever changed. From now on, all future versions of HTML will use this same simplified declaration.
 The <html> Element

This is what the <html> element looked like in XHTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Again, HTML5 simplifies this line:

<html lang="en">

The lang attribute in the <html> element declares which language the page content is in. Though not strictly
required, it should always be specified, as it can assist search engines and screen readers.

Each of the world’s major languages has a two-character code, e.g. Spanish = "es", French = "fr", German = "de", Chinese = "zh",
Arabic = "ar".
 The <head> Section
Here is a typical XHTML <head> section:
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>My First XHTML Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

And the HTML5 version:

<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>

Notice the simplified character set declaration, the shorter CSS stylesheet link text, and the removal of the trailing
slashes for these two lines.
 Basic HTML5 Web Page
Putting the prior sections together, and now adding the <body> section and closing tags, we have our first
complete web page in HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>HTML5 is fun!</p>
</body>
</html>

Let's open this page in a web browser to see how it looks…

 Viewing the HTML5 Web Page

Even though we used HTML5, the page looks exactly the same in a web browser as it would in XHTML. Without
looking at the source code, web visitors will not know which version of HTML the page was created with.
 What is AngularJS
MVC Javascript Framework by Google for Rich Web Application
Development.

Why AngularJS
“Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative
way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views”.

• Structure, Quality and Organization

• Lightweight ( < 36KB compressed and minified)
• Free
• Separation of concern
• Modularity
• Extensibility & Maintainability
• Reusable Components

“ HTML? Build UI Declaratively! CSS? Animations! JavaScript? Use it the plain old way!”
 Features of AngularJS Data Binding
<html ng-app>
• Two-way Data Binding –
Model as single source of <head>
truth <script src='angular.js'></script>
• Directives – Extend HTML
</head>
• MVC
<body>
• Dependency Injection
• Testing <input ng-model='user.name'>
• Deep Linking (Map URL to <div ng-show='user.name'>Hi
route Definition) {{user.name}}</div>
• Server-Side Communication </body>
</html>
MVC

Model JS Objects

View DOM

Controller JS Classes
 MVC

<html ng-app>
<head>
<script src='angular.js'></script>
<script src='controllers.js'></script>
</head>
<body ng-controller='UserController'>
<div>Hi {{user.name}}</div>
</body>
</html>

function XXXX($scope) {
$scope.user = { name:'Larry' };
}
 What is a UI Framework?
• Software Framework designed to reduce overhead in web development
• Types of Framework Architectures
• Model-View-Controller (MVC)
• Push vs Pull Based
• Most MVC Frameworks user push-based architecture “action based” (Django, Ruby on
Rails, Symfony, Stripes)
• Pull-based or “component based” (Lift, Angular2, React)
• Three Tier Organization
• Client (Usually the browser running HTML/Javascipt/CSS)
• Application (Running the Business Logic)
• Database (Data Storage)

• Types of Frameworks
• Server Side: Django, Ruby on Rails
• Client Side: Angular, React, Vue
 Javascript Frameworks
• AngularJS/Angular 2
• ASP.net
• React
• Polymer 1.0
• Ember.js
• Vue.js
What is a Backend?
• All of the awesome that runs your application.
• Web API
• Connection layer between the frontend and backend
• Connected through API calls (POST, GET, PUT, etc. )
• Transmit Content from the Backend to the Frontend commonly in JSON Blobs
• Service Architecture that drives everything (Where all the logic is)
What is a WebAPI?

• The intermediate layer between front end and back-end systems

• A “must have” if your APIs will be consumed by third-party services
• Attention to details:
• How consumable is the API (signature, content negotiation)?
• Does it comply with standards (response codes, etc.)?
• Is it secure?
• How do you handle multiple versions?
• Is it truly RESTful?
 Popular Tools
Development Tools:
•Chrome/Firefox Developer Tools
•Postman (API)
•Dreamweaver
•Git / SourceTree
Analytics Tools:
•Google/Adobe Analytics