Getting to Know JavaScript

Introduction

I’ve been asked to turn you into real hackers, and to teach you how to program in JavaScript. I have two preliminary concepts:

  • How does the Internet work
  • Why JavaScript?

You may be asking how this is relevant, but perhaps you can trust me, and by the end of the night, you’ll see how.

History of the Internet

Why Do We Learn History?

To understand why things are the way they are.

history.gif

Once upon a time…

  • How useful is a single, unconnected computer?
  • When I was a kid, to send a program, I used a floppy disk
handing-floppies.jpg

Once Printers were Expensive

Two people (in the same office) could split a printer:

apple-talk-box.jpg

But we Wanted to Talk More!

We had our computers talk on the telephone:

acoustic-modem.jpg

https://www.youtube.com/watch?v=gnAAJ1FGudE

Computers in 1992

To read her report, while I worked late, Mary had to leave her computer on…

computers-1990.jpg

We designated one computer to hold all documents, and we left it on all the time … it would server the documents.

Web Invented in 1993

tim-berners-lee.jpg

The Greatest Invention

Tim Berners-Lee invented Three Things:

  • Easy way to describe a document
  • Easy way to fetch a document
  • Easy address scheme to find a document on any server Universal Resource Locator (URL)

What is a server?

Two “Types” of Computers

clients.jpg

Servers live in Data Centers

datacenter.jpg

What is a Data Center?

Show a Data Center Tour

Why JavaScript?

Why do you want to learn JavaScript?

Graphical Programming?

  • Nice when learning
  • Often nice to read
  • Slow when you know what you are doing

  • But how do you distinguish parts of a program?

    visual-programming-1.png

Programming Syntax

A few different styles. Let’s convert this condition:

visual-programming-2.png

Use Words

We call them key words. This language is called shell: 

if [ $pet_type == "exotic" ]
then
    echo "A " $pet_name " is a strange pet."
else
    echo "I have a " $pet_name " too!"
fi

Here is the code in Ruby: 

if pet.type == "exotic" then
  puts "A #{pet.name} is a strange pet."
else
  puts "I have a #{pet.name} too!"
end

Use Spacing

Blocks contain statements if they are indented underneath. This language is CoffeeScript: 

if pet.type == "exotic"
  console.log "A #{pet.name} is a strange pet."
else
  console.log "I have a #{pet.name} too!"

This is our version in Python: 

if pet.type == "exotic":
    print "A %s is a strange pet." % pet.name
else:
    print "I have a %s too!" % pet.name

Use Fancy Symbols

Conditions and blocks can be surrounded by symbols. This is a language called Lisp: 

(if (equal pet-type "exotic")
    (message "A %s is a strange pet." pet-name)
    (message "I have a %s too!" pet-name))

The grandfather of many languages was called C.

JavaScript looks a lot like C and Java: 

if (pet.type == "exotic") {
    console.log("A" + pet.name + "is a strange pet.");
}
else {
    console.log("I have a " + pet.name + " too!");
}

The Need in 1995

  • Web pages were originally static
  • We wanted them dynamic
  • Two possible approaches:
    • The server could dynamically create the document
    • The browser could dynamically change it

The Browser Wars

Netscape, a hot, new company in 1994 made the web popular.

Microsoft wanted to own that.

browser-wars.png

History of JavaScript

Netscape asked Brendan Eich to quickly beat Microsoft by writing programming code in the browser.

He invented JavaScript in 10 days.

brendan-eich.jpg

JavaScript is Good…and Bad

javascript-good-parts.jpg

JavaScript Most Used Language

javascript-most-popular.jpg

How to Learn JavaScript

Learning Path

  • Know the basics of HTML
  • Learn bulk of JavaScript
  • Know the basics of CSS
  • Learn jQuery

Tutorials and Lessons

  • Know very little code? Like puzzle learning?
  • Know some code? Full lesson plan?
  • Know some, but you’re impatient?

Need a Project… or, Puzzle

If you can’t figure out a project to focus on, try a puzzle:

Playing Around

How to Code JavaScript

Write Code

Need an Editor

  • Online:
  • Local:
    • Atom
    • Sublime Text
    • Eclipse with JSDT

Run Code

  • Must have an HTML frame: 

    <html>
  <head>
    <script type="text/javascript" src="my-code.js"></script>
  </head>
  <body>
    <!-- Widgets to manipulate -->
  </body>
</html>

  • Then JavaScript can run: 

    window.onload="start()";

function start() {
   // Start my app here...
}

Host Code

Remember all that talk about servers?

Need a server to share your work:

  • jsfiddle.net
  • See me for space on my system