Study NOTES for "JavaScript Beginner's Handbook" .
This book is written by Flavio. I publish web development tutorials every day
on my website flaviocopes.com.
You can reach me on Twitter @flaviocopes.
Created in 1995, JavaScript was not nearly powerful as it is today, and it was mainly used for fancy animations and the marvel known at
the time as Dynamic HTML.
JavaScript does not consider white space meaningful. Spaces and line breaks can be added in any fashion you might like.
JavaScript is case sensitive. A variable named something is different from Something .
The same goes for any identifier.
We define as literal a value that is written in the source code, for example, a number, a string, a boolean or also more advanced constructs,
like Object Literals or Array Literals:
An identifier is a sequence of characters that can be used to identify a variable, a function, an object. It can start with a letter, the
dollar sign $ or an underscore _ , and it can contain digits. The dollar sign is commonly used to reference DOM elements.
In most cases, you can omit semicolons altogether from your programs.
In JavaScript, we can write a comment on a single line using // . Everything after // is not considered as code by the JavaScript
interpreter.
Another type of comment is a multi-line comment. It starts with /* and ends with */ .
When we need to have a reference to a value, we assign it to a variable. The variable can have a name, and the value is what's stored in a
variable, so we can later access that value through the variable name.
Until 2015, var was the only way we could declare a variable in JavaScript.
Today, a modern codebase will most likely just use const and let .
Once you assign a value with some type to a variable, you can later reassign the variable to host a value of any other type, without any
issue.
We have 2 main ways to declare variables. The first is to use const : const a = 0
The second way is to use let : let a = 0
const defines a constant reference to a value. This means the reference
cannot be changed.An expression is a single unit of JavaScript code that the JavaScript engine
can evaluate, and return a value.
You cannot reassign a new value to it.
Using let you can assign a new value to it.
My advice is to always use const and only use let when you know you'll need to reassign a value to that variable.
Variables in JavaScript do not have any type attached.
we have 2 main kinds of types: primitive types and object types.
Primitive types are numbers strings booleans symbols
And two special types: null and undefined .
Any value that's not of a primitive type (a string, a number, a boolean, null or undefined) is an object.
Object types have properties and also have methods that can act on those properties.
An expression is a single unit of JavaScript code that the JavaScript engine can evaluate, and return a value.
Arithmetic expressions are expressions that take a variable and an operator
String expressions are expressions that result into a string.
Logical expressions make use of logical operators and resolve to a boolean value
Operators allow you to get two simple expressions and combine them to form a more complex expression. We can classify operators based on the
operands they work with. Some operators work with 1 operand. Most with 2 operands. Just one operator works with 3 operands.
The + operator also serves as string concatenation.
The addition operator (+) The subtraction operator (-) The division operator (/) The remainder operator (%) The multiplication operator (*)
The exponentiation operator (**)
If you divide by zero, JavaScript does not raise any error but returns the Infinity value (or -Infinity if the value is negative).
A reminder by zero is always NaN , a special value that means "Not a Number"
Every complex statement with multiple operators in the same line will introduce precedence problems. Left to Right ...
1 multiplication/division
2 + - addition/subtraction
3 = assignment
After assignment and math operators, the third set is conditional operators. You can use the following operators to compare two numbers, or two
strings. Comparison operators always returns a boolean, a value that's true or false. We have 4 equality operators. They accept two values,
and return a boolean: === checks for equality !== checks for inequality
The conditional checks the expression you pass to it for true or false value. If you pass a number, that always evaluates to true unless
it's 0. If you pass a string, it always evaluates to true unless it's an empty string.
Did you notice the curly braces? That is called a block, and it is used to group a list of different statements.
You can provide a second part to the if statement: else .
Since else accepts a statement, you can nest another if/else statement inside.
use the following operators to compare two numbers, or two strings. Comparison operators always returns a boolean, a value that's true or false ).
< means "less than"
<= means "minus than, or equal to"
> means "greater than"
>= means "greater than, or equal to"
In addition to those, we have 4 equality operators. They accept two values, and return a boolean:
=== checks for equality
!== checks for inequality
Note that we also have == and != in JavaScript, but I highly suggest to only
use === and !== because they can prevent some subtle problems.
A string is a sequence of characters. It can be also defined as a string literal, which is enclosed in quotes or double quotes: 'A string'
"Another string". I personally prefer single quotes all the time
You assign a string value to a variable like this:
const name = 'Flavio'
You can determine the length of a string using the length property of it:
'Flavio'.length //6
const name = 'Flavio'
name.length //6
Two strings can be joined using the + operator:
"A " + "string"
use the + operator to interpolate variables:
Another way to define strings is to use template literals, defined inside backticks. They are especially useful to make multiline
strings much simpler.
Once a template literal is opened with the backtick, you just press enter to create a new line, with no special characters, and it's
rendered as-is:
const string = `Hey
this
string
is awesome!`
Loops are one of the main control structures of JavaScript.
An if statement is used to make the program take a route, or another, depending on the result of an expression evaluation.
This is the simplest example, which always executes:
if (true) {
//do something
}
curly braces? That is called a block, and it is used to group a list of different statements.
You can provide a second part to the if statement: else . You attach a statement that is going to be executed if the if condition is false:
The conditional checks the expression you pass to it for true or false value. If you pass a number, that always evaluates to true unless
it's 0. If you pass a string, it always evaluates to true unless it's an empty string. Those are general rules of casting types to a boolean.
The while loop is the simplest looping structure that JavaScript provides us. We add a condition after the while keyword, and we provide a
block that is run until the condition evaluates to true .
const list.length) {
console.log(list[i]) //value
console.log(i) //index
i = i + 1
}
Very similar to while , we have do..while loops. It's basically the same as while , except the condition is evaluated after the code block is
executed. This means the block is always executed at least once.
The second very important looping structure in JavaScript is the for loop.
We use the for keyword and we pass a set of 3 instructions: the
initialization, the condition, and the increment part.
38 Functions are a core, essential part of JavaScript. What is a function? A function is a block of code, self contained.
Here's a function declaration:
function getData() {
// do something
}
A function can have one or more argument.
We can check if a value is not undefined using this conditional.
You can pass any value as a parameter: numbers, strings, booleans, arrays, objects, and also functions.
You can have default values for parameters, in case they are not passed:
function getData(color = 'black', age = 25) {
//do something
}
You can pass any value as a parameter: numbers, strings, booleans, arrays, objects, and also functions.
A function has a return value. By default a function returns undefined , unless you add a return keyword with a value.
We can assign this return value to a variable when we invoke the function.
function getData() {
// do something
return 'hi!'
}
let result = getData()
You can only return one value.
To return multiple values, you can return an object, or an array, like this:
The nested function cannot be called from the outside of the enclosing function.
You can return a function from a function, too.
Arrow functions are a recent introduction to JavaScript. They are very often used instead of "regular" functions, the one I described in the
previous chapter. You'll find both forms used everywhere. Visually, they allows you to write functions with a shorter syntax,
from: function getData() {
//...
}
to
() => {
//...
}
Arrow functions are anonymous. We must assign them to a variable. We can assign a regular function to a variable, like this:
let getData = function getData() {
//...
}
When we do so, we can remove the name from the function:
let getData = function() {
//...
}
and invoke the function using the variable name:
let getData = function() {
//...
}
getData()
Any value that's not of a primitive type (a string, a number, a boolean, a symbol, null, or undefined) is an object.
Here's how we define an object:
const car = {}
}
You can also use the new Object syntax:
const car = new Object()
Another syntax is to use Object.create() :
const car = Object.create()
from Wikipedia JavaScript often abbreviated as JS, is a high-level, dynamic, weakly typed, object-based, multi-paradigm, and
interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web
content production. It is used to make webpages interactive and provide online programs, including video games. The majority of
websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript
engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript
specification, with some engines not supporting the spectrum fully, and with many engines supporting additional features beyond
ECMA.
As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative (including object-oriented
and prototype-based) programming styles. It has an API for working with text, arrays, dates, regular expressions, and basic
manipulation of the DOM, but does not include any I/O, such as networking, storage, or graphics facilities, relying for these
upon the host environment in which it is embedded.
Initially only implemented client-side in web browsers, JavaScript engines are now embedded in many other types of host
software, including server-side in web servers and databases, and in non-web programs such as word processors and PDF software,
and in runtime environments that make JavaScript available for writing mobile and desktop applications, including desktop
widgets.
Although there are strong outward similarities between JavaScript and Java, including language name, syntax, and
respective standard libraries, the two languages are distinct and differ greatly in design; JavaScript was influenced by
programming languages such as Self and Scheme.
Today IS the very first day of the rest of your life.