DEV Community: camille-arce

Learning JavaScript Basics

camille-arce — Thu, 10 Aug 2023 18:14:36 +0000

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.

This week I learned...

camille-arce — Tue, 04 Apr 2023 15:04:47 +0000

Week: 03/05/2023 - 03/11/2023

Working with Strings in Ruby

Input:

'Single quoted strings #{represent} "characters" verbatim.'

Output:

Single quoted strings #{represent} "characters" verbatim.

Input:

"Double-quoted strings make some substitutions: #{2 + 4}"

Output:

Double-quoted strings make some substitutions: 6

To join Strings, you can interpolate or concatenate

String concatenation
- joining of strings
- can join strings together using "" and + between strings
- you have to add " ", an empty string with a space to prevent two words being put together
- myvar can be a variable inserted with a string and can add other strings with the plus sign +
- if you do += the myvar will be have the new concatenation as the new string
- strings can only be concantenated with other strings
String interpolation
- interpolation #{} can be used within double quoted strings and it will substitute the result of a ruby code into the middle of the string
- the interpolation will be evaluated and the result will be converted into a string

Interactive Ruby (irb)

can use IRB (interactive ruby) which is integrated in Ruby if you type "irb" and hit return in terminal
irb will show you the result of each expression, you dont need to call "puts" or anything
type "exit" and then enter to exit out of IRB

p vs puts vs print method

Ruby provides a method p which is different than print and puts
p method allows us to inspect the values we pass to it and to print them out approximate the same way they would appear in a ruby code

Input: puts

            puts "   "
            puts ""
            puts nil
            puts []

The output is an empty terminal

Input: print

            print "    "
            print ""
            print nil
            print []

The output is []%

Input: p

The output is:

Some escape sequences
- \n skips to a new line
- \t indents a text
- \" inserts "double quotes"
- \' inserts 'single quotes'
- \ inserts a backslash: \

Input: example

        puts "first line
        second line"

        puts "     new paragraph"
        puts "  He said, "Whoa.""

to fix the line above use escape sequences

    puts "first line\nsecond line"
    puts "\tnew paragraph"`
    puts "He said, \"whoah\""

Next Week: Ruby Objects