JavaScript for Beginners

Class 1

Survey

GDI Intro to JavaScript Class Survey Survey Link

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

We are here for you!
Every question is important.
Help each other.
Have fun.

Welcome!

Tell us about yourself.

Who are you?
What do you hope to get out of the class?
What programming languages are you familiar with?
What was the first computer you ever used?

What will you need?

You will need a text editor and a browser.

And maybe some coffee...

I mean it is JAVAscript!

Photo Credit: Josh Sager

What is JavaScript?

JavaScript is a programming language for your browser. It is interpreted instead of compiled.
It was orginally created by Brendan Eich, Who was born in Pittsburgh!!!
Each browser and device has their own implementation of JavaScript, but the ECMAScript specification is what guides JavaScript enhancements in each browser.
JavaScript is always updating and there are new proposed standards released every year.

Latest Version of JavaScript?

As of 2012, all modern browsers fully support ECMAScript 5.1.
Older browsers support at least ECMAScript 3.
On June 17, 2015, ECMA International published the sixth major version of ECMAScript, which is officially called ECMAScript 2015.
On June, 2016, ECMA International published the seventh major version of ECMAScript, which is officially called ECMAScript 2016. Many people call it ES6
On June, 2017, ECMA International published the eigth major version of ECMAScript, which is officially called ECMAScript 2017. Many people call it ES7

Ummmm So What does that mean?

JavaScript is and always will be a work in progress.
Not all browsers support the same Javascript.
Some browsers throw in extra JavaScript features that aren't a part of the ECMA specification.
But resources like Can I Use ECMAScript 5 Reference, Compatibility Table, and MDN can keep you up to speed.

THIS IS IMPORTANT

Despite the constant changes programming fundamentals ALWAYS STAY THE SAME!

So What is JavaScript Used for?

JavaScript interfaces with HTML and CSS.
JavaScript lets you add logic to your webpages that can respond to what users do.
To collect data from users.
To build web software a.k.a. applications.
To create games.

The Players and Their Roles

HTML is the structure.
CSS is the layout and style.
Javascript is the brains!!!

You Will Learn About:

Programming Fundamentals
Our First Program
JavaScript Files
Developer Tools
The DOM
DOM Modification

Programming Fundamentals

Nearly all programming languages have the same core fundamentals. Which are the following:

Execute an instruction
Accept data, aka input
Remember things
Group instructions together
Control the timing of when the instructions execute
Output results of executed instruction(s)

Programming Fundamentals

If you can master these 6 concepts, then you will have the ability to work with nearly every programming language you come in contact with.

And Actually...

An added benefit of learning how to write JavaScript is that it's C style syntax is very similar to many other popular languages.

This is Tiobe list of the currently most popular programming languages.

One more thing...

At the time these slides were authored there are only 33 reserved words. Which is the core part of the language. I find that encouraging!

Okay two things...

Most everyday development only requires less than half of them.

So How Does it Work?

JavaScript is a client-side language

It is a just in time complied language.

Laptop and server connected via the internet

Photo credits: Andrew E. Larson and John Seb Barber cc

Let's Develop It

Let's write your first JavaScript program. Make a folder called gdi. Inside, make a new page called index.html. Place this code inside.


<!DOCTYPE html>
<html>
    <head>
        <title>Test Page</title>
    </head>
    <body>
    <p>This is my awesome JavaScript code.</p>
        <script>
            alert('Hello World!');
        </script>
    </body>
</html>

Script Tags

You can mix JavaScript and HTML. The script tag tells your browser the stuff inside is code, not content.


<script>
    CODE GOES HERE
</script>

JavaScript Files

Just like CSS, you can split a long block of JavaScript into its own file.


<script src="path/to/file.js"></script>

Separating Instructions

After each individual statement, you must add a semicolon.


<script>
    console.log('Hello World!');
    console.log('I am glad to meet you');
    console.log('I am fuzzy');
</script>

Developer Tools

console.log(); is a special command that can only be seen by the developer tools.

The console is a GREAT debugging tool. Most modern browsers have a console.

Comments

You can leave comments in your code—notes that people can read and computers will ignore.


<script>
    /*I can wrap long comments
    with multiple lines
    like this*/
    console.log('Hello World!'); //Or mark short comments like this
</script>

Getting results onto your screen

Open a popup box.


alert('Hello World!');

Display a message in your console.


console.log('Hello World!');

Add something to the page.


document.write('Hello World!');

Let's Develop It

Open index.html. Add a comment to the code.
Try different ways of printing your message.
Create a new file called mycode.js. Move your code to this file and link it to your page.

Starting with the Deep End of the Pool

When people talk about javascript. Usually they are talking about 2 things.

The DOM
The Programming Language

The Document Object Model (DOM)

JavaScript is most commonly used to manipulate the DOM
The DOM is technically not a part of the JavaScript language
DOM implementations vary from browser to browser

So What is DOM?

It's a tree!

It's the nested structure of an HTML page in the form of a tree. The browser makes a "map" of all the elements on a page.

The DOM: Sample Code


	<!DOCTYPE html>
	<html>
	<head>
	  <title>Test Page</title>
	  <style>
	      h1 {
	       color: red;
	      }
	  </style>
	</head>
	<body>
	  <h1>My Page</h1>
	  <p>Hello World!</p>
	  <img src="http://placebear.com/200/300" alt="bear"/>
	</body>
	</html>

The DOM: Sample Model

Let's Develop It

Visit Carnegie Library Website
Inspect Element and explore the DOM
Click on an Element and change the text
Click on an Element and change a style
Refresh the page

THERE'S JAVASCRIPT FOR THAT!

Everything you just did can happen with JavaScript
You can write code to target specific areas of a web page and change them dynamically.

Review: Anatomy of a website

Your Content

+ HTML: Structure

+ CSS: Presentation

= Your Website

A website is a way to present your content to the world, using HTML and CSS to present that content & make it look good.

IDs vs. Classes

ID -- Should only apply to one element on a webpage, e.g., A webpage only has one footer.

The "#" is how you tell CSS "this is an id."

Class -- Lots of elements can have the same class, e.g., There can be many warnings on one webpage.

The "." is how you tell CSS "this is a class name."

Let's Develop It

We are going to change the DOM with Javascript.

Visit Carnegie Library
Open up your console
type the code below into the console


document.getElementsByTagName("h3")[0].style.backgroundColor="orange";

DOM Access: By Tag Name

You can get certain types of HTML elements using this method:


// document.getElementsByTagName(tagName) - get list;
document.getElementsByTagName("a");

// document.getElementsByTagName(tagName)[number] - get 1;
document.getElementsByTagName("0");

DOM Access: HTML 5

In modern browsers, you can use other methods too.

Available in IE9+, FF3.6+, Chrome 17+, Safari 5+:


// document.getElementsByClassName(className);
document.getElementsByClassName("example");

Available in IE8+, FF3.6+, Chrome 17+, Safari 5+:


// document.querySelector(cssQuery) - Get first one;
document.querySelector(".example");

// document.querySelectorAll(cssQuery) - Get All;
document.querySelectorAll(".example");

getElement vs. getElements

Any method that starts with "getElement" will return a single node.


document.getElementById('uniqueID'); //returns a single node

Any method that starts with "getElements" will return a array of nodes. To modify a single node, you will need to use bracket notation to select the correct one.


document.getElementsByTagName('p'); //returns multiple nodes
var specficParagraph = document.getElementsByTagName('p')[2];

Let's Develop It

We are going to change EVEN MORE of the DOM with Javascript.

Visit Carnegie Library
Open up your console
Target a class and change the backgroud color
Target an element (html tag) and change the background color

Summary

Programming Fundamentals
Our First Program
JavaScript Files
Developer Tools
The DOM
DOM Modification

Resources

JavaScript Guide, from the Mozilla Developers Network.
Codecademy, with interactive JavaScript lessons to help you review.