The JavaScript Revolution
The client-side takes over
CS 370 SE Practicum, Cengiz Günay
(Some slides courtesy of Eugene Agichtein and the Internets)
CS 370, Günay (Emory) JavaScript Spring 2014 1 / 17
Agenda
Upcoming project milestones:
Have you met with Bob? GitHub accounts were due today.4/3, this Thursday, you should be getting ready to deploy!4/10 in-class demo and functional prototype opens for testing.Grading includes weekly progress. No updates, no points.
Make-up classes:
Weekend sessions
Today:
The JavaScript revolution?
First, GitHub
CS 370, Günay (Emory) JavaScript Spring 2014 2 / 17
Agenda
Upcoming project milestones:
Have you met with Bob? GitHub accounts were due today.4/3, this Thursday, you should be getting ready to deploy!4/10 in-class demo and functional prototype opens for testing.Grading includes weekly progress. No updates, no points.
Make-up classes:
Weekend sessions
Today:
The JavaScript revolution?
First, GitHub
CS 370, Günay (Emory) JavaScript Spring 2014 2 / 17
Agenda
Upcoming project milestones:
Have you met with Bob? GitHub accounts were due today.4/3, this Thursday, you should be getting ready to deploy!4/10 in-class demo and functional prototype opens for testing.Grading includes weekly progress. No updates, no points.
Make-up classes:
Weekend sessions
Today:
The JavaScript revolution?
First, GitHub
CS 370, Günay (Emory) JavaScript Spring 2014 2 / 17
Agenda
Upcoming project milestones:
Have you met with Bob? GitHub accounts were due today.4/3, this Thursday, you should be getting ready to deploy!4/10 in-class demo and functional prototype opens for testing.Grading includes weekly progress. No updates, no points.
Make-up classes:
Weekend sessions
Today:
The JavaScript revolution?
First, GitHub
CS 370, Günay (Emory) JavaScript Spring 2014 2 / 17
GitHub usage pattern example: 2048
CS 370, Günay (Emory) JavaScript Spring 2014 3 / 17
So many variants!
CS 370, Günay (Emory) JavaScript Spring 2014 5 / 17
2048 GitHub page
CS 370, Günay (Emory) JavaScript Spring 2014 6 / 17
2048 GitHub page
CS 370, Günay (Emory) JavaScript Spring 2014 6 / 17
What's forking??
Stealing from their plate?
More like f#@k in the road
CS 370, Günay (Emory) JavaScript Spring 2014 7 / 17
What's forking??
Stealing from their plate?
More like f#@k in the road
CS 370, Günay (Emory) JavaScript Spring 2014 7 / 17
GitHub usage patterns
Common GitHub usage pattern: fork & modify
1 Fork (clone) someone's project into your account
2 Modify and make it your own
3 Share with original project through �pull requests�
Our GitHub usage pattern: push & pull
1 Several users collaborate on same repo
2 Open GitHub account and we associate you with private project repos
3 Install local client git on Windows, Mac, Linux
4 Clone the repo on your local computer (don't fork on GitHub!)
5 Modify, then push and pull
6 Communicate your pushes with your teammates!
7 (Optional) Make branches and switch between them
CS 370, Günay (Emory) JavaScript Spring 2014 8 / 17
GitHub usage patterns
Common GitHub usage pattern: fork & modify
1 Fork (clone) someone's project into your account
2 Modify and make it your own
3 Share with original project through �pull requests�
Our GitHub usage pattern: push & pull
1 Several users collaborate on same repo
2 Open GitHub account and we associate you with private project repos
3 Install local client git on Windows, Mac, Linux
4 Clone the repo on your local computer (don't fork on GitHub!)
5 Modify, then push and pull
6 Communicate your pushes with your teammates!
7 (Optional) Make branches and switch between them
CS 370, Günay (Emory) JavaScript Spring 2014 8 / 17
How does 2048 work? Client-side computing.
CS 370, Günay (Emory) JavaScript Spring 2014 9 / 17
Brief History of JavaScript
http://en.wikipedia.org/wiki/JavaScript#History
Birth at Netscape: advantage over Microsoft Internet Explorer
Is it compiled? No, interpreted language.
Is it Java? No, inspired by it. :) Naming was confusing, maybeNetscape wanted to ride on the fame of Java, which was hot and newthen.
Appeared �rst as Mocha/LiveScript in Netscape Navigator 2.0 inSeptember 1995
Server-side JS on 1995
Microsoft adoption in 1996
Standardization 1997�2011
Now one of most populer web languages, thanks to AJAX(will do on Thursday)
CS 370, Günay (Emory) JavaScript Spring 2014 10 / 17
Brief History of JavaScript
http://en.wikipedia.org/wiki/JavaScript#History
Birth at Netscape: advantage over Microsoft Internet Explorer
Is it compiled?
No, interpreted language.
Is it Java? No, inspired by it. :) Naming was confusing, maybeNetscape wanted to ride on the fame of Java, which was hot and newthen.
Appeared �rst as Mocha/LiveScript in Netscape Navigator 2.0 inSeptember 1995
Server-side JS on 1995
Microsoft adoption in 1996
Standardization 1997�2011
Now one of most populer web languages, thanks to AJAX(will do on Thursday)
CS 370, Günay (Emory) JavaScript Spring 2014 10 / 17
Brief History of JavaScript
http://en.wikipedia.org/wiki/JavaScript#History
Birth at Netscape: advantage over Microsoft Internet Explorer
Is it compiled? No, interpreted language.
Is it Java? No, inspired by it. :) Naming was confusing, maybeNetscape wanted to ride on the fame of Java, which was hot and newthen.
Appeared �rst as Mocha/LiveScript in Netscape Navigator 2.0 inSeptember 1995
Server-side JS on 1995
Microsoft adoption in 1996
Standardization 1997�2011
Now one of most populer web languages, thanks to AJAX(will do on Thursday)
CS 370, Günay (Emory) JavaScript Spring 2014 10 / 17
Brief History of JavaScript
http://en.wikipedia.org/wiki/JavaScript#History
Birth at Netscape: advantage over Microsoft Internet Explorer
Is it compiled? No, interpreted language.
Is it Java?
No, inspired by it. :) Naming was confusing, maybeNetscape wanted to ride on the fame of Java, which was hot and newthen.
Appeared �rst as Mocha/LiveScript in Netscape Navigator 2.0 inSeptember 1995
Server-side JS on 1995
Microsoft adoption in 1996
Standardization 1997�2011
Now one of most populer web languages, thanks to AJAX(will do on Thursday)
CS 370, Günay (Emory) JavaScript Spring 2014 10 / 17
Brief History of JavaScript
http://en.wikipedia.org/wiki/JavaScript#History
Birth at Netscape: advantage over Microsoft Internet Explorer
Is it compiled? No, interpreted language.
Is it Java? No, inspired by it. :) Naming was confusing, maybeNetscape wanted to ride on the fame of Java, which was hot and newthen.
Appeared �rst as Mocha/LiveScript in Netscape Navigator 2.0 inSeptember 1995
Server-side JS on 1995
Microsoft adoption in 1996
Standardization 1997�2011
Now one of most populer web languages, thanks to AJAX(will do on Thursday)
CS 370, Günay (Emory) JavaScript Spring 2014 10 / 17
Brief History of JavaScript
http://en.wikipedia.org/wiki/JavaScript#History
Birth at Netscape: advantage over Microsoft Internet Explorer
Is it compiled? No, interpreted language.
Is it Java? No, inspired by it. :) Naming was confusing, maybeNetscape wanted to ride on the fame of Java, which was hot and newthen.
Appeared �rst as Mocha/LiveScript in Netscape Navigator 2.0 inSeptember 1995
Server-side JS on 1995
Microsoft adoption in 1996
Standardization 1997�2011
Now one of most populer web languages, thanks to AJAX(will do on Thursday)
CS 370, Günay (Emory) JavaScript Spring 2014 10 / 17
Brief History of JavaScript
http://en.wikipedia.org/wiki/JavaScript#History
Birth at Netscape: advantage over Microsoft Internet Explorer
Is it compiled? No, interpreted language.
Is it Java? No, inspired by it. :) Naming was confusing, maybeNetscape wanted to ride on the fame of Java, which was hot and newthen.
Appeared �rst as Mocha/LiveScript in Netscape Navigator 2.0 inSeptember 1995
Server-side JS on 1995
Microsoft adoption in 1996
Standardization 1997�2011
Now one of most populer web languages, thanks to AJAX(will do on Thursday)
CS 370, Günay (Emory) JavaScript Spring 2014 10 / 17
Intermission
Where we are
• Server-side programming (all processing done by
server, on http request from browser:
– Python + MySQL
– Django
�Client-side programming (some processing done by
browser)
�JavaScript
�JQuery
4/3/2012 CS 370, Spring 2012 2
Client-side programming
• recall: server-side is good for developing static pages
– can specify text/image layout, presentation, links, …
– Web page looks the same each time it is accessed
– in order to develop interactive/reactive pages, must integrate programming
3
Client-side programming
� programs are written in a separate programming language
e.g., JavaScript, JScript, VBScript
� programs are embedded in the HTML of a Web page, with tags to identify the program component
e.g., <script type="text/javascript"> … </script>
� the browser executes the program as it loads the page, integrating the dynamic output of the program with the static content of HTML
Common scripting tasks
• adding dynamic features to Web pages– validation of form data
– image rollovers
– time-sensitive or random page elements
– handling cookies
• defining programs with Web interfaces
4
• defining programs with Web interfaces– utilize buttons, text boxes, clickable images, prompts, frames
limitations of client-side scripting
� since script code is embedded in the page, viewable to the world
� for security reasons, scripts are limited in what they can do
e.g., can't access the client's hard drive
� since designed to run on any machine platform, scripts do not contain platform specific commands
� script languages are not full-featured
e.g., JavaScript objects are crude, not good for large project development
JavaScript
• JavaScript code can be embedded in a Web page using SCRIPT tags– the output of JavaScript code is displayed as if directly entered in HTML
<html>
<head>
<title>JavaScript Page</title>
</head>
<body>
document.write displays text in page
text to be displayed can include HTML
tags
the tags are interpreted by the browser
5
<body>
<script type="text/javascript">
// silly code to demonstrate output
document.write("Hello world!");
</script>
<p>Here is some static text as well.
</p>
</body>
</html>
the tags are interpreted by the browser
when the text is displayed
as in C++/Java, statements end with ;
JavaScript comments similar to C++/Java
// starts a single line comment
/*…*/ enclose multi-line comments
JavaScript data types & variables
• JavaScript has only three primitive data types
strings : "foo" 'howdy do' "I said 'hi'." ""
numbers : 12 3.14159 1.5E6
booleans : true false
<html>
<head>
<title>Data Types and Variables</title>
assignments are as in C++/Java
message = "howdy";
pi = 3.14159;
6
<title>Data Types and Variables</title>
</head>
<body>
<script type="text/javascript">
x = 1024;
document.write("<p>x = " + x + "</p>");
x = "foobar";
document.write("<p>x = " + x + "</p>");
</script>
</body>
</html>
pi = 3.14159;
variable names are sequences of letters,
digits, and underscores: start with a letter
variables names are case-sensitive
you don't have to declare variables, will be
created the first time used
variables are loosely typed, can assign
different types of values
For statement
• Iterate through all of the members of an object:
for (var name in object) {
if (object.hasOwnProperty(name)) {
// within the loop,
// name is the key of current member
// object[name] is the current value
}
}
JavaScript operators & control
statements<html>
<head>
<title>Folding Puzzle</title>
</head>
<body>
<script type="text/javascript">
distanceToSun = 93.3e6*5280*12;
thickness = .002;
standard C++/Java operators & control
statements are provided in JavaScript• +, -, *, /, %, ++, --, …
• ==, !=, <, >, <=, >=
• &&, ||, !
• if, if-else, while, do, …
PUZZLE: Suppose you took a piece
8
foldCount = 0;
while (thickness < distanceToSun) {
thickness *= 2;
foldCount++;
}
document.write("Number of folds = " +
foldCount);
</script>
</body>
</html>
PUZZLE: Suppose you took a piece
of paper and folded it in half, then in
half again, and so on.
How many folds before the thickness
of the paper reaches from the earth to
the sun?
JavaScript Math routines
<html>
<!-- Dave Reed js04.html 2/01/04 -->
<head>
<title>Random Dice Rolls</title>
</head>
<body>
<div style="text-align:center">
<script type="text/javascript">
roll1 = Math.floor(Math.random()*6) + 1;
the Math object
contains functions
and constants
Math.sqrt
Math.pow
Math.abs
Math.max
Math.min
9
roll1 = Math.floor(Math.random()*6) + 1;
roll2 = Math.floor(Math.random()*6) + 1;
document.write("<img src='http://www.creighton.edu/"+
"~davereed/csc551/Images/die" +
roll1 + ".gif' />");
document.write(" ");
document.write("<img src='http://www.creighton.edu/"+
"~davereed/csc551/Images/die" +
roll2 + ".gif' />");
</script>
</div>
</body>
</html>
Math.min
Math.floor
Math.ceil
Math.round
Math.PI
Math.E
Math.random
function returns
number in [0..1)
User-defined functions
• function definitions are similar to C++/Java, except:– no return type for the function (since variables are loosely typed)
– no types for parameters (since variables are loosely typed)
– by-value parameter passing only (parameter gets copy of argument)
function isPrime(n)
// Assumes: n > 0
// Returns: true if n is prime, else false
{can limit variable scope
10
if (n < 2) {
return false;
}
else if (n == 2) {
return true;
}
else {
for (var i = 2; i <= Math.sqrt(n); i++) {
if (n % i == 0) {
return false;
}
}
return true;
}
}
if the first use of a variable is preceded with var, then that variable is local to the function
for modularity, should make all variables in a function local
Function usage example
<html>
<head>
<title>Prime Tester</title>
<script type="text/javascript">
function isPrime(n)
// Assumes: n > 0
// Returns: true if n is prime
{
// CODE AS SHOWN ON PREVIOUS SLIDE
function
definitions go in
the HEAD
HEAD is loaded
first, so the function
11
// CODE AS SHOWN ON PREVIOUS SLIDE
}
</script>
</head>
<body>
<script type="text/javascript">
testNum = parseFloat(prompt("Enter a positive integer", "7"));
if (isPrime(testNum)) {
document.write(testNum + " <b>is</b> a prime number.");
}
else {
document.write(testNum + " <b>is not</b> a prime number.");
}
</script>
</body>
</html>
first, so the function
is defined before
code in the BODY is
executed
JavaScript libraries
• better still: if you define functions that may be useful to many pages, store in a separate library file and load the library when needed
• the file http://www.mathcs.emory.edu/~eugene/cs370/javascript/numbers.js
12
http://www.mathcs.emory.edu/~eugene/cs370/javascript/numbers.js
contains definition of the isPrime function (last slide)
Note: as with external style sheets, no tags in the JavaScript library file
load a library using the SRC attribute in the SCRIPT tag (nothing between the tags)
<script type="text/javascript"
src="http://www.mathcs.emory.edu/~eugene/cs370/javascript/numbers.js"></script>
JS works within the browser
Modify web pages using document object model (DOM)
Most commonly used:
I document.write()I document.getElementById()
W3Schools JavaScript HTML DOM tutorial
Source of all known knowledge:Mozilla Developer Network DOM page, includes:
I DOM reference (e.g., document)
CS 370, Günay (Emory) JavaScript Spring 2014 12 / 17
JavaScript Strings
• A class defines a new type (formally, Abstract Data Type)– encapsulates data (properties) and operations on that data
(methods)
• A String encapsulates a sequence of characters, enclosed in quotes
properties include • length : stores the number of characters in the string
13
• length : stores the number of characters in the string
methods include• charAt(index) : returns the character stored at the given index • (as in C++/Java, indices start at 0)• substring(start, end) : returns the part of the string between the start • (inclusive) and end (exclusive) indices • toUpperCase() : returns copy of string with letters uppercase• toLowerCase() : returns copy of string with letters lowercase
to create a string, assign using new or just make a direct assignment (new is implicit)
word = new String("foo"); word = "foo";
properties/methods are called exactly as in C++/Java
• word.length word.charAt(0)
JavaScript arrays
• arrays store a sequence of items, accessible via an indexsince JavaScript is loosely typed, elements do not have to be the
same type
– to create an array, allocate space using new (or can assign directly)
• items = new Array(10); // allocates space for 10 items
• items = new Array(); // if no size, will adjust dynamically
14
• items = new Array(); // if no size, will adjust dynamically
• items = [0,0,0,0,0,0,0,0,0,0]; // can assign size & values []
– to access an array element, use [] (as in C++/Java)
• for (i = 0; i < 10; i++) {• items[i] = 0; // stores 0 at each index
• }
– the length property stores the number of items in the array
• for (i = 0; i < items.length; i++) {• document.write(items[i] + "<br>"); // displays elements• }
Array example
<html>
<body>
<p id="demo">Click the button to reverse the order of the elements in the
array.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
15
<script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction()
{
fruits.reverse();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>
typeof
• The typeof prefix operator returns a string
identifying the type of a value.
type typeof
object 'object'object 'object'
function 'function'
array 'object'
number 'number'
string 'string'
boolean 'boolean'
null 'object'
undefined 'undefined'
Classes in JS?
Yes, we can. Using JS function keyword.
function baseclass (){
this.attr1;
this.method1=function(arg1) { ... }
}
instance1 = new baseclass ();
Note the new keyword
How about a subclass?
function subclass (){
var parent=new baseclass ();
parent.attr1="new value"; // customize attributes
parent.method1=function(arg1 ,arg2) { ... } // override
return parent; // return the subclass object
}
subclass_instance1 = subclass ();
Note there is NO new keyword!
CS 370, Günay (Emory) JavaScript Spring 2014 13 / 17
Classes in JS?
Yes, we can. Using JS function keyword.
function baseclass (){
this.attr1;
this.method1=function(arg1) { ... }
}
instance1 = new baseclass ();
Note the new keyword
How about a subclass?
function subclass (){
var parent=new baseclass ();
parent.attr1="new value"; // customize attributes
parent.method1=function(arg1 ,arg2) { ... } // override
return parent; // return the subclass object
}
subclass_instance1 = subclass ();
Note there is NO new keyword!
CS 370, Günay (Emory) JavaScript Spring 2014 13 / 17
JavaScript done “right”: JQuery
• Portable, robust, mature.
• Get it here: http://docs.jquery.com/Downloading_jQuery
• Use like any other library:
<html> <html>
<head>
<script type="text/javascript" src="jquery.js">
</script>
</head>
…
</html>
4/3/2012 CS 370, Spring 2012 17
The Document Ready Function
• Pattern:
$(document).ready(function(){
// jQuery functions go here...
});
• Prevent any jQuery code from running before the
document is finished loading (is ready).
4/3/2012 CS 370, Spring 2012 18
jQuery Selectors
• jQuery syntax is made for selecting HTML elements and perform some action on the element(s).
• Basic syntax is: $(selector).action()
– A dollar sign to define jQuery
– A (selector) to "query (or find)" HTML elements– A (selector) to "query (or find)" HTML elements
– A jQuery action() to be performed on the element(s)
• Examples:
– $(this).hide() - hides current element
– $("p").hide() - hides all paragraphs
– $("p.test").hide() - hides all paragraphs with class="test"
– $("#test").hide() - hides the element with id="test"
4/3/2012 CS 370, Spring 2012 19
Element Selection: Continued
• Element Selectors– $("p") selects all <p> elements.
– $("p.intro") selects all <p> elements with class="intro".
– $("p#demo") selects all <p> elements with id="demo".
• Attribute Selectors– jQuery uses XPath expressions to select elements with given attributes.
– $("[href]") select all elements with an href attribute.– $("[href]") select all elements with an href attribute.
– $("[href='#']") select all elements with an href value equal to "#".
– $("[href!='#']") select all elements with an href attribute NOT equal to "#".
– $("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".
• W3C Selector Tester: http://www.w3schools.com/jquery/jquery_ref_selectors.asp
http://www.w3schools.com/jquery/trysel.asp?filename=trysel_basic&jqsel=p.intro,%23choose
4/3/2012 CS 370, Spring 2012 20
Web hacking I: Browser tools and JS
command-line
Demo
https://www.butterhub.org/bakery/
Developer tools, deleting
Element innerHTML
Resources
• JavaScript tutorial: http://www.w3schools.com/js/
• JQuery tutorial: http://www.w3schools.com/jquery/default.asp
4/3/2012 CS 370, Spring 2012 22
Upcoming episode
Scrum now!(don't forget to write down meeting minutes, including tasks assigned)
Thursday: Conneccting to server with Javascript (AJAX)
CS 370, Günay (Emory) JavaScript Spring 2014 17 / 17