DEV Community: Byali Macqueline

DOM in JavaScript

Byali Macqueline — Wed, 22 Jan 2025 09:06:13 +0000

DOCUMENT OBJECT MODEL (DOM)

The DOM API is a programming interface for web documents. It represents the page so that programs can change the document structure, style and content.

The DOM represents the document as a tree of objects; each object represents a part of the page.

DOM Manipulations in JavaScript

These are some of the basics we can consider while implementing DOM in JavaScript;

1.Query selector; This is a greedy selector.It selects the first element which has been specified.

Forexample;

querySelector("h1")

This will target the first h1 element throughout the whole html document

2.QueryselectorAll: This targets all h3 elements in the html document.

Forexample;

querySelectorAll("h3")

These will be output in a node list in the console.

NB: Node list looks like an array but the two are significantly different

A nodelist is a browser API yet an array is a JavaScript API.
In short, node list does not belong to JavaScript, for that case , loops can not be implemented on it.

Also, getElementbyTagName() and QueryselectorAll are not JavaScript methods but rather browser APIs.

INNER HTML AND INNER TEXT

It is advisable to use inner html unlike inner text because, in such a case, modifications of your script by other people would be limited.

Ways of targetting elements

We have many ways of targeting or selecting elements we want to manipulate in our document.

Some of these ways include:

By Id
By Name
By Class
By Tag
By Tag name

NB: We never use Id and Class to select anything from the browser.

We therefore use the Queryselector.

Key Concepts in JavaScript.

a) HOISTING:Elaborating this using an example below,

Forexample:

1.Console.log(a); 2.var a; 3.a = 5; 4.Console log a;

During execution in the console, a is going to be output as undefined for line number 1.

This means that even though we didn't explicitly declare a initially, it was "magically" declared in the browser , and this is called hoisting.

Normally, for line number 4, the output would be 5 since a was explicitly initialized.

b) CLOSURE:This is created every time a function is created.

c) GLOBAL EXECUTION CONTEXT:The Global Execution Context is the environment where your JavaScript code runs when it is not inside any function.

d) CALL STACK:When a script calls a function, the interpreter adds it to the stack and then starts carrying out the function

My Github link
Linked in

Arrays in JavaScript

Byali Macqueline — Sat, 18 Jan 2025 17:05:25 +0000

Array methods

Here, we have some array methods such as ;

1.push(): Used to insert values into an existing array, though the value will be added at the end 9f the array.

let numbers = [1,2,3]; Console. log(numbers.push(4));

The output here would be: [1, 2, 3, 4]

2.slice(): Used to get a given range of values from an array at their specific indexes.

let numbers = [1,2,3,4,5]; Console. log(numbers.slice(1, 4));

The range here is from 1 to 4, thus the last value at index 4 is not going to be among the values in the output.

The output here would be;
[1, 2, 3]

3.splice(): Inserts values at specific indexes accordingly as aligned by the user.

Forexample;
let fruits =['apple' ,'mango','orange','peer']; fruits . splice(2,0,'pawpaw', 'strawberries'); console.log (fruits);

Here, the 2-From where i will start.This means at index 2, we insert the first value(pawpaw) into the array, then ,0-how many we shall replace or delete. Therefore,0 means after insertion at 2, we insert strawberries at index 0, hence remove 0 items next to pawpaw.

The output here would be;

['apple' ,'mango','pawpaw', 'strawberries','orange','peer']

Incase we used 1 instead of 0, we would remove orange hence output would be;

'apple','mango','pawpaw','strawberries','peer'];

4.concatenation(); This can be used to join or add 2 or more arrays to form a single array.

Forexample;

let arr1=[1,2,3,4]; let arr2=[5,6 ,7]; console.log (arr1.concat(arr2))

Output:[1,2,3,4,5,6,7]

Let arr3=[8,9] Console.log (arr1.concat(arr2,arr3))

Output here would be:[1,2,3,4,5, 6, 7, 8, 9]

5.fill(): This helps us to add a value into the array in a given range.

let arr4 = [1,2,3,4]; arr4.fill('Anurag', 2, 4); console.log(arr4);

Here Output would be: [1,'Anurag' 4]

6.shift(): This shifts the first item of an array and removes it.

Forexample;

let arr4 = [1,2,3,4]; arr4.shift(); console.log (arr4);

Output here would be: [2,3,4]

7.indexOf(): This helps us to find the index at which a specific value is.

Forexample;

let arr4 = [1,2,3,4]; console.log (arr4.indexOf(3));

Output here would be 2 as the value 3 is stored at index 2.

8.lastIndexOf(): This outputs the index of the last value in an array.

Forexample;

let arr4 = [1,2,3,4]; console.log (arr4.lastIndexOf());

9.include(): This method is used to determine whether it is true or false a particular value is stored at that specific index.

Forexample;

let arr4 = [1,2,3,4]; arr4.include(4,2);

Output here would be false since value 4 is not stored at index 2.

10.pop(): Used to remove a value from the end of the array.

Forexample;

let arr4 = [1,2,3,4]; arr4.pop(); console.log(arr4);

Output here would be; [1,2,3]

11.join(): You can use any string or anything to join or add the values in an array together.

Forexample;

let arr4 = [1,2,3]; console.log (arr4.join('and'));

Output here would be; 1 and 2 and 3.

13.unshift(): This adds elements to the beginning of an array and returns the new length of the array.

My Github link
My Linked in

JavaScript Basics I learnt today on this developer journey.

Byali Macqueline — Sun, 29 Dec 2024 17:47:56 +0000

JAVASCRIPT BASICS

Datatypes
Values
Variables
Conditions
Operators
Loops
Functions

HISTORY OF JAVASCRIPT

Initially, developers wanted something which could bring functionality to the browser; a scripting Language.

Code written could only be supportable in the browser from which it was written. Therefore, to come up with a solution for this, they came up with ECMA Script. ECMA script was a set of rules to be followed while coding in a browser. This wasn't compatible though, and ES6 was introduced. ES6 was a modified set of rules or instructions to govern coding in the browsers. Mocha(1995) to LiveScript (1996) to JavaScript (till date).Browsers during those back days only supported CSS and HTML only.

There were only 2 browsers in the ancient days, that is to say; internet Explorer and Netscape browser.

The JavaScript Basics

1.Dataypes(values)

Forexample:1.number(whole number and decimal number) such as 1, 6.4; 2.string forexample "leya".

These have a single value.

arrays

Here we have index and the value. To access any value. We use the help of index.

Objects
We have key and value.

Forexample: Fname:Mackline, lname:leya

Objects have more than one value. Here you get power to create your own key for any value you be having yet in arrays you will always use index which is always constant and can't be changed.

Forexample;let bankaccount ={fname:'leya', lname:'Mackline', mobileno:989372, }; Console.log(numbers); Console.log (numbers.lname);
Therefore, to access a particular object, we can use a dot symbol in between the objects.

2.Variables
Incase we want to store some of our values, we can use variables. Variables are folders or placeholder for a value.

Three different ways to declare a variable.

1.var x = 50; We should minimumly use var due to memory convenience.
2.let y = 50; *We can use it for changing values such as account balance ...
3.const z = 'leya';we use const when we don't want to change the value of that variable.
Forexample:

A var z to store a bank account number since it is a constant one.Incase we want to print something on the screen, we then use the statement below in the terminal; console.log(object);
That is to say; console.log(fname) ;We can also use template literal.That is to say;
console.log(my current first name is ${fname});

3.Operators
These come in when we are going to do some calculations. That is to say, calculations.

Examples of operators

1.assignment operators [=]
2.arithmetic operators [+, ×, ÷, %]
3.comparison operators [>, <, >=, <=, == which compares only values and ==== which compares both value and datatype Forexample; x=5; y='5';console.log(x==y) is true yet console.log(x===y) is false].

PICKUPS;

const accno;accno = "45689943";

This would bring an error because accno being a constant should be initialized on declaration.
Also; const accno = 4694647855 ; accno = 1345950;
This would also output an error in the output because accno being a constant is initialized once and for all.

4.Decisions
These are also called conditions. We can use :
a) If else statements: here the statement in else is executed if all other statements in if and else, if blocks are not true.

b) Switch case

Here the default works like the else as in in if else conditional statements. We also use break in the switch cases when we have to go out of the switch case loop.

NB:

Both if else and switch case statements do the same work, but if else is commonly used.

c) Ternary operators/, operations

These can be done by the use of only 2 operators, that is to say, ? and the ;. Anything written after the (?) is true and whatever is written after colon is false , and everything before the ? is a condition.That is to say; condition ? true ; false.

5.Loops

These can help in iteration of something such as a variable like array, to its end.

Some are examples of loops we have

i) do while loop:Here, atleast one statement is executed in the do block as an output. This is because the condition in such a loop is written at the end of the loop.
let a=5; do{ console.log('The value of a is;', a); a++; }while(a<=4);

ii) while loop;Here, there can be also no statement executed as long as the condition is not true.

For example:
Let a = 6; while(a<=4){ Console. log('value of a is: ', a ); a ++; }

iii) for loop

For example;for(let a=0; a<=5; a++){ Console. log('The value for a is:', a); }

Github
Linkedin
Hashnode

Git And Markdown Basics

Byali Macqueline — Tue, 24 Dec 2024 09:47:10 +0000

GIT AND MARKDOWN
GIT
This is the most popular version control system in the world. It records and tracks changes made in code overtime in a special Database called Repository.

A version control system can either be centralized or distributed. Whereas a centralized version control system has advantages, it is not that efficient because of its single point of failure. Examples of centralized version control system include;-subversion, team version.

Therefore, the distributed control version system is better. Examples here include; -git -Mercurial Git is the most popular because it is free, open source, supernatural and scalable.

Using Git
There are different ways we can use git. Some of these ways include;

         -The command line 

         -Code editors and IDEs 

          -Graphical User Interfaces

In this, we have an extension we can install and use, called Git lens -GUI interfaces for example GitKraken, Sourcetree. At the end of the day, we use the right tool. And thus we commonly use the command line. Some of the commands used include;

-git --version; used to checkout the version of git you are using.

-git init; used for initialization of git.

-git status; checks the status of the files in the folder your in. It shows whether these files are being tracked or not.

-git add . ; For all the untracked files, this command adds such files such that they can be tracked(monitored) during commit to the repository.

-git commit - m "message"; save all the changes that have been made.. m means the message you would like to send as a "heading" to your folder in the repo.

-git branch-m Main; makes sure that everything goes to the main branch.

-git remote origin url; at the url point, you copy and paste in the url for the repository from ,say, Github.

-git push -u origin main; when you want to push everything to the branch.

We prefer to commonly use the command line hence write commands in git Bash. To use this we have to first customize Git after installing it with your username and email. We can specify these settings at different levels as stated below;

-System; settings here would apply to all the users.

-Global; The settings here apply to all repositories of the current user.

-Local; The settings here apply to the current repository only.

Each commit contains a complete snapshot of the project and this helps us to easily go back and check or access the previous version of the same project.

To remove all files, we can use ; git rm.

TOOLS WHICH USE GIT
Github

Bitbucket

Gitlab

GITHUB
This is a tool which works on git.

 Basic Understanding of the power of git Git as a version controlling system.

If you were building a website, with different versions starting from version,v1 . As time goes on, you keep modifying your website hence advancing to higher versions, that is, v2 and v3. After coming up with version, v4 of this project, the website certainly fails to load the webpages and seems faulty probably due to the new changes made . This is where the power of git comes in to play. Using git checkout v3**, you can remove all the modifications made on v4 and be able to access a working website of v3 again. Thereby, this making git, a version controlling system.

MARKDOWN Readme.md;
This is like a conclusion of whatever is inside your repository. It is a summary of what is inside the repository. A repository is a folder which has or stores all your content. Just like a database.

Symbols here include;

-hashtag symbol for headings respectively, that is ; #h1, ##h2,###h3 ,######h6 ,h for making h italic ,h for making h bold ,h for making h have a strike through or one can call it for deletion of h message used for links -Then for images in markdown, we use; >

CONCLUSION: We can use these symbols when writing a readme.md in github to show a summary of all the content we have pushed in a give repository.

Github

dev.To

VANILLA CSS BASICS YOU SHOULD KNOW

Byali Macqueline — Thu, 19 Dec 2024 23:28:14 +0000

BASICS OF CSS (Cascading Style Sheets)

Here in CSS, we get a target and pick up that specific element which we want to work on, from the web page.

How CSS works.

CSS has mainly 2 parts, that is to say;

Selectors
Declaration:This is also divided into : property and then, value.

THREE LEVELS OF CSS;

Inline CSS

   * Here, CSS is used within the target element.
   * For example:`<p color="white"> This is inline CSS </p>`

Internal CSS

  * Here, CSS is written within the html file above the body tag and within the head tag.
  * This is done with the help of `<style>` tags.

External CSS

For this case, CSS file is linked to the index.html file.
When compiling the CSS code, CSS also bases on priority. In such case, inline CSS always has the highest priority, followed by internal CSS then external CSS.

CSS SELECTORS

These selectors enable us to know how to select elements from the html file. For the CSS selectors, we just need to know the type of selector we want to use, and also what it does to the target element.

The following are some of the common CSS selectors used.

Universal Selector: When such selector is used, everything in the html file (all the html tags) is targeted or selected.

For example:
*{ background-color: grey }
This means that all the webpage will have a background color of grey

Individual Selector

This targets individual elements for example, <p> targets all paragraphs in the index.html accordingly.
In case you want each paragraph to have its own color or look, we can then go for *Class or Id selectors.

Class and Id Selectors

For the class selectors, we use a dot while applying it .Then for an id selector, we use a hash (#) when applying it.

For example;
.warning{ align items: center; }

An id name should not be applied or used multiple times, although, even when you do so, there would be no error thrown in our file during compilation. But this would be a bad coding practice.
Yet for a class name, you can use the same name multiple number of times .

Child Selector

In this selector, we target the child of the parent element.
For example: nav ul{ display: flex }
This means we are targeting the ul element which is a child of the parent, nav.

We also have other selectors

Like the nth child selector.

The most commonly used selectors are the class and id selectors

NOTE:

When using colors for CSS, it is always best practice to use standard color codes (like #4d4d4d) unlike word colors like red or green.
This is because, different browsers view the colors in different ways, but if color codes are used, this acts like a standard overall color which is viewed as the same color even in different browsers.

MARGIN AND PADDING.

Margin is the amount of space from the outside and padding is the amount of space from inside where the text is.*

Note: We only apply FOCUS to input tags.

POSITIONS ON CSS

Absolute;

This gives position of the target depending on the parent webpage, that is, border of the whole web page.

Relative;

This gives position to the target element depending on the body or boxes in which the current target is ,that is, depending on the original position of the target.

Sticky;

This gives position to the target, and after this, it will not move to another position.

Fixed;

After applying this, the target won't be changed or modified. It would be in this position fixed as it had been allocated.

FLEX BOXES

When flex is applied, it means that the target elements can be placed in only one horizontal dimension.

Therefore, flex is unidirectional. When using flex, we flex the parent. And based on the parent, the child will behave.

Incase we want dynamic display, this is where we can use grid.

Grid is therefore bidirectional.

CONCLUSION

We use CSS to modify our webpages as it helps us to easily style our text.

HTML Basics: What I Learned in My First Lesson

Byali Macqueline — Sat, 09 Nov 2024 09:32:11 +0000

My First HTML Lesson: The Basics of Building Web Pages

Starting with HTML can be both exciting and overwhelming! Here’s a quick look at what I learned in my very first HTML lesson.

What is HTML?

HTML (Hypertext Markup Language) is the backbone of any web page. It structures the content we see on websites and allows us to create text, images, links, and more.

Key Takeaways from My First Lesson

-Index.html file:When creating an html file, we first create an a file called index.html. One can also call name it as index.htm .

Why index.html and not default.html or anything.html

This is because index.html can easily be read by the server, although default.html was also being used in the back days and it faded out, as many people adopted the index, html.

The Apache2 server

There are many servers except this, for example GoDaddy, Nginx, Caddy, Lighttpd and others.
But the most commonly used one is the Apache HTTP server.
We also have the cPanel server which has default folders give to us by Apache var/html/...
Also, the Nginx server gives us the same services as cPanel.
One can simply define a server as software which serve since they allow users to access different websites.

When writing index.html file, we should consider following the industry standard, that is writing with speed
and this can be done through using Emmet or any plugin tool.

What's happening behind the server

*When a client makes a request in a web browser, the server responds to the request by checking in its local storage for any matching information of what the client wants. The server retrieves them, and then displays them.

How the live server extension is able to change the saved document after refreshing the local host

The live server extension version is available depending on which vs code version you are using. Other text Editors can be: sublimetxt, fleet, code blocks and so many others.

HTML CODE

!DOCTYPE html tag
*Browsers were designed to follow up these files, therefore one has to explicitly show the type of files the browser is dealing with, for storage.

html lang = en tag
*We also specify the language in which we are writing our code. This helps the web browser to know in which language it would have to serve or run, for this case, it would be English language.

head tag
*Content inside this tag can not be seen on a website when opened

body tag
*All the content written within this tag is explicitly shown and can be viewed by other people who may access the website.

Any website is a good one if it can be easily accessed by anyone and also enhances readability, even to screen readers.

Basic Tags: I learned about the fundamental tags :
Creating Headings and Paragraphs: Using <h1> to <h6> for headings and <p> for paragraphs. These also have attributes or properties that can be used with them, for example: title,
that is,h1 title="Html code".For the heading, this title will only be seen when you hoover over the text within the h1 tag.
We can also use lorem[number of words] in paragraphs, that is,
p lorem200 p and this will display 200 words of text in your paragraph.
Adding Links, Line Breaks and Images: I practiced embedding images with <img src="URL"> and creating links with<a href="URL">.
br gives us a line break.

For the **img* tag, we have the alt attribute, it is so useful in a way that if the src-source of the image is wrong, we can et to know the exact point at the the image is not showing. This is especially most useful when we are are having a large document with many images.
We should also consider having size attribute for all images as a good practice.
*We use *srcset when having more than one image for a given img tag.
if I have another html file or any other file, and I want it to be accessed by anyone who will visit my website, then I can use the *anchor tag,a* in my index.html file.

Some tags give line spaces when used(br), unlike others(h1,h2)

Learning HTML is just the start of my web development journey, but it’s a crucial step!

Follow along as I dive deeper into HTML and beyond!

Connect with Me

GitHub: github.com/macquelineleya
LinkedIn: linkedin.com/in/macquelineByali