1 of 8

CSE 331�Software Design & Implementation

​

Spring 2026

Section 8 – JavaScript Demo

2 of 8

Administrivia

  • HW+++ releases Friday - Due @ 11:59pm next Wed
  • Last HW!!!

3 of 8

Client/Server Codebase

  • 3 main parts
    • HTML
    • Java backend Application
    • Javascript frontend

4 of 8

Client/Server Debugging

  • Open Network / Console tabs of developer tools (right-click, inspect>Network/Console)
  • Console Tab: Internal logic
    • code errors
    • syntax errors, DOM mishaps, custom logs
  • Network Tab: client-server communication
    • request health (2XX/3XX/4XX/5XX codes), data payloads, response timing

5 of 8

Console

Look for immediate failures/code issues

  • Red text:
    • indicate syntax/runtime errors halting execution
  • Logs:
    • “cannot read properties of null” means missing DOM element
    • use your own console.log() to indicate execution/verify variable data
  • Common mistakes:
    • Buttons/elements that don’t do anything are likely missing event handlers
    • Typos!

6 of 8

Network

Verify Client-Server connection

  • API requests:
    • Ensure requests are being sent!
    • Look at endpoints and make sure they match backend API
    • Make sure GET/POST matches API
    • Verify payload (url params/JSON body) contain correct variable keys/values
  • Response Status Codes:
    • Success (2XX) means request fulfilled and delivered
    • Redirect Error (3XX) don’t worry about these
    • Client Error (4XX) bad URL, wrong method, unauthorized access
    • Server Error (5XX) backend server crashed/threw exception
    • Read response objects! May contain JSON stating error

7 of 8

Section Demo!

8 of 8

End

Please turn in your half-sheets!