We're going to highlight Chapter's 1, 2, and 3 in a nutshell to see what we should understand by
the time we're done with Chapter 3:
// Anything following double slashes is an English-language comment
// Read the comments carefully: they explain the JavaScript code.
// variable is a symbolic name for a value
// Variables are declared with the var keyword:
var x; // Declare a variable named x
// Values can be assigned to variables with an = sign
x = 0; // Now the variable x has the value of 0
x // =>0: A variable evaluates to its value.
// JavaScript supports several types of values
x = 1; // Numbers
x = 0.01; // Just one Number type for integers and reals.
x = "hello world"; // Strings of text in quotation marks.
x = 'JavaScript'; // Single quote marks also delimit strings
x = true // Boolean values
x = false // The other Boolean values
x = null; // Null is a specail value that means "no value"
x = undefined; // Undefined is like null
To put this to plaintext for further readability, this is what it's all about:
Variables
A symbolic name for a value
Ex. var x
We will declare that the variable here is x
Ex. x = 0;
x will have the value of 0
The ; indicates the end of a line
Not sure if line is the correct term; must do more studies
Ex. x in line 10 is a variable that evaluates to its value
Values
We can have several values such as...
Numbers
Integers and reals
Ex. x = 0.01;
Where the 0.01 indicates an integer
Strings
"Hello World";
Strings must have double quotes
'JavaScript'
Single quote marks also delimit stings
What we mean by delimit, it means a character that is used to
indicate the start and end of a string
Booleans
Basically, a value that equates to true or false
Null & Undefined
A special value with no values.
Here is some more to analyze and breakdown of Chapter 6 - Objects and Chapter 7 - Arrays:
// JavaScript's most important data type is the object.
// An object is a collection of name/value pairs, or a string to value map.
var book = { // Objects are enclosed in curly brackets
topic: "JavaScript", // The property "topic" has a value of
"JavaScript".
fat: true // The property "fat" has a value true
}; // The curly brace marks the end of the object
// Access the properties of an object with . or []:
[Link] // => "JavaScript"
book.["fat"] // => true: another way to access property
values
[Link] = "Flanagan" // Create new properties by assignment
[Link] = {}; // {} is an empty object with no properties
// JavaScript also supports arrays (numerically indexed lists) of values:
var primes = [2,3,5,7]; // An array of 4 values, delimited with [ and ].
primes[0] // => 2: the first element (index 0) in the
array
[Link] // => 4: how many elements in the array.
primes[[Link]-1] // => 7: the last element of the array.
prime[4] = 9; // Add a new element by assignment
prime[4] = 11; // Or alter an existing element by assignment
var empty = []; // [] is an empty array with no elements
[Link] // => 0
// Arrays and objects can hold other arrays and objects:
var points = [ // An array with 2 elements.
{x:0, y:0}, // Each element is an object.
{x:1, y:1}
];
var data = { // An object with 2 properties
trial1: [[1,2], [3,4]], // The value of each property is an array
trial2: [[2,3], [4,5]] // The elements of the arrays are arrays
};
According to the book...
The syntax illustrated above for listing array elements within square braces or mapping
object property names to property values inside curly braces is known as an initializer
expression, and it is just one of the topics of Chapter 4, Expressions and Operators. An
expression is a phrase of JavaScript that can be evaluated to produce a value. The use of
. and [] to refer to the value of an object property or array element is an expression, for
example.
After writing down the code, this is (somewhat) a summary of what I can gather from it
- We can give variables properties when we use the curly braces
- The use of . and [] helps us refer a value of an object property or array element as an
expression.
- Expressions will be talked about further in Chapter 4, Expressions and Operators
After asking ChatGPT, here's what it has to say about arrays:
- In layman's terms, an array in JavaScript is like a list that can hold multiple values. These
values can be of any type, such as numbers, strings, or even other arrays. You can think of an
array as a container that keeps things in order, and you can easily access, add, or remove
items from this list.
Key Points about Arrays
1. Creation: Arrays are created using square brackets [] .
let fruits = ["apple", "banana", "cherry"];
2. Accessing Items: Each item in an array has a specific position, called an index, starting
from 0.
[Link](fruits[0]); // Outputs: apple
[Link](fruits[1]); // Outputs: banana
3. Modifying Items: You can change the value of an item in an array by referring to its index.
fruits[1] = "blueberry";
[Link](fruits); // Outputs: ["apple", "blueberry", "cherry"]
4. Adding Items: You can add new items to an array.
[Link]("date");
[Link](fruits); // Outputs: ["apple", "blueberry", "cherry", "date"]
5. Removing Items: You can remove items from an array.
[Link](); // Removes the last item
[Link](fruits); // Outputs: ["apple", "blueberry", "cherry"]
Summary
Arrays are used to store multiple values in a single variable.
Items in an array are ordered and can be accessed by their index.
You can add, modify, and remove items in an array.
Think of an array as a collection of items, like a shopping list, where each item can be accessed
by its position on the list.
In other words, to sum up in my own way...
We can give variables properties (I know I mentioned this before) and arrays are multiple
items that we can declare using the brackets [] .
It seems that math was inevitable so we're going to have to learn it!
The only time we'll see a => comment in the code is just in the book
In the next part of this book, it also explains what we should expect from Chapter 4,
Expressions and Operators
One of the most common ways to form expressions in JavaScript is to use operators like
these:
// Operators act on values (the oeprands) to produce a new value
// Arithmetic operators are the most common:
3 + 2 // => 5: Addition
3 - 2 // => 1: Subtraction
3 * 2 // => 6: Multiplication
3 / 2 // => 1.5: Division
points[1].x - points[0]// => 1: more complicated operands work, too
"3" + "2" // => "32": + adds numbers, concatenates strings
// JavaScript defines some shorthand arithmetic operators
var count = 0; // Define a variable
count++; // Increment the variable
count--; // Decrement the variable
count += 2; // Add 2: same as count = count + 2;
count *= 3; // Multiply by 3: same as count = count * 3;
count // => 6: variable names are expressions, too
// Equality and relational operators test whether two values are equal,
// unequal less than, greater than, and so on. They evaluate to true or false.
var x = 2, y = 3; // These = signs are assignment, not eqality tests
x == y // false: equality
x != y // true: inequality
x < y // true: less-than
x <= y // true: less-than or equal to
x > y // false: greater-than
x >= y // false: greater-than or equal to
"two" == "three" // false: the two strings are different
"two" > "three" // true: "tw" is alphabetically greater than "th"
false == (x > y) // true: false is equal to false
// Logical operators combine or invert boolean values
(x == 2) && (y == 3) // => true: both comparaisons are true. && is AND
(x > 3) || (y < 3) // => false: neither comparison is true. || is OR
!(x = y) // => true: ! inverts a boolean value
There's a lot to take in here so we'll go through each one and break each one down.
Before we get into that, we can see that the operators are basically mathematical signs that we
can use for the language (or interpreter?) to do the math for us.
Understanding what all this means
It is important to note that when the author puts in // => , he's basically telling us what the
output would be (in a way) to understand the math that's happening when putting in the
line of code.
Let's start first with this:
// Operators act on values (the oeprands) to produce a new value
// Arithmetic operators are the most common:
3 + 2 // => 5: Addition
3 - 2 // => 1: Subtraction
3 * 2 // => 6: Multiplication
3 / 2 // => 1.5: Division
points[1].x - points[0]// => 1: more complicated operands work, too
"3" + "2" // => "32": + adds numbers, concatenates strings
In this piece of code, this is to help us understand how we can put in our operators. You will
notice that we do not use x when doing multiplications. From what I have observed from
Python, it's common to use the * to indicate a multiplication, thus, it would help us understand
how strict coding can be when putting in the right characters in the code.
The last two lines elude me. I'm not entirely sure what they mean but I am sure those last two
lines will make more sense after finishing up with Chapter 4.
Next, let's take a look at the next section of the code:
// JavaScript defines some shorthand arithmetic operators
var count = 0; // Define a variable
count++; // Increment the variable
count--; // Decrement the variable
count += 2; // Add 2: same as count = count + 2;
count *= 3; // Multiply by 3: same as count = count * 3;
count // => 6: variable names are expressions, too
From what I can interpret, this means that since the variable is 0 and the count can refer to
increasing or decreasing in variable in increments (or decrements). We can also add the
number of the increment along with the operators to help determine how the increments should
be calculated.
The last line count // => 6: variable names are expressions, too is a bit weird to
understand. I am not sure where that 6 came from but we can assume that variable names
can be expressions too.
Nuances of the terminology of coding
Variables = Named storage of data
i.e. var 0 or let age
Expressions = Combinations of values, variables, and operators that computes to a value
i.e. 2 + 2 = 4
Properties = Values associated with an object using . or []
i.e. [Link] where person is an object and name is the property
Values = Data assigned to variables or properties
i.e. 42 , "Hello" , true , [] , {}
Array = Ordered collection of values
i.e. let colors = ["red", "green", "blue"];
For further information about the nuances, take a look at this page: Terminology used here that
I was confused about.
Let's take a look at the next set:
// Equality and relational operators test whether two values are equal,
// unequal less than, greater than, and so on. They evaluate to true or false.
var x = 2, y = 3; // These = signs are assignment, not eqality tests
x == y // false: equality
x != y // true: inequality
x < y // true: less-than
x <= y // true: less-than or equal to
x > y // false: greater-than
x >= y // false: greater-than or equal to
"two" == "three" // false: the two strings are different
"two" > "three" // true: "tw" is alphabetically greater than "th"
false == (x > y) // true: false is equal to false
This one was interesting. It seems that we can have Equality and relational operators to check
whether two values are equal, greater than or less than, and more.
Last one for now:
// Logical operators combine or invert boolean values
(x == 2) && (y == 3) // => true: both comparaisons are true. && is AND
(x > 3) || (y < 3) // => false: neither comparison is true. || is OR
!(x = y) // => true: ! inverts a boolean value
This is where the knowledge of booleans can help us out here. Another thing to keep note of is
the use of the ampersands && and the pipelines || to indicate AND and OR respectively in
the code.
Let's get into other blocks of code the books get into for 1.1:
// Functions are parameterized blocks of JavaScript code that we can invoke.
function plus1(x) { // Define a function named "plus1" with parameter "x"
return x+1; // Return a value one larger than the value passed in
} // Functions are enclosed in curly braces
plus1(y) // => 4: y is 3, so this invocation returns 3+1
var square = function(x) // Functions are values and can be assigned to vars
return x*x; // Compute the function's value
}; // Semicolon marks the end of an assignment
square(plus1(y)) // => 16: invoke two functions in one expression
When we combine functions with objects, we get methods:
//When functions are assigned to the properties of an object, we call
// them "methods". All JavaScript objects have methods:
var a = []; // Create an empty array
[Link](1,2,3); // The push() method adds elements to an array
[Link](); // Another method: reverse the order of elements
// We can define our own methods, too. The "this" keyword refers to the object
// on which the method is defined: in this case, the points array from above.
[Link] = function() { // Define a method to compute distance between
points
var p1 = this[0]; // First element of array we're invoked on
var p2 = this[1]; // Second element of the "this" object
var a = p2.x-p1.x; // Difference in X coordinates
var b = p2.y-p1.y; // Difference in Y coordinates
return [Link](a*a +// The pythagorean theorem
b*b);// [Link]() computes the square root
};
[Link]() // => 1.414: distance between our 2 points
The example above is implementing math. Math. Yes, you need to learn it.
Here's a common example of how JavaScript is implemented:
// JavaScript statements include conditionals and loops using the syntax
// of C, C++, Java, and other languages.
function abs(x){ // A function to compute the absolute value
if (x >= 0){ // The if statement...
return x; // executes code if comparison is true
} // This is the end of the if clause
else { // The optional else clause executes its code
return -x; // if the comparison is false
} // Curly braces optional when 1
statement;clause
} // Note: return statements nested inside
if/else
function factorial(n) { // A function to compute factorials
var product = 1; // Start with a product of 1
while(n > 1) { // Repeat statements in {} while expr in
()=true
product *= n; // Shortcut for product = product *n;
n--; // Shortcut for n=n-1
} // End of loop
return product; // Return the product
}
factorial(4) // => 24: 1*4*3*2
function factorial2(n) { // Another version using a different loop
var i, product = 1; // Start with 1
for(i=2; i <= n; i++) // Automatically increment i from 2 up to n
product *= i; // Do this each time. {} not needed
for1lineloop
return product; // Return the factorial
}
factorial2(5) // => 120: 1*2*3*4*5
...I have no idea what this is but it seems that we're doing a lot of math here. I can see why
math is a prerequisite class to programming.
There is a lot more but we'll go over those in detail in the later chapters.