INTRO CHEATSHEETTO FRONTEND J S

INTROTOFRONTENDJS

CHEATSHEET

IntrotoJavaScript:ModifyingandcreatingHTMLDOMelementswithJavaScript

BrowserInspector

TooltoinspectunderlyingHTML/CSSofanHTMLpageas wellasviewtheconsole.WorksforChromeandFirefox.

Windows/Linux Ctrl+Shift+I Mac Command+Shift+I

IncludingJS

ToincludeaJavaScriptfileonanHTMLpage,includewith HTMLscripttagsreferencingthesourcelocation.Include afterbodycontentbutwithinHTMLtags.

ConsoleLog

Printthingstoconsoletohelpdebug.Accessconsoleon webpagebyopeninginspectorinabrowser.

console.log("helloworld");

DeclaringFunctions

Functionscanbedeclaredwithanameandaccept parameters.Anonymousfunctionscanalsobedeclared ascallbacks.

constadd=(x,y)=>{ return(x+y); }

functionWithCallback(()=>{ return"anonymous"; });

Ananonymousfunctiondeclaredasacallbackforanother function.

JavaScriptObjects

OtherwiseknownasaJSONobject,theseobjectshave attributeswithvaluesthatcanbeassigned.

letuser={ name:"AaronSipser" };

DeclaringVariables

Initializeanewvariable.Useletforvariablesyoumay reassign.Constantsshouldneverbereassigned.

letx;

Declaresthevariablexwithoutassigning.

console.log(user.name); AttributesofaJSONobjectcanbeaccessedbydotnotation.

console.log(user["name"]); AttributesofaJSONobjectcanbeaccessedwithbrackets.

lety="hello"; Declaresthevariableyandassignstoastring.

constz="world"; Declarestheconstantzandassignstoastring.

SelectingDOMElements

SelectexistingDOMelementsontheHTMLfilethescript isincludedinbyelementid.

letDOM=document.getElementById("elementId");

INTROTOFRONTENDJS

CHEATSHEET

Select/ModifyDOMElementAttributes

SelectDOMelement'sattributessuchasinnertextand classes.Someofthefollowingexamplesrefertoa variableDOMwhichreferstoaDOMelement.

document.getElementById("elementId").innerText; Selectelementbyidandselectattributeinoneline.

DOM.innerText="welcomehome,boss"; Thischangesthetextwithintheelement'stags.Onlyaccepts strings.

DOM.innerHTML="welcomehome,boss"; ThischangestheHTMLbetweentheelement'stags.Will acceptandparseHTMLtags.

DOM.className="class-oneclass-two"; Setsandoverwritestheclassoftheelementtoclasses: "class-one"and"class-two".

DOM.id="element-id"; Setstheidoftheelementto"element-id".

DOM.setAttribute("id","element-id"); Setstheidoftheelementto"element-id".

Tips

DifferentDOMelementshavedifferent attributes.It'shighlyrecommendedthatyoulook uptheattributesoftheelementyouaretryingto access. Forexample,inputtagshavevalueattributesand notinnerText.

CreateDOMElement

CreateanewDOMelementwithJavaScript.Don'tforget toaddtheelementtothepage.

letDOM=document.createElement("div"); Createsanewelement.

EventListeners

AddeventlistenerstoHTMLDOMelements.

DOM.addEventListener("click",function(){ console.log("clicked!"); });

HereDOMisavariablethatreferstoaDOMelementandan anonymousfunctionistriggeredwhentheelementisclicked.

AddDOMElementtoPage

CreatedDOMelementsmustbeexplicitlyaddedtoa page.

letparent=document.getElementById("parent"); letDOM=document.createElement("div"); parent.appendChild(DOM);

Selectstheelementwiththeid"parent".Createsanew elementandaddsittotheparentelement.

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download