Name	Name	Last commit message	Last commit date
parent directory ..
assets	assets
README.md	README.md

JS Workshop ⚙

Make your painting interactable

Estimated completion time: 1.5 - 2 hours

Table of content

JavaScript in browser
Javascript as a programming language
A short walkthrough for programming
Data types
Conditional statement
Collection of data
Loop
Function
Intro to object
Project
Conclusion

JavaScript in browser

JavaScript was created by Brendan Eich in 1995 during his time at Netscape Communications. It was inspired by Java, Scheme and Self. Netscape, for a time, made the best browser in the world and enjoyed market dominance.

--- A brief history of JavaScript by Ben Aston

JavaScript wasn't a general-purpose programming language --- it is a scripting language for browser only.

What it means is essentially it was never meant to go out from the browser, the only purpose was only for you to add a behavior layer on your browser, like getting data from the server periodically

Using JavaScript, you are able to get your HTML element, and manipulate the styling, attributes of the element.

Although there are some alternative to manipulate your element with other languages (like Java Applet, etc), but the only officially marketed language is JavaScript.

Fun fact: JavaScript has nothing to do with Java, other than the name itself is similiar, nothing is 🤣.

JavaScript as a programming language

With the introduction of Node.js, JavaScript is finally able to run outside of the browser, and emerged to be one of the most popular language nowadays.

Node.js was written initially by Ryan Dahl in 2009, about thirteen years after the introduction of the first server-side JavaScript environment, Netscape's LiveWire Pro Web. The initial release supported only Linux and Mac OS X. Its development and maintenance was led by Dahl and later sponsored by Joyent.

--- Wikipedia

But why? Why do we need JavaScript to be able to run outside of the browser?

Well, because it allows Front-end developer to be able to work on Back-end too, without the language barrier.

And another main reason we have JavaScript outside of the browser is because JavaScript has asynchronous behavior by default. It is an advance topic hence I am not going to cover in this workshop.

With the current state of the art, JavaScript had already became a language that can do everything: from web development, to Artificial Intelligence (thou almost no AI expert is using that to research, but it has some libraries that migrated from Python)

Without further ado, let's start learning JavaScript!

A short walkthrough for programming

Programming, or rather, Computer Science, it's all about data.

Data can be in any form: Number, word, a paragraph of words, etc.

Programming is about how we can handling the data, generally, we can only perform 4 types of operation to a data, say with an example of a number, for naming convention, we called it x:

Create: create the number, say let x = 1
Read: get the number
Update: mutate the number, say x = 2 (notice without the keyword let)
Delete: delete the number, say delete x

We called these 4 operatins CRUD (Create, Read, Update, Delete).

Do keep that in mind: Programming is all about how you process the data.

** Note: There is no 1 concept to rule them all, this is just an opinion, not a fact, some may argue but for the sake of getting started and learning the big picture, this is good enough. Do have a chat with me if you think it otherwise 😎!

Example

We all learned mathematic before, programming is a derivative of mathematic, hence you will see a lot of intersection between mathematic and programming

But do you need to be super good at math to learn programming? Nope.

Let's take an example:

Nick just bought 5 apples, he gave 1 to his friend.
Few days later, he realized all his apples were rotten, so he threw it away.
When his friend ask how many apples he left, Nick answered 0.

Pretty straightforward, from the example above we can see all the 4 types of operation (CRUD):

Nick just bought 5 apples: Create
Nick gave 1 apple to his friend: Update
All the apples were rotten so he threw it away: Delete
His friend ask how many apples he left: Read

If we put it in a fancy way, write it in JavaScript:

// create
let apples = 5;

// update
apples = apples - 1;

// delete
apples = undefined;

// read, print it out in our inspect tool
console.log(apples);

If you couldn't understand, just keep 1 thing in mind: Programming is about how you can process the data.

it's better to hands-on and let you see the output of the above code right?

In this session, we will be using JavaScript only in the browser.

In order for us to have JavaScript in the browser, we can write out code in the holy <script> tag!

<html>
    <head>
        <title>My first website with JavaScript!</title>
    </head>
    <body>
        <script>
            // create
            let apples = 5;

            // update
            apples = apples - 1;

            // read, print it out in our inspect tool
            console.log(apples);

            // delete
            apples = undefined;

            // read, print it out in our inspect tool
            console.log(apples);
        </script>
    <body>
</html>

Open up your inspect tool:

We can see that we have 4 and undefined printed on the console tab!

Don't worry if you don't understand it yet, we will explain further later.

Data types

Let's recall this sentence again:

Programming is all about how you process the data.

-- by me 🤣

Look around yourself, you are living in a world with full of data (not matrix haha).

My laptop battery level is a data, my bottle's water level is also a data.

There are a lot of different type of data, be it a number (water level like litres, etc), a word (your name), etc.

In JavaScript specifically, we have:

String - a series of words like "Rain Chai".
Number - Integer or decimal number like 1, 1.1, 2.2
Boolean - it can only be true or false, useful for cases like let isLoggedIn = true;
Undefined - it's a state for a variable, it stands for "this variable is not defined, does not have any data.", you can think of it like void, it's empty. You will only use this in a more advance case, don't worry if you can't understand it now.

You may refer to w3schools JavaScript documentation for more information.

Variable

It's better to name our data, in our last example, we called it apples, it can be any other names that you think is most suited for your cases.

We called these names variable, it's just like x, y in mathematic, nothing fancy, I can call it IamNotX or IamNotY, doesn't matters.

For us to assign a data into a variable we can use the keywords let:

let apples = 5;

Notice the syntax is:

<keywords> <variable name> = <data> ;

This is used for the creation of the variable the Create part of the CRUD operations.

There are some names you can't use for variable, because the browser reserved some names (or keywords) for the browser to understand what operation you want to do.

In our case, let is a keyword, it tells browser that whenever you see this keyword, it means I am creating a new variable.

We can't do something like:

let let = 1;

but we can do:

let letThisBecomeVariable = "Yay";

Do note that you cannot have spaces in between for your variables, below are a few examples that is invalid for naming the variable:

Spaces

let this is the apple = 5;
Number as the first character

let 5apples = 5;
Symbols other than _ and $ as the first character

let @thisIsVariable = 5;

Here are a list of keywords in JavaScript, if you have some free time, do take a look into each of them.

Operators

Just like in math, we can have +, -, ×, and ÷, we have it in programming as well:

+ is + in JavaScript
- is - in JavaScript
* is × in JavaScript
/ is ÷ in JavaScript

= in JavaScript stands for assignment, not the equal in mathematic, let x = 1; in this case is assigning 1 into x

We had wrote an example of Update in CRUD in our last example:

apples = apples - 1;

In programming, we always have <variable> = <value>, so whatever on the right side will always get assign into the left side variable.

A more detail breakdown is as below:

Current state of apples is 5
Right side: apples - 1 is like saying 5 - 1, hence it is 4 on the right side
Left side: apples, so the value (4) on the right side will get assign into variable apples again
Now, apples become 4

There are few more operators in JavaScript:

** is exponentiation in JavaScript, like 2**3 will return you 8 ( 2 to the power of 3 )
++ a shorthand for increment, like apples++ will have the same effect as apples = apples + 1
-- a shorthand for decrement, like apples-- will have the same effect as apples = apples - 1

Using all the shorthand, we can achieve the same effect with lesser code:

<html>
    <head>
        <title>My first website with JavaScript!</title>
    </head>
    <body>
        <script>
            // create
            let apples = 5;

            // update, decrement 1
            apples --;

            // read, print it out in our inspect tool
            console.log(apples);
        </script>
    <body>
</html>

Do feel free to play around with other operators! Here is a list of operators

Conditional statement

Say we set up a scenario:

Nick has 5 apples, he wanted to give one of them to his friend,
but his friend can choose to accept it or not, if he accepted,
then Nick's apples amount will decrease 1,
else, Nick's apples amount remain the same.

We can implement the above logic by using another keywords: if-else

let apples = 5;
let friendAccept = true;

if (friendAccept == true) {
  apples--;
} else {
  // do nothing
}
console.log(apples);

Output:

4

Now let's try to let the friend refuse to accept the apple:

let apples = 5;
let friendAccept = false;

if (friendAccept == true) {
  apples--;
} else {
  // do nothing
}
console.log(apples);

Output:

5

Breakdown

We have a variable called friendAccept, which is a boolean variable ( can only stored true or false).

if statement's syntax is as follow

if(<condition>) { <operation> }

if whatever inside the bracket, the (<condition>) is true, then execute whatever operation is in the curly braces.
We then write out a if statement that, if friendAccept is equal to true, then execute the operation.

the == is a logical operator, different with =, == stands for equal, = is assignment.

There are a few other logical operators, like:
- != is not equal: apples != 1 will return true, because apples is not equal to 1, but is equal to 5
- && is and: apples == 5 && friendAccept this is saying "if apples is equal to 5 and friendAccept is true, then return true"
- || is or: apples == 5 || friendAccept this is saying "if apples is equal to 5 or friendAccept is equal to true, then return true"
you may check it out here for more kinds of operators

If you don't understand the use cases yet, don't be worried, we will be using those a lot in the future and you will get yourself be more familiar with it.
The friendAccept is true, hence the if block is executed, it output 4
We then change the friendAccept into false, we refresh the page again and in this case it output 5, because friendAccept is not equal to true.

I do strongly suggest you to head on w3schools exercises to practice a few times on how to use this if-else statement, as it's one of the building blocks for all kind of programs.

Collection of data

A collection of data is basically, well, a collection of data 🤣

We have a fancy term for it thou, it's called data structure, how the structure of the group of data you have looks like.

It is used to group data together in certain ways, so that we can access it easily in future.

let NickFriends = ["Rain Chai", "Frankey", "Marcus"];

In the example above, we have a variable called NickFriends that is used to store all his friends' name.

There are few types of data structures:

Array, let NickFriends = ["Rain Chai","Frankey","Marcus"];, it's just like list, essentailly storing the data in a sequential way, we can access them using number, like if I want "the first item in the list", we can access it like NickFriends[0], the [0] here stands for First item in the array

In computer science, everything started from 0, not 1.
Object:

let Nick = {
  firstName: "Nick Hong",
  lastName: "Ding",
  age: 21,
  eyeColor: "dark brown",
};

This itself worth to be a topic, which I will be covering it later on.

So... what can we do with data structure? well, data structure itself can't do anything, recall what we had always stated earlier?

Programming is all about how you process the data.

Grouping data together allow us to process data in a more easier way.

Loop

Let's take a scenario:

Nick has 5 apples, he wanted to give it to all his friends,
but his friends can choose to accept it or not, if he accepted,
then Nick's apples amount will decrease 1,
else, Nick's apples amount remain the same.

It's almost the same from the if-else example, but we added a "For all of his friends" statement.

Let's setup the first logic, create a variable called apples and set it to 5.
```
let apples = 5;
```
Create a list of Nick's friends
```
let NickFriends = ["Rain Chai", "Frankey", "Marcus"];
```
We will be using String to indicate it for now, later on we might want to use object instead.

Complete code

let apples = 5;
let NickFriends = ["Rain Chai", "Frankey", "Marcus"];
let friendAccept = true;

Now we had done the setup, is time for us to think out the solution! We can have these few ways to solve "For each of his friends, give 1 apple":

Manually type it out
```
// if friend accepted and NickFriends[0] does exists
if (friendAccept == true && NickFriends[0]) {
  apples--;
}
if (friendAccept == true && NickFriends[1]) {
  apples--;
}
if (friendAccept == true && NickFriends[2]) {
  apples--;
}
```
This approach seems doable, and it will have the expected behavior.

But what if Nick has like 100 friends? We will have to copy paste them out one by one everytime.

In this case, it's better to tell the JavaScript that "Hey this is a list, can you help me to loop through them with this logic?"
Smarter, use a for loop

For loop

In that example, using a for loop is a perfect case:

for (let index = 0; index < NickFriends.length; index++) {
  if (friendAccept) {
    apples--;
  }
}

Using the code above, we are able to scale the list infinitely, either it be 100 or even 1000, the logic for each item in the list will be the same.

For loop Breakdown

syntax of a for loop
```
for (\<Counter variable name\>; \<Conditional statement\>; \<counter manipulation\>){
  \<logic\>
}
```
In the browser execution:
1. The browser sees a for keyword, hence he knows it's a for loop
2. The browser first assign a variable as the counter at the start of the loop, you named it, in our case, it's index
3. The browser check if the Conditional statement return true, in our case, we check if index is smaller than the length of the nick friends list
  - < means smaller
  - > means larger
  - <= means smaller or equal
  - >= means larger or equal
4. If the Conditional statement is true, the browser execute the logic
  
  if it is false, the browser simply stop looping anymore.
5. After executing the logic, the browser will execute the last part of the for loop, the browser will manipulate the counter variable ( the index ), be it increment or decrement. You can specify whatever execution you want to do/
In a nut shell:

if Conditional statement is true, execute the logic, else stop looping. If it is true, then execute the counter manipulation.

While loop

While loop is different with a for loop, it can be endless:

let isFriendAccept = true;
while(isFriendAccept){
  apples -= 1;
}

In the above example, the amount of apples will keep decreasing forever!

If we want to stop it:

let isFriendAccept = true;
while(isFriendAccept){
  apples -=1 ;
  if(apples <= 0){
    isFriendAccept = false;
  }
}

By doing so, if the amount of apples is less or equal to 0, isFriendAccept will become false.

Function

Function is very simple, given 1 input, give out 1 output,

In all the examples above, we keep writing out apples -= 1, this operation is saying "decrease apple's amount by 1", we can write out a function to replace the operation:

Let's try to declare a function.

let apples = 5;

function minusOne(x){
  let output = x - 1;
  return output;
}

console.log(minusOne(apples)); // -> output: 4

Something to note here:

return: the keyword for "output this data"

We can have more fancy stuff in function, say if I want to console.log everytime when the apple amount decreased, we can do so:

let apples = 5;

function minusOne(x){
  console.log("Apples decrease by 1!");
  let output = x - 1;
  return output;
}

Doing so, we can inject additional logic in the function.

Let's try to use what we had learned earlier: while loop together

let apples = 5;

while (apples >= 0){
  apples = minusOne(apples);
}

function minusOne(x){
  console.log("Apples decrease by 1!");
  let output = x - 1;
  return output;
}

In the example above, the output of minusOne will get assign to apples again.

when apples = 5

while loop condition is true (5 is more or equal to 0), hence, execute the logic.

pass in the variable apples (which is 5) to minusOne function, the minusOne function will process the data, and output another data (which is simply, minus 1)

We store the output data of minusOne back to apples again.

Now, apples = 4

Continue to check if while loop is true
when apples = 4

while loop condition is true (4 is more or equal to 0), hence, execute the logic.

pass in the variable apples (which is 4) to minusOne function, the minusOne function will process the data, and output another data (which is simply, minus 1)

We store the output data of minusOne back to apples again.

Continue to check if while loop is true
...
when apples = -1

while loop no longer true (-1 is not more or equal to 0)

Loop finish, function no longer get called.

Intro to object

Object example:

let Nick = {
  name: "Ding Nick Hong",
  friends: ["Rain","Frankey"],
  apples: 5
}

console.log(Nick.friends); // -> output: ["Rain","Frankey"]

Object is simple a collection of data to hold a certain structure.

An illustration:

You can think of object as what I had always shown you, the Document Object Model, basically a tree-like data structure.

For you to access the object attributes ( Nick's attributes ), you can use a . to specify:

Nick.name

Nick.friends

Nick.apples

Project

Challenge 1

Source: Hackerrank

Complete the function solveMeFirst to compute the sum of two integers.

Function prototype:

solveMeFirst(number1, number2);

where,

number1 is the first number input.
number2 is the second number input

Sample Input:

number1 = 2

number2 = 3

Sample Output:

Explanation

The sum of the two integers number1 and number2 is computed as: 2 + 3 = 5.

Challenge 2

Source: https://www.hackerrank.com/challenges/staircase/problem

Conclusion

You had completed a simple JavaScript walkthrough, there are tons of stuff that I didn't include.

https://www.freecodecamp.org/ offers a great hands-on and practice for you to learn more.

> Redirect to DOM Workshop

> Go to top

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

js

js

README.md

JS Workshop ⚙

Table of content

JavaScript in browser

JavaScript as a programming language

A short walkthrough for programming

Example

Data types

Variable

Operators

Conditional statement

Breakdown

Collection of data

Loop

For loop

For loop Breakdown

While loop

Function

Intro to object

Project

Challenge 1

Challenge 2

Conclusion

Files

js

Directory actions

More options

Directory actions

More options

Latest commit

History

js

Folders and files

parent directory

README.md

JS Workshop ⚙

Table of content

JavaScript in browser

JavaScript as a programming language

A short walkthrough for programming

Example

Data types

Variable

Operators

Conditional statement

Breakdown

Collection of data

Loop

For loop

For loop Breakdown

While loop

Function

Intro to object

Project

Challenge 1

Challenge 2

Conclusion