Learning JavaScript Basics

Plan: read online documents, enroll in code academy, and build projects.

I have no experience or background with JavaScript. To tackle this problem, I will read documents going back to the history of JavaScript. Even though this may be irrelevant to some people, knowing the history of JavaScript helps me understand the language. My first programming language is Ruby so you can see me refer Ruby and how similar and different they are.

To be honest, I am only reading/working on basics to set myself up better before I learn React with Redux. I want to learn JavaScript’s fundamental concepts and syntax. If you are already more knowledgeable or looking to dig deeper, this may not be suited for your needs.

All information will be in this learning path: https://javascript.info/

Use this document to follow along my thought process:
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics

What is JavaScript

• It’s a programming language that is very popular. Used with dynamic web applications. If you get more advanced, you can create 2D and 3D games
• Mostly used in a browser

A “Hello World!” example

• I downloaded the example folder and followed the example on Visual Studio Code.

• In this example, I added one line of code in my html file (index.html) with a <script> tag that let me add JavaScript dependencies to render a heading. I stored the string “Hello World!” in myHeading variable and it override the written html heading.

• Yay! This is my first JavaScript code 😊

Language basics crash course

• These are similar to Ruby and most programming languages

Variables

• Variables are containers that can have values stored.

• One difference in JavaScript is it starts with let to declare your variable. I have also seen const and var Variable names are case sensitive and can be Capitalized unlike in Ruby.

• Variables have data types. String, Number, Boolean, Array, Object and more

• Using variables is helpful to create dynamic applications.

Comments

• Things can be commented out in one line with //

• Multiple lines of code can be commented out with */ just like CSS

Operators

• Operators are the same as Ruby. The difference is strict equality is three equal signs === and for a NOT equal… it is !==

Conditionals

• Code structures used to test if an expression is TRUE or FALSE
• Mostly used in if-else statements
• The document uses this example:
• What I can see different from Ruby syntax is the expression is inside (parenthesis)
• Uses semicolons after statements.
• Uses curly brackets as blocks???

Functions

• Functions are similar to methods in Ruby
• There are in-built functions and you can also define functions
• Functions are followed by (parentheses) and take arguments separated by commas
• Here is an example of a defined function that multiplies two numbers

function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

• I ran this in the console which can be accessed in the browser through developer tools and the function works!!

Events

• Real interactivity with the browser. These interactions need a handler. These are code that listen/wait for these activities and run a code when it happens.

- A prime example is mouse clicking... there are so much more and can be very specific.