How I Went Through a Javascript 1-Hr Tutorial on Youtube

July 12, 2020 by Stilgar

As mentioned in my earlier Will Learn JavaScript Starting This Week Post, I wanted to up-skill myself with JavaScript, and I decided to take a teaser/starter video on JavaScript on Youtube before I take a paid Udemy class. The class covered basic concepts and was more of an up-sell to a full blown course on the author’s website. For now, I am going to stick to free courses and honestly, it wouldn’t hurt to check out the 1 hour course.

JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour

The course is called “JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour”. It is pretty basic, but got me up and running with 101 of setting up an environment, running javascript code in Visual Studio. I have set up a Live Server as well using “Live Server” extension in Visual Studio code. Concepts covered include what are variables, category of types, objects, arrays, and functions. I have detailed my notes below if you folks want to see what I picked up.

Where does Javascript Code Run?

Run in browsers. Browsers have a javascript engine. In FireFox it is called SpiderMonkey, in Internet Explorer it is called Chakra, and in Chrome it is called v8

In 2008, an engineer took the open-source v8 JS Engine from Chrome and embedded it in a C++ program, and called it Node. As a result, we can run javascript outside of our browser. This means that we can use Javascript for back-end and mobile applications.

Standard Specifications

ECMA Defines standards for specifications for javascript

Javascript Placement Best Practices

Best practice to have the javascript element <script> at the end of the body tag </body>. There are 2 reasons for this:

The reasons being that the browser parses the file from top-to-bottom, and as a result if the javascript code is at the top – the browser would attempt the parse the JavaScript code and it won’t be able to render contents of the page until everything is loaded and this will lead to a bad user experience. The user will look at a blank page while the browser is busy parsing and executing the javascript code.
Most of the time the code that in the <script></script> tag will need to talk with elements in the rest of the page, like show or hide the elements, and by placing the code at the bottom – you are confident that the contents and elements of the page are properly rendered. There are exceptions related to 3rd party code which may have to put in the <head></head> section.

All statements in JavaScript need to be terminated with a Semi-Colon.

String – a Sequence of characters

// – Represents comments. Used as documentation and to explain to other developers.

Separation of Concerns

We want to separate HTML from JavaScript. HTML is about content, while JavaScript is about the webpage behavior.

Variables

Variable – We use to store data temporarily in a computer’s memory and variable Name is the location of the variable.

Before ES6, var was used to declare variables and there were issues with it. Moving forward from ES6, the best practice is to use “let”

Ex:

let name = ‘What’s Up’;

console.log(name);

// More common to use single quotes in Javascript to declare strings.

// There are a few rules when it comes to naming of keywords

// 1. You cannot use a reserved keyword i.e. var

// 2. Your labels should have meaningful and descriptive names. For ex: Don’t use x = “Name”;

// 3. Cannot start with a number (1name)

// 4. Cannot contain a space or hyphen (-). Stick to cameras notations

// 5. Variable names are case-sensitive

let firstName, lastName;

// You can declare multiple variables in the same line as noted above.

// You can also declare and initialize variables in the same line as well

// Modern best practice is to declare each variable in its own line

// Constants

// There may be instances where we don’t want to value of a variable to not change. That is where we use constants.

const myBirthMonth = 03;

console.log(myBirthMonth);

2 Category of Types in Javascript

Primitives/Value Types
1. String
2. Number
3. Boolean
4. Undefined
5. Null
Reference Types
1. Object
2. Array
3. Function

let name = ‘Jean’; // String Literal

let age = 30; // Number Literal

let isApproved = true; // Boolean Literal. We use this when we want to use some logic. Can be true or false. True or False are also reserved keywords

let firstName;

let lastName = null; // Use it where we want to explicitly clear the value of a variable

Types of Languages.

There are 2 types of languages and Javascript is a dynamic language.

Static Languages (statically-typed)
1. When we declare a variable, the type of the variable is set and it cannot be changed
Dynamic Languages (dynamically-typed)
1. The type of the variable can change

In Javascript, we don’t have 2 types of numbers unlike most languages. Most languages have float and int. In Javascript, we just have numbers, which includes both float and int.

Object (Reference Type)

What is an Object?

When we are dealing with multiple related variables, we can put them inside an object. It makes our code cleaner.

let individual = {

name: ‘James’,

age:30

// Here the object has 2 properties or 2 keys

// Now we have an individual object with 2 variables

};

console.log(individual);

Calling out a property within an object using Dot Notation

console.log(individual.name)

You can also call out a property with a bracket notation. Dot Notation is more precise and preferred

individual[‘name’] = “Elizabeth”;

console.log(individual[‘name’])

Arrays

We use arrays to store lists. It is a data structure that we use to store list of items.

let studentNames = [];

// The above is an empty array.

let studentNames = [‘Scott’, ‘Kyle’, ‘Luis’];

console.log(studentNames)

// In the above example, we have initialized the array

Each element within the array has an index so that it can be accessed.

console.log(studentNames[1])

// Will print Kyle as it is located at index 1 location.

The objects and size of an array are dynamic in Javascript. You can have string and number within an array.

Find out the Length of an array.

console.log(studentNames.length)

Functions

Fundamental building blocks in Javascript. Functions are a set of statements that perform a set of tasks or values. Function is declared using the function keyword.

function hello(name) {

console.log(‘Hello ‘ + name);

// This is where declare the logic of the function

// Functions don’t need ; at the end of the function when clearing

}

hello(‘Amber’);

// Amber is an argument of the hello function. We are passing Amber argument to the hello function.

// name is the input to the hello function. name is the parameter of the hello function. Parameter is what we have when we declare the function, and argument is the actual value of the parameter.

What’s Next

I saw another 3-Hour Course on Java Script, which I am going to be picking up next. My learning strategy is to get holistically familiar with high-level concepts in Javascript and then deep-dive into specific items. This way, I know the full picture and tackle specific sections where I am weak at.

The 3-Hour Course I am looking at is called “Learn JavaScript – Full Course for Beginners”. You can access it here. The 1-Hour Course Link is here. In addition to how I have started learning Javascript, you can check out how I started learning Python from my Learning to Code in Python article.