Learning JavaScript Strings

Best Introduction to JavaScript: HTML, CSS and Javascript (Part 1)

Introduction to JavaScript: There’s no better programming language for the web than Javascript. So far, we’ve used HTML to arrange our web pages’ content and CSS to style it.

However, what if you want your web page to transform dependent on the input by your user? Javascript enables us to transform our static web pages into dynamic web apps.

First steps in Introduction to JavaScript: Understanding the DOM

For example, one of the primary reasons we use Javascript to create interactivity is that it allows us to control the Document-Object Model (often known as the DOM for short).

Those of you who remember the first class will recall that we spoke about how HTML is organized as a tree. All HTML components are stored as objects in the Document Object Model (DOM), and they are thus capable of being modified in far too many distinct manners.

Best Introduction to JavaScript

By leveraging on Javascript, we can alter the Document Object Model (DOM) to perform operations such as:

  • Make changes to existing HTML components.
  • Make changes to the attributes of HTML elements.
  • HTML elements can have their CSS stylesheets modified or added.
  • HTML elements can be added and removed.

Before we dive into the introduction to javascript, let’s take a look at how we can utilize Javascript to add interactivity to our web pages by capturing data from the Document Object Model (DOM). Don’t be frightened if you don’t completely get what the code is doing at this point.

                    

<html>
 <head>
   <title>First Javascript Code</title>
 </head>
 <body>
   <button type="button">Click Me!</button>
 </body>
</html>

                    

var button = document.querySelector('button');

button.onclick = function() {
  alert("Hello, World!");
}

Let’s delve a little further and look at the very first line of our code:

                    

var button = document.querySelector('button');

Declaring a variable is accomplished through the usage of the var statement. A variable is handy for storing information that we may wish to obtain later.

The code that appears following the equals symbol (=) document.querySelector assigns a value to a variable. It accomplishes this by locating the first element in the page that matches the selection enclosed in quotation marks and then putting it in the button variable.

As a result, the first line generates a variable and assigns it to the first <button> element it encounters in our HTML document(Code).

However, merely saving the <button> is a very monotonous task. The next step is to determine how to interact with the <button> element in question. One of the main techniques to accomplish this is by including an event listener in our code, which instructs our program to run code whenever a user interacts with the web page.

                    

button.onclick = function(){
	alert("Hello, World!");
}

In the code above, we tell the program to execute the code stored in a function when a user clicks on the button. Functions are used to store code you may want to execute more than once.

In this case, the function will create a pop-up with the message.”Hello, World!” every time a user clicks on the button.

Let’s look at Javascript data types on Introduction to JavaScript

This course on introduction to javascript and everything you do in programming centers on data storage and manipulation. This data is always coupled with a type, which instructs the computer exactly how to handle the data that it is given. When Javascript is performed, the kind of data is automatically identified.

What precisely do we mean when we say this? Consider the following example.

For your information, console.log() prints to the console whatever data is supplied to it between the parenthesis. Take a look at the code below.

                    

var number1 = 10; 
var number2 = 20; 

console.log(number1 + number2);

Think for a moment: what do you aim this code to accomplish?

Javascript examines the declared variables and decides that they are both numbers. Javascript then understands that it must print the total of the two values to the console.

The output for the code below will be 30. as in 30+10

We’ll learn how to store and handle the Number data type in this class.

Best Introduction to JavaScript: Numbers

Javascript uses 64 bits of memory to encode all numbers. While digging into how computers represent numbers is beyond the scope of this course, it is crucial to understand that there are narrow limits to the quantity of numbers that can be stored.

In practice, unless you’re dealing with really huge numbers, this shouldn’t be a problem. Each bit corresponds to a binary value (e.g., 0 or 1). The maximum integer you can express with 64 bits is 2^63 – 1, or 9223372036854775807.

Numbers are a sort of numeric data. Numbers can be integers, floating-point (decimal), or exponential values like those seen in scientific notation.

Adding & subtracting numbers

Use the + operator to add numbers and the - operator to subtract numbers.

                    

console.log(50 + 50); //Addition operation on two numbers 
console.log(40 - 10); //Subtraction operation on two numbers

Multiplying & dividing numbers

Use the * operator to multiply numbers and the / operator to divide numbers.

                    

// use the * operator to multiply 
var multiply = 10*10;

// use the / operator to divide
var divide = 10 / 5;

// operations on integers can result in floating point values, and vice versa
var float = 10 / 3;

console.log("Ten times ten equals", multiply);
console.log("Ten divided by five equals", divide);
console.log("Ten divided by three equals", float);

Looking at the code above, you have said the following

  • Variables of 10 should be multiplied by 10; hence the first 10*10
  • Variables of 10 Should be divided by 5; hence the second 10/5
  • Variables of 10 Should be divided by 3; hence the third 10/3
  • The wording you have added after console.log is, so the code brings out an output that says Ten times Ten equals 100 and so on

The Modulo Operator

The modulo operator,%Can be used to find the remainder of a division operation between two integer values.

                    

console.log(10 % 3); // 10 divides by 3 three times, with a remainder of 1
console.log(10 % 4); // 10 divides by 4 twice, with a remainder of 2
console.log(10 % 5); // 10 divides by 5 exactly twice, so no remainder

Your output will be 1,2,0 because

  • 10 divides by 3 three times, with a remainder of 1
  • 10 divides by 4 twice, with a remainder of 2
  • 10 divides by 5 exactly twice, so no remainder

Order of operations

Operations take place from left to right in order of precedence, meaning certain operators are prioritized more than others. In general:

  • Any operations placed in parenthesis, (), will take place first
  • Multiplication (*) and division (/) operations will take place before addition (+) and subtraction (-) operations. Remember your BODMAS (Bracket of Division, Multiplication, Addition, and Subtraction) in secondary school?
                    

// * comes before + and - 
var num1 = 10 + 10 * 10 - 10;

// operations in parenthesis have highest priority
var num2 = (10 + 10) * 10 - 10;

// operations occur left to right in order of operator precedence
var num3 = (10 + 10) * (10 - 10);

console.log(num1, num2, num3);

Your output after requesting console.log for number1, number2, number3 = 100, 190, 0 respectively, this should help.

Incrementing/Decrementing Number Values

You can increase or decrease a number’s value by adding, subtracting, multiplying, or dividing it by another number:

                    

var num = 10;

// add 10 to the number
num = num + 10;
console.log("Add 10:", num);

// subtract 5 from the number
num = num - 5;
console.log("Subtract 5:", num);

// multiply the number by 7
num = num * 7;
console.log("Multiply by 7:", num);

// divide the number by 5
num = num / 5;
console.log("Divide by 5:", num);

Your output will be

  • Add 10: 20
  • Subtract 5: 15
  • Multiply by 7: 105
  • Divide by 5: 21

You can simplify the above code by using +=-=*=, and /= shorthand operators to increase or decrease a number’s value, like so:

                    

var num = 10;

// add 10 to the number
num += 10;
console.log("Add 10:", num);

// subtract 5 from the number
num -= 5;
console.log("Subtract 5:", num);

// multiply the number by 7
num *= 7;
console.log("Multiply by 7:", num);

// divide the number by 5
num /= 5;
console.log("Divide by 5:", num);

Your output will be

  • Add 10: 20
  • Subtract 5: 15
  • Multiply by 7: 105
  • Divide by 5: 21

These operations are frequently referred to as incrementing or decrementing a value in an introduction to javascript:

  • in the case of +=, the value is being incremented by a constant value
  • in the case of -=, the value is being decremented by a constant value
  • in the case of *=, the value is being incremented by a multiple
  • in the case of /=, the value is being decremented by a multiple

++ and -- Operators

There are many instances where you will want to increment or decrement a value by one.

                    

var num = 10; 

num += 1;
console.log(num);

num -= 1;
console.log(num);

In this case, you can use the ++ and -- operators as a further shorthand:

                    

var num = 10;

num++;
console.log(num);

num--;
console.log(num);

See you in the next class on Introduction to JavaScript part 1

21 Comments

  1. Sylvester Mbudiche says:

    Thanks for this boss. It’s like you are going to be my new mentor on this journey.

    1. Moshood Owosanya says:

      Thanks for the service to humanity

  2. Hello Mr Akin I am having a hard time running the code for java script or setting up

    1. Yes me too. Pls is there a video to setup the JavaScripts on vs code ?

  3. cuteyorubaboy says:

    thank you so much boss

  4. Thanks so much for this, God bless you

  5. Tayo John says:

    please where and how can i download the videos of your lectures

  6. Ibraheem Bakare says:

    Thanks for the introduction. However, is there any video on this class, pointing to how to set up the javascript and link it to HTML as did for CSS?

  7. Starry🀄 says:

    Thanks for your effort idolo.
    God bless 🧘‍♂️

  8. Olaseni Abibat Ayanfeoluwa says:

    Thank you so much Mr Akin. But I am yet to understand a thing, maybe because I am totally new. Please how can I reach your HTML and CSS.

  9. Thank you very much boss. But I get a it confused somewhere…please make understand better the difference between remainder and floating numbers. Thank you again boss

  10. do we write the javascript in a diff page on vscode or on the same page as html or css

  11. dear teacher please can we get video of this class, thanks.

  12. abdurrazzaq says:

    how do i run the javascript file?

    code already written

  13. Done! Very easy to understand thank you👍🏽

Leave a Reply

Your email address will not be published. Required fields are marked *