Understanding JavaScript for front-end development. Lecture by Banjo Mofesola Paul, Co-founder, Planet Nest

1. Holla!

2. This is Codepreneur
2016

3. BANJO MOFESOLA PAUL
CHIEF DEVELOPER,
PLANET NEST
good to see you again
mofesolapaul@live.com

4. Last week, we learned CSS,
remember?

5. Exercise
design a webpage with external css

6. Week 3.
Scripts, Oil And Moving parts

7. Javascript
bringing life to webpages since 1995

8. MEET JAVASCRIPT
You clicked and it happened!
Javascript is the programming
language of HTML and the Web.

9. BETTER USER EXPERIENCE
JS makes your webpage respond
interactively to the user

10. <script>
JS on your HTML page lives within
the <script></script> tags

11. LIVES ANYWHERE, REALLY
<script> tags can show up
anywhere – in the head or body
section

12. <script src>
You link up with external JS file via
the same <script> but pointing
the src attribute to the file

13. JS Output.
alert, doc.write, innerHTML, console

14. DOM

15. DOCUMENT OBJECT MODEL
This is how JS is able to access and
change elements in an HTML
document

16. DOM document
That’s your webpage, JS represents
it simply as document

17. Finding stuff.
By: ID, Tag name, Class name

18. Elements.
.innerHTML, .attribute,
.setAttribute, .style.property

19. Functions

20. function()
Functions are smart ways of
achieving things in JS. They’re
reusable.

21. NOTE
JavaScript is case-sensitive, so nest
is not the same as Nest

22. Timers.
interval, timeout

23. Events.
when something happens…

24. Aim, Fire!!!
Events are things that happen to
HTML elements, JS reacts to these
events

25. What to do with an event
You handle them with event
handlers (which are actually just
functions [code blocks])

26. COMMON EVENTS
onload, onchange, onclick,
onmouseover, onmouseout,
onkeydown

27. BOM

28. BROWSER OBJECT MODEL
This is how JS is able to talk to the
browser

29. Some BOM.
history, location

30. Popups.
alert, prompt, confirm

31. Conditions.
Ifs, elses, and switches

32. Loops.
for (i = 0; i < 5; i++), while (i < 10)

33. Strings.
and their awesome features

34. To the Lab
and we’ll stay there

35. See ya!