Basic JavaScript Knowledge
var x = 5;
var y = 6;
var z = x + y;
z
let text = "Mort";
text
let text2 = 'Yeung';
text2
let number = 1234567890123456789012345n;
let Largenum = BigInt(1234567890123456789012345)
let typeLargenum = typeof Largenum;
typeLargenum
Largenum
Boolean(10 > 9)
Write a boolean statement that outputs true
Boolean(1<2)
let name;
name
grade = undefined;
let result;
result = Boolean(undefined);
console.log(result); // false
result = Boolean(null);
console.log(result); // 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()
const myObject = {
[mySymbol]: 'Hello World'
};
console.log(myObject);
Edit/add to the code above so that it outputs "Hello World"
Object
- Identify the name/keys in the object below: name, breed, age.
- Identify the values in the object below: Elly, Rottweiler, 4.
const dogs = {name: "Elly", breed:"Rottweiler", age:4, color:"black"}
dogs
Array
const songs = ["Love Story", "Blank Space", "I Knew You Were Trouble"];
songs
const cost1 = 2;
const cost2 = 11;
let totalCost = cost1 + cost2;
totalCost
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;
if ("red" === "blue") {
var outcome = "if block";
} else {
var outcome = "else block";
}
outcome;
let temperature = 54
if (temperature < 70) {
cast = "Chilly";
} else if (temperature < 60) {
cast = "Cold";
} else {
cast = "Warm";
}
cast
Create a conditional statement about how you would greet someone based on the time of day.
hoursAwake = 10;
if (hoursAwake > 4) {
cast = "Good afternoon.";
} else if (hoursAwake > 8) {
cast = "Good night.";
} else {
cast = "Good morning.";
}
cast
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 propertyJavaScript in HTML- Questions
- Where do you store the JavaScript Code?
- JavaScript code can be stored in a separate .js file or directly in the HTML file using a
<script>tag.
- JavaScript code can be stored in a separate .js file or directly in the HTML file using a
- How do you import a JS file into HTML?
- To import a JS file into an HTML file, you can use the
<script>tag with the src attribute set to the URL of the JS file. For example,<script src="script.js"></script>will import the script.js file.
- To import a JS file into an HTML file, you can use the
- What is onClick?
- onClick is an event handler attribute that can be added to an HTML element to specify a JavaScript function to be executed when the element is clicked. For example,
<button onClick="myFunction()">Click me</button>will call the myFunction() function when the button is clicked.
- onClick is an event handler attribute that can be added to an HTML element to specify a JavaScript function to be executed when the element is clicked. For example,
- What tag do you use to write JavaScript code?
- The
<script>tag is used to write JavaScript code in an HTML file. For example,<script>console.log("Hello, world!")</script>will output "Hello, world!" to the console.
- The
Notes
- JavaScript variables can be declared with var, let, or const, and can hold any data type.
- There are eight JavaScript data types, including strings, numbers, BigInts, booleans, undefined, null, symbols, and objects.
- Conditional statements control behavior and decide whether or not pieces of code can run, using if, else, and else if.
- Const is used to declare variables whose value can only be initialized at the time of declaration and cannot be reassigned.
// game works here: https://soham360.github.io/csp-fastpages/2023/04/24/JavaScriptGame.html
<html>
<head>
<title>Guess the Number Game</title>
</head>
<body>
<h1>Guess the Number Game</h1>
<p>I'm thinking of a number between 1 and 100. Can you guess it?</p>
<input type="text" id="guess">
<button onclick="checkGuess()">Guess</button>
<p id="message"></p>
<script>
// Generate a random number between 1 and 100
const randomNumber = Math.floor(Math.random() * 100) + 1;
// Function to check the user's guess
function checkGuess() {
const guessInput = document.getElementById("guess");
const guess = parseInt(guessInput.value);
const message = document.getElementById("message");
if (isNaN(guess) || guess < 1 || guess > 100) {
message.textContent = "Please enter a valid number between 1 and 100.";
} else if (guess === randomNumber) {
message.textContent = "Congratulations! You guessed the correct number!";
} else if (guess < randomNumber) {
message.textContent = "Too low! Try again.";
} else if (guess > randomNumber) {
message.textContent = "Too high! Try again.";
}
// Clear the input field
guessInput.value = "";
}
</script>
</body>
</html>