Intro to JavaScript

Noble Desktop

Navigate: Right/Left Arrows (or Swipe Left/Right)
Zoom Out: Press Esc (or Pinch)

It's Not Java

Don’t say Java when you mean JavaScript

JavaScript vs Java

  • JavaScript: A scripting language used to add interactivity to web sites, control web servers, automate Adobe apps, and more.
  • Java: An object-oriented programming (OOP) language used to create stand-alone applications such as Android apps.

Where Can You Use JavaScript?

Client-side & Server-side

  • Client-side JS runs in a web browser and lets you access and manipulate webpage elements (HTML & CSS).
  • Server-side JS runs on a web server and gives you back-end access to databases, file systems, and servers.

Client-side

  • Change, add, or remove HTML elements: h1, img, input, etc.
  • Change, add, or remove HTML attributes: class, src, value, etc.
  • Change, add, or remove CSS.
  • React to events: click/tap, hover, etc.

Server-side

  • Node.js is an ”asynchronous event-driven JavaScript runtime”... “designed to build scalable network applications”.
  • Node.js can read/write to databases, access files, and more.
  • Node.js competes with other server-side languages like PHP or Ruby on Rails.

Other Uses for JavaScript

  • JavaScript running in Adobe apps lets you automate Photoshop, InDesign, etc.
  • ExtendScript is what Adobe calls their implementation of JavaScript in Adobe apps.
  • Example: Dan Rodney has several InDesign Scripts that automate InDesign and can save people hours of work!

Examples of Client-Side JS

JavaScript Coding Fundamentals

Where does JS code go?

  • JS can be put anywhere in <head> or <body>
  • HTML elements may need to be loaded before executing your JS code, which is why JS is often put at the bottom of <body>

JavaScript Terminology

  • Objects (the nouns of JS): An object is a bundle of information that is packaged in an organized way. Nearly everything in JS is an object.
  • Properties (the adjectives of JS): Objects have properties, which tell you things about the object. You can get properties and sometimes you can change them. Written as Object.property
  • Methods (the verbs of JS): Methods are built-in actions that do various tasks. Written as methodName()
  • Functions: A collection of custom-written JS code that waits to be executed until called. Written as functionName()

Conceptual Examples

  • Object: Car
    Object: Car.door
    Object: Car.door.window
  • Property: Car.color   (would return a value such as red)
    Property: Car.door.open   (would return true or false)
  • Method: Car.door.open()
    Method: Car.door.window.open()

Document Object Model (DOM)

DOM Tree

Let’s Code Some JavaScript!

Live Demo

Download Demo Files

JavaScript Libraries

What is a JavaScript Library?

  • Pre-written JavaScript that allows for easier development.
  • Instead of writing the JS code yourself, a library provides it.
  • Libraries can save you time & let you do things beyond your coding ability.

jQuery

  • jQuery is the most popular JavaScript library.
  • It’s completely free to use!
  • Makes it easier to target elements, handle events, and more.
  • jQuery is pre-written JavaScript you can use, but it was written in a way that lets you code differently that plain JavaScript.

Let’s Code Some jQuery!

Live Demo

jQuery Plugins

  • Many developers have written plugins to do things such as slideshows, form validation, lightboxes, and much more.
  • A jQuery plugin is a collection of jQuery code written in a way that it makes it easier for you to use it.
  • Most plugins are free, or inexpensive.

Some Plugins

Let’s Use Some jQuery Plugins!

Live Demo

GreenSock Animation Platform

Examples of GSAP

Let’s Code Some GSAP!

Live Demo

Learn More

JavaScript & jQuery

GreenSock Animation Platform (GSAP)

Noble Desktop