The Javascript Revolution

Top teams present at Segfault Tank on 4/21: 1 Duel: 6 (2 extra shifted from self votes) 2 Ambassador: 4 3 QuickSource: 3 4 ChalkBoard: 3 5 Fortuna Beer: 3 Bottom teams present in class this Thursday 4/16: 1 Scribble: 2 2 ClearViz: 2 3 AllInOne: 1 4 TripSplitter: 0 Shockers: Scribble & Fortuna

Congrats on sneaky strategizing to get yourself to the top :)

The moment of fruit: the class has spoken Shockers: Scribble & Fortuna

Congrats on sneaky strategizing to get yourself to the top :)

The moment of fruit: the class has spoken Top teams present at Segfault Tank on 4/21: 1 Duel: 6 (2 extra shifted from self votes) 2 Ambassador: 4 3 QuickSource: 3 4 ChalkBoard: 3 5 Fortuna Beer: 3 Bottom teams present in class this Thursday 4/16: 1 Scribble: 2 2 ClearViz: 2 3 AllInOne: 1 4 TripSplitter: 0 Shockers: Scribble & Fortuna The moment of fruit: the class has spoken Top teams present at Segfault Tank on 4/21: 1 Duel: 6 (2 extra shifted from self votes) 2 Ambassador: 4 3 QuickSource: 3 4 ChalkBoard: 3 5 Fortuna Beer: 3 Bottom teams present in class this Thursday 4/16: 1 Scribble: 2 2 ClearViz: 2 3 AllInOne: 1 4 TripSplitter: 0 Shockers: Scribble & Fortuna

Congrats on sneaky strategizing to get yourself to the top :) I New conrmed judge: Kevin Lei Director, Faculty and Start-up Services, Oce of Tech Transfer at Emory Stand-up for your meeting now! Today's menu:

1 The JavaScript Revolution

Agenda

News you can use:

I Yik Yak is coming to complement our postmortem party on Thu 4/23 Stand-up for your meeting now! Today's menu:

1 The JavaScript Revolution

Agenda

News you can use:

I Yik Yak is coming to complement our postmortem party on Thu 4/23

I New conrmed judge: Kevin Lei Director, Faculty and Start-up Services, Oce of Tech Transfer at Emory Today's menu:

1 The JavaScript Revolution

Agenda

News you can use:

I Yik Yak is coming to complement our postmortem party on Thu 4/23

I New conrmed judge: Kevin Lei Director, Faculty and Start-up Services, Oce of Tech Transfer at Emory Stand-up for your meeting now! Agenda

News you can use:

I Yik Yak is coming to complement our postmortem party on Thu 4/23

I New conrmed judge: Kevin Lei Director, Faculty and Start-up Services, Oce of Tech Transfer at Emory Stand-up for your meeting now! Today's menu:

1 The JavaScript Revolution Quiz #7

Exit quiz: Design Patterns, Continuous Integration, Marketing, Responsive mobile, Startup Funding Give an example of the observer programming pattern Why do we need mock objects in integration testing? How does market research reduce risk? What's the best product strategy? Argue a few points for making a responsive webapp versus building a native mobile app? What's the dierence between an angel investor versus venture capitalist?

Entry survey: JavaScript How does the JavaScript language compare to other languages you know? Is JavaScript an important language to learn in your opinion? What is AJAX?

CS370, Günay (Emory) Spring 2015 4 / 23 The JavaScript Revolution The client-side takes over

CS370 Software & Startup Engineering Practicum, Cengiz Günay (Some slides courtesy of Eugene Agichstein and the Internets. License: CC BY-SA 4.0.)

CS370, Günay (Emory) JavaScript Spring 2015 5 / 23 How does 2048 work? Client-side computing.

CS370, Günay (Emory) JavaScript Spring 2015 6 / 23 Is it compiled? No, interpreted language. Is it Java? No, inspired by it. :) Naming was confusing, maybe Netscape wanted to ride on the fame of Java, which was hot and new then. Appeared rst as Mocha/LiveScript in Netscape Navigator 2.0 in September 1995 Server-side JS on 1995 Microsoft adoption in 1996 Standardization 19972011 Now, one of most popular web languages, thanks to AJAX (will do later)

Brief History of JavaScript http://en.wikipedia.org/wiki/JavaScript#History Birth at Netscape: advantage over Microsoft Internet Explorer

CS370, Günay (Emory) JavaScript Spring 2015 7 / 23 No, interpreted language. Is it Java? No, inspired by it. :) Naming was confusing, maybe Netscape wanted to ride on the fame of Java, which was hot and new then. Appeared rst as Mocha/LiveScript in Netscape Navigator 2.0 in September 1995 Server-side JS on 1995 Microsoft adoption in 1996 Standardization 19972011 Now, one of most popular web languages, thanks to AJAX (will do later)

Brief History of JavaScript http://en.wikipedia.org/wiki/JavaScript#History Birth at Netscape: advantage over Microsoft Internet Explorer Is it compiled?

CS370, Günay (Emory) JavaScript Spring 2015 7 / 23 Is it Java? No, inspired by it. :) Naming was confusing, maybe Netscape wanted to ride on the fame of Java, which was hot and new then. Appeared rst as Mocha/LiveScript in Netscape Navigator 2.0 in September 1995 Server-side JS on 1995 Microsoft adoption in 1996 Standardization 19972011 Now, one of most popular web languages, thanks to AJAX (will do later)

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.

CS370, Günay (Emory) JavaScript Spring 2015 7 / 23 No, inspired by it. :) Naming was confusing, maybe Netscape wanted to ride on the fame of Java, which was hot and new then. Appeared rst as Mocha/LiveScript in Netscape Navigator 2.0 in September 1995 Server-side JS on 1995 Microsoft adoption in 1996 Standardization 19972011 Now, one of most popular web languages, thanks to AJAX (will do later)

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?

CS370, Günay (Emory) JavaScript Spring 2015 7 / 23 Appeared rst as Mocha/LiveScript in Netscape Navigator 2.0 in September 1995 Server-side JS on 1995 Microsoft adoption in 1996 Standardization 19972011 Now, one of most popular web languages, thanks to AJAX (will do later)

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, maybe Netscape wanted to ride on the fame of Java, which was hot and new then.

CS370, Günay (Emory) JavaScript Spring 2015 7 / 23 Server-side JS on 1995 Microsoft adoption in 1996 Standardization 19972011 Now, one of most popular web languages, thanks to AJAX (will do later)

CS370, Günay (Emory) JavaScript Spring 2015 7 / 23 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, maybe Netscape wanted to ride on the fame of Java, which was hot and new then. Appeared rst as Mocha/LiveScript in Netscape Navigator 2.0 in September 1995 Server-side JS on 1995 Microsoft adoption in 1996 Standardization 19972011 Now, one of most popular web languages, thanks to AJAX (will do later)

CS370, Günay (Emory) JavaScript Spring 2015 7 / 23 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

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., the browser executes the program as it loads the page, integrating the dynamic output of the program with the static content of HTML

3 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 – 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

4 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

document.write displays text in page JavaScript Page text to be displayed can include HTML tags the tags are interpreted by the browser

Here is some static text as well. JavaScript comments similar to C++/Java

// starts a single line comment /*…*/ enclose multi-line comments

5 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)

CS370, Günay (Emory) JavaScript Spring 2015 9 / 23 Your browser is your JS debugger! Your browser is your JS debugger! JavaScript done “right”: JQuery

• Portable, robust, mature. • Get it here: http://docs.jquery.com/Downloading_jQuery • Use like any other library: …

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 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

elements. – $("p.intro") selects all

elements with class="intro". – $("p#demo") selects all

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 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

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 AJAX: From the Client-side with JavaScript, Back to the Server Asynchronous server calls and related technologies

CS370 Software & Startup Engineering Practicum, Cengiz Günay (Some slides courtesy of Eugene Agichstein and the Internets. License: CC BY-SA 4.0.)

CS370, Günay (Emory) AJAX Spring 2015 13 / 23 1996, Microsoft Internet Explorer introduces the iframe tag 1998, Microsoft Outlook Web Access team implemented the rst component XMLHTTP by client script. 1999, Microsoft used its iframe technology to dynamically update the news stories and stock quotes on the default page for Internet Explorer, and created the XMLHTTP ActiveX control in Internet Explorer 5 Adopted by Mozilla, Safari, Opera and other browsers as the XMLHttpRequest JavaScript object. AJAX still obscure until Outlook Web Access (2000) and Oddpost (2002), Google's cross browser Ajax with Gmail (2004) and Google Maps (2005). What's the big deal?

Brief History of AJAX http://en.wikipedia.org/wiki/Ajax_%28programming%29#History 1990s, websites are slow because of full page loads

CS370, Günay (Emory) AJAX Spring 2015 14 / 23 1998, Microsoft Outlook Web Access team implemented the rst component XMLHTTP by client script. 1999, Microsoft used its iframe technology to dynamically update the news stories and stock quotes on the default page for Internet Explorer, and created the XMLHTTP ActiveX control in Internet Explorer 5 Adopted by Mozilla, Safari, Opera and other browsers as the XMLHttpRequest JavaScript object. AJAX still obscure until Outlook Web Access (2000) and Oddpost (2002), Google's cross browser Ajax with Gmail (2004) and Google Maps (2005). What's the big deal?

Brief History of AJAX http://en.wikipedia.org/wiki/Ajax_%28programming%29#History 1990s, websites are slow because of full page loads 1996, Microsoft Internet Explorer introduces the iframe tag

CS370, Günay (Emory) AJAX Spring 2015 14 / 23 1999, Microsoft used its iframe technology to dynamically update the news stories and stock quotes on the default page for Internet Explorer, and created the XMLHTTP ActiveX control in Internet Explorer 5 Adopted by Mozilla, Safari, Opera and other browsers as the XMLHttpRequest JavaScript object. AJAX still obscure until Outlook Web Access (2000) and Oddpost (2002), Google's cross browser Ajax with Gmail (2004) and Google Maps (2005). What's the big deal?

CS370, Günay (Emory) AJAX Spring 2015 14 / 23 Adopted by Mozilla, Safari, Opera and other browsers as the XMLHttpRequest JavaScript object. AJAX still obscure until Outlook Web Access (2000) and Oddpost (2002), Google's cross browser Ajax with Gmail (2004) and Google Maps (2005). What's the big deal?

CS370, Günay (Emory) AJAX Spring 2015 14 / 23 AJAX still obscure until Outlook Web Access (2000) and Oddpost (2002), Google's cross browser Ajax with Gmail (2004) and Google Maps (2005). What's the big deal?

Brief History of AJAX http://en.wikipedia.org/wiki/Ajax_%28programming%29#History 1990s, websites are slow because of full page loads 1996, Microsoft Internet Explorer introduces the iframe tag 1998, Microsoft Outlook Web Access team implemented the rst component XMLHTTP by client script. 1999, Microsoft used its iframe technology to dynamically update the news stories and stock quotes on the default page for Internet Explorer, and created the XMLHTTP ActiveX control in Internet Explorer 5 Adopted by Mozilla, Safari, Opera and other browsers as the XMLHttpRequest JavaScript object.

CS370, Günay (Emory) AJAX Spring 2015 14 / 23 What's the big deal?

CS370, Günay (Emory) AJAX Spring 2015 14 / 23 Brief History of AJAX http://en.wikipedia.org/wiki/Ajax_%28programming%29#History 1990s, websites are slow because of full page loads 1996, Microsoft Internet Explorer introduces the iframe tag 1998, Microsoft Outlook Web Access team implemented the rst component XMLHTTP by client script. 1999, Microsoft used its iframe technology to dynamically update the news stories and stock quotes on the default page for Internet Explorer, and created the XMLHTTP ActiveX control in Internet Explorer 5 Adopted by Mozilla, Safari, Opera and other browsers as the XMLHttpRequest JavaScript object. AJAX still obscure until Outlook Web Access (2000) and Oddpost (2002), Google's cross browser Ajax with Gmail (2004) and Google Maps (2005). What's the big deal?

CS370, Günay (Emory) AJAX Spring 2015 14 / 23 Scene I: Mac and PC dine at SnailScape

Actors/Actresses: Clients: Mac & PC Server: The Last Apache Cook: MikeSQL

Why async? Doesn't make you wait, happens in parallel

What's AJAX?

AJAX: Asynchronous JavaScript And XML Wikipedia page W3Schools tutorial

CS370, Günay (Emory) AJAX Spring 2015 17 / 23 Doesn't make you wait, happens in parallel

What's AJAX?

AJAX: Asynchronous JavaScript And XML Wikipedia page W3Schools tutorial Why async?

CS370, Günay (Emory) AJAX Spring 2015 17 / 23 What's AJAX?

AJAX: Asynchronous JavaScript And XML Wikipedia page W3Schools tutorial Why async? Doesn't make you wait, happens in parallel

CS370, Günay (Emory) AJAX Spring 2015 17 / 23 AJAX (Asynchronous Javascript + XML)

• Uses browser’s XML support: DOM, XSLT • XMLHttpRequest • Google Maps is best-known AJAX application

Agichtein for Emory CS171, Spring 4 2008 AJAX Design Principles

• The browser hosts an application, not content – Application code delivered to browser, mostly as JavaScript code • The server delivers data, not content – Data may be plain text, JavaScript fragments, or XML documents • User/application interaction is continuous and fluid – UI metaphors like drag-and-drop become possible • This is real coding and requires discipline – Significant developer responsibility to manage conversational state over entire web transaction

Agichtein for Emory CS171, Spring 5 2008 Basic AJAX process

Agichtein for Emory CS171, Spring 6 2008 Example AJAX

W3Schools.com AJAX tutorial live examples (you can edit and run them!): First example Suggestion Database Sync vs. Async (all examples)

CS370, Günay (Emory) AJAX Spring 2015 18 / 23 Yes: JSON. What is it? JSON: JavaScript Object Notation (Wikipedia) Basically, it's JS code: var json = { attribute: 'value', id: 58 } makes a JS object with 2 attributes. Can also use array of objects (think retrieving rows from DB): var json = [ { name: 'cengiz', id: 1 }, { name: 'james', id: 2 } ];

Return text from the server that can be directly interpreted by browser! No need for parsing!

XML? That's kind of lame, how about JSON? Need to parse XML? Isn't there an easier way?

CS370, Günay (Emory) AJAX Spring 2015 19 / 23 JSON: JavaScript Object Notation (Wikipedia) Basically, it's JS code: var json = { attribute: 'value', id: 58 } makes a JS object with 2 attributes. Can also use array of objects (think retrieving rows from DB): var json = [ { name: 'cengiz', id: 1 }, { name: 'james', id: 2 } ];

Return text from the server that can be directly interpreted by browser! No need for parsing!

XML? That's kind of lame, how about JSON? Need to parse XML? Isn't there an easier way? Yes: JSON. What is it?

CS370, Günay (Emory) AJAX Spring 2015 19 / 23 Can also use array of objects (think retrieving rows from DB): var json = [ { name: 'cengiz', id: 1 }, { name: 'james', id: 2 } ];

Return text from the server that can be directly interpreted by browser! No need for parsing!

CS370, Günay (Emory) AJAX Spring 2015 19 / 23 Return text from the server that can be directly interpreted by browser! No need for parsing!

XML? That's kind of lame, how about JSON? Need to parse XML? Isn't there an easier way? Yes: JSON. What is it? JSON: JavaScript Object Notation (Wikipedia) Basically, it's JS code: var json = { attribute: 'value', id: 58 } makes a JS object with 2 attributes. Can also use array of objects (think retrieving rows from DB): var json = [ { name: 'cengiz', id: 1 }, { name: 'james', id: 2 } ];

CS370, Günay (Emory) AJAX Spring 2015 19 / 23 XML? That's kind of lame, how about JSON? Need to parse XML? Isn't there an easier way? Yes: JSON. What is it? JSON: JavaScript Object Notation (Wikipedia) Basically, it's JS code: var json = { attribute: 'value', id: 58 } makes a JS object with 2 attributes. Can also use array of objects (think retrieving rows from DB): var json = [ { name: 'cengiz', id: 1 }, { name: 'james', id: 2 } ];

Return text from the server that can be directly interpreted by browser! No need for parsing!

CS370, Günay (Emory) AJAX Spring 2015 19 / 23 JSON in Ajax

• XMLHttpRequest – Obtain responseText – Parse the responseText

• responseData = eval( • '(' + responseText + ')');

• responseData = • responseText .parseJSON();

Agichtein for Emory CS171, Spring 8 2008 AJAX made simple: the jQuery way Let's hack their website. :)

I Breakpoints I Debugging

Make those client-side JS hacks permanent: URL-triggered browser scripts (e.g., GreaseMonkey, UserScripts.org, GreaseSpot, My BlackBoard Optimizer) Let's hack Facebook

I Uhh, it's hard

Web Hacking II: Function calls, AJAX, and JSON

James & Toby's game Dank Party is on beta testing!

CS370, Günay (Emory) AJAX Spring 2015 21 / 23 Make those client-side JS hacks permanent: URL-triggered browser scripts (e.g., GreaseMonkey, UserScripts.org, GreaseSpot, My BlackBoard Optimizer) Let's hack Facebook

I Uhh, it's hard

Web Hacking II: Function calls, AJAX, and JSON

James & Toby's game Dank Party is on beta testing! Let's hack their website. :)

I Breakpoints I Debugging

CS370, Günay (Emory) AJAX Spring 2015 21 / 23 Let's hack Facebook

I Uhh, it's hard

Web Hacking II: Function calls, AJAX, and JSON

James & Toby's game Dank Party is on beta testing! Let's hack their website. :)

I Breakpoints I Debugging

Make those client-side JS hacks permanent: URL-triggered browser scripts (e.g., GreaseMonkey, UserScripts.org, GreaseSpot, My BlackBoard Optimizer)

CS370, Günay (Emory) AJAX Spring 2015 21 / 23 I Uhh, it's hard

Web Hacking II: Function calls, AJAX, and JSON

James & Toby's game Dank Party is on beta testing! Let's hack their website. :)

I Breakpoints I Debugging

Make those client-side JS hacks permanent: URL-triggered browser scripts (e.g., GreaseMonkey, UserScripts.org, GreaseSpot, My BlackBoard Optimizer) Let's hack Facebook

CS370, Günay (Emory) AJAX Spring 2015 21 / 23 Web Hacking II: Function calls, AJAX, and JSON

James & Toby's game Dank Party is on beta testing! Let's hack their website. :)

I Breakpoints I Debugging

Make those client-side JS hacks permanent: URL-triggered browser scripts (e.g., GreaseMonkey, UserScripts.org, GreaseSpot, My BlackBoard Optimizer) Let's hack Facebook

I Uhh, it's hard

CS370, Günay (Emory) AJAX Spring 2015 21 / 23 restfb: Facebook API

I Why is it called restfb? REST: Representational state transfer

I client-server I stateless

I cacheable I layered What else is happening with JavaScript?

I Converting from other languages: python, ruby, etc I Frameworks: AngularJS, Google Web Toolkit, EmberJS(comparison)

Stop telling us about 2005! What's happening now?

JSONP: JSON with padding for cross-domain scripting

CS370, Günay (Emory) AJAX Spring 2015 22 / 23 REST: Representational state transfer

I client-server I stateless

I cacheable I layered What else is happening with JavaScript?

I Converting from other languages: python, ruby, etc I Frameworks: AngularJS, Google Web Toolkit, EmberJS(comparison)

Stop telling us about 2005! What's happening now?

JSONP: JSON with padding for cross-domain scripting restfb: Facebook API

I Why is it called restfb?

CS370, Günay (Emory) AJAX Spring 2015 22 / 23 What else is happening with JavaScript?

I Converting from other languages: python, ruby, etc I Frameworks: AngularJS, Google Web Toolkit, EmberJS(comparison)

Stop telling us about 2005! What's happening now?

JSONP: JSON with padding for cross-domain scripting restfb: Facebook API

I Why is it called restfb? REST: Representational state transfer

I client-server I stateless

I cacheable I layered

CS370, Günay (Emory) AJAX Spring 2015 22 / 23 Stop telling us about 2005! What's happening now?

JSONP: JSON with padding for cross-domain scripting restfb: Facebook API

I Why is it called restfb? REST: Representational state transfer

I client-server I stateless

I cacheable I layered What else is happening with JavaScript?

I Converting from other languages: python, ruby, etc I Frameworks: AngularJS, Google Web Toolkit, EmberJS(comparison)

CS370, Günay (Emory) AJAX Spring 2015 22 / 23 Next episode

Bottom teams present: no stress, make the most of it! Guest Brian DeShong: Testing and Servers and Startups, oh my!