Using the DOM API to hack web apps
This uses basic features of the DOM API and basic javascript; itwill be extremely difficult without a basic understanding ofthose.
Purpose:
Demonstrate a real world use of javascript and DOM thatgraduates may actually do for beginning developer jobs or internslooking for promotion or IT looking to solve impossible problems(and get promotions.)
Webpage to modify:
Using the DOM API to hack web apps
This uses basic features of the DOM API and basic javascript; itwill be extremely difficult without a basic understanding ofthose.
Purpose:
Demonstrate a real world use of javascript and DOM thatgraduates may actually do for beginning developer jobs or internslooking for promotion or IT looking to solve impossible problems(and get promotions.)
Webpage to modify:
-
No libraries are allowed. Only your javascriptand the DOM API are allowed.
-
Using firefox developer tools will be necessary; however, youmay find it useful to Save As… the page to your desktop to help youdebug and explore. For example, you could edit the HTML filemanually before you write a program to do that. (If you can notdo it .)
-
The final result must be only a singlejavascript file which shall be opened and run in the Scratchpad onthe online page (in other words, you can not alter the webpage atall, only your javascript can edit the page.)
-
-
Add an Extract button to the page which (when clicked) reads allthe text in a table and console.log().
A level work: Button for each table near the table, remove $,split() on first/last names.
B level work: either table, commas or tabs between columns, onlythe text data (no html or urls.)
C level work: either table, partial messy output, missing abutton to trigger your code…just runs immediately.
Real world use case: Scraping info from awebapp, reformat a page you do not have access to edit, accessdatabase information without direct access.
-
Difficult: Add sort to the table columns so theuser can sort any table by any column. Sort direction does notmatter. You do not need to sort the images.
A level work: Retain the HTML table, just sort it’s contentsin-place. Add sort button to each header and sort by thatcolumn.
B level work: Each table sorted output on the web page. Copyor replace source table; output formatting does notmatter. Which column you sort does not matter.
C level work: each table has console.log sorted output as plaintext on the console. (start here) Which column yousort does not matter.
No Credit Challenges:
- Have the sort order reverse each time the sort button isclicked.
- Sort by last name.
- Use DocumentFragment for temporary scratch space for fastersorting.
- Make a generic function which finds ALL tables with headercolumns and turns those into sortable columns.
Hint: You’ll have to copy the information intoan Array so you can use the built-in sort method… and then acustom sort handler function to retain the objects connected to thetext you are sorting… you’ll have to move whole TR rows.
Real world use case: adding features to awebpage or webapp without any server-side work. Save labor andserver load (scalability) by making the browser do new features.Sorting options on data output is a commonly useful feature whichis quite slow to implement and run+scale on the server (except forlarge datasets.) Broadly, rearranging HTML on a page can be usefulin customization of the UI; adding MODES such as an entry/edit modefor a job task which optimizes the page for maximum productivity(combined with CSS changes.)
-
Optional hacker stuff:
Install an Add-on to automatically load javascripts on otherwebsites. The oldest most powerful is GreaseMonkey. The currentlypopular and easiest is TamperMonkey.
Try out some scripts for other websites by browsing Greasyforkfor websites you often use.
You may add your assignment script to the target webpage butthis is not required. Why? Because your javascript bugs may createproblems with the class website if you fail to restrict your scriptto only this assignment’s example webpage! It could run your scripton every page for the whole website which could create problems forpages you didn’t design it for; aside from any bugs your script mayhave.
Make sure you know how to enable/disable the add-on as well asremove or restrict any scripts you add. It’s generally a good ideato figure out how to undo something before you start using it andend up in a mess.
HINTS:
DOM API names that may be useful to look up:
document, appendChild(), createElement(), innerHTML, innerText,getElementById(), getElementsByClassName(), querySelector(),setAttribute(), children[], onclick, addEventListener()
RegExp Object, Array sort method
Array.prototype.slice.call(HTMLElementList)
-
No libraries are allowed. Only your javascriptand the DOM API are allowed.
-
Using firefox developer tools will be necessary; however, youmay find it useful to Save As… the page to your desktop to help youdebug and explore. For example, you could edit the HTML filemanually before you write a program to do that. (If you can notdo it .)
-
The final result must be only a singlejavascript file which shall be opened and run in the Scratchpad onthe online page (in other words, you can not alter the webpage atall, only your javascript can edit the page.)
-
-
Add an Extract button to the page which (when clicked) reads allthe text in a table and console.log().
A level work: Button for each table near the table, remove $,split() on first/last names.
B level work: either table, commas or tabs between columns, onlythe text data (no html or urls.)
C level work: either table, partial messy output, missing abutton to trigger your code…just runs immediately.
Real world use case: Scraping info from awebapp, reformat a page you do not have access to edit, accessdatabase information without direct access.
-
Difficult: Add sort to the table columns so theuser can sort any table by any column. Sort direction does notmatter. You do not need to sort the images.
A level work: Retain the HTML table, just sort it’s contentsin-place. Add sort button to each header and sort by thatcolumn.
B level work: Each table sorted output on the web page. Copyor replace source table; output formatting does notmatter. Which column you sort does not matter.
C level work: each table has console.log sorted output as plaintext on the console. (start here) Which column yousort does not matter.
No Credit Challenges:
- Have the sort order reverse each time the sort button isclicked.
- Sort by last name.
- Use DocumentFragment for temporary scratch space for fastersorting.
- Make a generic function which finds ALL tables with headercolumns and turns those into sortable columns.
Hint: You’ll have to copy the information intoan Array so you can use the built-in sort method… and then acustom sort handler function to retain the objects connected to thetext you are sorting… you’ll have to move whole TR rows.
Real world use case: adding features to awebpage or webapp without any server-side work. Save labor andserver load (scalability) by making the browser do new features.Sorting options on data output is a commonly useful feature whichis quite slow to implement and run+scale on the server (except forlarge datasets.) Broadly, rearranging HTML on a page can be usefulin customization of the UI; adding MODES such as an entry/edit modefor a job task which optimizes the page for maximum productivity(combined with CSS changes.)
-
Optional hacker stuff:
Install an Add-on to automatically load javascripts on otherwebsites. The oldest most powerful is GreaseMonkey. The currentlypopular and easiest is TamperMonkey.
Try out some scripts for other websites by browsing Greasyforkfor websites you often use.
You may add your assignment script to the target webpage butthis is not required. Why? Because your javascript bugs may createproblems with the class website if you fail to restrict your scriptto only this assignment’s example webpage! It could run your scripton every page for the whole website which could create problems forpages you didn’t design it for; aside from any bugs your script mayhave.
Make sure you know how to enable/disable the add-on as well asremove or restrict any scripts you add. It’s generally a good ideato figure out how to undo something before you start using it andend up in a mess.
HINTS:
DOM API names that may be useful to look up:
document, appendChild(), createElement(), innerHTML, innerText,getElementById(), getElementsByClassName(), querySelector(),setAttribute(), children[], onclick, addEventListener()
RegExp Object, Array sort method
Array.prototype.slice.call(HTMLElementList)
Accounts Name Email Hellen Thomas Eatons catonsht@dku.edu Ajani Erkson ajerk@accorhotel.com Richard Hade dickhademy.org Patty Lutz plutz@ivc.edu Takeshi Tanaka takeshit@amazon.com Amanda Sue Pickering aspicker@pu.edu Don Quixote donald@ashleymadison.com Frank Arlusa fartusa @ policy.com Bradley Thomas Kissering btkissera bendover.com Chris Matthews screaming silentmail.com John Smith unique@gmail.com Hannah Montana badsoundtrack@ musicmail.com Wendy Wacko 10hourslater@brbmail.com Rodney Dangerfield yourmom (@fatmail.com Steve Peterson why should i care@gmail.com Mary Bout yourex@stalkermail.com Patrick Robertson satan@hellmail.com Patricia Arty party@stanford.edu Gammy Alzheimer urgrandma@gmail.com Gene Kelly singingintherain showermail.com Mickey Rodento cheesey@crackermail.com Devin Nunes stupididiot@youmail.com Atrus Beeranger been@myplace.com James Cone insecure@clinton.com Jeff Epstein jackathrapistfinder.com Daniel Ying dying@mit.edu Bob Florez hotmaleſ@hotmail.com Phil Dumas gmail@yahoo.com Tommy Drop Tables drop.tables@xked.com Stephen Lavery slaveryſ@payday loans Products Name Price abcids Bag $13.42 Avengers S23.75 Barify Barfy S12.54 ORIO Borio S3.67 deats S23.53 GameChild $24.53 Boro Barfy $12.54 Borio $3.67 deats $23.53 GameChild $24.53 Google 12 pack $2.34 Ooogle Harry Potter Obama Sonic $3.52 Heimekem $2.34 iPhones $3.21 Jones Whoopass $3.21 KINE $7.34 Michaelsoft Binbows $523.42 Mighty Mutant Power Turtles SS.34 MIKE Mike $31.21 PolyStation Nintendo PolyStation $12.32 Pet Sweat $5.32 Sqmy $4.23 Sunbucks Coffee $2.13 Transeend $42.51 Show transcribed image text Accounts Name Email Hellen Thomas Eatons catonsht@dku.edu Ajani Erkson ajerk@accorhotel.com Richard Hade dickhademy.org Patty Lutz plutz@ivc.edu Takeshi Tanaka takeshit@amazon.com Amanda Sue Pickering aspicker@pu.edu Don Quixote donald@ashleymadison.com Frank Arlusa fartusa @ policy.com Bradley Thomas Kissering btkissera bendover.com Chris Matthews screaming silentmail.com John Smith unique@gmail.com Hannah Montana badsoundtrack@ musicmail.com Wendy Wacko 10hourslater@brbmail.com Rodney Dangerfield yourmom (@fatmail.com Steve Peterson why should i care@gmail.com Mary Bout yourex@stalkermail.com Patrick Robertson satan@hellmail.com Patricia Arty party@stanford.edu Gammy Alzheimer urgrandma@gmail.com Gene Kelly singingintherain showermail.com Mickey Rodento cheesey@crackermail.com Devin Nunes stupididiot@youmail.com Atrus Beeranger been@myplace.com James Cone insecure@clinton.com Jeff Epstein jackathrapistfinder.com Daniel Ying dying@mit.edu Bob Florez hotmaleſ@hotmail.com Phil Dumas gmail@yahoo.com Tommy Drop Tables drop.tables@xked.com Stephen Lavery slaveryſ@payday loans Products Name Price abcids Bag $13.42 Avengers S23.75 Barify Barfy S12.54 ORIO Borio S3.67 deats S23.53 GameChild $24.53
Boro Barfy $12.54 Borio $3.67 deats $23.53 GameChild $24.53 Google 12 pack $2.34 Ooogle Harry Potter Obama Sonic $3.52 Heimekem $2.34 iPhones $3.21 Jones Whoopass $3.21 KINE $7.34 Michaelsoft Binbows $523.42 Mighty Mutant Power Turtles SS.34 MIKE Mike $31.21 PolyStation Nintendo PolyStation $12.32 Pet Sweat $5.32 Sqmy $4.23 Sunbucks Coffee $2.13 Transeend $42.51
Expert Answer
Answer to Using the DOM API to hack web apps This uses basic features of the DOM API and basic javascript; it will be extremely di…