JavaScript for Babies

Hamza Ihsan — Fri, 26 Jul 2024 20:12:28 +0000

Hi there, this article is for people who know HTML and CSS, but JavaScript looks too complex to learn. This is the easiest javascript tutorial on the internet.

Pre-requisites

You Should have a little bit of knowledge about HTML and CSS.
VSCODE
Know how to create an index.html file.
Already know a C/C++ based language (a little bit).

What is JavaScript?
It's a programming language for the web. It's as simple as that.

So let's get started without wasting time.

Setup

Start by opening a folder in VScode and making a file as index.html. Press ! and Press Enter. You should be able to generate the HTML boilerplate.

Then in the head tag add the script tag.

<head>
 <script src="./script.js" defer> <script>
<head/>

Now Create a new file right beside the index.html file named script.js
Add this to your script file.

alert("hello");

You should be able to see this popup when you open the html file in the browser.

This means you have successfully linked JavaScript to your HTML.

Function in JavaScript

You can make a function in JS like this.

function foo(){
    console.log('foo');
}

foo();

Here foo is the name of the Function.

Console in JavaScript

Press Ctrl+Shift+I in your browser where you have the Console Tab. Here you can find error messages and messages from console.log() calls.

The console.log("foo") from the above function is also displayed here.

Buttons and OnClick

Make an HTML button with an onClick prop. Like this

<button onclick="foo()">Hello</button>

Anything inside the onClickprop will be executed every time you click on this button. In our case every time we click the button the function foo() will be called.

Variables

Let's add a variable let count = 0; Here count is the name of the variable and it is initialized to zero. Let's change our function a little bit.

let count = 0;

function increamentcount(){
    count++;
    console.log(count);
}

Here every time the function is called the count is incremented and displayed in the console.
We will change the button to something like this
<button onclick="increamentcount()">count++</button>

Conditional Statement in JavaScript

Here is a simple if statement in Javascript.

  if(count == 10){
        count = 0;
    }

This is similar to C++ style conditional statements.

Document Manipulation (Basics)

Your whole HTML file is a document in itself. Manipulating this document via Javascript is called Document Manipulation.
Let's make a paragraph tag with id = "count". Note that for Document Manipulation we use id's on the objects.
*What's an object? *
Anything inside the HTML document is an object.

<body> <p id="count"></p> <button onclick="increamentcount()">count++</button> </body>
Now we will declare another variable that will target this paragraph tag.

let paragraph = document.getElementById('count');

Here we are getting an element/object by its id.
Then instead of printing in the console, we will make the innerText of the paragraph the count variable.

function increamentcount(){
    count++;
    paragraph.innerText = count;
}

Socials

Twitter (X): https://x.com/ihsanhaamza
LinkedIn: https://www.linkedin.com/in/hamza-ihsan/
Github: https://github.com/thehamzaihsan

Part 1: Making a tic-tac-toe game in React JS.

Hamza Ihsan — Tue, 17 Oct 2023 01:57:59 +0000

This post was originally a part of my blog.
So, in the last few months, I started learning React, a JavaScript Library for making web applications. My goal was to learn the basics and make some fun projects with it. Here is my journey making a tic-tac-toe in React JS (TypeScript).

Note: This part focuses on UI and making a simple 2-player game. Still developing the version in which you can play with a bot. This is not a stepwise guide, instead, it is an over-the-top idea about how I made the game.

Get the code here and don’t forget to follow me. → Github

The UI: The User Interface is made in Tailwind CSS which is a remarkable CSS library.

Components React uses components to give flexibility and ease of use, you don’t have to write a piece of code repeatedly. Here each tic-tac block uses a separate component as a button.

<button
      title="t1"
      onClick={() => {
        Click();
      }}
      className="text-center w-28 h-28 border-8 border-black box-border p-3"
    >
      {props.value == 1 ? (
        <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M0 14.545 1.455 16 8 9.455 14.545 16 16 14.545 9.455 8 16 1.455 14.545 0 8 6.545 1.455 0 0 1.455 6.545 8z"
            fill-rule="evenodd"
            className="cross"
          />
        </svg>
      ) : null}
      {props.value == 2 ? (
        <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
          <circle cx="24" cy="24" r="21.5" className="circle" />
        </svg>
      ) : null}
    </button>

The Mechanics The Game treats the board as a 2D array. Player 1 places a 1 and Player 2 places a 2 in the array. The player will only allowed to click if there is a 0 (empty) on that place.

  var initTable: number[][] = [
    [0, 0, 0],
    [0, 0, 0],
    [0, 0, 0],
  ];

**Inputs **The click () function is called when a button is pressed. The function calls another function outside the component that changes the Array and places a tick/circle.

function Click() {
    if (props.value == 0 && props.gamerunning == true) {
      props.onfunctionClick(props.row, props.col);
    }
  }

Checking After every turn the game checks if the board is solved if yes then it makes the player from the last turn the “winner” else the game continues. It’s that simple…. uhm not that much, to check you have if else which check for diagonals, rows, and columns.

function checkArray(arr: number[][]) {
    if (
      (arr[0][0] == 1 && arr[1][1] == 1 && arr[2][2] == 1) ||
      (arr[0][0] == 2 && arr[1][1] == 2 && arr[2][2] == 2)
    ) {
      return false;
      setwinner(turn);
    }

    for (let i = 0; i < 3; i++) {
      if (
        (arr[i][0] == 1 && arr[i][1] == 1 && arr[i][2] == 1) ||
        (arr[i][0] == 2 && arr[i][1] == 2 && arr[i][2] == 2)
      ) {
        return false;
        setwinner(turn);
      } else if (
        (arr[0][i] == 1 && arr[1][i] == 1 && arr[2][i] == 1) ||
        (arr[0][i] == 2 && arr[1][i] == 2 && arr[2][i] == 2)
      ) {
        return false;
        setwinner(turn);
      }
    }
    if (
      (arr[0][2] == 1 && arr[1][1] == 1 && arr[2][0] == 1) ||
      (arr[0][2] == 2 && arr[1][1] == 2 && arr[2][0] == 2)
    ) {
      return false;
      setwinner(turn);
    } else {
      return true;
    }
  }

What if it is a draw? So, it’s not straightforward how to check if it's a draw or not, but we can calculate the number of turns if they are equal to 9 and there is no winner so that means it’s a draw.

What’s next? This is a simple fun project that I made to test my skills. It’s not perfect, but I will add some features like playing with a bot, etc.

That’s it for now, See you later. Be sure to follow me on Medium and Twitter.

DEV Community: Hamza Ihsan