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
  • String
  • Boolean
  • Integer
  • Float

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 > 2)

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()

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

const myObjetc = {
    [mySymbo]: 'Hello World'
  };
  
  console.log(myObjetc[mySymbo]);

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 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 now = new Date();
let hour = now.getHours();

if (hour < 12) {
  console.log("Good morning!");
} else if (hour < 18) {
  console.log("Good afternoon!");
} else {
  console.log("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? - .js files
2. How do you import a JS file into HTML? - < script src="name.js"></ script>
3. What is onClick? - Describes what happens when something is clicked.
4. What tag do you use to write JavaScript code? - < 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

Extra Credit Word Guessing Game</h1> </div> </div> </div>

// Define an array of words to guess
var words = ["javascript", "html", "css", "python", "java", "ruby"];

// Choose a random word from the array
var word = words[Math.floor(Math.random() * words.length)];

// Create an array of underscores to represent each letter in the word
var answerArray = [];
for (var i = 0; i < word.length; i++) {
	answerArray[i] = "_";
}

// Display the initial state of the word
document.getElementById("feedback").innerHTML = answerArray.join(" ");

// Function to check the user's guess
function checkGuess() {
	var guess = document.getElementById("guess").value.toLowerCase();
	var correctGuess = false;

	// Check if the guess is correct
	for (var i = 0; i < word.length; i++) {
		if (guess === word[i]) {
			answerArray[i] = guess;
			correctGuess = true;
		}
	}

	// Update the display
	document.getElementById("feedback").innerHTML = answerArray.join(" ");

	// Check if the game is over
	if (!answerArray.includes("_")) {
		document.getElementById("feedback").innerHTML = "You win!";
	} else if (!correctGuess) {
		document.getElementById("feedback").innerHTML = "Wrong guess, try again.";
	}

	// Clear the guess input
	document.getElementById("guess").value = "";
}

</div>