Basic JavaScript Knowledge

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

  Boolean Strings Integers

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 
    - Has special mathematical values
    - Ability to be defined by variables
    - Can use "number" object

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
    - Not applicable with bitwise operators
    - Created by appending "n" to a number
    - BigInt can be compared

const c = 12389012345;
const BigC = BigInt(789012345123);

const typeBigC = typeof BigC;
typeBigC

'bigint'

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

• Used for comparision values
• Used for else, if, elif operations

Boolean(10 > 9)

true

Write a boolean statement that outputs true

Boolean(13 > 12) 
// Purdy > Brady

true

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

• Variable without assignment
• When variable not declared it's not undefined and will give "ReferenceError"

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
    - false value
    - null is absence

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 myObject = {
    [mySymbol]: 'Hello World'
  };
  
  console.log(myObject);

{ [Symbol()]: 'Hello World' }

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

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, color
• Identify the values in the object below: Elly, Rottweiler, 4, black

const doggy = {name: "Coco", breed:"Mini Australian Sheperd", age:2, color:"Brown and White"}
doggy

{ name: 'Coco',
  breed: 'Mini Australian Sheperd',
  age: 2,
  color: 'Brown and White' }

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.

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 is stored within the <script> tags in HTML code. JavaScript files are stored with a .js extension
2. How do you import a JS file into HTML? A JS file can be imported using the src attribute inside script tag. An example would be <script src="JavaScript.JS==js"></script>
3. What is onClick? JavaScript's onClick event only fires off when a user clicks on an element, like a button or a line of text. Usually, it triggers a response from a function or some other action. When a button is clicked, for instance, the color changes (much like the toggle between light and dark mode on the SASS lesson).
4. What tag do you use to write JavaScript code? <script>...</script>

Hacks

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

let score = 0;
const coin = Math.round(Math.random());

const guess = prompt("Heads or Tails? Enter 0 for Heads, 1 for Tails:");

if (guess === null) {
  alert("Game cancelled.");
} else if (guess === "" || isNaN(guess) || guess < 0 || guess > 1) {
  alert("Invalid input. Please enter 0 for Heads, 1 for Tails.");
} else {
  if (guess == coin) {
    alert("Correct! The coin landed on " + (coin == 0 ? "Heads" : "Tails") + ".");
    score++;
  } else {
    alert("Sorry, the coin landed on " + (coin == 0 ? "Heads" : "Tails") + ".");
  }
  alert("Your score is " + ((score / 1) * 100) + "%.");
}

// code works in a js playground tester

evalmachine.<anonymous>:1
let score = 0;
^

SyntaxError: Identifier 'score' has already been declared
    at evalmachine.<anonymous>:1:1
    at Script.runInThisContext (vm.js:96:20)
    at Object.runInThisContext (vm.js:303:38)
    at run ([eval]:1020:15)
    at onRunRequest ([eval]:864:18)
    at onMessage ([eval]:828:13)
    at process.emit (events.js:182:13)
    at emit (internal/child_process.js:812:12)
    at process._tickCallback (internal/process/next_tick.js:63:19)