DEV Community: RyanEtten21127

Functions and Methods

RyanEtten21127 — Mon, 14 Dec 2020 16:56:48 +0000

What are Functions and Methods?

Functions define a block of code that you can use any time we want. A function is called when something invokes it. The cool thing about functions is that you can define the code once and executing it multiple times. A method is a function, but the way that you execute it is different. There are a few topics that we need to go over for functions and methods.

Function Declarations and Expressions

First of all, functions will not run unless we actually call the function, so please remember to call it before executing a function. Declared functions are saved for later use and will be executed later in your code.

function greet(){
  console.log('hello there');
}

An expression is when you set a variable equal to something (could be a function or any other tool). You have to use semicolons after each expression.

const speak = function(){
  console.log('good day!')
};

Arguments and Parameters

Arguments take any value of a function and stores into another variable. The order of the arguments MUST match the order of the arguments. You can also define values inside of the parameters.

const speak = function(team = 'red sox', wins = 60){
   console.log(`the ${team} have ${wins} wins`);
}

Returning Variables

The way that returning values work is that it stores the output value inside a new constant.

const calcArea = function(side){
  return side**2;
};

const area = calcArea(5);
console.log(area);

Arrow Functions

Arrow Functions are a simpler way of writing regular functions. The first difference is if there is only one parameter, you don’t need to put parentheses inside the parameter. Also, if there is a single return line, you can remove the “return” keyword as well as the curly braces and move the text next to the arrow. This is an example of using an arrow function to find the area of a square:

const calcArea = side => side**2

Functions vs Methods

There are a few differences between functions and methods. A function is a group of reusable code which can be called anywhere in the browser. This gets rid of the need for writing the same code repeatedly. Whereas a method is actually an object reference to a function.

Function:

const greet = () => 'hello';

let result = greet();
console.log(result);

Methods:

let result = name.toUpperCase();
console.log(result);

Foreach Method and Callbacks

The forEach method calls a function once for each element in an array. Callbacks passes a function as an argument and it defines the function and call it back to the main function.

let teams = ['red sox', 'heat', 'dolphins', 'hurricanes', 'saints'];

const logTeam = (team, index) => {
  console.log(`this team is ${team}`);
}

teams.forEach(logTeam);

Conclusion

Functions and Methods are used to perform multiple tasks for minimal lines of code. If it weren't for functions, every command would be so manual and repetitive. In fact, I don't think it would even be possible to navigate anything on the web if functions were not invented. I learned so much about functions and methods over the past month and I cannot wait to get started on some projects.

Net Ninja 2

RyanEtten21127 — Tue, 17 Nov 2020 16:53:01 +0000

What is JavaScript?

JavaScript is a lightweight programming language that gets converted into machine language line by line and uses functions. It is a universal language used to design websites & apps, program robots, and much more.

There are a few things to note while coding in JavaScript. The information that is stored is outputted into a server, which is a machine that you request information to and it gives back a response.

The code that you put into JavaScript will not have an output unless you link the JavaScript to the HTML file. You can do this by linking the script to the end of the body tag.

<body>

    <script src="script.js"></script>
</body>

Make sure that you link the JavaScript to the same name of the JavaScript file that you created.

Variables

Variables are containers for storing data values for later use. These variables are set usually with the commands let, const, and var.

let age = 25;
console.log(age); -----> 25

Make sure to mark the end of a statement with a semicolon.

There are a few constraints when it comes to creating names for a variable:

Cannot have a space
- Use camel case for two letter variables

let myAge = 25;
console.log(myAge); -------> 25

Only letters, numbers, underscores, or dollar signs
- However, it can’t start with a number
Can’t use words like “let”, “const”, and other key words to name variables

Data Types

The tools used to store information on JavaScript is called Data Types. There are a few basic data types that you need to remember when learning JavaScript:

Strings
Numbers
Booleans
Null
Undefined
Object
Symbol

Strings

Strings are just any series of characters used to form some sort of sentence or phrase.

console.log("Hello, World"); -----> Hello, World

You can combine two strings together because of a method called string concatenation.

let firstName = 'John';
let lastName = 'Smith';

let fullName = firstName + ' ' + lastName;
console.log(fullName) = John Smith

I created a space in between the firstName and lastName in order to create some space in between the two.

There are a few basic methods that I thought were pretty cool in customizing the output of the string:

.length - tells you the length of the string
- JavaScript is a zero-based language, so it starts counting the characters from zero instead of one.
.toUpperCase - turns the whole output to uppercase letters
.toLowerCase - turns the whole output to lowercase letters
.indexOf("x") - tells you the position of a certain character (x)
.lastIndexOf("x") - tells you the last instance of a certain character (x)
.slice(x,y) - erases the result from "x" to "y"
.substr(x,y) - displays the result starting from x and continues for y characters
.replace("x", "y") - replaces a character (x) from one string into another character (y)
- If there are multiple of the same characters being replaced, it just replaces the first instance of the character (.replaceAll replaces all instances)

Numbers

Numbers are simple; it is just any numerical value that allows you to perform any math operation.

let radius = 6;
console.log(radius); -----> 6

There is no need to put a number inside of quotations because the system already recognizes it as a number. In fact, putting that number inside of quotations will make it a string rather than a number.

Just like in basic mathematics, there are math operators that you can use to get certain values:

addition (+)
subtraction (-)
multiplication (*)
division (/)
exponents (**)
remainder (%)

console.log(5 + 3); ------> 8
console.log(14 - 4); ------> 10
console.log(5 * 6); ------> 30
console.log(10 / 2); ------> 5
console.log(7**2); ------> 49
console.log(10 % 3); ------> 1

If you try to do an operation with a non-numerical value, it will come out as NaN because it is a result of an impossible equation.

console.log(5 / 'hello'); ------> NaN

Booleans

A Boolean is used to evaluate conditions in code. It yields in a result either true or false.

console.log(5 == 5); ------> true

Similar to strings, there are some methods that you can use for booleans.

.includes - checks to see if the value includes the character given (If yes, output is true; If no, output is false)
!= - not equal to

let name = "Ashley"

let result = name.includes("h"); ------> true
let result = name.includes("w"); ------> false

console.log(9 != 7); ------> true
console.log(9 != 9); ------> false

Null & Undefined

Null and Undefined are really simple and there isn't really anything complicated related to it. Null is just a value that is specifically assigned to have no value. Undefined is a variable that has not been given a value yet.

let age = null;

console.log(age); -------> null

Objects

Objects are just complex data structures. The most common type of object is an array. Arrays are used to store a collection of things in. For example, a collection of strings would look like this:

let names = "John", "Mark", "Samuel", "Alex";

console.log(names[0]); -----> John
console.log(names[1]); -----> Mark
console.log(names[2]); -----> Samuel
console.log(names[3]); -----> Alex

There are also two pretty simple methods you can use for arrays:

.push - adds more values to an array
.pop - returns the last value in the set of strings

Type Conversion

Type Conversions is what it sounds like; it is used to convert data types.

let score = '100';

score = Number(score);

You can check the type of a value by putting typeof in the console.log

console.log(typeof score); ------> number

One drawback to type conversions is that you cannot change a string with non-numerical values into a number.

let result = Number('hello');

console.log(result); -------> NaN

So, what is the point of JavaScript?

JavaScript is a crucial language of programming because without it, everything would feel so lifeless. In fact, every single application on a cellphone uses JavaScript. JavaScript is so much more than just coding that you put on a browser; it allows for communication and interaction. JavaScript seems like a really interesting language in coding, and I cannot wait to enhance my knowledge of Java.

Flexbox Blog

RyanEtten21127 — Tue, 10 Nov 2020 18:19:25 +0000

What is Flexbox?

Flexbox (short for flexible box) is a CSS layout model that is displayed as a block element divided into sections. This is known as a flex container.

How do I use Flexbox?

There are a few properties to understand before you can start using flexbox:

flex-direction- used to align the boxes in the vertical or horizontal direction.
Flex-wrap- allows the box to automatically wrap around to the other side until all of the boxes fit on the window.
flex-flow- combines both elements of flex-direction and flex-wrap. This command increases the efficiency while coding.
Justify-content- works as a float command within the container. It allows for the content to align to the start, end, or center.
Align items- aligns the content in the boxes vertically towards the desired position. There are align start, end, and center options, just like the "justify-content" option.
- There are various different types of aligning the content of the container: space-between, space-around, stretch, center, flex-start, and flex-end

So now that you understand the main properties of using flexbox, creating the code should be a very easy and simple process.

Create a div tag that contains a class. The name of the class doesn't matter, but for this example I will use a class name of flex-container.
Create another div tag under the parent tag that includes some sort of content in them.
Now that we are done making the container in the HTML file, we need to add some styling to the container. The most important thing to do first is to create a CSS command to display the content to flex.
Nice! Now you have a flexbox! It should look something like this:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

.flex-container {
  display: flex;
}

Now that I created my Flexbox, how can I design it?

Now this flexbox container that we made looks really dull. Let's design it a little bit.

Set the flex-direction to either row or column and add a background-color to make the container color contrast from the rest of the page.
The container has been designed, but now let's design the content within the container. Create a CSS command of class-name > div (replace class-name with the name that you chose for the flexbox container).
Finish designing the content with another background-color, text-align, width, margin, line-height, and font-size.

Now, you should have a nicely designed flex container.

.flex-container {
  display: flex;
  flex-direction: row;
  background-color: black;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

Flexbox Examples:

My groupmate and I have spent the past 2 weeks working on a project that involves the use of flexbox combined with other properties that we learned so far in the school year. This is what we came up with.

Made on Figma:

Made on Replit:

(https://repl.it/@RobertoCallejas/AnimatedLinenDeskscan#style.css)

Our idea was to promote video games on a website while incorporating flexbox and other elements, such as a navbar, into our project to create a nicely organized website.

We made our flexbox using the commands explained on this post as well as additional commands to make the container look extra fancy.

#flex-container-hero {
  display: flex;
  background-color: #333;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: row;
}

#flex-container-hero > div {
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
  font-size: 25px;
  text-align: center;
  line-height: 75px;
  background-color: grey;
  height: 170px;
  width: 170px; 
  margin: 100px;
}

Instead of putting text inside the flexbox, we put an image inside of the flexbox to make it look more interesting. This is how it looks in the HTML file:

<div id="flex-container-hero">
      <div class"item1"><img src="pc.jpg" style="width:100%"></div>
      <div class"item2"><img src="xbox.jpg" style="width:125%"></div>
      <div class"item3"><img src="playstation.jpg" style="width:110%"></div>
    </div>
    <div id="flex-container-hero">
      <div class"item4"><img src="switch.jpg" style="width:110%"></div>
      <div class"item5"><img src="retro games.jpg" style="width:100%"></div>
      <div class"item6"><img src="gaming accessories.jpg" style="width:110%"></div>
    </div>

Obviously the image won't show up unless you link the image somewhere in your project. So I downloaded the images onto my computer and put the file name on my project.

Conclusion:

You may not know it, but flexbox is used in almost (if not every) site that you have visited. This is how big-name companies like Apple and Amazon are able to promote their products. Making it easy to display on a website will draw the customers more because the design looks so appealing. Flexbox is one of the most important concepts that you need to know to make your own website. And now that you know the basics of how to use flexbox, you can get started on your very first website.

Resources:

W3Schools:https://www.w3schools.com/css/css3_flexbox.asp
Our Website: https://repl.it/@RobertoCallejas/AnimatedLinenDeskscan#style.css