TIL/2020–12–14

Today is my second day going through the Treehouse Full Stack JavaScript Techdegree. I’ve had some experience dealing with the basics or the foundation of JavaScript because of what I’ve learned in Nomad Coders but going through everything once again with Treehouse has let me to conclude that there are certainly things that I can keep on learning. Treehouse’s Full Stack JavaScript Techdegree curriculum is very detailed and precise. I’ve certainly picked up a thing or two that I did not learn from Nomad.

First, I learned more about the JavaScript Basics. I learned more about the logic and text book definitions of certain things (because in Nomad Coders, I learned more about application and coding directly without focusing on terminologies and definitions).

Some of my notes from the first day!

JavaScript Basics:

• Immersive web experiences
• Command + Option + J — to open the console
• JavaScript lets you add interactive components to a site like photo galleries, tabbed panels, or form validation.
• You can use Node.js on a web server
• JavaScript statements end with a ;

Syntax:

• Programming language’s commands, special words and punctuation

alert() — Opens a dialogue box on the top of the screen and displays an alert

alert(“Hello, World!”); — is a javascript statement

console.log() — is like print() in Python; basically prints what you put inside

alert(“Thank you for visiting!”);

console.log(“Console says hi”);

document.write(“<h1> WOW </h1>”);

• Top — bottom: It works from top to bottom
• The first statement has to be executed first before starting the next

Browser:

Content — HTML

Style — CSS

Interactivity — JavaScript

Every browser has a JavaScript Engine (A program or interpreter built into the browser that executes JavaScript code)

Linking a .js file to an HTML file

In the HTML file, add a script

<script src=””></script>

We can also add <script></script> inside the body of the HTML file and execute JavaScript commands

Once we refresh the page, the first that will show up is the script file on the head and then the one on the body — because it works from top — bottom

It is better to add the script just before the end of the body (Similarly to what i’ve learned in Nomad Coders) to let the HTML load first before executing the JavaScript commands

— —

Introducing Variables

Variable — Way of storing and keeping track of information in a program

var score = 0 (You can assign values to a variable; “=” is an assignment operator)

Re-assigning a variable (No need to use var a second time because you already created the variable message in the first line)

Rules for creating variable names:

Cannot use reserved keywords

A number cannot start the word = 9lives but can be after lives9

Names can contain letters, numbers, _ and $

Example: created_by, prices$

Camel case: Capitalizing every word following the first is called camel case by programmers because the capital letters look like the humps on the back of a camel!

Using +=

• Addition assignment operator
• Adding to its current value

Let and Const:

• Works similarly to var
• Const: Constant — value of the variable should not change
• Lets you protect the variable
• Cannot change or manipulate the value through re-assignment

• Let: Let works just like var
• Lets you define a variable but limits how you can use it
• Offers more protection that var by securing the variable name
• If you use var in all of the variables then it might override the value
• Using let — similarly to const — protects the variable name from being overridden

— -

WORKING WITH STRINGS

Using \

• Multiline String:

“ hello \ hi \ how are you” (Each word are on different lines — using \ tells the JavaScript engine to continue the string even if it is on a different line)

Transform and Manipulate Strings:

.length = counts the number of characters inside the string including the space

Object.length

The () lets you know that this is a method — a command to execute to the string

Other methods in this lesson:

.toUpperCase()

.toLowerCase()

Capturing input through prompt

Combining Strings:

String Concatenation: Process of combining two or more strings to create a bigger string

Template literals:

${} is called interpolation

Supports multiline strings without the need of using \

.innerHTML = a property that replaces the existing contents of an element with new content

New lesson learned: You can place html tags inside a template literal to create the message into the type of html tag — it creates a new html element once executed

Then with a span

Property vs. Method:

.length is a property

.toUpperCase() is a method

() signifies methods

Challenge:

— — -

CONDITIONAL STATEMENTS

If () {

Code that runs if the statement is true

}

{} creates a code block that can contain one or more JavaScript statements

Equality operator == means tests if two values are the same

‘3’ == 3 will return True because the JS engine in the browser will test the different types of ‘3’ and convert it into an integer

Strict equality operator === means that it compares the type as well as the value

‘3’ === 3 will return False because one value is a Str and one value is an int

!= not equal to

!== strict inequality operator

This will always return false because what we get from our prompt returns a string

So what we can do is convert the guess into a number by adding + infront of the variable

It is called a unary plus operator: The unary plus operator converts its operand to Number type.

Else-if

If ( ) {

If statement is true then it executes this line, if not then it executes the else-if

} else if ( ) {

You will only get to this statement if the false

} else {

This code block only runs if the first two statements returns false

}

No limit to the else-if statements — but must start with an if statement

If one of the if or else-if statements returns true then everything else will be skipped

&& operator — Both have to be true to execute the command

Use the and operator whenever you need two conditions to pass to execute a command

No limit to the && operator, you can have as many as you want but of course everything has to return true to be able to execute the command

Logical || operator — or operator

Either condition can be true

Either condition one or condition two returns true and it executes the statement

You can have as many || operators as you want as well

Leaving messages/comments

• Add comments to explain complicated/complex blocks of code
• // single line comments
• /* multiline comments */

Practice:

Using isNaN = is not a number ; if it isNan() then it will return true. isNaN( takes the variable inside ) not num1.isNaN() but isNaN(num1) like in the image.