4 STEPS TO SOLVE ANY PROBLEM

EXAMPLE
Make sure you 100% understand the
1 problem. Ask the right questions to get
a clear picture of the problem Project Manager: “We need a function
that reverses whatever we pass into it”

4 function reverse(value)
Divide and conquer: Break a big
2 if value type !string || !number || !array
problem into smaller sub-problems.
return value

if value type == string

reverse string
Don't be afraid to do as much
3 if value type == number
research as you have to
reverse number
if value type == array
reverse array

For bigger problems, write pseudo-code

4 return reversed value
before writing the actual code








SECTION
DEVELOPER SKILLS & EDITOR SETUP

LECTURE
DEBUGGING (FIXING ERRORS)
WHAT IS A SOFTWARE BUG?

Software bug: Defect or problem in a computer program.

Basically, any unexpected or unintended behavior of a
computer program is a software bug.

Bugs are completely normal in software development!

Previous example: “We need a function that reverses whatever

we pass into it”

reverse([1, 3, 5, 7])
Unexpected result: the array
is scrambled, NOT reversed.
So there is a bug in the A real bug which was
reverse function Ō causing an error in Harvard’s
[5, 1, 7, 3]
computer in the 1940s

Debugging: Process of finding, fixing and preventing bugs.

THE DEBUGGING PROCESS

Isolating where
Becoming aware Preventing it from
exactly the bug is Correct the bug
that there is a bug happening again
happening in code

IDENTIFY FIND FIX PREVENT

During development Developer console Replace wrong Searching for the

(simple code) solution with new same bug in similar
Testing software
correct solution code
Debugger (complex
User reports during
code) Writing tests using
production
testing software
Context: browsers,
users, etc.

JAVASCRIPT IN THE
BROWSER: DOM AND
EVENTS
FUNDAMENTALS
SECTION
JAVASCRIPT IN THE BROWSER: DOM
AND EVENTS FUNDAMENTALS

LECTURE
WHAT'S THE DOM AND DOM
MANIPULATION
WHAT IS THE DOM?

Tree structure, generated

by browser on HTML load

DOM

DOCUMENT OBJECT MODEL: STRUCTURED

REPRESENTATION OF HTML DOCUMENTS. ALLOWS
JAVASCRIPT TO ACCESS HTML ELEMENTS AND
STYLES TO MANIPULATE THEM.

Change text, HTML attributes,

and even CSS styles
THE DOM TREE STRUCTURE

Special object that is the entry

point to the DOM. Example:
document.querySelector()