Student Hacks - SASS Part 2 (JavaScript)

Variables

    - declare JavaScript variables with var, let or const. 
    - If the value of the variable can change, like a total, use let. If the value is set, like prices, use const. Variables can hold any data type. 

var x = 5;
var y = 6;
var z = x + y;

z

11

Data types- there are 8 JS data types.

• List a few data types that you already know

Number - represents numeric data, including integers and floating-point numbers.

String - represents textual data, enclosed in single or double quotes.

Boolean - represents a logical value, either true or false.

Null - represents an intentional absence of any object value.

Undefined - represents a variable that has not been assigned a value.

1. String: a series of characters, written with single or double quotes

let text = "Mort";
text

'Mort'

let text2 = 'Yeung';
text2

'Yeung'

2. Number: can be integers or decimals.

    - You can also have exponential notation for large/small numbers 

3. Bigint: used to store integer values that are too big to be represented by a normal JS number

    - JavaScript integers are only accurate up to 15 digits

let number = 1234567890123456789012345n;
let Largenum = BigInt(1234567890123456789012345)

let typeLargenum = typeof Largenum;
typeLargenum

'bigint'

Largenum

1234567890123456824475648n

4. Boolean: true or false, used in conditional testing

Boolean(10 < 9)

false

Write a boolean statement that outputs true

Boolean(10 > 9)

true

5. Undefined: a variable without a value, has the value undefined/empty values

let name;  
name

grade = undefined;

6. Null: represents the intentional absence of any object value

    - variable is empty at the moment and may have a value later

let result;

result = Boolean(undefined);
console.log(result); // false

result = Boolean(null);
console.log(result); // false

false
false

7. Symbol: used to represent unique values that can be used as identifiers/keys in objects.

    - They are also used to create private properties and methods in classes.
    - unique and immutable, so they can be used as unique identifiers in objects and classes.
    - useful for creating constants that can be shared across different parts of your code.

// Create a Symbol
const mySymbol = Symbol();

console.log(mySymbol);
// expected output: Symbol()

Symbol()

const mySymbol = Symbol();
const myObject = {
  [mySymbol]: 'Hello World'
};

console.log(myObject[mySymbol]);

Hello World

Edit/add to the code above so that it outputs "Hello World"

DONE

8. Object: an unordered collection of key-value pairs. Each key-value pair is called a property.

    - object: written with curly braces {}, name:value pairs
    - array: written with square brackets, separated by commas 

Object

• Identify the name/keys in the object below: name, breed, age
• Identify the values in the object below: Elly, Rottweiler, black

const dogs = {name: "Elly", breed:"Rottweiler", age:4, color:"black"}
dogs

{ name: 'Elly', breed: 'Rottweiler', age: 4, color: 'black' }

Array

const songs = ["Love Story", "Blank Space", "I Knew You Were Trouble"];
songs

[ 'Love Story', 'Blank Space', 'I Knew You Were Trouble' ]

Const

    - We use const to declare variables whose value can be initialized only at the time of declaration.  
    - Const means that the identifier cannot be reassigned. 

const cost1 = 2;
const cost2 = 11;
let totalCost = cost1 + cost2;

totalCost

13

Conditionals: control behavior, decides whether or not pieces of code can run.

- If: if a condition is true it is used to specify execution for a block of code.
- Else: if the same condition is false it specifies the execution for a block of code.
- Else If: new test if the first condition is false.

if (10 > 5) {
    var outcome = "True";
}

outcome;

'True'

if ("red" === "blue") {
    var outcome = "if block";
} else {
    var outcome = "else block";
}
outcome;

'else block'

let temperature = 54
if (temperature < 70) {
    cast = "Chilly";
  } else if (temperature < 60) {
    cast = "Cold";
  } else {
    cast = "Warm";
  }

cast

'Chilly'

Create a conditional statement about how you would greet someone based on the time of day.

let today = new Date();
let time = today.getHours();

if (time < 12) {
  console.log("Good morning!");
} else if (time < 18) {
  console.log("Good afternoon!");
} else {
  console.log("Good evening!");
}

Good evening!

Functions:

- defining: define with function + functionName(parameter) { function code }.  It can be unnamed/anonymous can be defined based on a condition.
- calling: simply put the function name with a parameter and semicolon, or a function can call itself (recursive)

Iteration:

    - for loop: repeats until a specified condition evaluates to false
    - do...while: repeats until a specified condition evaluates to false
    - while statement: executes its statements as long as a specified condition evaluates to true
    - label: provides a statement with an identifier that lets you refer to it later in the code. ex. you can use a label to identify a loop, and then use the break or continue statements to    indicate whether a program should interrupt the loop or continue its execution
    - break: used to terminate a loop, switch, or in conjunction with a labeled statement
    - continue: can be used to restart a while, do-while, for, or label statement
    - for...in: iterates a specified variable over all the enumerable properties of an object
    - for...of statement creates a loop Iterating over iterable objects, invoking a custom iteration hook with statements to be executed for the value of each distinct property

JavaScript in HTML- Questions

1. Where do you store the JavaScript Code?

JavaScript code can be stored in separate .js files, or it can be written inline within an HTML file using script

1. How do you import a JS file into HTML?

You can import a JavaScript file into an HTML file using the script tag with the src attribute set to the file path of the JavaScript file.

1. What is onClick?

onClick is an event attribute that can be added to HTML elements to execute JavaScript code when the element is clicked.

1. What tag do you use to write JavaScript code?

You can write JavaScript code within script tags in an HTML file, or you can write it in a separate .js file and include it in the HTML file using the script tag with the src attribute set to the file path of the JavaScript file

Hacks

1. Add notes in this notebook COMPLETED
2. Complete the code portions, questions, and prompts throughout the notebook COMPLETED
3. Extra Credit: code a small JavaScript game N/A