JS Lesson 1

.md

JS Lesson 1

Data Types

Numeric

2, 3, 4

Strings

"hello world"

Boolean

true/false

keyword typeof

The typeof operator returns a string indicating the type of the unevaluated operand

typeof "Hello"

"string"

Variables

keyword var

var text = "hello" A place to store data values

Rules

• begin with letter, $ or _
• cannot begin with number, dash -, or period .
• cannot use keywords like for, var, if
• case sensitive
• use names to describe info
• camelCase for word after the first word
• you can store tags

var quantity = 5;
var newPTAg = "<p>Hello world " + quantity + "</p>";

Concatenation

var quantity = 3;
var mythicalCreature = 'pikachu';
quantitty + " " + mythicalCreature;

3 pikachu

Expressions

An expression evaluates to (results in) a single value

1. Expressions that assign a single value to a variable. They look like this: var fruit = "apple";
2. Expressions that use two or more values to return a single value. They look like this: var adele = "Hello, " + "its me";

Operators

Expressions rely on operators to calculate their single value.

1. Assignment operators assign a value to a variable. (hint: you’ve got these down already) var color = 'magenta';
2. Arithmetic operators perform basic math. var addTwo = 2 + 2;
3. String operators combine strings. var greeting = 'Hello! ' + 'Nice to meet you.';
4. Comparison operators compare two values and return a true or false. var buy = 3 > 5; // Value of buy is false; 2 !== 3 is true that is not equal
5. Logical operators combines expressions and return a Boolean value of true or false. var buy = (5 > 3) && (2 < 4);

Logical Operators

&& and evaluates from left to right if one is false, both are false

|| or evaluates from left to right if one is true, both are true

short circuit

if the first one is false, it would read the second part if they were flip flop and the left is true, then is done

Statements

A script is a series of instructions that a computer can follow one by one. Each individual instruction is known as a statement. Each statement in JavaScript is followed by a semicolon.

Conditionals

Perform an action based on some condition

if (expression) {
  statement
}
else if (expression) {
  statement
} else {
  statement
}

Pseudo Code

Before writing code, you can type out the program using your words. When writing pseudo code, think about how the computer interpret code.

// check hours of homework is greater than 4
// otherwise, try to find the homework

Functions

Functions are a way to group statements together to perform a specific task. Functions are reusable blocks of code.

• You declare a function using the keyword function.
• To call a function, type the function name with it’s parenthesis and any associated parameters.

function addNumber(num) {
  var amount = 3;
  return num + 3;
}

Parameters vs Arguments

// parameters named on declaration of function
function myDreamCar(make, model) {
  return "Buy me " + make + " " + model;
}

// arguments "Audi" and "R8" passed into a called function
myDreamCar("Audi", "R8");

JS Lesson 2

Named or Anonymous Function

Named

Function with names. Browser will prioritize named function

function kapow() {
  alert("kapow");
}

Anonymous

Declare a variable and assign a nameless function.

var kapow = function() { 
  alert("kapow")
};

Scope

Where you declare a variable affects where it can be used within your code. If you declare a variable within a function, it can only be used in that function.

Local Variables

• created inside a function
• local scope
• cannot be accessed outside the function in which it was declared
• they are created when the function is run, and removed when it is done
• if the function runs twice, the variable could have a different value each time
• if the variable is locally scoped, then two different functions can use the same variable name without a naming conflict

Global Variables

• created outside a function
• can be used anywhere in the script
• Global scope
• stored in memory for as long as the web page is loaded
• takes up more memory than local variables, as well as introduces more risk of naming conflicts

Array

var arr = ["bike"];
arr.push("car"); // adds element to the end 
arr.unshift("moto"); //adds element to the front
arr.pop(); // removes element from the end
arr.shift(); // removes element from the front

arr.splice(start, deleteCount, item1, item2, ...); // changes contents of an array by removing existing elements and/or adding new elements

Loops

for (expression; condition; increment) {
  statement;
}

JS III DOM Manipulation

DOM - document object model browser gives us global objects to manipulate.

1. window: holds info like the location, size, etc
2. document: HMTL rendered and loaded on top of window

Commonly used methods: query: ask

document.querySelector(); // returns first element that mathces the query
document.querySelectorAll(); // returns a collection all of the elementes match the query

example
document.querySelector('.div1').innerHTML = "Hello World";
document.querySelectorALL('.div1').innerHTML = "Hello World";

function changeChild(message, selector) {
  var child = document.querySelectorAll(selector);
  for(var i = 0; i < child.length; i++) {
    child[i].innerHTML = message;
  }
}
// to uppercase selector
function upper(selector) {
  selector.innerText = selector.innerText.toUpperCase();
}
upper(document.querySelector('.student'));

// to make it editable
document.querySelector('h1').contentEditable = true;

document.querySelectorAll() returns an array do a loop to change all