Intro to Javascript

by Lindsey Dragun

lmdragun@gmail.com

History

  • Javascript was invented in 1995 and released in 1996

  • It was named after the popular "Java" language, even though it wasn't related to it

  • The ancestor of what we use today was eventually named "ECMAscript", and the current widely used forms are ES5 and ES6

  • There was almost a decade between ES5 and ES6, but newer versions will come out more quickly

 

Basics

  • Javascript is "dynamic" (it does not generally need to be compiled)
  • It is "full-stack", meaning that it can be used on the frontend (most commonly) and the backend (through Node.js)
  • On the frontend, it's a major source of webpage interactions by manipulating HTML and CSS

What can JS do?

  • Can create modals (pop-ups) and other interactive features
  • Can show real-time changes between users (like Facebook)
  • Data-visualizations (maps, graphs, etc.)
  • Games, VR, etc

Working with Javascript

  • Most Javascript will work just in a browser, but requires some setup
  • A REPL is a text editor that will show you output
  • It stands for "Read-Eval-Print Loop"
  • Lots of options, we'll just use JS Bin for now https://jsbin.com/

Showing Your Results

  • Javascript works by interacting with the DOM
  • DOM is Document Object Model--the way content on a website is accessed and interacted with
  • Because we're not going to be building a website, but still want to show results, we'll be using the console
  • The console is accessible on all standard web browsers
  • Console.log("put something here") is how your print to the console.

Practice Console Logging

console.log("Hello world");

Storing Information: Variables

  • Variables are how you store values you will be using
  • ES5 declares variables with var
  • ES6 declares variables with const (ones with values won't change) and let (ones with values that will change)
  • var age becomes let age 
  • var dateOfBirth becomes const dateOfBirth

Data Types

Number

  • Exactly what it sounds like--these are numbers
  • Written using digits (0-9)
  • Unlike other languages, these are whole numbers (ints) and numbers with decimals (floats)
  • Basic arithmetic is easy to do in Javascript using +, -, /, and *
console.log(5*5)
console.log(10/5)

String

  • Generally you can think of strings as 'text'
  • Any characters between quotations
  • Single or double can be used, as long as you're consistent
  • A number in between quotation marks is a string, not a number ("2" is treated the way you might think of "two")
console.log("This is a string")

Boolean

  • True or False
  • Or, more accurately, "Truthy" and "Falsy"
  • Javascript will convert values to true or false when you convert them to a boolean
  • Great for checking if something is present (if X has a value, do Y)
console.log(2+2 === 4)

Arrays

  • Arrays are also known as "lists"
  • They're shown by square brackets "[ ]"
  • Items within arrays are separated by commas
  • [ 1, 2, 3 ] or [ "one", "two", "three"] or [ 1, "two", 3 ]
  • Arrays assign a number to each item, called an index, starting from 0
var array = ["red", "green", "blue"]
console.log(array[1])

Objects

  • Javascript uses curly braces "{ }" for objects
  • Objects normally have a { key: "value" }
  • They are sometimes called "dictionaries" and "hashes" in other languages
  • You can have an array of objects or an object of arrays
var instructor = {
    name: "Lindsey",
    work: "Developer",
    age: 32,
    hasLived: ["Washington, DC", "Orlando, FL", "Rome, Italy", "Pittsburgh, PA"]
}

console.log(instructor.hasLived)

Comparisons

  • You can compare items to each other in Javascript in two ways
  • Two equal signs == is a less exact way
  • Three equal signs === is the best way, there won't be any surprises
2 == 2 // true
2 == "2" // true
2 === "2" // false
2 === 2 //true

What's an unwanted surprise?

Since == doesn't care about type, you may end up with unexpected side effects

2 + 2 // 4
2 + "2" // "22"

More Comparisons

  • Less than: <
  • Greater than: >
  • Equal to or greater than: >=
  • Equal to or less than: <=

Functions & Scope

Functions

  • Functions tend to have a set of statements that perform a task (or more than one) 
  • They tend to take in parameters and perform an operation on those, then return something
  • Code is generally built as a series functions--you might call on a function to add some numbers, then another function to put those into a form on a webpage
function addTheseNumbers(num1, num2) {
    return num1 + num2;
}

console.log(addTheseNumbers(4, 2)

Scope

  • If something is defined in a document outside of a function, it is normally a "global" variable
  • Anything can get the variables of its parents, but the only way to get variables from a child is if it's "returning" it
var global = "anything can use this";

function parentFunction() {
    var parentType = "only things within parentFunction's curly braces can access this";
    
    function childFunction() {
        var childType = "only things within childFunction's curly braces can access this";
    }
}

Closure

  • Closure is a type of scope within a function
  • If you next a function within another function, it becomes "private", only the parent function can access it
  • The child function can use anything from the parent function, but the parent function only has access to what the child function returns

Example of Closure

function parentFunction() {
    
    function childFunction() {
        var childType = "we'll be returning this";
        return childType;
    }
    
    return childFunction();
}

var callingParentFunction = parentFunction();

console.log(callingParentFunction);

Play around with this code and the return statement

Working with Arrays

For Loops

  • One way to work with arrays is to "loop through them"
  • Loops, such as for loops, go through each object in an array and do something to them
var numbers = [1, 2, 5]

for(var x = 0; x < numbers.length; x++) {
    console.log(array[x])
}

Here, it console logs each number as it loops through the numbers array.

X = 0, 0 is less than the length of the array, console.log the value at index 0 in the array, then add 1 to X

X = 1, 1 is less than the length of the array, console.log the value at index 1 in the array, then add 1 to X

.....

X = 3, X is a higher number than the length of the array, so stop

var numbers = [1, 2, 5]

for(var x = 0; x < numbers.length; x++) {
    console.log(array[x])
}

Working with Booleans

If Statements

  • One of the most used ways of working with booleans in Javascript
  • If statements often breakdown to "if X, do Y"
  • More complicated ones become "If X, do Y, or if A do B, or if neither of those, do something else (or don't do anything)"
var x = 0;
var y = 2;

if (x < y) {
    console.log("true");
} else if (x === y) {
    console.log("equals");
} else {
    console.log("false");
}

Working with Files

.js

  • Because Javascript is dynamic, you can just make a .js file in a basic word processor
  • But if you want to look at it in your browser, you need to make an html page, as well
  • Make "helloworld.html" and "helloworld.js" files
  • (keep them in the same folder/directory)
<html>
    <body>
        <h1>
        </h1>
        <script src="helloworld.js"></script>
    </body>
</html>

helloworld.html

var headingText = document.querySelector('h1');

headingText.textContent = 'Hello world!';

helloworld.js

Resources

Meetups

My Contact Info

  • lmdragun@gmail.com
  • Twitter @lmdragun
  • Github @lmdragun

Intro to Javascript

By Lindsey Dragun

Intro to Javascript

A quick introduction to Javascript.

  • 1,098