Skip to content

embeepea/js-intro

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This repo contains some material that I wrote for a quick one-day crash course that I gave on JavaScript for the NEMAC staff in preparation for a Drupal training week in May, 2013.


#JavaScript Introduction

  • invented in 1995 by Brendan Eich at Netscape, Inc
  • has nothing to do with Java -- Java and JavaScript are two completely different langauges
  • invented as a way to allow programs to run in web browsers
  • meets ECMASscript (European Computer Manufacturers Association) standard (as does ActionScript)

##client-side vs server-side

  • php is server-side
  • JavaScript is client-side
  • (server-side JavaScript is also possible now, but nevermind that for now)

##example1.html

  • Hello World!

##example2.html / example2.js

  • Same as example1, but with JavaScript in a separate file

##example3.html

  • A more complicated HTML structure.

##example4.html

  • Arranging for JS code to run immediately on page load
  • HTML page elements are not available until page has finished loading!
  • body "onload" attribute.

##example5.html

  • Same as example4, but with CSS styling.
  • DOM (Document Object Model) concepts
    • elements / attributes - nested structure
    • "selectors" for targeting objects in DOM

##example6.html

  • divs and spans: useful containers for organizing the structure of a page. Like tables, but more flexible.
  • 'class' vs 'id' attributes
  • Google Chrome dev tools: view HTML structure, see console log

##example7.html

  • introducing jQuery - a JavaScript library
  • the jQuery function, aka just $. Note: this feels strange at first, but gets more natural after a while: in JQuery, $ is a function name!
  • jQuery selectors: 'document', '#wilma', '#betty'
  • anonymous functions
  • asynchronicity, 'callback' functions

##example8.html

  • registering event handlers

##JavaScript Language Fundamentals

  • syntax similar to php and many other C-inspired languages
  • variables declared with var statement; optional, but highly recommended, because otherwise bad things can happen!
  • JavaScript is full of bad parts. But if you stick to the good parts, it's a great langauge. JavaScript: the Good Parts is a great book by Douglas Crockford.
  • scoping, function nesting

##JavaScript objects

  • similar to PHP associative arrays (actually, more like PHP objects, which we did not cover!)

##example9.html

  • JavaScript object syntax

##example10.html

  • see stations.js
  • more complex object example

##example11.html

  • AJAX (Asynchronous JavaScript and XML) with jQuery
  • web services

##example12.html

  • JSON - JavaScript Object Notation
  • JSON with AJAX

##example13.html

  • weather station list from example10 above, via AJAX

##displayweather.html, displayweather.js, displayweather.css

  • walkthrough of full example

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published