The JavaScript Revolution - Emory Universitycengiz/.../slides/19-javascript-jquery.pdf · CS 370,...

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

https://www.youtube.com/watch?v=X9ctLFYSDfQ#t=9m19s

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


GitHub usage pattern example: 2048


http://gabrielecirulli.github.io/2048/

So many variants!


http://doge2048.com/

So many variants!


http://joppi.github.io/2048-3D/

2048 GitHub page


https://github.com/gabrielecirulli/2048

What's forking??

Stealing from their plate?

More like f#@k in the road


http://www.trendhunter.com/trends/unrestricted-fork-lifter-freeloader-fork

http://triumphwellness.com/the-fork-in-the-road/

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


How does 2048 work? Client-side computing.


http://gabrielecirulli.github.io/2048/

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)






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.








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>


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>


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>



<head>

<title>Random Dice Rolls</title>

</head>

<body>

<div style="text-align:center">


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



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>


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>


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)


http://www.w3schools.com/js/js_htmldom.asp

https://developer.mozilla.org/en-US/docs/DOM

https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference

https://developer.mozilla.org/en-US/docs/Web/API/Document

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>


15


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!


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

https://www.butterhub.org/bakery/

http://jqueryui.com/

http://getbootstrap.com/javascript

http://getbootstrap.com/javascript/#modals-examples

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)


The JavaScript Revolution - Emory Universitycengiz/.../slides/19-javascript-jquery.pdf · CS 370,...

Documents

Transcript of The JavaScript Revolution - Emory Universitycengiz/.../slides/19-javascript-jquery.pdf · CS 370,...