Development Environment

2 tools you need to get started

1. Web Browser

Choose a modern web browser that has good, built-in development tools to help make building web pages easier.





(If you are unable to install Chrome:
install Firefox and Firebug .)

2. Code Editor

There are many, many free and paid options* but let's keep it simple for our mentors today and just use one to edit our code.





*Others include: TextMate, Notepad++, and Text Wrangler.
Ask a group of developers what they use and arguments will ensue -- it's a very personal choice! ;)

JavaScript

What is JavaScript?

It's a programming language

It's one of the most popular programming languages.

So that means you're cool for learning it.

Why JavaScript?

It can make web pages interactive and logical.

The Web Triad

JavaScript can modify HTML and CSS

HTML (Hypertext Markup Language)
is the markup language.
CSS (Cascading Style Sheets)
is the style sheet language.
JavaScript
is the programming language.
Content Layer Presentation Layer Behaviour Layer
It should define the content. It should define the presentation It should define behaviour.

All of the most popular websites use JavaScript

Facebook Twitter YouTube reddit LinkedIn WordPress

JavaScript can make really cool apps

FlowerPower Try this demo

The Web without JavaScript :(

Experiment: Let's see what the web looks like without JavaScript

  1. Go to Content Settings in Chrome chrome://settings/content
  2. Select Do not allow any site to run JavaScript
  3. Click the Done button.
  4. Visit any of your daily sites (e.g. Google, Facebook, Twitter)

Notice anything different?

The modern web is slow and broken without JavaScript!

When you're done, go back to Content Settings and select Allow all sites to run JavaScript

Simple Client-Side Code Check


Right-click to View Source


At any time, someone can right-click and "view source" on a web page to see all the JavaScript that went into it.

(I suggest that you do this yourself every time you see something you like!)

Aside

Client-Side JavaScript: JavaScript runs most commonly in a web browser (e.g. Chrome, Safari, Firefox, Internet Explorer). This is called client-side JavaScript. Today we'll focus on client-side JavaScript.

JavaScript and Java are different: JavaScript is what we are learning today. Java is a completely different programming langauge.

js: The short-hand for JavaScript is js

Click to go to next section

(Use the left and right arrow keys on your keyboard to navigate.)