Skip to content

Instantly share code, notes, and snippets.

@webdesserts
Last active December 15, 2015 16:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save webdesserts/5293097 to your computer and use it in GitHub Desktop.
Save webdesserts/5293097 to your computer and use it in GitHub Desktop.
This is an ongoing attempt to build an introductory slideshow to JavaScript for those I meet who are new to the language.

What is JavaScript?

##What is JavaScript? Created by Brendan Eich in 1995 for the Netscape browser

###Features

  • functional
  • object oriented
  • asyncronous
  • event-based
  • prototypical

History/Nomenclature

History

  • Mocha (May 1995) initial development
  • LiveScript (Sep 1995) beta Netscape release
  • JavaScript (Dec 1995) final Netscape release
    • was presented as the "little brother" of Java
    • main purpose was to ease the pain of deploying Java webapps

What's it's name now?

  • language/spec: ECMAScript
  • dialects: JavaScript, JScript, ActionScript, QML

Basics

Operators

All the standard operators

Conditionals

Functions

Callbacks

Clientside

Security

There is none! If the client executes it, the user can edit it.

HTML & JavaScript

###inline script tags

  • Don't do this!
  • No Seperation of Concerns
<html>
  <head></head>
  <body>
    <script type="text/javascript">
      console.log('This is bad! Use this as a last resort!')
    </script>
  </body>
</html>

###on* attributes

  • It is still good practice to avoid this.
  • Not a complete seperation of concerns.
  • To use your own functions you would have to expose them to the global namespace.
  • Can be useful for quick hacks and debugging.
<input type="button" onclick="alert('that hurt!')">click me!</input>

###including external scripts

  • Do This!
  • speration of concerns
  • Makes it easier to find all your logic
  <head>
    <script src="scripts/main.js" type="text/javascript"></script>
  </head>

DOM manipulation

###selecting elements document.body
document.getElementById()
document.getElementByTagName()

###creating elements

var para = document.createElement("p")
var text = document.createTextNode("Welcome to the DOM!")
para.appendChild(text)
document..getElementById('intro-header').appendChild(para)

ServerSide

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment