DEV Community: Fabala Dibbasey

JAVA BASIC

Fabala Dibbasey — Thu, 11 Nov 2021 12:00:00 +0000

You will learn:

Variables
Data types
Comments
Interacting with user input
Operations
Casting
Math Class

The code below calculate the area and the circumference of a circle and output it to the user.

    System.out.println(3.142 * 7 * 7);

    System.out.println(2 * 3.142 * 7);

OUTPUT
153.958
43.988

But the output are vague to the user, labeling them can give user clear understanding of each output.

System.out.println("Area of a circle with radius 7 is: " + 3.142 * 7 * 7);

System.out.println("Circumference of a circle with radius 7 is: " + 2 * 3.142 * 7);

Texts must be written in between double quotation mark and you can perform addition operation on two or more texts or texts and numbers to join them together.

OUTPUT
Area of a circle with radius 7 is: 153.958 Circumference of a circle with radius 7 is: 43.988

Can you tell what the code below does?

System.out.println(4 * 3);

Your Guess might be:
It multiple 4 by 3, YES
however, the code calculate the area of a rectangle with length 4 and width 3.
You missed it because there is no readability in the code.
To add readability to the code we introduce VARIABLES
Considering the code below, can you easily tell what it does?

    int length = 4;
    int width = 3;
    int areaOfRectangle = length * width;
    System.out.println(areaOfRectangle);

The Java keyword int before the variable name is primitive data type
Java is statically typed language, you must declared the data types of every variable. Once a variable is declared to be of a certain data type, it cannot hold values of other data types.

Three data types we will be using most are:

int => It holds integer values e.g

int age = 16;

double => It holds decimal point values e.g

double PI = 3.142;

String => It holds sequence of characters (text) e.g

String name = "Fabala";

Values of String data types are en-quoted in double quotation mark. Only addition(+) operation can be perform on String and are called concatenation.

    String firstName = "Halifa";
    String lastName = "Sallah";
    String fullName = firstName + " " + lastName;

Note: Spaces are characters and empty String is just "", double quotation mark with nothing inside.

Exercise

Write a program that calculate and output both the Area and Circumference of a circle with radius 3.5, take PI = 3.142

Solution

solution will be available later!

It turns out that Variables does much more than adding readability to our code.
By just declaring PI variable only once, you can reuse it in evaluating area and circumference of multiple circles and if there's need for changes in PI, you only need to do that in PI variable.
Code below calculate the area of three circles, A, B and C with radius 3.5, 7, and 4.5 respectively taking PI as 3.14159265358979


        double PI = 3.14159265358979;

        //circle A
        double radiusA = 3.5;
        double areaOfCircleA = PI * radiusA * radiusA;
        System.out.println("Area of circle A: " + areaOfCircleA);

        //circle B
        double radiusB = 7;
        double areaOfCircleB = PI * radiusB * radiusB;
        System.out.println("Area of circle B: " + areaOfCircleB);

        //circle C
        double radiusC = 4.5;
        double areaOfCircleC = PI * radiusC * radiusC;
        System.out.println("Area of circle C: " + areaOfCircleC);

I deliberately add //circle A, //circle B, //circle C in the code above. Those are COMMENTS and are use to add additional readability to code. COMMENTS are commonly use to explain what the code does and because COMMENTS are ignored by the compiler (are not executed), people also use it to comment codes that they do not want to execute.

// single line comments
/* this is a
multi line
comments
*/

I want to demonstrate VARIABLES in actions in one more instance before we actually define what they are.

Interacting with users

Let's write a program that takes in two integer numbers from the user and output their sum to the screen.

There are few ways to read input from the user in java and the two most commonly use are BufferedReader class and Scanner class but for now we are going to use Scanner class.
To use Scanner class, we need to import it on top of our own class.

import java.util.Scanner;

We import Scanner class from Java.util package.
More on import and packages later in the course. Our focus is on variables. Feel free to retype the exact codes seen below.

Scanner scan = new Scanner(System.in);
        System.out.print("Enter an integer number: ");
        int firstNumber = scan.nextInt();
        System.out.print("Enter another integer number: ");
        int secondNumber = scan.nextInt();
        int sum = firstNumber + secondNumber;
        System.out.println("Sum of " + firstNumber + " and " + secondNumber + " is " + sum);
        //it's a good practice to close scanner object when done
        scan.close();

OUTPUT

Exercise

Write a program that reads an integer from the user and squared it.
SOLUTION

Exercise

Using Scanner class, read two numbers from the user and perform four basic arithmetic operations on them. Your codes should be readable using variables and user should clearly understand each output.

Can you try to do the same exercise without using VARIABLES. Good luck!
We have now seen VARIABLES in action.
VARIABLES is related to variables we have seen in Mathematics, Economics and English.

In Mathematics, we solve for x and in programming we use x to map to our values in memory (think of x being descriptive and holding our value that a stored in the memory (heap) )

In English and Economics, Variables are something that are subject to changes or can assume any set of values and in programming variable too can change from mapping one value to another value.
for example, in the code below variable name was mapping to Fred and it was now reassigned to map to Fabala

    String name = "Fred";
    name = "Fabala";
    System.out.println("Name: " + name);

Equal to sign (=) is an assignment operator. We use it to assign values to variable names.

It is worth knowing that you do not have to assign value (Initial value) to a variable at the time of declaration.
You can declare variable and assign value to it later in your code. The code below try to demonstrate the use case

    double heigh; // declaring variable
    System.out.println("measuring...");
    heigh = 13.7; // assigning value
    System.out.println("Heigh: " + heigh);

Note in Scanner class we have more methods than nextInt();
Other commonly used methods are:
next(), to read word from the user
nextLine() to read the whole line
nextDouble() or nextFloat to read the decimal (floating point numbers)
nextShort(), nextLong(), nextBoolean() and much more. We will explore more of them as we need them.

Exercise

Write a program that ask user his/her name and great him/her like "Hello " + name!

Don't forget you will need next() method from the Scanner class

Note

Variable names should be descriptive and meaningful
Variable must only start with letters or underscores and can contain any character.
Reserve keywords cannot be use as variable name
By convention all java variable name should start with small letter with all subsequent words capitalized. e.g firstName
By convention all constant variables are written in UPPER CASE e.g double PI = 3.142; and to enforce the constant nature of the variable, you can use final keyword in java. e.g final double PI = 3.142;

The code below had wrongly assigned wrong values to the wrong variable. firstName should contain the first name value, "Fabala" and lastName should contain the last name value "Dibbasey*. Our task is to correct the order of the values aka swap so that firstName and lastName will now hold their right values "Fabala" and "Dibbasey" respectively.

        String firstName = "Dibbasey";
        String lastName = "Fabala";

Try it out before looking at the solution.

    String firstName = "Dibbasey";
    String lastName = "Fabala";
    System.out.println("Before swapping... " );
    System.out.println("first name: " + firstName + "\nlast name: " + lastName);
    String temp;
    temp = firstName;
    firstName = lastName;
    lastName = temp;
    System.out.println("After swapping");
    System.out.println("first name: " + firstName + "\nlast name: " + lastName);

Exercise

Read two double number from the user and swap them.

Data types

Primitive and non primitive are the two data types in Java.
Primitive data types
Non primitive data types

Strings
Arrays
Classes
Interfaces
Objects

more on Non primitive data types and it's differences from primitive data type later in the course. Also, We'll learn how to create our own data types on top of java built in data types later in the course.

Exercises

Simple interest
Write a Java program that read principal, time and rate from the user and calculate simple interest from the given input.

Quadratic equation
Quadratic equation
Using java program, read a, b and c from the user and solve quadratic equation from the input.

use Math.sqrt(a), where a is any double number && Math.pow(a, b), where a is the base and b is the exponent.

Time conversion
Write java program that convert days ranging from 1 to 360 to seconds. Access the day from the user!

Quotient && Remainder
Quotient, integer part of the division.
Remainder, left over integer part of the division.
Write a program that ask user two input numbers, the first number being the numerator and second input being the denominator, perform division on the two numbers and output to the user both Quotient and Remainder of the division.

Arithmetic Operations
+ Addition Operator
- Subtraction Operator
* Multiplication Operator
/ Division Operator
% Remainder Operator

Shorthand Operations

for int a = 5; && int b = 4;
a += b ==> a = a + b; // 9
a -= b ==> a = a - b; // 1
a *= b ==> a = a * b; // 20
a /= b ==> a = a / b; // 1 (Quotient division!)
a %= b ==> a = a % b; // 1

In java 3/2 (Quotient division) is not the same as 3/2.0 (floating point division). For floating (decimal) point division, at least either numerator or denominator value must be double data type. e.g 7/2.0 or 7.0/2 or 7.0/2.0

Increment and Decrement Shorthand Operation

a++ ==> a += 1; ==> a = a + 1;
a-- ==> a -= 1; ==> a = a - 1;

Casting

Remember we said that once a data type is declared to be of one data type cannot hold the value of different data type.
With casting we can match the value of one data type to another data type. for example,

int width = (int) 3.35;
System.out.println(width);

Explicit casting is when we have to do the conversion manually like the code above.

Implicit casting is when casting occurred automatically as in the code below.

        double height = 7;
        System.out.println(height);

Implicit casting happen when converting smaller data type to larger data type as it's demonstrated in flow chart below
Byte -> Short -> Char -> Int -> Long -> Float -> Double and Explicit casting follow the reversed of the flow chart.

Math class

Math.sqrt(a);, return the square root of a given double number a
Math.abs(a);, return absolute number of a given double number a.
Math.round(a); round up or round down to the nearest whole number
Math.floor(a); always round down
Math.ceil(a); always round up
Math.min(a, b); return the minimum number

To see more Math functions in most IDE or Editor type Math. ctrl + space or consult documentation.

Exercises

Average score
Ask UTG student his/her scores from four different exams, calculate and output the average score to the student, round your answer to two decimal places.

Sum of minMax
Read three numbers from the user, calculate and output to the screen the sum of the minimum and the maximum numbers to the user.

input
5
7
2
output
minMax sum = 9
Explanation
minimum number is 2 and maximum number is 7; 2 + 7 = 9

Congratulations you've successfully completed Java Basic Concept. Looking forward to seeing you in Condition and Loop.
Don't forget to connect with me on twitter and linkedin

Algorithms with Python Variables and Conditions

Fabala Dibbasey — Tue, 07 Sep 2021 00:44:04 +0000

Continuation...

Previous lesson, Introduction to Computer Programming for Coders

Since we don't have to directly deal with 0s and 1s anymore, thanks to Programming languages. We are going start off by installing programming language, python into our computer and setting up the environment for writing and executing codes.

Downloading and setting up

Setting up is one of the hardest challenge you'll face as a newbie, new to coding! So don't give up. It's not hard but everything is just new to you

Head over to Python.org website and download the latest version of python. If you're having trouble installing Python, refer to some random YouTube video for help. Oh right once we install python, we need some editor just like we need Microsoft word for working with texts and excel for operations on Data.

Once we get all of them up and running let's now instruct our computer to greet the user.

user_name = input("Enter your name: ")
print("Hello", user_name + '!')

Congratulation! You've written your first python program!

What have we done?
We asked user for an input, bind user_name to the input value and finally we print out greeting which consist of the text "Hello" with Whatever user put in, in this case we're expecting user's name.
user_name here is Variable, input and print are Function and = is the assignment operator. Notice we enclose "Hello" and '!' into quote and that's exactly a way of generating texts (strings) in python. A lot of Grammars already but more on them later.

Challenge 1:
Ask user for two input, name and surname, store them in a variable name and surname respectively and print out the full name.

Hint:
You'll need two input function

Solution

name = input("Enter your name: ")
surname = input("Enter your surname: ")
print("your full name is", name, surname)

Now let's ask the user for the year they were born and we'll tell them their age.

birth_year = input("Which year where you born? ")
age = 2021 - int(birth_year)
print("You're", age, "years old")

Notice we pass the birth_year variable into int function. This is because the input function return string (one or more characters or texts to be precise) and all what int functiondoes is to convert the string into an Integer number.

Challenge 2:
Ask user for two integer numbers and return the sum of the numbers

Hint:

You'll need two input function

Don't forget to cast/convert the inputs into integer number

Solution

first_number = input("Enter an integer number: ")
second_number = input("Enter another integer number: ")
sum_of_inputs = int(first_number) + int(second_number)
print("Sum of the two numbers is", sum_of_inputs)

Variables

We've already seen variables, user_name, age etc... in action. Can you tell what they do?

We use variable to map to our values for references purpose
Variables improve the readability of our code. As in user_name, whoever read the code will know exactly that the input value is user's name, and sum_of_inputs will tell the reader that the value is the result of summation of inputs
Re-usability of values For instance, performing five basic operations with two variables

num1 =  9
num2 = 2
print(num1 + num2)
print(num1 - num2)
print(num1 * num2)
print(num1 / num2)
print(num1 % num2)

At any point you can change num1 or num2 to any value and that we'll be reflected in all the print statement.
Hence the name variable, it value can be changed or re-bind to another value and operations on variables will still remain unaffected.

num1 = 9
num1 = 7
print(num1)
#num1 is re-bind to value 7

%? It is called modulo or remainder operator.
In Python, / gives floating point value (decimal), // gives quotient and % give you the remainder of a division.

Let's explore some application of modulo operator in programming.
Get an integer from a user and tell whether the integer is an Even or Odd number.
Two questions we should ask ourselves before we start to approach the problem

How can we get an integer from a user?
How can we determine Even or Odd number?

Well, We can use input function to get data from user, cast/convert our data to an integer number using int function and all what we know about Even numbers is that they're divisible by two ( can be divide by two without a remainder ) and any number that's not an Even number must be an Odd number.

int_number = int(input("Enter an integer number: "))
if (int_number % 2 == 0):
    print(int_number, "is an Even number")
else:
    print(int_number, "is an Odd number")

New concept Alert! Condition or Branching, if/else more on them later.

Back to Variables

Question: You're given two cups, orange and banana each contains a juice of it's name. orange cup contains orange juice and banana cup contains banana juice? Can you write a program that will swap the juices in these cups. When swapped orange cup should now contain banana juice and Banana cup should contain orange juice.

Hint:

Demonstrate it with two cups, orange and banana with their respective juices

Try swapping the juices in the cups

If still stuck look for additional container (variable)

Now swap them

Solution
Will be posted later

Condition/Branching

We've seen simple version of branching, when we check whether the user's input is Even or Odd.
The syntax was,

if (<condition>):
    #some logic
else:
    #some other logic

We used == to check whether remainder is 0 when divided by 2. When True we know exactly it's Even number else it's Odd number
== is the comparison operator since = was reserved for an assignment operator.
Indentation is important, It define the block of codes. From the syntax above, some logic belong to the body of if condition while some other logic belong to else scope. More on scopes later.

Comparison operators

== equal
!= not equal
< less than
<= less than or equal to
> greater than
>= greater or equal to

Can we now determine whether our integer input is neutral ( 0 ), negative ( less than 0 ) or positive ( greater than 0 )?

pseudo code

Ask user for an integer input

Cast/Convert the input into integer by passing it into int function

Check if input is equal to 0, print 'neutral' into the console

Else if input is less than 0, print 'negative' into the console

Else the input must be positive then print out 'positive' to the console

Solution

int_number = int(input("Enter an Integer number: " ))

if ( int_number == 0 ):
    print('neutral')
elif( int_number < 0 ):
    print('negative')
else:
    print('positive')

Exercise

Write a program that take an integer number from user and print Fizz when it's divisible by 3, print Buzz when it's divisible by 5 and print FizzBuzz when it's divisble by both 3 and 5.

I know you must be exhausted. See you in Algorithms With Loops
Thanks for following the series.
Don't forget to connect with me on Twitter and LinkedIn

Introduction to computer programming for coders

Fabala Dibbasey — Sun, 29 Aug 2021 22:04:51 +0000

WELCOME
In this series of lessons, I am going to take you from absolutely knowing nothing/less about programming/coding to been comfortable with instructing computers to do anything for you.

Computers?

If you're reading this it means you already have a computer, Phone or PC/Laptop. Now can you answer the question, what are computers?
You're right! It's just the device you've with you.
Let's discuss the device in detail. It's powered by electricity, it's capable of taking in data (input), can keep the data (storage), processing the data (algorithms) and finally give out the information (output) and this is in fact the definition of computers.

Today computers have reached to a point that human don't only compare them to us but they've declared that computers are smart/intelligent than us.
Those who said that or think so doesn't understand computers.
Computer are stupid even though they can store billions of data (for example 1.5 million books of standard size), and can perform a billion of calculations per second! (two operations in same time light travels 1 foot).
They existed because of us, they only do what we instructed them to do i.e garbage in, garbage out. This means even if we mistakenly instructed them they'll still carry out the instruction because they cannot realize our mistake.

Computer Science and Programming

Computer science is fundamentally problem solving. And in this series of lessons, we'll focus on speaking to computers to do tasks for us. Speaking to computers? Ohh yes, Computers speak the language 0s, and 1s just like we human speaks in decimal base for instance, 2021 in computer it's 11111100101. I did high school math to convert decimal to binary. Each digit in binary represent a bit.

It make sense that computers can represent decimal in binary, What about texts?

Representation of texts in Computer

People before us have decided base on a standard to map each character (capital and small letters, punctuation) to a number. for instance, "A" ==> 65, "B" ==> 66 and so on. Read more about American Standard Code for Information Interchange.

Image Source

Receiving the text "HELLO" ==> "72", "69", "76", "76", "79" respectively. And in bits it's 01001000, 01000101, 01001100, 01001100, 01001100. Each letter is typically represented with a pattern of eight bits, or a byte.

8 bits == byte
1024 bytes == kilobyte
1024 kilobytes == megabyte
1024 megabyte == gigabyte and so on

However some think it's 1000 instead of 1024

There's another standard, Unicode that is an extension to ASCII. It contains all those characters like ancient symbols, emojis and many more that do not exist in ASCII standard.

Then how images, videos and audios are represented in computers?

Images

I don't know if you can observe that images are just thousands or millions of square boxes called pixels combined.
We can achieve pixels by zooming the image 2000+% like the image shown below

and those square boxes or pixel are nothing but colors. So our concern should be how computers represent colors?
There were many system of representing colors but the most commonly use is RGB. Some amount of red, green and blue can be combine to produce millions of colors. for example, rgb(23, 116, 223) will produce the color below.

As you can see, there's numbers mapping to colors. rgb ==> 23, 116, 223.
The resolution of an image is the number of pixels there are, horizontally and vertically, so a high-resolution image will have more pixels and require more bytes to be stored.

Videos and Audios

Videos: If we break videos down, we'll see it contains thousands of images flipping per second to create the motion as in this Youtube video, flipping
Audios uses the concept of sound wave to map sound frequency to numbers. Read more about sound representation in computers

Programming Languages

Earlier I said that computers only understand 0s and 1s but imagine if we are to communicate with computer to build a complex system or application like Twitter with 0s and 1s it will seems impossible not alone HARD. The same humans before us has created a languages which are more human friendly. Today, we've more than 500 hundred programming languages. We can use those languages to instruct computers. The Code we write in those languages will be compiled/interpreted to Machine code, a codes which computers can understand.

Out of 500 plus programming languages, ** What is the best programming language? **
There is no such the best programming language. Each have their strengths and weaknesses and there are Domain specific languages, highly specialized mini-programming languages for example regular expressions for string manipulation, and SQL for database manipulation.
Whatever can be compute in one programming language can be compute in other programming language.

Computers vs Human being

Let's say you're given a Phone Book which consist of the list of the following names,

[ Omar, Mamudo, Amie, Fabala, Muhammed ]
Assuming each name on the list is on a page and page start from 1.
You can tell a human being to find the name, Fabala and you're not going to tell him/her how to go about in retrieving the name, Fabala from the phone book.
S/He will have to find an approach to check if Fabala is on the Phone Book? and if yes will tell us at which page. This very human being can start searching from left/right of the page and turning one page at a time. This is because human being understand Declarative Knowledge. Declarative knowledge is a statement of fact like find me the name, "Fabala" from the Phone Book.

Whereas, Computers understand Imperative Knowledge, a recipe or how to knowledge. If the same problem, finding "Fabala" from the phone book given to Computer, you need to tell it how to go about in finding the name, "Fabala".

Instructing Computers to find "Fabala" from the phone Book

Pick up the Phone Book

Start from the first page on left side of the Phone Book

Check if name on the page is "Fabala", tell us the page number and stop searching

Else, Go to the next page and go back to step 3

When no page is left to be search, tell us "Fabala" doesn't exist in the Phone Book

The steps/approaches we took to find the name is what we called an Algorithms, step-by-step instructions for solving problems.
What we did above is representation of our algorithms in precise English and that is what is refer to as Pseudocode, representing algorithms in Human Languages.

Actual code

I do not expect you to fully understand the code below. I just want you to see how Actual code is different from the Pseudocode

phone_book = [ 'Omar', 'Mamudo', 'Amie', 'Fabala', 'Muhammed'  ]

def find_name (phone_book, name):
    '''
    input: phone book consisting of names, and the name to be search
    output: return the page number of the name if it exist
    else return 'Not existed'

    '''

    for page in range(len(phone_book)):
        if phone_book[page] == name:
            return 'Page ' + str(page + 1)

    return 'Not existed'

print(find_name(phone_book, 'Fabala'))

The code above is written in Python Programming Language which we're going to use throughout this series to represent our logic but we're going to focus more on problem solving (Programming) than the coding part of it.

Thanks for reading and see you in the next topic, Algorithms.

Don't forget to like, share with those it will help and finally lets connect on Twitter and LinkedIn

Learn to manipulate HTML DOM in JavaScript by building To Do List App

Fabala Dibbasey — Wed, 28 Jul 2021 07:03:21 +0000

Let's learn to manipulate HTML document object model (DOM) in JavaScript by building To Do List App

Goal

At the end of this project you'll have proficient capability of working with HTML element right inside JavaScript, you'll be able to add, remove, style HTML elements dynamically and be able store elements in your browser using web storage API

Topics covered

Create HTML elements inside JavaScript
Selecting && Manipulating the DOM elements
Template literals (plus createRange() and createContextualFragment() )
DOM traversal
Events (raising and handling events)
ES6 syntax
Array methods
Web storage API (local storage, session storage and cookies)

Prerequisite

I expect you to know basic HTML, CSS and JavaScript

DOM

What's DOM?
The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. It defines HTML elements as objects, Properties for all HTML elements, Methods for all HTML elements, and Events for all HTML elements.

Note

The browser model the structure after receiving HTTP response from the server!
It represents the page so that programs ( eg. JavaScript) can change the document structure, style, and content.

We'll discuss more about the tree structure of the DOM which shows the parent child relationship of nodes in DOM traversal section. For now we'll need the first node of the tree (root node) called document to access any object in an HTML page.

Changing document structure, style and content

We said that DOM defines Methods for all HTML elements and we can use one of it's method, createElement(specify the element) to create any specified HTML element

const heading = document.createElement('h1') // <h1></h1>

To create a text, we can use the method, createTextNode(text)

const heading_text = document.createTextNode("Hello world!");

Why createTextNode instead of createText as in createElement?

Node

Every object located within a document is a node of some kind. In an HTML document, an object can be an element node but also a text node or attribute node.

lets now append the textNode, heading_text we've created into our heading element, h1 using appendChild() method

heading.appendChild(heading_text) // <h1>Hello world!</h1>

Recall the structure of HTML

<html lang="en">
<head>
 <title>Title</title>
</head>
<body>
 <!-- Any visible contents -->
</body>
</html>

The <body> element defines the document's body, and is a container for all the visible contents, such as headings,
To make our heading element visible we need to append it to
<body> element

document.body.appendChild(heading)

/*<body>
  <h1>Hello world!</h1>
  </body>
*/

exercise

Using createElement(), createTextNode(), and appendChild()
Make the following HTML snippet codes below and append it to body element. try it yourself before viewing my solution

 <div>
  <p>Now I can create HTML element right inside JavaScript</p>
 </div>

solution

const div = document.createElement('div')
const paragraph = document.createElement('p')
const paragraphText = document.createTextNode(
  'Now I can create HTML element right inside javaScript'
)
paragraph.appendChild(paragraph)
document.body.appendChild(paragraph)

Element.append() is similar to Node.appendChild() but with extra power. Let me show you!
let's remake our previous solution with Element.append()

const div = document.createElement('div')
const paragraph = document.createElement('p')
paragraph.append('Now I can create HTML element right inside JavaScript')
document.body.append(paragraph)

This time with fewer codes! Element.append() saves us from creating text node and appending it to the paragraph as in the first solution.

Ohh! thank you Element.append(), now I will never use Node.appendChild()

Smart learner, you jumped to conclusion so soon!

Element.append() has no return value, whereas Node.appendChild() returns the appended Node object.

Maybe this time Node.appendChild() won in a case where you want your appended Node object.

Another battles, Element.append() vs Node.appendChild()

Element.append() allows you to also append DOMString objects, whereas Node.appendChild() only accepts Node objects.

Element.append() can append several nodes and strings, whereas Node.appendChild() can only append one node.

exercise

create the following elements structure inside JavaScript from what you've learned so far

<body>
 <h1>I am learning DOM</h1>
 <div>
  This is so cool
  <p>with my new power i can now create html structure inside javascript, ohh how cool is that</p>
 </div>
 <div>
  <h3>this is heading three inside second div</h3>
  <p>intresting, this is second paragraph in second div</p>
 </div>
</body>

Solution

const heading1 = document.createElement('h1') //<h1></h1>
heading1.append('I am learning DOM') //<h1> I am learning DOM </h1>

const div1 = document.createElement('div') //<div></div>
const p1 = document.createElement('p')
p1.append(
  'with my new power i can now create html structure inside javascript, ohh how cool is that'
)
div1.append('This is so cool', p1)

const div2 = document.createElement('div')

const heading3 = document.createElement('h3') //<h3></h3>

heading3.append('this is heading three inside second div')
//<h3>this is heading three inside second div</h3>

const p2 = document.createElement('p')
p2.append('intresting, this is second paragraph in second div')

div2.append(heading3, p2)

document.body.append(heading1, div1, div2)

Ohh right, so far all what we did is to create HTML elements from JavaScript and insert it to our <body></body> element for visibility. What if we want to get access to a specific element from HTML, index.html file and manipulate it in JavaScript?

Selecting && Manipulating the DOM elements

Well, We can use selectors as it's done in style sheet.

That's it for this part, I can't wait to see you in the next part, Selecting && Manipulating the DOM elements

I'll love us to connect on Twitter and LinkedIn

Data structures and algorithms __Evaluating Program Efficiency and sorting

Fabala Dibbasey — Sun, 18 Apr 2021 19:05:43 +0000

Data structures and algorithms walk through in java

Part 2,
In part one of this series we introduce search algorithms, Linear and Binary search of input set and finalize that Binary search is a better approach but can only be use on sorted array and that had introduced us to a discussion of a new topic, Sorting algorithms and that’s exactly what we’re going to cover in this part 2 of the series. If you missed part 1 you can check it here.

GOALS:
• To be able to know the different ways of determining the run time complexity of a program (timing, counting operations and big ohh)
• why big ohh
• be able to form an equation from any given program and express it in asymptotic notation
• To be able to write selection sort in no time

Note:
It contains exercises. If you’re learning, you’re encourage to do the exercises.

“You only get it by doing and not by watching”__Fabala Dibbasey

Quick review:

In part 1 we’ve seen something like O(1), O(n), O(log n)! But what really are they? Big Ohh notation, exactly you’re right and what’s big ohh notation? Maybe google can help us.
Big ohh notation is use to express the growth of program’s run time as
input size grows. It does not need to be precise, it’s uses order of and not exact. It measures an upper bound on the asymptotic growth, aka order of growth.

Our Goal for measuring program Efficiency:

• To evaluate algorithms
• To evaluate scalability
• To evaluate in terms of input size

Why Big Ohh?

Surely, we can use different approaches such as timing and counting operations to measure the efficiency of a program. But why Big Ohh?
We’re going to use these three different approaches to measuring program efficiency on the sample program below.

public static long evaluateEfficiency(int inputSize) {
    long sum = 0;
    for(int i = 0; i <= inputSize; i++) {
        sum += i;
    }

    return sum;
}

Timing:

We can use stop watch to time our program. Learn to use stop watch in java here.
// call the method in your main method with different inputSize.

startTime

evaluateEfficiency(30000000);

endTime
timeTaken = endTime – startTime

We noticed that time varies with different inputSize, It increases as inputSize increases. Good!
What else can you notice?
If nothing, not a big deal! But believe me if you’re using another machine different from mine you’re likely to have less timeTaken for every the same inputSize we passed in. For example, if we both pass in 30000000 into our method it took 52 second to complete in my machine. If it took less second than that in your machine is exactly what I expected else hahahah! I laughed at you because my machine is better than yours, Maybe not! The point here is,
Time varies in different Machines. Bad!

Implement the same program using recursion and time it?

There will be time different with the same input. Hint: use milliseconds instead of seconds.
That’s to say time varies with different Implementations of the same program, another limitation of timing to measures the program efficiency.

Limitation of timing approach for measuring program efficiency:

    ◦ time varies with different machines or computers
    ◦ time varies with different implementations
    ◦ time cannot express the relation between input and time
    ◦ time is not predicable base on small input

Due to these limitations timing is discourage. Now lets see Counting Operations to measuring program efficiency.

Counting Operations:

let us assumes that every operation is 1.
Operations are + - * / % = == < <= > >=
Note: we’ll also assume that System.out.println() and return is 1 operation.

public static long evaluateEfficiency(int inputSize) {
    long sum = 0;

    for(int i = 0; i <= inputSize; i++) {
        sum += i;
    }


    return sum;
}

from the method, evaluateEfficiency:
before for loop:
long sum = 0; 1 Operation
for loop:
int i = 0; 1 Operation
i <= inputSize; 1 Operation
i++ 2 Operations, adding and assigning (i.e i = i + 1)
Inside for loop, sum += i; is 2 Operations, adding and assigning (i.e sum = sum + i)
All these Operations in for loop will be carry out n times where n is the inputSize.
Total Operation 1 + 1 + 2 + 2 = 6 for n times aka 6n
Outside for loop:
return sum; 1 Operation

Overall Operations:

operations before for loop + operations in for loop + operations after for loop
1 + 6n + 1 and that’s the total operation of our program.
Ohh Yes! Counting is better because:
• It depends on algorithms
• The same for any computer and
• It varies between different inputSize and can express the relationship between the input and count.
but still
• there’s no real definition of which operations to count
• varies for different implementations. Help me prov that please. Count the operations in the recursive implementation of the method, evaluateEfficiency(int inputSize). If you have not implement the recursive version of this method please just do that right now and count the operations in it.

We still need better way for measuring program efficiency, an approach which meet all of Our Goal for measuring program Efficiency, we specified above.

Big Ohh Notation:

Unless you jumped straight to this section, big ohh is not new to us anymore!

public static long evaluateEfficiency(int inputSize) {
    long sum = 0;
    for(int i = 0; i <= inputSize; i++) {
        sum += i;
    }

    return sum;
}

Recalled we count this method under Counting Operations and this 1 + 6n + 1 was our equation.
Big Ohh notation which measures upper bound on the asymptotic growth. We said it does not need be exact but on the order of growth.
Ignores the additive and multiplicative constants and focuses on dominant terms.
O(n) Linear time complexity
More examples:
n^2 + 2n + 2 ignores both additive and multiplicative constants. Will be left with n^2 and n. n^2 dominate hence O(n^2) Quadratic time complexity

n^2 + 99999n + 72000 : O(n^2) ==> Quadratic time complexity
log(n) + n + 100 : O(n) ==> Linear time complexity

3*n*log(n) + 10n : O(n log n) ==> Log Linear or Linearithmetic time complexity
5n^30 + 2^n : O(2^n) ==> Exponential time complexity
434 + 600: O(1) ==> Constant time complexity

Hope you get the idea we ignores additive and multiplicative constants and focuses on dominant terms

Exercise:

Arrange the running time complexity of these asymptotic notations above in ascending order (Best to Worst without repeating any notation) and comment your answer.

Big ohh notation:

• describe the worse case which is the bottle neck when program runs
• evaluate algorithms
• independent of machines
• independent of implementations
• can express the rate of growth of a program relative to input size

We’ve done a lot! Let’s take 3 minutes break here:

Welcome back!

Sorting algorithms:

int[] list = { 3, 2, 8, 1, 4, 7, 9, 2, 5, 10, 6 };

Suppose I asked you to sort the given array, list above how will you go about it?
Let me Guess! You can rate my guessing in the comment please.

You will first try to find the smallest elements in the list.
You’ll either swap it with the first element in the list or move your smallest element to a new array lets call it mySortedArray
You’ll repeat yourself until you’re done. ohhhh hope I make good guesses?

Let’s translate the same thing into java code

public static int[] selectionSort(int[] arr) {
    for (int i = 0; i < arr.length; i++) {
//We're going to say our smallest element is at the first     index in the list because that's the element we've seen so far                                                          
        int smallest = arr[i];
    // search for smaller element 
        for (int j = i; j < arr.length; j++) {
                // yes                      
                if (arr[j] < smallest) {
                    // swap         
                    int temp = arr[i];
                    arr[i] = arr[j];
                    arr[j] = temp;
                    smallest = arr[i];
                }
            }


/*At the end of this inner for loop, smallest element will be 
 *positioned at index i of the outer for loop then i will be 
 *incremented. Inner for loop will start it's searching at i 
 *that's to say it's ignoring all elements at index less than 
 *index i.
 */
        }

        return arr;                     
    }

Two more Exercises for you

Count the operations for this method, selectionSort and from the equation determine the Big ohh notation (You should get O(n^2) Quadratic time complexity ).
Implement the same algorithm finding the smallest element and move it to new sorted array to be return.

If you’ve done these two exercises Congratulations!
Now, can you tell me the differences between the one you implemented and the one we implemented together?
The one we implemented together is mutating the original array, It’s called impure function in functional programming. And while the one you implemented yourself is the pure function in functional programming terms because it return new array (this case sorted version) instead of changing the state of the original array that was passed into it.

I don’t know of you but I’m tired and I’m going terminate my recursion hahaaaa!

Next, part 3:
• Bubble sort
• Bogosort
• merge sort

Remember the topics of the series:
• Searching and Sorting Algorithms
• Data Structures (Stacks, Queues, Linked list, Graphs and more).

Want the pdf version

Author Fabala Dibbasey
at Twitter
at LinkedIn

Data Structures and Algorithms walk through part 1(linear and binary algorithm)

Fabala Dibbasey — Fri, 02 Apr 2021 08:17:01 +0000

Data Structure and Algorithms

Goal:
At the end of this article you should be able to:
understand and be able to implement both linear and binary search algorithms using both recursive and iterative version,
understand the time complexity associated with each of them and the differences between them.

We're going to implement our first algorithm on search method called Binary Search method; and in fact if you're at this level am sure you've already written your first algorithm, you might not realize it but you've.

Scenario:
//declaring and assigning an array

int[] arr = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10};

Question:
Find me the index of number 5 from the given array, arr above?
As human being, you might start from the either end, left or right and sequential moving to retrieve number 5 while keeping track of index. You’re doing an algorithm called Linear Algorithm.

You can achieve the same Algorithm using loops; and I’m going to use for loop for this demo.
Let’s create a method call linearSearch below

public static int linearSearch(int[] list, int value) {
        /*
         * takes int array and int value
         * return the index of the value if found 
         * otherwise -1 indicating not found
         */

    //declare current element

    int currEl;

    for (int i = 0; i < list.length; i++) {
        // Assigning current element
        currEl = list[i];
        //checking whether we found value to return its      index 
        if(currEl == value) return i;

    }
    /*
     * after searched through the entire array, list         * return not found index, -1
     */
    return -1;
     }  
}

That was linearSearch method. We started searching from the left of the array and sequentially looking for each element in the array to check whether it’s the value we’re looking for, if it’s we return its index otherwise is not found in the array after we’ve checked all the element in the array, so we return -1 indicating that is not found.

Analyzing the algorithm complexity associated with this method

Quiz:
let N = the number of steps needed
Remember arr is the variable of our array above

How many N steps will it take us to find the first element, 1 in the array, arr? 1 steps, you got it!
This is what we called best case scenario
no matter the length of an array, it will always take us one step to find the first element in an array
In Big Ohh notation its O(1), constant time operation
How many N steps will it take us to find an element which does not exist in an array, arr? 10 steps, Correct!
Because we’ve to search the entire array, arr which will took us arr.length (10) times before returning not found, -1
How many N steps will be needed if an elements that does not exist in arr, if arr increases to N numbers of elements? N steps, Brilliant
In Big Ohh notation, it’s represented as O(N), linear time complexity

Better way to Search an element in an array!

We can do better search, in fact an algorithm called Binary Search.
Binary search algorithm reduces the problem by halve in very look up!
You don’t get that, that’s cool, I don’t too. Just kidding, However do me a favor, smile! Great let’s continue.

Let’s bring down our array above

int[] arr = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10};

At first when I asked you to find me the index of element 5 from the array, arr you started from one end maybe left and was going sequentially to find the index of element 5. That approach was great but expensive compared to this, binary search approach aka divide and conquer algorithm.
This time I want you to start your search from the middle, that’s Math.floor(arr.length / 2) I’m using Math.floor(float) to round down the value in case of floating figure; and don’t worry if you’re assigning arr.length / 2 to an int variable that would implicitly round it down for you. e.g int mid = (arr.length / 2);

While the mid = 5; arr[mid] = 6 and we’re looking for the element 5, NOTE: the mid is the index.

Our first look up give us element 6 while we’re looking for an element 5, then what do we do?
Straight in our mind, we should know that element 5 can never be found from the mid index and above because they're all greater than element 5; Hence element 5 must be at some index below the mid index. This is interesting, let’s throw unnecessary right halve of the array. This is our sliced array below.

 arr = {1, 2, 3, 4, 5};

repeating the same step; mid = (arr.length / 2); arr[mid] = 3
comparing element 3 with element 5, we know that element 5 is greater than element 3 hence it cannot be found from any index at mid and below. So let’s discard all elements form mid and below

 arr = {4, 5};

repeating the same approach; mid = (arr.length / 2); arr[mid] = 5
comparing arr[mid] which is element 5 with the element 5 we’re looking for, they’re the same so we should return the mid. Ahhh smile, you’ve found it and return your mid; However we ran into a bug called the index bug, not actually; Notice, this return index 1 because that’s where element 5 was found in the recent array, arr. Whereas in the original/first array element 5 is at index 4, that is the correct index and that’s what we wanted to return. This approach is completely find if we’re just checking the existence of an element in an array; return true if found else false; but since we care about the index of the element we’re looking for, we should take tract of our indexes. That would required us two more variables, let’s call them low and high for mapping our low and high indexes respectively.

Here’s the code of the concept we explained so far. Note this code below doesn’t care about the index.
The function will return true if element found, false otherwise.
I’m going to implement it recursively and I would like you to implement it using loop.

Takeaway: You only get it by doing and not by watching. Concepts matters but practical defeat theories.

public static boolean binarySearch_recursive(int[] arr, int find) {
    if(arr.length < 1) return false; 
    // for an empty array we're done
    int mid = arr.length / 2; // our mid index
    if(arr[mid] == find) return true;
    else if(arr.length == 1) return arr[mid] == find;
    else {
        if(arr[mid] < find) { // ignore the left halve
        arr = Arrays.copyOfRange(arr, mid + 1, arr.length); 
            return binarySearch_recursive(arr, find);
        }

        // ignore the right halve
        arr = Arrays.copyOfRange(arr, 0, mid);
        // slicing an array
        return binarySearch_recursive(arr, find);
      }

}

We’ve done a lot, I will encourage you take a break here at least 7 minutes and when you come back we’ll explore binary search that count indexes.

Welcome back!
Hopefully you’ve implemented your loop version of the above code, if you don’t I encourage you to go back and try it. Don’t just be reading, read and practice! If you tried and still don’t get it don’t hesitate to Google. In fact while writing this article I Googled “slicing an array in java” and stackoverflow.com was helpful.

Enough talk, let’s code!

This time around, I’m going to implement binary search method that return index of an element if found or -1 if not found. I’m going to use the loop version and you’re encourage to implement the recursive version of it.

public static int binarySearchIteratively(int[] a, int key) {
    int high = a.length;
    int low = 0;    
    int mid = (high + low) / 2;
    while (low <= high) {
        if(key == a[mid]) return mid;
        else if(a[mid] < key) {
            // search right
            low = mid + 1;
            mid = (high + low) / 2;
        }else {// search left
            high = mid – 1;
            mid = (high + low) / 2;
        }
    }
    return -1;
}

Brief explanation about the code
We assigned:
high to be the length of the array
low to be the at index 0
mid = (low + high) / 2 note because mid is an int variable there’s implicit floor division that safe us from using Math.floor(float)

while loop will continue as long as low <= high and that’s very important.
Inside while loop, we update low, high and mid depending on which portion to be search after comparing our key with a[mid].

Run Time Complexity:

We have already explained this above or if you could observe the code, for every iteration we’re reducing the problem by halve meaning we throw away the unnecessary portion. I.e for the first iteration the problem is now N / 2, second iteration N / 4 or (N/2)/2 and so on.
This in asymptotic notation aka Big Ohh is O(logN) , Logarithms complexity.

Good to know:
Do you know that first binary search was published in 1946; and the first bug-free one was published in 1962.
There was a bug in Java’s Arrays.binarySearch() and was discovered in 2006.

Linear Search vs Binary Search!
We know that Binary Search is a faster algorithm in term of time complexity however they can only be use on sorted array. That brought us to another topics, sorting algorithms, we’ll get there where we’ll implement quick sort, merge sort, selection sort, bubble sort and stupid/buggo sort.

This is it for part 1 of our Data Structure and Algorithm walk through.

You can Check out Part two here

Author Fabala Dibbasey
at Twitter
at LinkedIn

Variables, var, const, and let in conversation

Fabala Dibbasey — Thu, 18 Mar 2021 15:10:27 +0000

Unveiling the Drama: Variables, const, let, and var in JavaScript—A Riveting Conversation!

Variables:

Hey there! If you think I'm just a container, you're missing the big picture. Greetings, my components! Without you, my declaration is incomplete.

var:

Hello 'const' and 'let'! Hey 'let,' you've been getting all the attention lately, but what makes you so special?

let:

Umm, well...

const:

Hold on, 'let'! Let me introduce myself first. I am the 'const' keyword, the guardian of constant variables. Once declared, there's no turning back.

let:

I declare variables, and yeah, they can be reassigned everywhere in your program. I see all scopes, by the way.

var:

Oh, 'let', I only see function scope. How can we simplify things for developers?

let:

Take a look at this demo:

function diffVarAndLet() {
    // Extra scope
    if (true) {
        let x = "Look, I'm in a scope";
        // 'let' -> My life starts and ends only in this scope
        var y = "See, I don't care about scope!";
    }

    console.log(y); // Output: See, I don't care about scope!
    console.log(x); // Remember, I warned you about my life! Output: ReferenceError: x is not defined
}

In short, I'm here to solve a problem you didn't even know existed—scopes!

var:

Excellent! Thank you. Together, we can elevate JavaScript. If you're new to JavaScript, go with 'let'—it rarely disappoints. Only the intermediates and experts truly understand when I'm needed.

const:

Variable, you claim not to be a container—so what are you?

Variable:

I'm used to mapping to a value in memory for reference purposes."

Get ready for an exhilarating journey through the world of JavaScript variables! 🚀