• Like
  • Save
Intro to Javascript
Upcoming SlideShare
Loading in...5
×
 

Intro to Javascript

on

  • 486 views

 

Statistics

Views

Total Views
486
Views on SlideShare
486
Embed Views
0

Actions

Likes
0
Downloads
24
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Intro to Javascript Intro to Javascript Presentation Transcript

  • Introduction to Javascript Kevin Ball Co-Founder & CTO kball@fashioningchange.com @kbal11
  • Introduction to Javascript
  • Introduction to Javascript
  • Introduction to Javascript• What is Javascript?
  • Introduction to Javascript• What is Javascript?• Programming Basics
  • Introduction to Javascript• What is Javascript?• Programming Basics• HTML & the Dom
  • Introduction to Javascript• What is Javascript?• Programming Basics• HTML & the Dom• What makes Javascript Different
  • What is Javascript?
  • What is Javascript?
  • What is Javascript?• The Language of Client-Side Web Development
  • What is Javascript?• The Language of Client-Side Web Development• Available in every browser
  • What is Javascript?• The Language of Client-Side Web Development• Available in every browser• A Powerful Dynamic Programming Language
  • Web Architecture
  • Web Architecture Client/Server Model
  • Web Architecture Client/Server Model
  • Web Architecture Client/Server Model
  • Web Architecture Client/Server Model
  • Web Architecture Client/Server Model
  • Web Architecture Client/Server Model
  • Web Architecture Client/Server Model
  • Web Architecture Client/Server Model
  • Web Architecture Client/Server Model
  • Available in Every Browser
  • Available in Every Browser• No additional tools required
  • Available in Every Browser• No additional tools required• Start playing around right away!
  • Browser Demo hello.html
  • Programming Basics Just Jump In
  • Programming Basics Just Jump In
  • Programming Basics Numbers
  • Programming Basics Numbers
  • Programming Basics Numbers›2+2
  • Programming Basics Numbers›2+2==> 4
  • Programming Basics Numbers›2+2==> 4› 5.0 * 0.5
  • Programming Basics Numbers›2+2==> 4› 5.0 * 0.5==> 2.5
  • Programming Basics Strings
  • Programming Basics Strings
  • Programming Basics Strings› “Hello” + “World”;
  • Programming Basics Strings› “Hello” + “World”;==> “HelloWorld”
  • Programming Basics Strings› “Hello” + “World”;==> “HelloWorld”› 2+ “Hello”;
  • Programming Basics Strings› “Hello” + “World”;==> “HelloWorld”› 2+ “Hello”;==> “2Hello”
  • Programming Basics Strings› “Hello” + “World”;==> “HelloWorld”› 2+ “Hello”;==> “2Hello”› “Hello”.length;
  • Programming Basics Strings› “Hello” + “World”;==> “HelloWorld”› 2+ “Hello”;==> “2Hello”› “Hello”.length;==> 5
  • Programming Basics Variables
  • Programming Basics Variables
  • Programming Basics Variables› var five = 5;
  • Programming Basics Variables› var five = 5; ==> 5
  • Programming Basics Variables› var five = 5; ==> 5› five + 10;
  • Programming Basics Variables› var five = 5; ==> 5› five + 10;==> 15
  • Programming Basics Variables› var five = 5; ==> 5› five + 10;==> 15› five;
  • Programming Basics Variables› var five = 5; ==> 5› five + 10;==> 15› five;==> 5
  • Programming Basics Variables
  • Programming Basics Variables› var students = 5;
  • Programming Basics Variables› var students = 5;==> 5
  • Programming Basics Variables› var students = 5;==> 5› students = students + 10;
  • Programming Basics Variables› var students = 5;==> 5› students = students + 10;==> 15
  • Programming Basics Variables› var students = 5;==> 5› students = students + 10;==> 15› students;
  • Programming Basics Variables› var students = 5;==> 5› students = students + 10;==> 15› students;==> 15
  • Programming Basics If/Then
  • Programming Basics If/Then
  • Programming Basics If/Thenvar students = 5;
  • Programming Basics If/Thenvar students = 5;if (students > 10) { alert(“Big Class!”);} else { alert (“Small Class!”);}
  • Browser Demo if_then.html
  • Programming Basics Loops
  • Programming Basics Loops
  • Programming Basics Loopsvar students = 5;
  • Programming Basics Loopsvar students = 5;while (students <10) { students = students + 1; document.write(“More!<br/>”);}document.write(students + “ students”)
  • Browser Demo while.html
  • Programming Basics Functions
  • Programming Basics Functions
  • Programming Basics Functionsvar plusTen = function(num) { return num + 10;}
  • Programming Basics Functionsvar plusTen = function(num) { return num + 10;}› var students = 5;
  • Programming Basics Functionsvar plusTen = function(num) { return num + 10;}› var students = 5;› students = plusTen(students);
  • Programming Basics Functionsvar plusTen = function(num) { return num + 10;}› var students = 5;› students = plusTen(students);==> 15
  • HTML and the DOM
  • HTML and the DOM
  • HTML and the DOM<html> <body> <h1>Hello</h1> <div id=‘container’> <p id=‘inner’>I’m in the middle!</p> </div> </body></html>
  • HTML and the DOM
  • Browser Demo dom.html
  • HTML and the DOM
  • HTML and the DOM
  • HTML and the DOM
  • DOM Manipulation
  • DOM Manipulation<html> <body> <h1>Hello</h1> <div id=‘container’> <p id=‘inner’>I’m in the middle!</p> </div> </body></html>
  • DOM Manipulation<html> <body> <h1>Hello</h1> <div id=‘container’> <p id=‘inner’>I’m in the middle!</p> </div> </body> <script type=”text/javascript”> document.getElementById(“inner”).innerHTML = “Changed!”; </script></html>
  • Browser Demo dom_manipulation.html
  • DOM Manipulation Stay Tuned for the Next Talk
  • Javascript: What’s Different?
  • Javascript: What’s Different? • Prototypal Inheritance • Closures • Event-based Programming
  • Javascript: What’s Different? Inheritance
  • Javascript: What’s Different? InheritanceTraditional Inheritance
  • Javascript: What’s Different? InheritanceTraditional Inheritance Shape
  • Javascript: What’s Different? InheritanceTraditional Inheritance Shape
  • Javascript: What’s Different? InheritanceTraditional Inheritance Shape Square
  • Javascript: What’s Different? InheritanceTraditional Inheritance Shape Square
  • Javascript: What’s Different? InheritanceTraditional Inheritance Shape Square Triangle
  • Javascript: What’s Different? InheritanceTraditional Inheritance Prototypal Inheritance Shape Square Triangle
  • Javascript: What’s Different? InheritanceTraditional Inheritance Prototypal Inheritance Shape This Square Square Triangle
  • Javascript: What’s Different? InheritanceTraditional Inheritance Prototypal Inheritance Shape This Square Square Triangle
  • Javascript: What’s Different? InheritanceTraditional Inheritance Prototypal Inheritance Shape This Square Copy Square Triangle Square
  • Javascript: What’s Different? InheritanceTraditional Inheritance Prototypal Inheritance Shape This Square Square Triangle Triangle
  • Javascript: What’s Different? Closures
  • Javascript: What’s Different? Closures
  • Javascript: What’s Different? Closures var students = 5;
  • Javascript: What’s Different? Closures var students = 5; var howManyStudents = function() { return students; } howManyStudents();
  • Javascript: What’s Different? Closures var students = 5; var howManyStudents = function() { return students; } howManyStudents(); ==> 5
  • Javascript: What’s Different? Event Based Programming
  • Javascript: What’s Different? Event Based Programming<html> <body> <h1 id=‘clickable’>Click Me</h1> </body> <script type=”text/javascript”> var clickFn = function() {alert(“Clicked!”);} document.getElementById(“clickable”).onclick = clickFn; </script></html>
  • Browser Demo click.html
  • Resources• CodeAcademy (codeacademy.com)• Douglass Crockford Videos (http:// www.yuiblog.com/crockford/)• Book: JavaScript, The Good Parts (Douglass Crockford)
  • Questions?
  • Thank You Kevin BallCo-Founder & CTO kball@fashioningchange.com @kbal11