DEV Community: Daniel Valle

The Document Model

Daniel Valle — Tue, 12 Jan 2021 16:43:01 +0000

What is the DOM (Document Model)?

The DOM is a visual layout of the document, this visual highlights the hierarchical relationships with the elements. The DOM allows for use of pop ups, adding and deleting content, editing existing text and identifying the contents of any element.

The Query Selector

`query.Selector` is a method used to find the content of an element:

const heroImg = document.query.Selector('img')
// This will search through the doc and select the first occurrence of "img"

The Query Selector can be used to select many different types of elements and tags:

// using a "." will select all items in a class:
let list1 = document.query.Selector('.list1')
// using "[]" allows the user to select one element from a list:
let listItem2 = document.query.Selector(list1[1])
// using "getElementById" selects items based on their id:
let firstHeading = document.getElementById('heading1')

Changing Page Content:

// using the method "innerText" and "+=" allows the user to add content to a single tag:
let firstHeading = document.querySelector('');
console.log(firstHeading.innerText);
firstHeading.innerText += 'this is the new heading';
// the user can change the text in several tags at once using the "forEach" method:
let paragraphs = document.querySelector('');
paragraphs.forEach(paragraphs => {
paragraphs.innerText += 'new text' });

Setting Attributes

Using "getAttribute" the user can add attributes to a tag of their choice:

// this example is how to get an attribute to an existing tag:
let link1 = document.querySelector('a');
console.log(link.getAttribute('href'));
// this is an example of how to set an attribute:
link.setAttribute('href', https://www.com')

Editing CSS Through the DOM

"setAttribute" is also used to edit existing css:

title.setAttributes('style', 'margin: 50px', 'border: solid black')
// the user can also add css to existing css:
console.log(title.style);
title.style.margin = '50px';
// the user can use console.log to display the value of a css key word:
console.log(title.stles.color)

Adding and Removing Classes

using "content" and "classlist" the user can change, add or remove a class:

// display the current class
letcontent = document.querySelector('p');
console.log(content.classlist);
// Adding, using ".add" adds a class name
content.classList.add('error');
// Removingm using ".remove takes a class name away
content.classList.remove('error');

Parents, Children and siblings

This is a node tree, this visual represents the relationship between the tags

Elements with the same parent elements are called siblings, elements that come from other elements are known as children

Using the parent-child relationship the user can use "Array.from" and ".children" to apply a class to multiple elements:

const doc= document.querySelector('doc');
 Array.from(doc.children);

 Array.from(doc.children).forEach(child => {
child.classList.add('doc.element');
 });

Creating and Removing elements

the user can use ".remove" and ".addEventListener" to add and remove elements:

// delete element
const ul = document.querySelector('ul');
ul.remove();

// add method to element
const button = document.querySelector('button');
button.addEventListener('click', ( => {
    ul.innerHTML += '<li> something new </li>';
})

Conclusion

The DOM allows for a wide expansion of the user's toolkit. It allows change for HTMl and CSS from java. The DOM could very helpful for revising a web page in progress.

Resources

The NetNinja's udemy course

www.w3schools.net

Advanced Data Types

Daniel Valle — Tue, 12 Jan 2021 16:42:41 +0000

Matrices, a matrice is a two-dimensional arrays represented using rows and columns

This data type is commonly used when representing a grid, using statistics, 3D rendering, etc...

Using this data type i will create a one player Battleship

A matrix is created using "board", using null will create an empty square and "s" for a ship

let board = [
[null, null, "s"]
["s", null, null]
[null, "s", null]
];

How to access a row

The number that is assigned to the rows begins at 0 and increases one per row. You must assign a variable to the row in order to log it to the console:

let firstRow = board[0]
let secondRow = board[1]
let thirdRow = board[2]
console.log(`The Board contains ${firstRow }, ${secondRow } and ${thirdRow`};

How to access a column

After a row is assigned a variable, you can access a single element inside it. Using a similar notation we can pull out one element from one array:

console.log(`first ship is board[1][2]`)
// using the second brackets is how you access the columns in the row you identify

// "firstRow1" is accesing the first element in the first array

Matrix Iteration

Each elements in the matrix is an array, so we have to iterate over each row using a loop:

for (let i = 0, i < board.length; i++){
// a single row
let row = board[i];
// loop over each element
for( let = j, j < row.length; j++){
let column = row[j];
if (column === "s"){
console.log(`Ship is located at ${row} row and ${column} column`);}
}
// i used "i" and "j" to assign coordinates when the ship is located

Turns

To create turns i will create a loop that iterates 10 times

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

Randomizing

Randon Index, in order to choose a random square we can use the `Math.random` function:

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

function getRandomNum(){
return Math.floor(Math.random() * board.length);
// using "board.length creates the max number the generator can use
}
// Math.random will return a random number between 0 and 1 so we use" * 5 " to make it a whole number we can use

console.log(getRandomNum());
console.log(getRandomNum());
console.log(getRandomNum());
console.log(getRandomNum());

Selecting a Random Square

Using the same `Math.random` function, i will create code that displays a certain square's coordinates:

for(let i = 0; i < 10; i++(){
let row = getRandomNum();
let column = getRandomNum();
console.log(`The box can be found at ${} row and ${} column`);
let randomSquare = board[row][column];
console.log(randomSquare);}
function getRandomNum(){
return Math.floor(Math.random() * 5)
}

Updating the board

If you land a hit, that square will become null or an empty square

for (var i = 0; i < 10; i++){
 var row = getRandomNum();
 var column = getRandomNum();

 var randomSquare = board[row][column];

 if (randomSquare === "S"){
   console.log(`Hit on ${row} row and ${column} column);
   board[row][column] = null;
 }
}

function getRandomNum(){
 return Math.floor(Math.random() * 5);
}

Conclusion

We now know how to create a matrix, access either a row or column and both at once. The Battleship game is a quick and simple demnstratin of a matrix

Sources

Iron Hack Document "Advanced Data Types"

Objects and Arrays

Daniel Valle — Tue, 12 Jan 2021 16:42:24 +0000

Objects IronHack Document

Objects are commonly used as a median to assign larger amounts of data

Objects are a collection of properties and those properties are represented by key Value pairs

A key-value pair is a string that identifies as a property and corresponds to a value.

let weeklySchedule = {
monday: 7-12
tuesday: 7-11
wednesday: 7-4
thursday: 7-3
friday: 7-9
}

"monday", "tuesday" etc.. are the keys that are assigned number values using ":"

In the "weeklyschedule" object I used object literal syntax, i used "{}" to create the object.

Accessing the Values in Objects, in order to display the values inside an object you must log it into the console like so:

console.log(weeklyschedule);

Changing property values

We can change the value of a property after it is defined using dot notation:

let workHours = {
mon: 8-4
tues:8-4
wed: 10-4
thurs:8-4
fri:8-4
}
workHours.wed = 12-4;

Another method of changing values is bracket notation:

let workHours = {
mon: 8-4
tues:8-4
wed: 10-4
thurs:8-4
fri:8-4
}
workHours[tues] = 12-8;

The "in" operator, this operator can be used to determine if a certain property exists in an object:

let workHours = {
mon: 8-4
tues:8-4
wed: 10-4
thurs:8-4
fri:8-4
}
'mon' in workHours // true
'sat' in workHours // false

You can remove properties using "delete":

let favoriteCarBrand = {
make1: 'Ferrari'
make2: 'Honda'
make3: 'Nissan'
}
delete favoriteCarBrand.make1 // dot method
delete favoriteCarBrand['make1'] // bracket method

Listing Properties

One method is "Object.keys()", another method is "for...in loop":

let favoriteCarBrand = {
make1: 'Ferrari'
make2: 'Honda'
make3: 'Nissan'
}
Object.keys(favoriteCarBrand) // object.keys method
for(let key in favoriteCarBrand){
console.log(key); // for in loop method
}

Arrays and Objects IronHack Document

Arrays and Objects are some examples of data structures, a data structure is a specific way of storing data

In certain situations you can use arrays inside of objects to increse productivity:

let finalProjectGroups = {
['John', 'Alyssa', 'Robert']
['Isabella', 'Dylan', 'Alejandro'] 
['Jorge', 'Nicolas', 'Daniel']
}

Some objects are known as complex objects for the amounts of data they hold for example:

let peopleInTennisLessons = {
{ firstname:'Alejandro', lastname;'Rodriguez' age: 24 }
{ firstname:'Alyssa', lastname;'Garcia' age: 21 } 
{ firstname:'Alex', lastname;'Garcia' age: 15 }
{ firstname:'Darian', lastname;'Alexi' age: 18 }

Objects inside of Objects

When you create an object in an object the way you access it changes, lets create an object inside an object and access it:

let virtualClassroom2 = {
teacher: { firstname:'Alberto' lastname:'Garcia' age:35
};
console.log(virtualClassroom2.teacher) / * this shows all values in "teacher" * /
console.log(virtualClassroom2.teacher.age) / * this is how you access values in an object inside of an object * /
}

Udemy Net Ninja Section 5

Functions and Methods in Java

Daniel Valle — Tue, 05 Jan 2021 17:01:40 +0000

What is a function?

A function is a block of code designed to perform a particular task, this task is executed when invoked:

const greetings = function(){
console.log('Hello User');
};
greetings();

What is a Method?

A method is quite similar to a function, however the way they are invoked and defined differ:

const welcome = `Welcome ${userName}`
let userName = 'Daniel';
let welcomeAlert = welcome.toUpperCase();
//* the line of code above uses a method called toUpperCase *//
console.log(welcomeAlert);

What is an argument?

Function parameters are the names listed in the function definition. Function arguments are the real values passed to the function:

const speak = function(name = 'Daniel', time = 'night'){
//* the parameters are the variables "name" and "time" *//
console.log(`Good ${time} ${name} ); }
speak('Alejandro', 'morning')
//* the code above is the argument that alters the function's result *//

How to return a value:

const calcArea = function(radius){
let area = 3.14 * radius**2;
return area;
}
console.log(area);
//* This function will log the results into the console *//

Arrow Functions

Arrow functions allow us to write shorter function syntax. If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword. This only works if the functions has one statement.

const calcArea = (radius) = {
    return 3.14 * radius**2;
}
//* This function is the same as the one above, it is more compact *//

What is the Foreach Method?

This method calls a function once for each element in an array, in order:

let group = ['Carolina', 'Daniel', 'Piper']
const logGroup= (group, index) => {
console.log(`${index} - hello ${group}`);
group.forEach(logGroup);

Callback Functions

A callback is a function passed as an argument to another function:

function myAlarm(){
console.log('Wake UP!')};
function warning(){
console.log('You've got 10 minutes left!')};
warning();
myAlarm();

Resources

www.w3schools.com

The Net Ninja's Udemy Course

Control Flow

Daniel Valle — Tue, 05 Jan 2021 17:01:30 +0000

Conditionals and Loops

When we use JavaScript we use programs as a sequence of statements

In this section of the blog we will go over "if..else, switch, do..while, for, forEach, break and while" statements

if..else- the if statement executes if the specified condition is true, when the condition is false it will use another statement:

if (condition1) {
  // code to execute if condition1 is true
} else if (condition2) {
  // code to execute if condition2 is true
} else {
  // code to execute if condition1 and condition2 are false
}

switch- this statement checks the condition and executes the statements that follow:

const name  = prompt ("Favorite Modern Warfare main character:");
let character = "";
switch (name) {
  case "Sargent Woods":
    house = "Captain Price";
}
console.log(`Your favorite character is ${character}`);

Break- this statement ends the current switch statement:

const name  = prompt ("Favorite Modern Warfare main character:");
let character = "";

switch (name) {
  case "Sargent Woods":
    house = "Captain Price";
    break;
}

Loops and iterations

Loops and iterations are used to execute repetitive tasks

while- this statement creates a loop that executes as specified code as long as the condition is true:

let age = 0;

while (age <= 18) {
console.log (i);
i++
}

do..while- this creates a loop that executes a block of code once, before checking if the condition is true, then repeat if true:

let time = 8
do {
console.log('Hello')
} while (time == 8
time++;

for- this statement creates a loop with an initialization, condition and final expression

The initialization is the variable declaration. The condition is what has to happen to finish the iteration. The final expression is the increment of the variable used to iterate our code.

for (let time = 20; time <=400; i++) {
console.log(time);
}

Continue and break

break- this statement exists a statement or a loop:

let money = 500;
while(money < 2000) {
i++;
console.log('You have ${money} amount of money');
if(money = 40) {
break;
  }
}

Continue- this breaks one iteration in a loop when a special condition occurs, and continues with the next iteration in the loop:

let gameCost = 60;
while (gameCost >= 600) {
i++;
if (gameCost = 65) {
  continue;
  }
console.log('The Game costs ${gameCost} dollars!');
}

Udemy Course Notes

Logical Opertors

The logical operators are '||', and '&&'

'||' represents or, and '&&' is and:

if(password.length >= 12 && password.includes('@')){
    console.log('that password is mighty strong!');
} else if(password.length >= 8 || password.includes('@') && password.length >= 5);
){
    console.log('that password is long enough!');
} 
// IF the "if" is false then the "else" code is used
else {
    console.log('password is not long enough!');
}

Logical Not (!)

the ! reverses a true statement to false and visa versa:

let user = false;

if(!user){
console.log('you must be logged in to continue');
}

console.log(!true);
console.log(!false);

Conclusion

Conditional statements allow for a large expansion for the user. Although i am not very familiar with Java my i have learned a lot about conditionals. They have a plethora of applications both for practice and for world situations.

Sources

The Net Ninja's udemy JavaScript Course
https://www.w3schools.com/

DEV Community: Daniel Valle

The Document Model

What is the DOM (Document Model)?

The DOM is a visual layout of the document, this visual highlights the hierarchical relationships with the elements. The DOM allows for use of pop ups, adding and deleting content, editing existing text and identifying the contents of any element.

The Query Selector

query.Selector is a method used to find the content of an element:

The Query Selector can be used to select many different types of elements and tags:

Changing Page Content:

Setting Attributes

Using "getAttribute" the user can add attributes to a tag of their choice:

Editing CSS Through the DOM

"setAttribute" is also used to edit existing css:

Adding and Removing Classes

using "content" and "classlist" the user can change, add or remove a class:

Parents, Children and siblings

This is a node tree, this visual represents the relationship between the tags

Elements with the same parent elements are called siblings, elements that come from other elements are known as children

Using the parent-child relationship the user can use "Array.from" and ".children" to apply a class to multiple elements:

Creating and Removing elements

the user can use ".remove" and ".addEventListener" to add and remove elements:

Conclusion

The DOM allows for a wide expansion of the user's toolkit. It allows change for HTMl and CSS from java. The DOM could very helpful for revising a web page in progress.

Resources

The NetNinja's udemy course

www.w3schools.net

Advanced Data Types

Matrices, a matrice is a two-dimensional arrays represented using rows and columns

This data type is commonly used when representing a grid, using statistics, 3D rendering, etc...

Using this data type i will create a one player Battleship

A matrix is created using "board", using null will create an empty square and "s" for a ship

How to access a row

The number that is assigned to the rows begins at 0 and increases one per row. You must assign a variable to the row in order to log it to the console:

How to access a column

After a row is assigned a variable, you can access a single element inside it. Using a similar notation we can pull out one element from one array:

Matrix Iteration

Each elements in the matrix is an array, so we have to iterate over each row using a loop:

Turns

To create turns i will create a loop that iterates 10 times

Randomizing

Randon Index, in order to choose a random square we can use the Math.random function:

Selecting a Random Square

Using the same Math.random function, i will create code that displays a certain square's coordinates:

Updating the board

If you land a hit, that square will become null or an empty square

Conclusion

We now know how to create a matrix, access either a row or column and both at once. The Battleship game is a quick and simple demnstratin of a matrix

Sources

Iron Hack Document "Advanced Data Types"

Objects and Arrays

Objects IronHack Document

Objects are commonly used as a median to assign larger amounts of data

Objects are a collection of properties and those properties are represented by key Value pairs

A key-value pair is a string that identifies as a property and corresponds to a value.

"monday", "tuesday" etc.. are the keys that are assigned number values using ":"

In the "weeklyschedule" object I used object literal syntax, i used "{}" to create the object.

Accessing the Values in Objects, in order to display the values inside an object you must log it into the console like so:

Changing property values

We can change the value of a property after it is defined using dot notation:

Another method of changing values is bracket notation:

The "in" operator, this operator can be used to determine if a certain property exists in an object:

You can remove properties using "delete":

Listing Properties

One method is "Object.keys()", another method is "for...in loop":

Arrays and Objects IronHack Document

Arrays and Objects are some examples of data structures, a data structure is a specific way of storing data

In certain situations you can use arrays inside of objects to increse productivity:

Some objects are known as complex objects for the amounts of data they hold for example:

Objects inside of Objects

When you create an object in an object the way you access it changes, lets create an object inside an object and access it:

Udemy Net Ninja Section 5

Functions and Methods in Java

What is a function?

A function is a block of code designed to perform a particular task, this task is executed when invoked:

What is a Method?

A method is quite similar to a function, however the way they are invoked and defined differ:

What is an argument?

Function parameters are the names listed in the function definition. Function arguments are the real values passed to the function:

How to return a value:

Arrow Functions

Arrow functions allow us to write shorter function syntax. If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword. This only works if the functions has one statement.

`query.Selector` is a method used to find the content of an element:

Randon Index, in order to choose a random square we can use the `Math.random` function:

Using the same `Math.random` function, i will create code that displays a certain square's coordinates: