DEV Community: Hanna

Array, Array methods

Hanna — Fri, 08 Oct 2021 12:16:20 +0000

ARRAY

An array is a special variable, which can hold more than one value at a time.

To create a new array:

const array = new Array();

const array = [];

Arrays can contain different types of values

let array = [
  "John",
  {
    type: "JS",
    age: 36
  },
  true,
  function() {
    console.log('Hello, I am John');
  }
];
console.log(array);
console.log(array[0]);
console.log(array[1].type);
console.log(array[2]);
array[3]();

Result:

FOREACH ()

The forEach() method calls a function once for each element in an array, in order.
forEach() is not executed for array elements without values.

arr.forEach(function callback(currentValue, index, array) {
    //your iterator
}[, thisArg]);
index, array, thisArg - optional

ex.

const arr = ['a', 'b', 'c'];
arr.forEach(element => console.log(element)); 
//expected output a, b, c

ex.

const numbers = [65, 44, 12, 4];
numbers.forEach(function myFunction(item, index, arr) {
  arr[index] = item * 10;
}) 
console.log(numbers) // 650, 440, 120, 40

PUSH()

push() adds new items to the end of an array.
push() changes the length of the array and returns the new length.

let arr = [ 1, 2, 3, 4,];
arr.push(5, 6);
console.log(arr);
// result [ 1, 2, 3, 4, 5, 6 ]

UNSHIFT()

unshift() adds items at the beginning of an array.

let arr = [ 1, 2, 3, 4,];
arr.unshift(5, 6);
console.log(arr);
// result [ 5, 6, 1, 2, 3, 4 ]

SHIFT()

shift() removes the first item of an array.

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

POP()

pop() removes the last element of an array.

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

SPLICE()

splice() adds and/or removes array elements.

array.splice(index, howmany, item1, ....., itemX)

CONCAT()

concat() concatenates (joins) two or more arrays. concat() does not change the existing arrays, but returns a new array, containing the values of the joined arrays.

let arr = [ 1, 2, 3,];
let arr1 = arr.concat(10);
console.log(arr1);
// result [ 1, 2, 3, 10 ]

INCLUDES() INDEXOF()

includes() determines whether an array contains a given element and returns either true or false.
indexOf() searches an array for a specified item and returns its position. indexOf() returns -1 if the item is not found.

let arr = [ 1, 2, 3, 4, 10, 15];
console.log(arr.indexOf(3));
console.log(arr.includes(15));
// result 2 true

MAP()

The map() method creates a new array with the results of calling a function for every array element.
The map() method calls the provided function once for each element in an array, in order.
map() does not execute the function for empty elements.
map() does not change the original array.

ex.

const persons = [
  {firstname : "Malcom", lastname: "Reynolds"},
  {firstname : "Kaylee", lastname: "Frye"},
  {firstname : "Jayne", lastname: "Cobb"}
];
persons.map(function getFullName(item) {
  return [item.firstname,item.lastname].join(" ");
})

FILTER()

The filter() method creates an array filled with all array elements that pass a test (provided by a function).
filter() does not execute the function for empty array elements.
filter() does not change the original array.

ex.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);

REDUCE()

reduce() executes a reducer function for each value of an array.

let arr = [ 1, 2, 3, 4, 10, 15];
let sum = arr.reduce((prev, item) => {
    return item + prev
}, 0);
console.log(sum);
// result 35

Git and GitHub for beginner

Hanna — Fri, 24 Sep 2021 12:07:33 +0000

Familiarity with Git caused some uncertainty. So I decided to make a list and a description of the git commands for the terminal.
Here I use a terminal (you can also use a terminal in VS Code), pre-installed Git (here) and my page on GitHub.

What is Git and why do we need to use it?
Git is a distributed free and open source version control program. It is a program that is needed for developers to be able to keep track of changes to program code made by other developers, and be able to make consequential changes if needed.

What is GitHub?

GitHub is a web service for software development where all participants have the opportunity to save their changes to an ongoing project and get an overview of how the project is progressing. So developers should be able to handle version management with the help of git both locally and on their web service (externally).
By having git installed on your local device, you can handle version management both locally and externally on GitHub. Should your program code disappear locally for any reason, you can always find the latest uploaded code on GitHub.

Git commands:

Here are the commands that will be described in the post:

git --version;
git --help;
git --init;
git status;
git add .;
git rm --cached filename;
git commit -m "";
creating a .gitignore file;
git branch;
git branch branchname;
git branch -D branchname;
git checkout branchname;
git checkout -b branchname;
git merge branchname;
git remote add origin https://... .git;
git push -u origin branchname;

Let's start!

git --version

Prints the Git suite version that the git program came from.

git --help

Prints the synopsis and a list of the most commonly used commands.

Next we need to create a folder and files in VS Code that we would like to commit. I have the folder "test" and two files "index.html" and "index.js".

git --init

Create an empty Git repository or reinitialize an existing one.

cd .git
ls

With help of these commands we can see what is in the folder git. In this folder will be all information that needs to control version.

git status

Show the working tree status.
Here we see that git tells us that there are two files that it does not monitor.

git add index.js OR git add . (to add all files)

To add a file(s) as it looks now to your next commit (stage). If you want to delete one of the files then you can do it with the following command.

git rm --cached filename

Thus git stops following the index.js file. But now I add this file again.

If at this stage we will make changes to the file in VS Code, it can also be seen with the command git status.
We see that the index.html file has been modified, so we need to add it again using the git add index.html command.

git commit -m ""

This command record changes to the repository. In quotes we write a comment to our commit.

.gitignore

If we have certain files in a folder that we do not want to commit, then in VS Code you can create a special .gitignore file in which you can write the names of files or folders that we do not want to commit. It will look like this.
The .gitignore file must be committed.

git branch

We use this command to see which branch we are in now.

git branch branchname

With this command we can create an additional branch. It is needed when several people are working on the project.

git branch -D branchname

You can use this command to delete a branch.

git checkout branchname

With this command you can go to the branch.

git checkout -b new

With this command you can immediately create a new branch and go to it.

git merge branchname

This command is used to integrate changes from another branch.

Next, we need to work with GitHub (respectively, you need to be registered there).
We create a new Repository, where we prescribe its name and choose public or private.

git remote add origin https://... .git
git push -u origin branchname

Next, you need to run two more commands in the terminal, which are listed on GitHub. They can simply be copied to the terminal. The only thing you need to consider is the name of the branch in git push -u origin main. In my case it will be git push -u origin master.

CONGRATULATIONS! Now the files on GitHub.
Now you need to remember that when you make any changes to the files, you need to commit them.

Once the file is committed, it can be seen on GitHub.
You need to go to the file page and click on the "commits" button.
Next you need to click on the desired commit code.
Here we see the changes made to the file. Red - what has changed. Green indicates changes.

Thank you for your attention! Hope this is helpful.

JavaScript Classes

Hanna — Thu, 23 Sep 2021 10:45:56 +0000

A bit about class in js.

Class Methods

class Animal {
  constructor(name, legs) { ... }
  speech() { ... }
  numberOfLegs() { ... }
}
const dog = new Animal();
const cat = new Animal();
const spider = new Animal();

The code above defines a class ClassName. The curly braces { } delimit the class body.
The class becomes useful when you create an instance of the class (dog, cat, spider). An instance is an object containing data and behavior described by the class.

ALWAYS add a method named constructor(). It is executed automatically when a new object is created and is used to initialize object properties.
Animal’s constructor has two parameters name and legs, which is used to set the initial value of the fields this.name, this.legs.

new Animal() creates instances of the Animal class.

                    SO...

"CLASS is used to describe one or more objects. 
It serves as a template for creating, or 
instantiating, specific objects within a program. 
While each object is created from a single class, 
one class can be used to instantiate multiple 
objects."

JavaScript

Hanna — Tue, 21 Sep 2021 22:01:09 +0000

Well, that's the beginning. Here are some examples of using JavaScript.

document.getElementById()

Returns the element that has the ID attribute with the specified value.
This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element on your document.

document.createElement()
.innerHTML
.innerText

Creates an Element Node with the specified name.
Both innerText and innerHTML return internal part of an HTML element.
The only difference between innerText and innerHTML is that: innerText return HTML element (entire code) as a string and display HTML element on the screen (as HTML code), while innerHTML return only text content of the HTML element.

document.querySelector()

querySelector() returns the first element that matches a specified CSS selector(s) in the document. querySelector() only returns the first element that matches the specified selectors. To return all the matches, use querySelectorAll() instead.

document.addEventListener()
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);

Attaches an event handler to the document.
Use document.removeEventListener() to remove an event handler that has been attached with document.addEventListener(). Use element.addEventListener() to attach an event handler to a specified element.

document.appendChild()

Appends a node as the last child of a node. This method can be used to move an element from one element to another.

SCRIPT in the HEAD or in the BODY of HTML

When JavaScript is placed at the bottom of HTML body, it gives the HTML time to load before any of the JavaScript loads, which can prevent errors, and speed up website response time.
But putting JavaScript in the head of HTML doesn’t ALWAYS cause errors.

HTML tags (for beginner)

Hanna — Tue, 21 Sep 2021 10:03:25 +0000

In this post, I will describe the HTML tags a bit to better remember them.

b Defines bold text.
strong Defines important text.
 Defines a comment.
<!DOCTYPE> Defines the document type.
html.../html Defines the root of an HTML document.
head.../head is a container for metadata. (data about data) and is placed between the html tag and the body tag.
- title.../title (required in every HTML document)
- style.../style
- base
- link
- meta
  - Define keywords for search engines.
  meta name="keywords" content="HTML, CSS, JavaScript"
  - Define a description of your web page.
  meta name="description" content="Free Web tutorials for HTML and CSS"
  - Define the author of a page.
  meta name="author" content="John Doe"
  - Refresh document every 30 seconds.
  meta http-equiv="refresh" content="30"
  - Setting the viewport to make your website look good on all devices.
  meta name="viewport" content="width=device-width, initial-scale=1.0"
- script.../script
- noscript.../noscript
title.../title defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
body.../body Defines the document's body.
h1-h6.../h1-/h6 Defines HTML headings.
div.../div Defines a section in a document.
span.../span Defines a section in a document. Span is an inline container used to mark up a part of a text, or a part of a document.

!!!The span tag is much like the div element, but div is a block-level element and span is an inline element.
img is used to embed an image in an HTML page
img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"
- src Specifies the path to the image.
- alt Specifies an alternate text for the image, if the image for some reason cannot be displayed.
- width/height Specifies the width/height of an image.
br Defines a single line break.
hr Defines a thematic change in the content.
a Defines a hyperlink.
- href specifies the URL of the page the link goes to;
- target (_blank/_parent/_self/_top) specifies where to open the linked document;
form is used to create an HTML form for user input.
- label defines a label for several elements. Why to use: 1.Screen reader users (will read out loud the label, when the user is focused on the element). 2.Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the element, it toggles the input (this increases the hit area).
  - for Specifies the id of the form element the label should be bound to;
  - form Specifies which form the label belongs to;
- input specifies an input field where the user can enter data;
  - type
    - "button"
    - "checkbox"
    - "color"
    - "date"
    - "datetime-local"
    - "email"
    - "file"
    - "hidden"
    - "image"
    - "month"
    - "number"
    - "password"
    - "radio"
    - "range"
    - "reset"
    - "search"
    - "submit"
    - "tel"
    - "text" (default value)
    - "time"
    - "url"
    - "week"
- select is used to create a drop-down list
  - name is needed to reference the form data after the form is submitted;
  - id is needed to associate the drop-down list with a label;
  - multiple Specifies that multiple options can be selected at once;
  - required Specifies that the user is required to select a value before submitting the form;
- option defines an option in a select list;
  - value Specifies the value to be sent to a server;
  - selected Specifies that an option should be pre-selected when the page loads;
- textarea defines a multi-line text input control;
  - rows/cols is specified the size of a text area;
  - name is needed to reference the form data after the form is submitted;
  - id is needed to associate the text area with a label;
  - placeholder Specifies a short hint that describes the expected value of a text area;
- button defines a clickable button.
  - type to tell browsers what type of button it is;
    - "button"
    - "reset"
    - "submit"

Function, loops js (Lesson 3 with Hassan)

Hanna — Fri, 17 Sep 2021 11:22:44 +0000

FUNCTION

A JS function is a block of code designed to perform a particular task and is executed when "something" invokes it (calls it).
We can submit 0, 1, or more parameters to a function.

ex.

function functionName(parameter1, parameter2, parameter3) {
  // code to be executed
}

FUNCTION & RETURN STATEMENT

The return value is "returned" back to the "caller".

ex.

function myFunction(a, b) {
  return a + b;
}
console.log(myFunction(5, 6))// Function returns 11

LOOPS

Loops are used in JS to perform repeated tasks based on a condition. Conditions typically return true or false when analysed. A loop will continue running until the defined condition returns false.

FOR LOOP

for ([begin]; [condition]; [step]) {
   // statement
}

ex.

for (let i = 0; i < 10; i++) {
    console.log(i)
}

WHILE LOOP

The while loop starts by evaluating the condition. If the condition is true, the statement(s) is/are executed. If the condition is false, the statement(s) is/are not executed. After that, while loop ends.

while (condition)
{
  statement(s);
}

ex.

let i = 0;
while (i < 10) 
{
  console.log(i);
   i++;
}

Blocks, if-statements, switch (Lesson 2 with Hassan)

Hanna — Thu, 16 Sep 2021 13:44:14 +0000

GOOD TO REMEMBER!

{} curly brackets
[] square brackets
() parentesis / brackets
: colon
; semicolon
" quotes / double quotes
' quotes / single quotes
` back ticks

BLOCK

We use it to group expressions with each other
Curly brackets ({}) are used for the block.
It is used with:

if
while
for
functions

IF-STATEMENTS

-if to specify a block of code to be executed, if a specified condition is true;
-else if to specify a new condition to test, if the first condition is false
-else to specify a block of code to be executed, if the same condition is false;

Example 1:

if (condition1) {

  //  block of code to be executed if condition1 is true

} else if (condition2) {

  //  block of code to be executed if the condition1 is false and condition2 is true

} else {

//  block of code to be executed if the condition1 is false and condition2 is false

}

Example 2:

const condition = true

if(condition) {

    console.log("sant")

} else {

    console.log("falskt")

}

or

Conditional (Ternary) Operator

const condition = true

condition  ? console.log("sant") : console.log("falskt")

Switch statement

To select one of many code blocks to be executed.

How it works:

The switch expression is evaluated once.
The value of the expression is compared with the values of each case.
If there is a match, the associated block of code is executed.
If there is no match, the default code block is executed.

Example 3:

switch(expression) {

    case x:

      // code block

      break;

    case y:

      // code block

      break;

    default:

      // code block

}

Math.ceil() vs Math.round()

The Math.ceil() function always rounds a number up to the next largest integer.

Math.ceil(null) returns integer 0 and does not give a NaN error

The round() method rounds a number to the nearest integer.

Terminal commands

Hanna — Thu, 16 Sep 2021 08:50:57 +0000

I started learning js and learned to use the terminal. Commands that are useful to remember and use for beginners.

pwd Print Working Directory (pwd). You type in that command, and it will spit out the exact file path for the file or folder you are in.

ls To see what is in that folder.

cd Change Directory. Change which folder you are in.
(cd <folder name>)

mkdir Make Directory. To make a new folder.

rm/rmdir To remove a directory. (rmdir <folder name>) The folder must be empty for this to work.

cd .. Moves us back one level to the parent folder.

cd ../.. Moves us back two levels. Add more /.. for each level you want to navigate up.

code . To open Visual Studio Code from terminal

clear it "clears" terminal out.