JavaScript Basics Flashcards
What is JavaScript?
It’s a programming language that is used in the most versatile way: front-end and back-end.
What are the initials for JavaScript?
JS
According to MDN, what is JavaScript?
JavaScript is a programming language that allows you to implement complex features on web pages
Where does JavaScript fit in with front end web development?
Cake analogy
It’s the third layer of the cake.
What does JavaScript do that makes it different
from HTML and CSS?
JS is a scripting language that enables you to create
dynamically updating content,
control multimedia,
animate images,
and pretty much everything else.
What are some things you can create using JavaScript?
- Browser Popups
- Scrolling Effects
- Animation
- Immersive Experiences
- Games
What are some practical applications of JavaScript?
- Maps
- Gmail
- Google Tasks
- Emails
- Documents
- Calculations
What is the JavaScript console?
Within developer tools, you can enter and see how your JavaScript program performs. It’s like a JS editor, web based.
What is the shortcut to open JS console on Windows?
Use javascript console
CTRL SHIFT J
How do you clear the JS console?
Press the grey circle with the diagonal line through it.
Can you preview JavaScript with the console?
Yes.
Can you debug JavaScript with the console?
Yes
What’s the JavaScript console shortcut for mac computers?
Press Command + Option + J
What is syntax?
It’s a language.
It’s a programming language’s
commands, special words, and punctuation.
How do you run a previous command within the JS console?
Previous command up arrow by pressing up key
What does alert do?
alert opens a dialog
What happens if you refresh the page?
The JS console clears what’s printed on the page.
Can you clear the console by clicking?
Yes
Right click, choose clear console
What happens if you enter alert(); in the JS console?
It creates a popup with that’s missing content.
How do JavaScript statements typically end?
;
with a semi-colon
alert(“Hello, World!”);
What does console.log do?
Logs or prints the message in the JS console
What happens if you enter “Hello World” into the console.log?
It prints Hello World inside of the JS console, not on the page.
What does each word within document.write mean?
document refers to current web page
write writes text on web page
If you enter the following code snippet,
what does it do?
It prints a temporary headline onto the webpage.
How do you enter the next line of code,
without running the code?
Use shift + return to move to the next
line without running the code.
If you write a line of code, then press enter, what happens?
It runs the line of code.
Each line of code is a _____.
statement
Do statements run in the order in which they appear?
Statements run one after the other, from top to bottom.
Each statement needs to complete before
proceeding to the next statement.
Can you add HTML markup to format text written in JS?
Yes
Heading tags, p tags, and other tags can be used within JS.
Do you lump your JavaScript code into other HTML or CSS files?
No
JavaScript files get their own documents
apart from HTML and CSS files.
What does JS do in FEWD?
Adds interactivity to a webpage
What role does HTML and CSS play?
HTML adds content web page.
CSS add style to a web page
Does every browser have a javascript engine?
Yes, all browsers have javascript engine.
What is a JavaScript engine?
A JavaScript engine is program built into the
browser that executes JS code.
What does it mean when it’s executing the program?
It’s reading the code and processing a segment of the program.
When a programming language reads and acts upon code it is called ___.
Running a program
Same as executing a program
When the browser executes this line of code, then a dialog window appears. Why is this helpful?
It communicates what behavior happens
in direct response to a line of code.
What extension is used to create JavaScript files?
.js
Do you need to link JS files?
Yes, you link JS files to HTML, typically index.html
How do you initiate the script that connects
the JS file within the index page?
See image
What do images and scripts have in common?
src attribute
What do you put in the quotation marks?
The source of the JS is often the path to the file.
Where is the JS code snippet entered within HTML to connect it to the index.html file?
The JS script appears inside of the head tag within index.html file, below the CSS file.
Is it possible to add JS directly into HTML?
Yes
You use the
tags to surround the JS</p>
Can you have more than 1 JS file?
Yes
So long as they are different files you can have multiple JS files within an HTML document.
Where is the most common place for JS file to be placed?
Towards the bottom of the page, near the closing body tag.
Why would it be placed above the closing body instead of the head area?
By placing it near the bottom, it gives the
browser the opportunity to load HTML and
CSS before running any JavaScript on the page.
Do developers of all skill levels make mistakes?
Yes
No one is immune from making programming mistakes.
What are the most common mistakes?
Syntax errors relating to punctuation, spacing, or wording are the source of most mistakes.
Do browsers provide tools for debugging?
Yes, debugging is key to having programs run correctly.
When an error is found, it can tell you what line the error is on. How does this help with debugging?
You can go straight to the source of where the error is to troubleshoot effectively.
Is JS case sensitive language?
Yes, always use the letter-case required by Javascript.
What happens if you capitalize alert?
It could produce an error message because
alert should be all lowercase letters.
What’s wrong with the syntax of this alert?
It’s missing “ mark before Hello.
What’s wrong with the console.log with this syntax?
It’s missing a closing parenthesis ) before the ; semi-colon.
What’s wrong with this alert JS syntax?
A should be lowercase.
What’s wrong with this line of JS?
It’s a spelling error.
There should be a w for .write
Does the JS console show you all errors at once?
No
Errors are shown 1 by 1 to fix in numerical order.
Most of the time JS needs to work with information that _______.
Changes
Dynamic Info > not > Static Info
Is custom content for a user on SM dynamic or static?
Dynamic
Is a player’s score static or dynamic?
Dynamic
Is an online shopping cart static or dynamic.
eCommerce carts are dynamic.
What is a variable?
It is an area where information that changes or
varies, each time a program is run, is stored.
What is the importance of variables?
Variables store information so that later on it
can be used and manipulated.
Why is game score in a game a variable?
You can get points.
You can lose points.
You start at zero.
The game score changes dynamically.
Variables are like a box because
The contents of the box may change, but the box as a container remains the same regardless of the content.
What is the keyword used to start a variable?
var is the keyword that begins the variable syntax.
What does the keyword var stand for?
var stands for variable
Each variable has a ___.
name.
Each variable has a name to identify it as a
container of dynamic information.
What role does the = sign play in the syntax of writing a variable?
The equal sign = assigns a value to a variable.
What is an assignment operator?
The assignment operator is the
equal sign since it assigns a value to a property.
How do you choose a variable name?
A variable name should directly define
what it relates to for maximum clarity and comprehension.
What is a string?
A string is a word or phrase
enclosed in single or double quotations
What happens when this JS snippet runs?
It prints the word message out because it’s in quotation marks.
When (message) is written out, what happens?
It writes the value of the variable message
as hello in the JS console.
What happens when you write the following
code in the JS console?
You are reassigning the value of the message by using the assignment operator = with a new string value in quotation marks.
Can you choose any name for a variable?
No, there are 20-30 keywords that cannot be used as a variable name as they’re set aside for because the ECMA Script 2015 has reserved these keywords for a future specification.
If your variable name has two words, what should you do?
Capitalize the first letter of the second word
Or Use an underscore between keywords
Can you put a number before a variable name?
No
Numbers should follow the text name of the variable
Should symbols go in the front or back of a variable name?
Symbols go in the front of the variable name.
Should you capitalize the second or third
part of a variable name?
Yes, capitalization is allowed in the
second or third word of a variable name.
S or Score what’s a more descriptive variable name?
Score
Which is the better variable name playerScore or n1?
playerScore
What’s a better variable name p or pricePerPound?
pricePerPound
Why is score listed twice in this example?
Right of the equation becomes the value of score.
Score increases by multiples of 10.
Can you update a variable with another variable?
Yes, it’s quite common to update a variable with a variable.
What is an addition assignment operator?
Shorthand for adding to a variable.
How do you add score + bonus
points together in a game context?
You define both variables for score and bonus points.
Then you create a new variable that
adds both variables to calculate the final score.
What are the drawbacks of using the
var keyword to define variables?
They can be overwritten.
Overwritten can be difficult to catch.
JavaScript is evolving to improve.
What two keywords are sometimes used in
place of var within JavaScript?
let
const
What’s the format of all variables?
including var, let, const
[variable] [variable name] = [value]
What does const stand for
const stands for constant
This means it shouldn’t be overwritten at any point.
Can a const variable be reassigned another value?
No
const variables can only be assigned a value once
What does the error message mean?
“Identifier has already been declared”
It’s letting you know that the variable name has already been used by another variable; it can’t be reused or reassigned a value.
Iet is a variable that is similar to var because … ____
it’s dynamic enough to adjust to new
information (ie. like a game score)
How does let offer greater protection against duplication?
It prevents errors due to duplication
by informing you of an error in the console.
With JavaScript do you have to be careful about spacing?
It’s more flexible than other programming languages in that you can add spaces, tabs, line breaks without breaking the code.
Should you include a space before and after an equal sign?
True or false.
True
Easier to read if there is a space before and after the equal sign
Should const daysInWeek = 7; have spaces?
No.
No spaces between variable names.
What are number data types used for?
Calculations like adding, subtracting, multiplying, dividing
Practical: Total score, total costs
How common are strings?
Super common
Use all throughout programming in different forms
What are the 3 errors in the multi-line attempt for a string?
Why does this happen?
Syntax error: unexpected token
- First line doesn’t have closing quotation marks
- Second line has 0 quotation marks.
- Third line needs an opening quotation mark.
Why?
The JS engine is treating each line as its own line.
What symbol do you use after each line
to communicate that the next line is still part of the string?
/
backslash
Why are backslashes correct in this case of a multi-line string?
The / makes it clear its part of the same string.
In this example, what’s the content of the string?
Open Sesame
What portion of the JS code initiates the .length property?
passphrase.length
Based on the .length property, how many
characters are in this example?
11
Is .toUpperCase() a property or method?
Method
In this example, using the .toLowerCase method, what happens to the letters once run through the JS console?
All letters in the string are lowercase
Including the I, H, and S
Once the method of .toUpperCase is applied, how does the string content appear in the JS console?
I HAVE SPOKEN
Magically, all letters are capitalized…
In the absence of a () method for .toUppercase or .toLowercase, what happens as seen in this example?
The letters in the string retain their original lettercase.
What happens when this JS snippet is run?
It creates a pop up dialog with the question and it can capture information from the user in the field.
What happens when you combine a variable with a prompt?
The user information is stored in the variable name.
When alert(name); is run, what does it do?
It gives back the answer stored in const name.
What happens when you combine a prompt with console.log?
It prints the name into the JS console; it’s a message you send to yourself which can help with testing or debugging.
What is string concatenation?
String concatenation is the process of
adding 2 or more strings together.
In the const message, do the + operators make it MORE or LESS difficult to read the content of the message?
Using + operator makes it harder to read, more difficult to read. There are clearer ways to have multi-line message.
What happens to the content on the right of the assignment operator?
What’s on the left, takes on what’s assigned to it, from the right side of the syntax.
What happens to the left of the equal sign?
right of equal sign goes on the left
combines strings of text together
Why are multiple lines created with message?
It helps improve readability.
It helps you modify text more precisely.
Why does it look like there’s unnecessary
space in the sentences?
It’s making room for essential space
that the string won’t naturally have.
Why wouldn’t this expression work?
Error Message: assignment to constant variable
const variables don’t respond to += addition assignment
You have to switch const to let
The let variable is flexible to be modified/built upon.
When you embed a string with dynamic embedded expressions it is called __________.
Interpolation
Can you use numbers or calculations
with string interpolation?
Yes, string interpolations let you run calc functions.
You can even run math calculations with the curly braces
Is this example using template literals or concatenation?
Template literals
` back ticks at the start and end `
What’s happening in the first line of code?
a variable is being established as const StringtoShout
the assignment operator = sign creates a
prompt or dialog window with a question
What’s happening in the second line of code?
A method is applied to the variable StringToShout where all letters are transformed into uppercase letters.
What’s happening in the 3rd line of code?
A template literal beings it all together.
Message + what to shout in uppercase letters
What is the querySelector() purpose?
query selector helps access HTML elements
What is .innerHTML doing in this example?
.innerHTML is allowing the content to
be replaced old content with new content.
What do we want the ‘main’ content to be?
the content of shoutMessage
What is the name of the triple = = = sign?
strict equality operator
If the person enters the word ‘Mercury’, then what happens?
The console.log produces the message that’s
correct to validate the user input as a valid answer.
What happens if the person enters the wrong answer?
Nothing.
The current program doesn’t have a then statement that applies in the event that the user answer is wrong.
How do you begin to establish
user feedback when the answer is wrong?
Use an else clause
The program receives instructions on what
to do in the event the answer is wrong.
What’s a good analogy to explain the
logic of if/else conditional statements?
Fork in the road, can only go down 1 path
With the current if/else conditional statement,
what happens if someone enters mercury?
The answer is marked as incorrect because of case sensitivity in the strict equality operator the answer was specified as ‘Mercury” not mercury. Case alone shouldn’t make/break a quiz answer.
How do you make sure that case doesn’t
interfere with correct answer in the quiz?
Use the .toUpperCase() to convert all responses into uppercase letters, so it automatically matches the case in the correct answer
If you write the correct answer using a mixture of uppercase and lowercase letters, what happens? Why?
Example: MeRcUry
It’s all good. Answer is correct.
The .toUpperCase() method transforms it
into all uppercase letters.
What are comparison operators?
Symbols used to indicate relationship of values
>, <, =, ==, ===, etc.
How would you write a flexible variable that can store an initial default value of false – with a variable named correctGuess
let correctGuess = false;
In a guessing game, what variable type would you use to indicate that the correct answer is very specific, not changing?
let variable
How would you create a variable that writes the question using a dialog window to the end user?
const guess = prompt(‘Guess a number between 1 and 10’);
In this example why is there a + sign before guess?
+ symbol converts a string into a number.
What kind of statement changes the default
false value into a true value?
It happens through a conditional statement
Write a conditional statement where +guess is strictly equal to the variable number in parenthesis. Then change the correctGuess to true if the guess matches exactly the correct number. Remember to include a ; at the end of the true statement.
if ( +guess === number ) {
correctGuess = true;
}
What should the console.log say if the answer is wrong?
console.log(‘The answer is wrong.’);
Each keyword represents
a possible outcome.
Does it move to the second level, else if,
if the first condition is true?
No
It flows in hierarchal order
Why does the final else not have a condition?
It literally is the last resort in the statement, indicating the previous two conditions were both false. It’s the final answer.
How do you create multiple outcomes within an else/if statement?
Use multiple else if segments to meet your needs
What symbols represent the and operator?
&&
And Operator
What does age represent?
It’s the starting value, the key
testing variable for the scenario that follows.
Is it testing everything simulaneously with the and operator?
No
It checks left
It check right
Then produces outcome
Given this example, what outcome would the console.log give?
True
25 is greater than 20
25 is less than 30
Can a string value pass this range?
No
A string value is made up of letters in this case.
It can fit in the numerical range.
If the age is changed to 10, what happens?
The statement becomes false.
Which is the or operator in this example?
||
2 pipe characters
Is it testing it as one entire statement?
No, it’s testing each half of the
statement to see if it’s true or not.
What if you set the value of agree = ‘n’; what happens?
It states that the statement is false
It is neither y nor yes
Neither condition is true, so it defaults to false
Can you use shorthand with or operator? ||
No
Both sides need to be complete
How do you use a multi-line comment when you have multiple ordered steps?
