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 strings?
Letters, digits, expressions inside of single
or double ‘ or ‘’ quotation marks
Do you need to be consistent with quotation marks?
Yes
Single or double, just be consistent.
What does the error message invalid or
unexpected token refer to?
Possible typo stemming from lack of quotation
marks or lack of consistency with quotation marks.
Should you use “” double quotation marks if you have a single quotation mark in a sentence?
‘You’re only going to live once.’
'’You’re only going to live once.”
The correct option is to use ‘’ double ‘’ quotation marks if you have a word or phrase that uses single quotation marks.
Suppose you have an attribute that uses “” double quotation marks, should you use ‘’ marks in your string?
Example:
‘
My Headline
’;
No
The reverse is true also.
Use single when you’re string internally
uses double quotation marks.
How do you use the backslash in the event you want to differentiate between ‘ single quotation marks for the string and single quotation mark for a word or phrase?
‘I’/m a programmer!’
Use the backslash just after the internal ‘ quotation mark to indicate it’s part of the string, not the end of the string.
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.
Behind the scenes, how are strings treated by the JS engine?
Strings are treated as object.
When is string is treated as an object, how does it improve functionality?
Strings get added functionalities like
properties and methods.
What is the .length property?
.length property tells you how many characters are in a string.
Does .length property include spaces in the character length?
Yes, spaces are counted in addition to letters and numbers.
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
How can the .length property be helpful for passwords?
Make sure password length is not too short, not too long.
Say between 10 and 20 characters total
Can the .length property help with seeing if a form field is empty?
Yes, .length can check if 0 characters are present.
What does the . added to a string do?
. helps strings tap into object
by tapping into properties and methods
Are properties static or dynamic?
Properties are dynamic like a variable.
How is method different from properties?
Methods focus on actions you can do.
Since it focuses on action, it’s not like a variable.
Is .toUpperCase() a property or method?
Method
Is .toLowerCase a method or property?
Method
What does the .toUpperCase method do to a string?
It converts the content of the string to all uppercase letters.
What does the method of .toLowerCase do?
It converts all the content of the string into lowercase letters.
Why do methods like .toUppercase or .toLowerCase matter?
For case sensitivity purposes, letter case matters.
How is lettercase relevant to programming?
Lettercase is later used for many purposes including searching in search bars or matching information in online store inventory.
What significance does the () usually convey?
() shows you its a 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 does it mean to capture input?
Any information that’s gathered from the end user
What are 3 examples of capturing input?
Login
Form
Create a profile
What’s another way to call methods?
Commands
What does the prompt command let you do?
lets you ask a question from the user
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.
Is it possible to combine strings?
‘Peter’ ‘Nystrom’
Yes strings can be combined together
‘Peter Nystrom’
Why would combining strings be helpful for names?
You collect first and last name separately in a form.
Through combining strings, full name is displayed together.
What is string concatenation?
String concatenation is the process of
adding 2 or more strings together.
How does the + operator help with string concatenation?
The plus operator + helps join strings.
Do strings add space?
No.
You have to add a space, to see a space.
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
When adding to a message, what symbol do you use?
+= addition assignment
This adds to the message.
It replaces message + (long form)
+= (short hand)
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.
Why would you use a template literal over string from a spacing standpoint?
It’s easier to use spacing with template literals because it’s more natural, intuitive, normal to just writing a sentence.
Spaces included automatically
What symbol do template literals use to start/end the process?
** backtick **
(on the same key as the tilde ~ key)
How do you insert dynamic values into a template literal?
${curlybraces}
When you embed a string with dynamic embedded expressions it is called __________.
Interpolation
Can you put just about any JavaScript inside the curly braces?
Yes
Numbers and Calculations also
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
With template literals, you don’t
need to worry about _____, ____ quotes,
or ____ quotes like concatenation.
spaces
single quotes
double quotes
How do you create a new line with template literal?
Simply use the return button
Template literals make new lines easier.
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
When ‘main’ is used within queryselector,
what’s this method doing?
It’s scanning for the main tag
within HTML document.
What is .innerHTML doing in this example?
.innerHTML is allowing the content to
be replaced old content with new content.
Is .innerHTML a method or a property?
.innerHTML is a property
What do we want the ‘main’ content to be?
the content of shoutMessage
What do conditional statements do?
Conditional statements help programs follow
if this, then that logic to respond more intelligently.
What’s an example of a conditional
statement in the context of a game?
If the player loses all points, then the game is over.
If the player reaches 1000 points, then increase difficulty.
What is the name of the triple = = = sign?
strict equality operator
Why would you use a strict equal operator === in the context of an if/then conditional statement?
The strict equal operator is checking
to see if the user input matches
identically to the correct answer.
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
Is .toUpperCase a property or method?
.toUpperCase() is a method
Do you have to change the correct answer to all uppercase letters in the quiz when using .toUpperCase() method?
Yes
The strict equality operator is using
that as a reference point to match answers and case.
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’s the value of having conditional statements?
It makes programs more flexible
and more interesting to the end user when
conditional statements are applied well.
What does the less than simple mean?
example: 3 < 5
3 is less than 5
The crocodile goes for the biggest value.
Programming can be binary because it’s ultimately trying to determine if something is ____ or ____.
True or false
What are comparison operators?
Symbols used to indicate relationship of values
>, <, =, ==, ===, etc.
Is 100 > 100?
No
They’re equal.
Console says: FALSE
Is (100 >= 100)?
Yes, 100 can be equal to 100.
Is ( ‘100’ > ‘Apple’)?
Yes, numbers always come before letters.
What is the Equality Operator?
==
two equal signs
What does the equality operator == do?
It helps test if two values are true.
==
Does the equality operator test the equality of different types?
Yes, it can see if different types are actually equal.
Is ( ‘3’ == 3 )?
Yes, they are equal.
the string is converted into a number by the browser before comparing the values
What symbols are used in a strict equality operator?
===
all three equal signs together in a strict equality operator
Does a strict equality operator compare types also?
No
Strict equality operators are purely
based on values exclusively.
What’s the outcome of ( ‘ ‘ === 0 )?
False
A strict equality operator finds that it is not the same.
( ‘ ‘ == 0 )
What happens with an equality operator?
Equal values
Space is converted into a 0.
0 is equal to 0.
Why would you use strict equality operators
over equality operators?
Strict equality operators are more precise,
less error prone.
( ‘Python’ === ‘HTML’ )
False
Different letters.
( ‘JavaScript’ === ‘JavaScript’)
True
JavaScript is equal to JavaScript
Is the strict equality operator case sensitive?
Yes, strict equality operators are case sensitive.
javascript is not equal to JavaScript
Not equal to is represented by the inequality operator
!=
inequality operator consists of !=
What is the strict not equal operator?
!==
! two equal signs
What is the logical not operator?
!
exclamation mark
Why is it better to use the strict inequality operator?
Strict inequality operators !== prevents errors and misinterpretation of values from the browser.
( ‘10’ !== 10)
True they are not equal
First is in a string
Second is a number
( ‘java’ !== ‘Java’ )
True, it’s not equal
Lettercase difference
( -59 !== -59 )
False
They are equal numbers.
It’s like saying -59 is not strictly equal to -59.
What two values are booleans?
True or false
Why would you use booleans?
When you want the simplicity of yes/no
true/false in your programming
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;
}
How do booleans and conditional statements help create
wrong/right answer messages?
You use booleans with conditional statements
to specify true or false. This way it writes
the correct message.
What should the console.log say if the answer is wrong?
console.log(‘The answer is wrong.’);
How would you insert the correct number
into the wrong answer message?
console.log(‘Sorry, the number was ${number}.’);
Why is the weather an example of programming
for multiple possible outcomes?
If raining, stay in, read a book
If sunny, go out, swim in the pool.
If snowing, go out, ski away.
The weather impacts the activity outcome.
What type of statement helps with programming multiple outcomes?
else, if statements help with programming
multiple outcomes
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
Why would you use an && and operator?
When a program needs to be true in 2
or more conditions for an action to be relevant.
How does the && and operator apply to the weather-based activity analogy?
In order to take of action of swimming
First, the weather has to be sunny
Second, you have to know how to swim.
What’s 3 practical scenarios for the and operator &&?
When you need to test for a range
Say air temperature range
Flu range
Price range
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
What’s the shortcut to bring up a previous
condition in the JS console?
Press the up arrow
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.
What’s a practical scenario where the
and operator && comes in handy on a website?
Login screen
make sure that the username & password
are filled in before processing the login credentials
With the OR operator, do both statements need to be true?
No
If 1 of the 2 is true, then the
entire statement value returns as true.
What characters represent the or operator?
2 pipe characters
||
What’s the weather-activity analogy with the or operator?
If it’s hot outside or the pool is closed, you can go swimming in the ocean.
If it’s snowing outside and the skis are too heavy, you can go snow mobiling.
The main idea: there are multiple options, alternatives
Imagine you have a terms of service agreement, and the user needs to indicate yes to consent to the terms. How can you use the or operator in this case to indicate approval?
Yes
Y
via or operator
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
Is there a limit on the number of and operators you can put into a program?
No
There is NO limit on and operator &&,
just each portion needs to be true
for it to be a true outcome.
Can you have multiple or operators?
Yes you can have multiple or operators ||
Only takes 1 statement to be true for it to default to true
Why do you add comments to your code?
To leave messages for why/how things
work in the program works
How are comments helpful to other developers?
It helps explain how it works or reasoning behind code.
What is a single line comment in JavaScript?
// Single-line comment
How do you do a multi-line comment in JavaScript?
/* Multi-line
comment
*/
Should the comment appear below
or after the section of code?
Before the code is where
the comment should appear.
How do you use a multi-line comment when you have multiple ordered steps?
Should you use a bunch of inline comments?
No
Makes the code harder to read
