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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- javascript reference guide marklogic
- essential javascript a javascript tutorial university of illinois
- hello world v2 lee holmes
- page 1 of 1 client side web programming javascript part
- javascript basics github pages
- chapter 4 client side programming the javascript language
- chapter 1 html say hello to javascript
- javascript basics html dom
- hello world
- scratch lesson 1 welcome to scratch harvard university