CodePreneur Week3 - Introduction to JavaScript

35
Holla!

Transcript of CodePreneur Week3 - Introduction to JavaScript

Page 1: CodePreneur Week3 - Introduction to JavaScript

Holla!

Page 2: CodePreneur Week3 - Introduction to JavaScript

This is Codepreneur2016

Page 3: CodePreneur Week3 - Introduction to JavaScript

BANJO MOFESOLA PAULCHIEF DEVELOPER,PLANET NEST

good to see you again

[email protected]

Page 4: CodePreneur Week3 - Introduction to JavaScript

Last week, we learned CSS, remember?

Page 5: CodePreneur Week3 - Introduction to JavaScript

Exercisedesign a webpage with external css

Page 6: CodePreneur Week3 - Introduction to JavaScript

Week 3.Scripts, Oil And Moving parts

Page 7: CodePreneur Week3 - Introduction to JavaScript

Javascriptbringing life to webpages since 1995

Page 8: CodePreneur Week3 - Introduction to JavaScript

MEET JAVASCRIPTYou clicked and it happened! Javascript is the programming language of HTML and the Web.

Page 9: CodePreneur Week3 - Introduction to JavaScript

BETTER USER EXPERIENCEJS makes your webpage respond interactively to the user

Page 10: CodePreneur Week3 - Introduction to JavaScript

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

Page 11: CodePreneur Week3 - Introduction to JavaScript

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

Page 12: CodePreneur Week3 - Introduction to JavaScript

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

Page 13: CodePreneur Week3 - Introduction to JavaScript

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

Page 14: CodePreneur Week3 - Introduction to JavaScript

DOM

Page 15: CodePreneur Week3 - Introduction to JavaScript

DOCUMENT OBJECT MODELThis is how JS is able to access and change elements in an HTML document

Page 16: CodePreneur Week3 - Introduction to JavaScript

DOM documentThat’s your webpage, JS represents it simply as document

Page 17: CodePreneur Week3 - Introduction to JavaScript

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

Page 18: CodePreneur Week3 - Introduction to JavaScript

Elements..innerHTML, .attribute,

.setAttribute, .style.property

Page 19: CodePreneur Week3 - Introduction to JavaScript

Functions

Page 20: CodePreneur Week3 - Introduction to JavaScript

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

Page 21: CodePreneur Week3 - Introduction to JavaScript

NOTEJavaScript is case-sensitive, so nest is not the same as Nest

Page 22: CodePreneur Week3 - Introduction to JavaScript

Timers.interval, timeout

Page 23: CodePreneur Week3 - Introduction to JavaScript

Events.when something happens…

Page 24: CodePreneur Week3 - Introduction to JavaScript

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

Page 25: CodePreneur Week3 - Introduction to JavaScript

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

Page 26: CodePreneur Week3 - Introduction to JavaScript

COMMON EVENTSonload, onchange, onclick, onmouseover, onmouseout, onkeydown

Page 27: CodePreneur Week3 - Introduction to JavaScript

BOM

Page 28: CodePreneur Week3 - Introduction to JavaScript

BROWSER OBJECT MODELThis is how JS is able to talk to the browser

Page 29: CodePreneur Week3 - Introduction to JavaScript

Some BOM.history, location

Page 30: CodePreneur Week3 - Introduction to JavaScript

Popups.alert, prompt, confirm

Page 31: CodePreneur Week3 - Introduction to JavaScript

Conditions.Ifs, elses, and switches

Page 32: CodePreneur Week3 - Introduction to JavaScript

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

Page 33: CodePreneur Week3 - Introduction to JavaScript

Strings.and their awesome features

Page 34: CodePreneur Week3 - Introduction to JavaScript

To the Laband we’ll stay there

Page 35: CodePreneur Week3 - Introduction to JavaScript

See ya!