A quick guide to all the JavaScript syntax and features you need for Welcome to JS. On the left side of each section you have JavaScript, on the right you have PseudoCode:
|
The exact syntax and spelling you must use for the computer to understand your code. |
Simpler, more flexible notation you can use to sketch your ideas before writing JavaScript code. |
- Strict Mode
- Comments
- Logs
- Primitive Types
- Operators
- Strings
- Variables
- Interactions
- Block Scope
- Conditionals
- While Loops
- For-Of Loops
- Break
- Continue
Something you write at the top of your programs so the computer will catch more of your mistakes than if you didn't use String Mode.
The biggest difference for now is how JavaScript will treat variables. As long
as you always 'use strict' and always declare your variables you'll be fine.
'use strict'; |
// no strict mode in PseudoCode |
Notes written in your code for developers to read. The computer will ignore these when executing your code.
// inline comment
/*
block comment
*/ |
// inline comment
/*
block comment
*/ |
A simple way to print data to the developer console while the program is running. This is helpful for knowing what data is stored in your program at different points in execution.
console.log('hello'); |
// no need for logs in PseudoCode |
The smallest pieces of data in a JS program. There are many primitive types but you only need to know these for now:
// "boolean"
true;
false;
// "string"
''; // empty string
'hello';
'"hello"'; // quotes in a string
// "number"
0;
1;
1.5;
2;
// "undefined"
undefined;
// "object"
null; |
// "string"
'' // empty string
'hello'
'"hello"'
// "boolean"
true
false
// "number"
0
1
1.5
2
// "undefined"
undefined
// "object"
null |
Ways to transform data. An operator takes in 1 or more values and evaluates to a new value.
Operators in JavaScript are a huge topic with many details and exceptions, for now this should be enough:
// typeof
typeof 'a string'; // "string"
typeof true; // "boolean"
typeof 1; // "number"
typeof null; // "object"
typeof undefined; // "undefined"
// strict equality
4 === '4'; // false
// strict inequality
4 !== '4'; // true
// string concatenation
'hello' + ' ' + 'world'; // "hello world"
// and
true && false; // false
// or
true || false; // true
// not
!true; // false
// addition
4 + 2; // 6
// subtraction
4 - 2; // 2
// multiplication
4 * 2; // 8
// division
4 / 2; // 2
// greater than
4 > 3; // true
4 > 4; // false
// less than
4 < 4; // false
4 < 5; // true
// greater than or equal to
4 >= 3; // true
4 >= 4; // true
4 >= 5; // false
// less than or equal to
4 <= 3; // false
4 <= 4; // true
4 <= 5; // true |
// typeof
typeof 'a string'
typeof true
typeof 1
typeof null
typeof undefined
// strict equality
4 === '4'
// strict inequality
4 !== '4'
// string concatenation
'hello' + ' ' + 'world'
// and
true && false
// or
true || false
// not
!true
// addition
4 + 2
// subtraction
4 - 2
// multiplication
4 * 2
// division
4 / 2
// greater than
4 > 3
4 > 4
// less than
4 < 4
4 < 5
// greater than or equal to
4 >= 3
4 >= 4
4 >= 5
// less than or equal to
4 <= 3
4 <= 4
4 <= 5 |
The data type used for storing and manipulating text data. Strings will be the main type of data used in Welcome to JS.
// string length
''.length; // 0
'a'.length; // 1
'ab'.length; // 2
// string indexes
'abc'[0]; // 'a'
'abc'[1]; // 'b'
'abc'[2]; // 'c'
// --- string methods ---
'HeLlO'.toLowerCase(); // 'hello'
'HeLlO'.toUpperCase(); // 'HELLO'
'abc'.includes('b'); // true
'+a+b+c+'.replaceAll('+', ''); // 'abc'
' abc '.trim(); // 'abc'
'abc'.indexOf('a'); // 0
'abc'.indexOf(''); // 0
'abc'.indexOf('b'); // 1
'abc'.indexOf('bc'); // 1
'abc'.indexOf('x'); // -1
'abc'.slice(0); // 'abc'
'abc'.slice(1); // 'bc'
'abc'.slice(2); // 'c'
'abc'.slice(0, 0); // ''
'abc'.slice(0, 1); // 'a'
'abc'.slice(0, 2); // 'ab'
'abc'.slice(1, 1); // ''
'abc'.slice(1, 2); // 'b'
'abc'.slice(2, 2); // '' |
// string length
''.length
'a'.length
'ab'.length
// string indexes
'abc'[0]
'abc'[1]
'abc'[2]
// string methods
'HeLlO'.toLowerCase()
'HeLlO'.toUpperCase()
'abc'.includes('b')
'+a+b+c+'.replaceAll('+', '')
' abc '.trim()
'abc'.indexOf('a')
'abc'.indexOf('')
'abc'.indexOf('b')
'abc'.indexOf('bc')
'abc'.indexOf('x')
'abc'.slice(0)
'abc'.slice(1)
'abc'.slice(2)
'abc'.slice(0, 0)
'abc'.slice(0, 1)
'abc'.slice(0, 2)
'abc'.slice(1, 1)
'abc'.slice(1, 2)
'abc'.slice(2, 2) |
Variables allow you to save values to use again later in your program.They're kind of like a box that can only hold one thing at a time.
Variables are also an important tool for writing code that is clear for other developers to read and understand. Using helpful names can make your code read (sort of) like a story.
// declare
let name;
// declare and initialize
let name = 'Java';
// read
alert(name);
// assign
name = 'Script'; |
// declare
// no need to declare variables
// declare and initialize (same as assign)
name <- 'Java'
// read
alert(name)
// assign a new value
name <- 'Script' |
Ways for users to pass data into your programs (input), and ways to display data from inside your program to a user (output);
// --- input ---
// allows users to say "yes" or "no"
// inputs a boolean value into your program
let didConfirm = confirm('yes or no');
// allows the user to enter text or click "cancel"
// inputs a string or null into your program
let userInput = prompt('enter some text');
// --- output ---
// displays a message but does not take user input
alert('a message'); |
// --- input ---
didConfirm <- confirm('yes or no')
userInput <- prompt('enter some text')
// --- output ---
alert('a message') |
Variables declared inside curly braces can only be used inside those curly braces. Trying to use a variable in an outer scope will cause an error.
Variables declared outside of curly braces can be used outside or inside the curly braces.
let outer = 'declared outside the block';
{
outer = 'reassigned in the block';
let inner = 'only defined in the block';
}
console.log(outer); // 'reassigned in ...'
console.log(inner); // ReferenceError |
// don't worry about scope in pseudo code
// you can fix scoping when you translate to JS
|
Execute different blocks of code depending on whether an expression evaluates to
true or to false:
if (anExpression) {
// path 1: if anExpression is true
}
if (anExpression) {
// path 1: if anExpression is true
} else {
// path 2: if anExpression is false
}
if (firstExpression) {
// path 1: if firstExpression is true
} else if (secondExpression) {
// path 2: if secondExpression is true
} else {
// path 3: if both expressions are false
} |
IF: anExpression
// path 1
:END IF
IF: anExpression
// path 1
ELSE:
// path 2
:END IF
IF: firstExpression
// path 1
ELSE: IF: secondExpression
// path 2
ELSE:
// path 3
:END IF |
Repeat a block of code as long as an expression evaluates to true.
- Evaluate the expression
- Check if it is
trueorfalse- if it is
true, execute the block - return to step 2
- if it is
- Move on to the next line after the loop
while (anExpression) {
// loop body
}
// next line after the loop |
WHILE: anExpression
// loop body
:END WHILE |
Iterate over a string, executing the loop body once for each character.
A new variable is declared for each character and that variable is scoped to the block. Each time the block is executed the variable stores the next character in the string.
for (let character of 'hello') {
// loop body
}
// next line after the loop |
FOR: character OF 'hello'
// loop body
:END FOR-OF |
Exit a loop immediately and skip to the next line after the loop.
while (anExpression) {
break; // exit the loop immediately
// this line is not executed
}
// next line after the loop |
WHILE: anExpression
BREAK
:END WHILE |
for (let character of 'hello') {
break; // exit the loop immediately
// this line is not executed
}
// next line after the loop |
FOR: character OF 'hello'
BREAK
:END FOR-OF |
Skip the rest of the loop body and go to the next iteration.
while (anExpression) {
continue; // skip to the the loop check
// this line is not executed
}
// next line after the loop |
WHILE: anExpression
CONTINUE
:END WHILE |
for (let character of 'hello') {
continue; // skip to the next character
// this line is not executed
}
// next line after the loop |
FOR: character OF 'hello'
CONTINUE
:END FOR-OF |