MoreIntrotoJavaScriptCS115ComputingfortheSocio-TechnoWeb

Instructor:BrianBrubach

Announcements

• Officehourstoday3:00– 4:15pm• Quizout,dueSaturday• Teamaccounts• Meetingtimes• Projectquestions?

Researchresources

• PageforthiscoursebyWellesleysciencelibrarianSarahBarbrow• https://libguides.wellesley.edu/CS115/Home

• Googlescholar• Sarah’svideoalsohasgoodgeneralsearchtipsàhttps://wellesley.zoom.us/rec/share/uv53D6vMqE9Ia4XA70PDWLIIB6jEaaa8hnUd_fQMyUddyoJTvjjjcozjMXkkqNWV• Canfindlegalaccesstoarticlesbehindpaywall(author’swebpage,arxiv.org,etc.)

• ACMDigitalLibrary• Sarah’svideoalsohasgoodinfoonhowpublicationworksinCSàhttps://wellesley.zoom.us/rec/share/uexSHpTu_WZLRKPV7X77Wu0nRonBaaa803Ic_6YOzxrkNBGAsSy_G7_b2Fyycyk1?startTime=1590720727000

• Wayback Machineà https://archive.org/web/

SomerelevantACMconferences

• WWW(WorldWideWebConference)• FAccT (ConferenceonFairness,Accountability,andTransparency)• FormerlyFATML,thenFAT*,nowFAccT

• SIGCHI/CHI(ConferenceonHumanFactorsinComputingSystems)• Manymore…

Usingnewsarticlesassources

• Becarefulhowyouusearticles• Goodstartingpointtodecidewheretodivedeeper• Reputablenewsorgsgreatforprimarysources• E.g.,MarkZuckerbergsaid,“X”

• Evendisreputablenewsorgscanbecitedasexamples• E.g.,notingthatsomeextremistpoliticalwebsiteispromotingafalseclaim

• Sciencejournalismnotasubstituteforacademicsources• Oftenhyperbolicormisleading• Differentobjectivesthananacademicresearchpaper• Tendencytoexpresscertaintyandanswers

Endangeredneckgaiters

• WaPoàWearinganeckgaitermaybeworsethannomaskatall,researchersfind• Exampleofhyperbolic,misleadingcoverageofascientificpublicationUpdate:Sincethisstoryran,moreresearchhasbeendoneongaiterefficacy.Youcanreadaboutthosenewstudiesbyaerosolscientists,whohavepushedbackagainstthecharacterizationthatthingaitersmaybe“worsethannothing,”here.

• Severalotheroutletshavepickeduponthiswithsimilarheadlinesandcontent

Clarificationsfrombettersources

• NPRà HowShouldICoverMyFace?ADeeperLookIntoNeckGaitersAndFaceShields• https://www.npr.org/sections/goatsandsoda/2020/08/14/902244060/how-should-i-cover-my-face-a-deeper-look-into-neck-gaiters-and-face-shields

• ScienceNewsà 4reasonsyoushouldn’ttrashyourneckgaiterbasedonthenewmaskstudy• https://www.sciencenews.org/article/coronavirus-covid19-neck-gaiters-masks-droplets-study

• Originalpaperà Low-costmeasurementoffacemaskefficacyforfilteringexpelleddropletsduringspeech• SeefirstparagraphinDiscussionsection• https://advances.sciencemag.org/content/6/36/eabd3083

Conflictsofinterest

• USATodayà Confusedaboutthesafetyofneckgaiters?Here'swhatyouneedtoknow• Correctssomepriormisinformation• Linkstocomments/clarificationsbyoriginalstudyauthors• Alsolinkstoneckgaiterproductpages

USATodayproductlinks

Checkingforaffiliatelinks

• Copyingthatlinkgives…https://www.amazon.com/Mission-Multi-Cool-Multifunctional-Gaiter-Headwear/dp/B00UR4HHC8/ref=as_li_ss_tl?ots=1&slotNum=0&imprToken=2cba4c6c-4073-786f-a8b&ie=UTF8&linkCode=ll1&tag=usatdeals-20&linkId=f09c6e1e6b1ebb91dcbf79d2e8aafaea&language=en_US

• Anotherlink…https://go.skimresources.com/?id=83224X1534997&xs=1&url=https%3A%2F%2Fwww.etsy.com%2Fsearch%3Fq%3Dneck%2520gaiter

LinkingaJavaScript(.js)file

• • Likehavingthecontentsofthefileappearbetweenthescripttags

ChromeJavaScriptconsole

• Ifthereareanyerrorsinyourcodeyougetablankpage• UsetheChromeJavaScriptConsoleforhelp• Viewà Developerà JavaScript Console

JavaScriptdialogboxes

• Wecanperforminputandoutputviadialogboxes• Inputviaprompt()• Templateà prompt(“message_to_display”,“default_value”)• ,“default_value”isoptional

• Examplefileà input_output.html• Noticewecandefineseveralvariablesatthesametime• prompt()isafunctionthatdisplaysadialogboxtoreadanydata

• Youcanreadnumbersandstringsviaprompt• prompt() returnsastring• Ifyouneedtoperformsomemathematicalcomputation,youmightneedtoexplicitlyconvertthevaluereadintoanumber

Output

• document.writeln()àWritetoHTMLoutputatthatpoint• console.log()àWritetobrowserconsole• innerHTMLàWritetoanHTMLelement• window.alert()àWritetoanalertbox• Quickreferenceà https://www.w3schools.com/js/js_output.asp

Strings

• Canuse‘’or“”forstrings,wewilluse“”inthisclass• Getthenumberofcharactersinastringbyaccessingthelengthvalue

var s = “Hello”;

var x = s.length; // x = 5

• Somefunctionsyoucanusewithstrings:• toLowerCase()• toUpperCase()

Implicitconversions

• InJavaScript,youdon’tspecifythe“type”ofvariables• Mostofthetimeimplicittransformationswilltakecareoftransformingavaluetotheexpectedone• Exampleà Integertypeagecanimplicitlybecomethestring“10”

let age = 10;

var s = “John Age: “ + age;

Explicitconversions

• Sometimesyouneedtoexplicitlytransformavalue• Convertingnumbertostring• var stringValue =String(number);

• Convertingstringtonumber• var number=Number(stringValue);• var number=parseInt(stringValue);• var number=parseFloat(stringValue);

• Example:conversions_bad.html //Whatgoeswronghere?• Example:conversions_fixed.html //Howtofixit

Mathfunctions/constants

• Math.abs()à AbsolutevalueMath.abs(-10) // 10

• Math.max()àMaximumoftwovaluesMath.max(10, 20) // 20

• Math.sqrt()à SquarerootMath.sqrt(4) // 2

• Math.random()à Randomvaluebetween0andlessthan1• Constants

Math.PI // Mathematical constant pi

Booleantype

• Wehaveseeninteger,float,andstringvalues• Newtypeà boolean type• Assumesthevaluetrue orfalse• Variabledeclarationandinitialization

let found = true;let attending = false;

JavaScriptcomparisons

• Youcancomparevaluesbyusingequality/inequalityoperators• ===à Returnstrueifthevaluesandtypesareequal,falseotherwise• !==à Returnstrueifthevaluesortypesaredifferent,falseotherwise• ==and!=à Attempttypeconversion beforecomparingvalues,shouldusuallybeavoidedduetosometimesunpredictedbehavior

• RelationalOperators• <à Lessthan,returnstrueifleftvalueislessthanrightvalue(e.g.,x<y)• >à Greaterthan• =à Greaterthanorequal

• Examplefilesà comparison_string.html,comparison_number.html

JavaScriptifstatement

• Ifstatementà Controlstatementthatallowsustomakedecisions• FirstFormà if

if (expression)statement; // executed if expression is true

• SecondFormà ifelseif (expression)

statement1; // executed if expression is trueelse

statement2; // executed if expression is false

• Toexecutemorethanonestatementuseasetof{}aroundstatements• Examplefilesà if_statement1.html,if_statement2.html

Sometoolsandadvice

• Indentationà http://jsbeautifier.org/• FindingerrorsinJSà http://jshint.com/• AdvicefromNelsonPadua-Perez(greatCSinstructoratUMD)• http://www.cs.umd.edu/~nelson/classes/resources/writingComputerPrograms/

• JSFiddleà https://jsfiddle.net/• InteractwithHTML,CSS,JS,andwebpageoutputinasplitbrowserwindow