module 5 â€“ django and git django web applica\on framework

$: Module 5 â€“ Django and Git Django Web Applica\on Framework$
Extensible Networking Platform 11 - CSE 330 – Creative Programming and Rapid Prototyping

Module5– JavaScript,AJAX,andjQuery

• Module5ContainsanIndividualandGroupcomponent– BotharedueonWednesdayOctober24th

– Startearlyonthismodule– Oneofthemosttimeconsumingmodulesinthecourse

• ReadtheWIKIbeforestartingalongwithafewJavaScriptandjQuerytutorials


Module5

• JavaScript– ScriptinglanguagetoaddinteractivitytoHTMLpages– JavaandJavaScriptarecompletelydifferentlanguages

• AJAX– AsynchronousJavaScriptandXML(AJAX)– Allowsforretrievalofdatafromwebserversinthebackground

• jQuery– JavaScriptlibrary


JavaScript

• Popularscriptinglanguagewidelysupportedinbrowserstoaddinteraction– Pop-UpWindows– UserInputForms– Calculations– SpecialEffects

• ImplementationoftheECMAScriptlanguage


JavaScript

• JavaScriptisaprototyped-basedscriptinglanguage– Dynamic,weaklytyped

• Interpretedlanguage– Youdonotcompileit

• Usesprototypesinsteadofclassesforinheritance


IsJavaScriptlikeJava?

• Java andJavaScriptaresimilarlikeCar andCarpetaresimilar

• Twocompletelydifferentlanguageswithdifferentconcepts– Javaiscompiled,JavaScriptisinterpreted– Javaisobject-oriented,JavaScriptisprototypedbased– Javarequiresstricttyping,JavaScriptallowsfordynamictyping


JavaScriptBasics• Declareavariablewithlet

letfoo=“JSisfun”;

• Declareaconstantwithconstconst bar=”Thisiswillnotchange”;

• OlderversionsofJavaScriptdonotsupportletandconst andusevar instead– Inthiscoursewewilluselet andconst andavoidusingvar

• Defineafunctionwithfunctionfunction foo(){//SomeJScodehere

}

• Functionsarealsoobjects


WritingaJavaScriptProgram

• JavaScriptprogramscaneitherbeplaced– directlyintotheHTMLfileor– canbesavedinexternalfiles

• YoucanplaceJavaScriptanywherewithintheHTMLfile:within– the<HEAD>tagsor– the<BODY>tags


Usingthe<SCRIPT>Tag

<scriptsrc=“url”></script>– SRCpropertyisrequiredonlyifyouplaceyour

programinaseparatefile

<script>scriptcommandsandcomments

</script>

• OlderversionsofHTML(before5)useaslightlydifferentformat– <scripttype=“text/javascript”>– Thisisnolongernecessary,simplyuse<script>


JavaScriptExample(part1)

<!DOCTYPEhtml><html><head><title>MyJavaScriptExample</title>

<script>function MsgBox(textstring){alert(textstring);

}

</script>


JavaScriptExample(part2)

<body><form><inputtype="text"name="text1"><inputtype="submit"value="ShowMe"onClick="MsgBox(form.text1.value)">

</form></body></html>


JavaScriptExample<!DOCTYPEhtml><htmllang="en"><head><title>MyJavaScriptExample</title>

<script>function MsgBox(textstring){alert(textstring);

}</script></head>

<body><form><inputtype="text"name="text1"><inputtype="submit"value="ShowMe"

onClick="MsgBox(form.text1.value)"></form></body></html>


JavaScriptEventListeners

• WecancontroleventsinamoregranularwayusingEventListeners

• EventListenersallowforcustombehaviorforeveryelement

document.getElementById("hello").addEventListener("click",MsgBox,false);


JavaScriptAdditionalInformation

• TheCSE330WikiprovidesagreatintrointoJavaScriptalongwithsomeexcellentlinkstomorecomprehensivetutorials

• AdditionalJStutorials– http://www.quirksmode.org/js/contents.html– https://docs.webplatform.org/wiki/Meta:javascript/tutorials


JavaScriptDebugging

• JSHint isagreatresourcestohelpdebugyourcode– http://www.jshint.com/

• Toolsforbrowsers also exist– Firefox

• Firebug extension– ChromeandSafari

• Webkit Inspector comes bundled withthebrowser


JavaScriptExamples

http://research.engineering.wustl.edu/~todd/cse330/demo/lecture5/


AJAX

• Standsfor“AsynchronousJavaScriptandXML”

• Developmenttechniqueforcreatinginteractivewebapplications

• Notanew Technology butmoreofaPattern


MotivationforAJAX

• WebpagesalwaysRELOADandnevergetUPDATED

• Userswaitfortheentirepagetoloadevenifasinglepieceofdataisneeded

• Singlerequest/responserestrictions


Components

– HTML(orXHTML)andCSS• Presentinginformation

– DocumentObjectModel• Dynamicdisplayandinteractionwiththeinformation

– XMLHttpRequestobject• RetrievingdataASYNCHRONOUSLY fromthewebserver.

– JavaScript• Bindingeverythingtogether


TheDOM

• DocumentObjectModel(DOM):platform- andlanguage-independentwaytorepresentXML– Adoptsatree-basedrepresentation– W3Cstandard,supportedbymodernbrowsers

• JavaScriptusesDOMtomanipulatecontent– Toprocessuserevents– Toprocessserverresponses(viaXMLHttpRequest)


TheDOM

• Unlikeotherprogramminglanguages,JavaScriptunderstandsHTMLandcandirectlyaccessit

• JavaScriptusestheHTMLDocumentObjectModeltomanipulateHTML

• TheDOMisahierarchyofHTMLthings

• UsetheDOMtobuildan“address” torefertoHTMLelementsinawebpage

• LevelsoftheDOMaredot-separatedinthesyntax


DOM


AccessingtheDOMExample

https://research.engineering.wustl.edu/~todd/cse330/demo/lecture5/


WebApplicationandAJAX


RequestProcessing


Asynchronousprocessing- XMLHttpRequest

• AllowstoexecuteanHTTPrequestinbackground

• CallbackskickbackintoJavaScriptCode

• Supportedinallstandardbrowsers


UsingXMLHttpRequest

• FirstyoumustcreatetheXMLHttpRequestObjectinJavaScript

• Example– constxmlHttp=newXMLHttpRequest();

• Olderbrowsersmightrequiredifferentsyntax– Forexample(InternetExplorerversions<9)

• constxmlHttp=newActiveXObject("Microsoft.XMLHTTP");– WewillnotworryaboutJScompatibilitywithIE<9inthiscourse


UsingXMLHttpRequest

• TransferringdatatoServer– Open()toinitializeconnectiontoServer– Send()tosendtheactualData

• Example(POST)– xmlHttp.open("POST","/query.cgi”,true);– xmlHttp.send("name=Bob&[email protected]");

• Example(GET)– xmlHttp.open("GET","hello.txt",true);– xmlHttp.send(null);


Whathappensaftersendingdata?

• XMLHttpRequestcontactstheserverandretrievesthedata– Cantakeindeterminateamountoftime

• CreateanEventListenertodeterminewhentheobjecthasfinishedloadingwiththedataweareinterestedin– Specificallylistenfortheloadeventtooccur


Eventsofinterest

xmlHttp.addEventListener("load”,myCallbackFunction,false);


UsingXMLHttpRequest

• Parseanddisplaydata– responseXML

• DOM-structuredobject– responseText

• Onecompletestring

• Examples– constnameNode=

requester.responseXML.getElementsByTagName("name")[0];

– constnameTextNode=nameNode.childNodes[0];

• Fromaneventfunction myCallback(event){alert(“Theresponse“ +event.target.responseText);}


AJAXExample

<script>

constxmlHttp=newXMLHttpRequest();xmlHttp.open("GET","hello.txt",true);xmlHttp.addEventListener("load”,myCallback,false);xmlHttp.send(null);

function myCallback(event){alert(“Theresponse“ +event.target.responseText);}

</script>


InteractionbetweenComponents


AJAXExample


Promises

• Apromiseisanobjectrepresentingtheeventualcompletion orfailure ofanasynchronousoperation

• Promisesarereturnedobjectsthatyouattachedcallbacksto

• Apromisecanonlysucceedorfail

• Thispromiseresolvestotheresponseofthatrequest,whetheritissuccessfulornot.


CreatingandUsingPromises

• Thepromiseconstructortakesoneargument– Acallbackwithtwoparameters,resolveandreject.

const promise=newPromise(functionresolve,reject){

//dosomething

if(/*everythingworks*/){resolve("itworks");}else{reject(Error("Itdidnotwork"));

}});

• Toexecutethecallback:

promise.then(function(result){console.log(result);//worked},function(err){console.log(err);//Error:Itbroke

});

• Thethen()takestwoarguments– A callbackforsuccessandoneforfailure,bothareoptional.


FetchAPI

• NewerAPIthatprovidesmechanismtoasynchronouslyaccessresourcesacrossthenetwork

• Fetchtakesoneargument– Thelinktotheresources

• Fetchreturnsapromise– WhichresolvestotheResponseObject

• SimilartoXMLHttpRequestbutwithafairlysimplesyntax


FetchAPI• fetch()hasonerequiredargument(thepathtothe

resource)– Itreturnsapromise– Thispromiseresolvestotheresponseofthatrequest,whetheritissuccessfulornot.

fetch(url).then(function(response){//Dostuffwithresponse

}).catch(function(error){console.log("Foundanerror"+error);

});


FetchExample


AdditionalLinksforPromiseandFetch

• https://developers.google.com/web/fundamentals/primers/promises

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

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


jQuery– SimplifyyourJavaScript


WhatisjQuery?

• AframeworkforClientSideJavaScript

• Frameworksprovideusefulalternativesforcommonprogrammingtasks,creatingfunctionalitywhichmaynotbeavailableorcumbersometousewithinalanguage.

• Anopensourceproject,maintainedbyagroupofdevelopers,withaveryactivesupportbaseandthorough,wellwrittendocumentation.


WhatjQueryisnot…

• AsubstituteforknowingJavaScript– jQueryisextraordinarilyuseful,butyoushouldstillknowhowJavaScriptworksandhowtouseitcorrectly.ThismeansmorethanGooglingatutorialandcallingyourselfanexpert.

• Asolveall– ThereisstillplentyoffunctionalitybuiltintoJavaScriptthatshouldbeutilized!Don’tturneveryprojectintoaquestto‘jQuery-ize’ theproblem,usejQuerywhereitmakessense.Createsolutionsinenvironmentswheretheybelong.


WhatisavailablewithjQuery?

• Crossbrowsersupportanddetection

• AJAXfunctions• CSSfunctions• DOMmanipulation• DOMtransversal• Attributemanipulation• Eventdetectionandhandling

• JavaScriptanimation• Hundredsofpluginsforpre-builtuserinterfaces,advancedanimations,formvalidation,etc

• Expandablefunctionalityusingcustomplugins

• Smallfootprint


ThejQuery/$Object

• Representedbyboth$andjQuery– TousejQuery only,usejQuery.noConflict(),forotherframeworksthatuse$

• Bydefault,$representsthejQuery object.Whencombinedwithaselector,canrepresentmultipleDOMElements

• UsedwithalljQuery functions.


jQuery Examples

• jQuerybasicsyntax$(selector).action()

• $ signusedtoaccessjQuery• Selector “finds” theHTMLelement(s)• Anactionisperformedontheelement(s)

• Examples– $(this).hide()//hidescurrentelement– $(“p”).hide()//hidesall<p>elements– $(“.test”).hide()//hidesallelementswithclass=“test”– $(“#test”).hide()//hidestheelementwithid=“test”


jQuery&AJAX

• jQuery hasaseriesoffunctionswhichprovideacommoninterfaceforAJAX,nomatterwhatbrowseryouareusing

• MostoftheupperlevelAJAXfunctionshaveacommonlayout:– $.func(url[,params][,callback]),[]optional

• url:stringrepresentingservertarget• params:namesandvaluestosendtoserver• callback:functionexecutedonsuccessfulcommunication.


jQueryAJAXFunctions

• $.func(url[,params][,callback])– $.get– $.getJSON– $.getIfModified– $.getScript– $.post

• $(selector),injectHTML– load– loadIfModified

• $(selector),ajaxSetup alts– ajaxComplete– ajaxError– ajaxSend– ajaxStart– ajaxStop– ajaxSuccess

• $.ajax,$.ajaxSetup– async– beforeSend– complete– contentType– data– dataType– error– global– ifModified– processData– success– timeout– type– url


Example– Show/Hidetheoldway

<ahref="#"onclick="toggle_visibility('foo');">Clickheretotogglevisibilityof#foo</a>

functiontoggle_visibility(id){conste=document.getElementById(id);if(e.style.display=='block')e.style.display='none';

elsee.style.display='block';

}


Example– Show/HidewithjQuery

$().ready(function(){$("a").click(function(){

$("#more").toggle("slow");returnfalse;

});});


Example– AjaxtheoldwayfunctionGetXmlHttpObject(handler){

letobjXmlHttp=null;//HoldsthelocalxmlHTTPobjectinstance

//Dependingonthebrowser,trytocreatethexmlHttpobjectif(is_ie){

varstrObjName=(is_ie5)?'Microsoft.XMLHTTP':'Msxml2.XMLHTTP';try{

objXmlHttp=newActiveXObject(strObjName);objXmlHttp.onreadystatechange=handler;

}catch(e){//Objectcreationerroredalert('VerifythatactivescriptingandactiveXcontrolsareenabled');return;}

}else{//Mozilla|Netscape|SafariobjXmlHttp=newXMLHttpRequest();objXmlHttp.onload=handler;objXmlHttp.onerror=handler;

}//ReturntheinstantiatedobjectreturnobjXmlHttp;

}


Example– AjaxwithjQuery

$.get("update_actions.aspx",{st:"yes",f:$(this).attr("ID")});


jQueryExamples


CalendarExamples

module 5 â€“ django and git django web applica\on framework

Documents