Coder Social home page Coder Social logo

js-intro's Introduction

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

js-intro's People

Contributors

embeepea avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.