Learning JavaScript Basics
Tags: secondlanguage, javascript, beginners, webdev
Published: 2023-08-10 18:14:36

**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 `!==`


![example picture of a conditional statement using operators](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vid38phdawqgbhw2w9cy.png)

##### 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!! 

![function works on console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z55uz2u6hdz8fsyvj5gd.PNG)

##### 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.
-