DEV Community: Adepoju Ronke

Document Object Model

Adepoju Ronke — Mon, 06 May 2024 20:54:01 +0000

As a beginner, learning html, css and javascript you must at a point ask yourself question like, cant i build a website without javascript or say whats is javascript doing that i cant ignore?

Yes, there is a place for each it, html to add content, CSS to style and Javascript for functionality or interactive and some call it behaviour.
For example, When your alarm wakes you 5am, you either off it or snooze it uisng the button, so think of all the content you see (html), then how the alarm is designed(CSS) i.e interface then when you press the button to left or right and something happened(Javascript).

Another question you will likely asked is how does this behaviour happen? It's simple, javascript accessing the content in HTML by communicating with the browser using the properties, methods, and events in the interface called the Document Object Model, or DOM, it ia a tree-like representation of the web page that gets loaded into the browser.

So here is how DOM works by targeting the content through the element and giving it some instructions to carry out, lets look at DOM structure.

DOM structure

lets say I want to control the tr from javascript using DOM, to access it I go like,

const userTable = document.getElementsByTagName("tr");

and you ahead to give instruction or use it for whatever you want to, which lead us to DOM Properties and method.

DOM make use of properties and method to access object(HTML Elment), Let mention few DOM Methods, Property and how they used.

DOM METHODs

*addEventListener()
*

element.addEventListener("click", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

appendChild()

const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

DOM Properties

CSS Cascade, Selector and Specificity.

Adepoju Ronke — Sun, 21 Apr 2024 22:58:29 +0000

The backbone of website development includes HTML, CSS and a programming language, which JavaScript take lead out of many. HTML basically deal with the content on the website while CSS focus on styling the content to make it appealing and JavaScript focus on functionality. Lets look into CSS, to start with, CSS stands for Cascading Styling Sheet and the topic is to explain CSS Cascade, CSS Selector and CSS Specificity. Lets go
CSS Cascading is set of rules that matters to the result you get. If two rules are set to a particular tag which one will work depends on the rules.

CSS Selector is the way of selecting html elemnt, and styling it.
Ways include, tag selector, class selector, ID selector... e.t.c

p {
  text-align: center;
  color: red;
}

The above is element selector but what happens when we have something like this

<!DOCTYPE html>
<html>
<head>
<style>
.center{
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will be red and center-aligned</h1>
<p class="center">This paragraph will be red and center-aligned.</p> 

</body>
</html>

but if i want to it to take effect on P alone, then we have it as

p {
  text-align: center;
  color: red;
}

The above is element selector but what happens when we have something like this

<!DOCTYPE html>
<html>
<head>
<style>
p.center{
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p> 

</body>
</html>

The H1 is not affected because of more specification given to the selector.

CSS Specificity is selecting with more specification which you want to style having the rule in mind(Cascading). It what give priority to which rules to be override when we have more than one to rule to an element, just like the example above.

The specificity can be calculated by you and this helps you to know what and what is working or not working from the code you wrote, to calculate this type of selectors and how you combine it caries weight. Check this Specificity Calculator, need some help? check this out.

If you find this helpful, leave a comment. Also, have any opinion or contribution drop it in comment section. Thanks

History of Internet

Adepoju Ronke — Fri, 05 Apr 2024 06:47:08 +0000

Have you thought of understanding what internet was? or have you concluded it is some magic happening in the 21st century, either way lets drive into history of internet.
Internet was a solution birth out of war, i doubt you believe that. It is birth out of communication solution proposed back then in the cold war such that computers can be connected together to avoid travelling to the location of the computer as it was not movable back then.
To achieved different computers communication, TCP/IP was developed and January 1st, 1983 stands as the birth of the internet. Internet was actually a shot form of internet networking. Lets look into TCP/Ip and more.

TCP/IP with the full meaning of Transmission Control Protocol and Internet Protocol is a set of protocol that makes the internet possible which involves a BREAKDOWN, ADDRESSED, TRANSMITTED, ROUTED, RECEIVED, dont be confused. For example, a class teacher can be a perfect example he breaks the courses to different session(BREAKDOWN), then passed(TRANSMITTED) it across to you (ADDRESSED), the route which is the class teacher explaining different way to make you understand the same concept and lastly you received. Transmition can be done using packet and network packet is a basic unit data thats grouped together and transffered.

Domain Names is another important thing you want to look into when it comes to internet. It is a mechanism for naming resources in such a way that the name is usable instead of mastering the IP Address, see domain names as a simple/nickname name you can your friend instead of that long name given to him by hes parent.

Lets get familair with FTP,HTTP and HTTPs. FTP means File Transfer Protocol is a way to download, upload and transfer files from on location to another on the internet and bewteen computers. HTTP on the other end is an application layer protocol designed to transfer information bewteen networked devices and runs on top of other layes of the network protocol stack. HTTPs is the secured version of HTTP, which is the protocol used to send data betwween a web broswer and a website. To give of FTP,HTTP and HTTPs think of uploading your document on drive and for HTTP and HTTPs thing of your instrgram account without a password or your phone which means anyone can do whatever they like with it(HTTP), unlike when there is a security code(HTTPs).

In summary, we computers can communitcate together today, irrpective of there distance due to internet and Protocols serve as the backbone of data transimission.