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

Understanding the DOM

One of the key reasons we use Javascript to achieve interactivity is because it enables us to manipulate the Document-Object Model (often known as the DOM for short).

Note these:

JavaScript is the most widely used programming language on the world.

JavaScript is the Web programming language.

JavaScript is simple to grasp.

This tutorial will teach you JavaScript from the ground up.

We may use Javascript to modify the Document Object Model (DOM) to accomplish tasks such as:

  • Make modifications to existing HTML components.
  • Modify the characteristics of HTML elements.
  • CSS stylesheets for HTML components may be changed or added.
  • HTML components may be added and deleted as needed.

Before we go into the basics of javascript, let’s look at how we can use it to add interactivity to our web pages by taking data from the Document Object Model (DOM). Don’t worry if you don’t totally understand what the code is doing at this time.

For example, let’s change HTML, Content with JavaScript

getElementById() is one of numerous JavaScript HTML methods.

The following example “finds” an HTML element (with id=”LearningJS”) and changes its content (innerHTML) to “Hello JavaScript”:

document.getElementById("LearningJS").innerHTML = "Hello JavaScript";

Check this:

See the Pen
Untitled
by aptLearn (@aptlearn)
on CodePen.40347

Looks like magic? Oh well it is not, let me explain what happened here.

  • We wanted to manipulate the content inside this <p> tag and change it to something else entirely

<p id="LearningJS">JavaScript can change HTML content.</p>

  • But we wanted this to happen only when the user clicks a button, so we created a <button> tag, we specified the type of button it is by using the “type” attribute we learned earlier. hence type=”button”
  • We then create a Javascript function called “onclick” we will use this to specify an action we want the button to take when it is clicked.
  • Recalled the <p> tag content was what we intended to modify on the action of a button click, and we have given it an id of ‘LearningJS”.
  • So, we will select this <p> tag id using “document.getElementByID()” and we will put the id which is LearningJS inside the bracket making it document.getElementByID(LearningJS)
  • Lastly, we will display what we wish to replace the initial content of the <p> tag using ‘.innerHTML‘. We intend to display, (Hello JavaScript).
  • So onclick=’document.getElementByID(LearningJS).innerHTML=”Hello JavaScript”. Then we’ll close the opening button tag ‘>

hence

  • <button type=”button” onclick=’document.getElementByID(LearningJS).innerHTML=”Hello JavaScript”‘>
  • and Write the text we wish to appear on the button which is “Click Me
  • And lastly, close the main button tag with </button>

The full code

<button type=”button” onclick=’document.getElementById(“LearningJS”).innerHTML = “Hello JavaScript!”‘>Click Me!</button>

<button type="button" onclick='document.getElementById("LearningJS").innerHTML = "Hello JavaScript!"'>Click Me!</button>

About the color, Check the CSS code.


Not so hard now is it? Let us look at another example

You may fetch an element from the JavaScript Document Object Model (DOM) using the querySelector and getElementById functions. However, each approach has its own method of how they are applied.

This lesson dissects the most typical use cases for querySelector and getElementById. I also compare these two approaches and bring you through a short example of how each works. First, let’s talk about getElementById.

What exactly is getElementById?

The term derives from the fact that the getElementById() function gets an element based on its ID property.

This approach is more limited than querySelector in that it can only get items based on their unique ID.

If you simply want to obtain one element from a web page, use this approach. This is due to the fact that HTML IDs must be unique to each element. An ID cannot be used to refer to two components on a web page.

Let’s use the getElementById() selection to get an element. First, let’s create the HTML code from which we’ll choose one element:

<button id="buttons">
	<h2>This is a button</h2>
</button>

Next, let’s write the JavaScript code to select an element from the DOM just like we did in the previous lesson:

const button = document.getElementById("buttons");

We use the JavaScript statement to retrieve the element whose ID is equal to “buttons”. This is the <button> element where we display a button on our web page.


Let’s talk about querySelector

 

What exactly is querySelector?

The querySelector() function in JavaScript allows you to fetch an element from the DOM or a web page using a CSS selector. This method has a sister function named querySelectorAll() that picks all the items from the DOM that match a certain identifier.

These two strategies are quite scalable. This is due to the fact that CSS selector syntax allows you to choose any element on a web page.

You don’t have to worry about being limited to simply selecting items by class or IDs while using querySelector, as you would if you used getElementById() or getElementsByClassName().

These strategies are especially handy if the components you’re choosing are comparable to those in your CSS stylesheet.

Let’s look at the querySelector method now. We’ll begin by creating an HTML element that we’ll be able to choose later in JavaScript:

<p class="Livescore">Open Livestream</p>

We have defined a paragraph of text with the class name “Livescore”. Next, let’s select this paragraph querySelector() using the method.

const DailyLiveScore = document.querySelector(".Livescore");

This code lets us select the first element whose class is equal to “Livescore”. The “.” denotes that we want to select a class. If we had two elements with the class “Livescore”, we could use the querySelector() method to retrieve them both.


So what is the difference between querySelector() & getElementById() ?

 

Recall that in the previous lesson, we talked about the introduction to DOM (Document Object Model). Now, we will be learning how to manipulate it further.

Let’s take a look at this example.

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

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

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

See the Pen
Untitled
by aptLearn (@aptlearn)
on CodePen.40347

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

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

As you have learned in the previous lesson, Declaring a variable is accomplished through the usage of the let, var, or const statements.

Going forward, I will be using them interchangeably in order for you to understand their use cases. Still, in this particular example, I will be using const to declare the variables.

A variable is handy for storing information that we may wish to obtain later.

Recalled that the code which appears following the equals symbol (=) document.querySelector assigns a value to a variable.

It does this by selecting the first thing on the page that matches the selection contained inside the quotation marks and inserting it into 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, even saving the <button> is a tedious procedure. The next step is to figure out how to interact with the <button> element in question.

One of the most common methods is to include an event listener in our code, which informs our computer to perform code anytime 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 inside a function when a user clicks on the button using (onclick).

REMEMBER: 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 MOVE straight to JavaScript Variable Declarations, Access to the full course is free here.

25 Comments

    1. Nice one big man, I think I’m lost journey someone help me to understand

  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👍🏽

  14. Thanks for the lessons, really appreciate.

  15. Lateef Yusuf says:

    Thanks for service to humanity, what a good introduction to JavaScript

Leave a Reply

Your email address will not be published.