DEV Community: Ernesto A

Javascript no.1 - Data types / The let or not to var or const / Error handling

Ernesto A — Tue, 21 Jul 2020 17:29:54 +0000

This is the firsttt post about JS. I will try to be as concise I can be and give a "default" structure to every post, if you are looking for certain information you can go there easyly.

Concepts/things in this post

Data types
the diference between let / var / const
error handling

Data types

As a beginner in Javascript this are some of the most "common" data types that you are going to find and use:

* integrals / float - numbers
* string / char - letters or chained characters
* boolean / true or false / 0 or 1 / yes or no
* undefined / a value not placed or defined literally 
* null / nothing / is not there

When you are in JS the main situation is going to be how I define those data types and the answer is very easy. Use var/let/const to do it.

let number = 1 / integer
let pi = 3.14159265359 / float

let word = "hello" / String

let isReal = true
let isFake = false

As an idea to make understand the person learning JS one of the ways to check if the information I put in here is real is to check it with the console in your webbrowser. I use chrome, to access the combination of keys are ctr+shift+i and you can see a white/gray window in your web browser. Then in the top of that window you can see some options. Click in console and you will see this.

You can copy or writte in the console. The same variables I defined in the last pragraph and then do this:

typeof *the value*

typeof number, typeof pi, typeof word, typeof isReal, etc...

When you hit enter you will get some answers as "String","number","boolean".

Thats how you can see those values.

Here is the tricky part, floats or numbers with point aside goes directly to the category of "number" is not as specific you could believe but at the same thing JS will know what type of "number" it is. The same goes with String, you can define a character as "h" but will say "String". For that we have some properties in js that we are going to learn in other posts.

We have other two data types??? Undefine and null, Undefine is the absense of the specification of a value.

let a;

If you put that in the console, you will get undefined. Js dont know what value holds, if is a number or a string an array.

null is a little bit more complicated, because is nothing. It could be the representation of the void or space. It exists but exists as a representation of something that is not there.

var, let and const

This is a good thing to understand from the beginning because later we have to write functions and set boundaries. When you define a value you can use three ways to do it. But every way has a difference.

var a = 50
let a = 50
const a = 50

Imagine this, your birthday as a piece of information is known by you, your parents or dear people to you otherwise the whole world doesnt know your birthday. You can put let in that part.
Then we have national days, like the day of dead, historical dates, etc... in that enters var, all the country knows about that is like common knowledge.
The final part is const you can relate it with international days. Why? Because they are date that are already define. Like you will always know that the day of yoga is in Jun 21th and you can't change that.

In general

var is a global value o globally scoped, they can be updated or redeclared
let is blocked scope, can be updated
const is blocked scope, they need to be defined since the beginning and can't be updated

var b = 10;
{
 const a = 40;
 let c = 139;
}

The excersice is the next:

Write in the console this things

var hello = 'hey im working';
let working = true;
if(working){
 let insidethebrackets = 'im working too';
}
console.log(hello);
console.log(insidethebrackets);

As you see, insidethebrackerts doesnt appear, even you get an error. That happens because inside of the if, insidethebrackets is working. It exist in that island as the only resident. Otherwise, hello is working because it appears outside. You can change console.log(hello) inside the if and hello will still work.

var hello = 'hey im working';
let working = true;
if(working){
 let insidethebrackets = 'im working too';
console.log(insidethebrackets);
}
console.log(hello);

Now it works.

Write this first

const number = 40;

Then

number = 10;

You get an error, its a constant and constants cant be updated. Most of the use of constants are as function declarations or as values that doesnt have to be changed. In one way you can put it like a formula or a well known info like the value of gravity or a byte in that sense.

Error handling

When you write code or you want to understand what is happening, why im getting 2 instead of 2000000, we can use some things. We try to read the output of the value in the console. For that we use:

console.log(*value*);

What will do is print in the console the value as you saw in the last excersices. For what is this. Maybe the result is wrong, you dont know if you forgot to do an operation and maybe thats the problem, in the process of the declaracion the value could change and that made something to the operation. A lot of things can happen.

var x = 1;
{
  var x = 2;
}
console.log(x);

Pretty much thats the only way to handle errors inside the code that are not as a proper error like "error reference", stuff like that. In that case, the other way to handle is google. Copy the error and look for something that resembles.

Offffftopic

Pretty much thats it. Im trying to not overload with information. I tried to make it as easy as can be. In the beginning of learning can be dificult, but with time will be as a second nature and give you the base for learning other stuff. Just keep trying and dont give up.

If theres something i need to change or it doesnt make sense, please write me or comment in the post!!

Javascript way to go / Guide / Something

Ernesto A — Mon, 13 Jul 2020 20:06:47 +0000

Heeeey, this is the first time Im writting here. Sorry for my broken english.

My name is Ernesto, I am from Mexico City and I started coding few years ago.

When I was in college I started learning Java and C++, only the basic things. Data types, loops, if/else, arrays, functions, etc. It was like an intro. In those days I stopped, because I didn't had an idea where to start to do something more complicated and the aplications of it. After I finished college, I wonder what to do, find something to do with my life. I always had an inclination for art, in that moment I found text's about glitchart from Rosa Menkman and Iman Moradi. Something... exploded inside. It was a whole new world about the guts of the computer and the meaning of an error being show and how the different programs show that.

In the glitch sources/texts in glitchet.com, there was some sketches and scripts about pixel sorting and I was thrilled, they were made with "Processing".
Surfing in youtube I found Coding Train channel. There was a lot of explanations about code, about this program thing called "Processing" that was used to learn to code and do art things realeted.

So then... here we go. My first "language", if you want to call it like that, was processing. My source to understand was the processing book "Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction" by Daniel Shiffman. I passed 6 months studying, understanding, making a lot of sketches and owning those. Making my variations. There was a lot of stuff in there.
It was cool.

Now I can proudly say that I know how to program with Processing, most of the art I make is with. But as everything, theres still a long long way to go. I'm better than few years ago, but well, I need to keep improving.

All of this was the intro to understand the slippery slope that is learning to code, not get discouraged and fail. Processing was a cool way to start because I had a visual representation about what I was doing. If I write "line(100,100,200,200)" and execute the code, yes, you can see it in the screen a 100px line from point A (100,100) to point B (200,200).

This year my challenge was p5js ergo Javascript. Plus I want to learn web development and do some art projects with it.

Processing has a version for JS that is p5.js. You can see that they are similar, they have few things that are the same as the "java" version, but the way p5js behave is much MUCH different than processing.

The example is the data types. In Processing when you declare a variable, you need to specify is an "int", a "float", a "String", etc.

int a = 2;
float speed = 0.48293;

In p5js you can leave "let" or "var" or "const" and assign the value "slkasd" - string, 039.984 - float, 1 - int without having to specify since the beginning of the declaration of the variable and it will know without those terms in the beginning.

let a = 2;
const a = 'this is a string and js knows it because this is a string you know???"

The journey then beginns, again. All over again. The idea in general of the post and the following is to try to explain what im doing. Explain some concepts in my way and try to make an archive.
I just want to say thanks to Tae'lur Alexis // @taeluralexis // I was reading some of the post about JS that she made and that gave me the courage to do this and keep working in this. Thank you so much, really ;___;

Sourcessssss

Books

Head First Javascript Programming by Eric Freeman & Elisabeth Robson

This works for the basics, but is way way before es6 and you can see it because they are still using 'var' but is a good book.

Eloquent JavaScript by Marjin Haverbeke

The first 4 chapters work if you have a little bit of understanding of JS, the next are like trying to understand how to turn a fish into a dog. I mean is not difficult but most of the examples take a little bit of time.

The site of the book is pretty good and even you can se the output of the code that is being show as an example

https://eloquentjavascript.net/

Make: Getting Started with P5js by Lauren McCarty, Casey Reas & Ben Fry

This goes align with the p5js library. Is really good if you want to start learning, but if your main goal is JS as a primary language it can be a start.

Internet

MDN - Javascript
https://developer.mozilla.org/en-US/docs/Web/JavaScript

If you want a bible, here is your bible. You want to find documentation about JS, here is your main source. array.reduce(), filter(),reverse(),regex,etc........ DESTRUCTING and the array with three dots in the beginning.

W3schools - Javascript
https://www.w3schools.com/js/default.asp

Is the same as MDN but some general explantions, they can give you a quick answer if you want.

Videos

Coding Train
https://www.youtube.com/watch?v=q8SHaDQdul0&list=PLRqwX-V7Uu6YgpA3Oht-7B4NBQwFVe3pr

Dan Shiffman have this beautiful channel and sometimes or pretty much all the time he makes livestreams with coding challenges or explaining how to do certain things or concepts. Is pretty good and dude, was my first entry to do all of this.

Coding Garden
https://www.youtube.com/channel/UCLNgu_OupwoeESgtab33CCw

CJ is really cool. Thats the statement. The channel is more related to web development, but theres some playlist with topics about JS and he makes livestreams too. Even he builds projects with JS and you can see how it works, the reason of some stuff that is in the code. Pretty good.

Fun Fun Function
https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q

Mattias is another cool dude that make me try this. He has content related with js and more like managment in a way "the way to do some projects is with this aproach or doing this", etc. It was my spirit guide all the time.

Dev.to

The cool thing is you can filter post and find JS related things or even guides. Thats all.

If in the future theres more links or stuff im reading, I will update this post.

EXERCISE

Edabit
https://edabit.com/

okey, we need practice and theres no better way than learning with problems and understanding some things and getting resources to solve that. Edabit is pretty good, the problems have levels, theres a kind of index thing where they lead you to a way to solve the problem.

I want to add codewars but I havent really try yet.

The difference between pay and free

Some of the source to learn JS can be udemy, freecode, codeacademy. I mean you can choose the option you want if you have the bucks to pay it, but in the end you can find some stuff free in the internet with enough research.

JS and the infinte problem

So much of the sources here are going to show you the basics. The books will lead you to go in different directions and maybe, MAYBE you will end in a horrible loop of doing things and feel chronostacis in real life. My answer to all of that, dont rush. Take your time. This is about being constant than being a fast learner. Sucks, but is the truth.

One of my main problems is... okey I have this book, they show me some concepts, then what? this is it? An object and how to access the object???? eh??? But the situation is that. So pretty much try to exange, build projects, try to write what you do.

Before trying JS hard as I could one of my projects was a tile thing.

Tile art is pretty neat and I wanted to make like an api (i wanst aware of the in the first moment), but i tried to make something with p5js.

https://skullflowerss.github.io/tilesproject/

The other one is like the first but with domino tiles and trying to go negative???

https://skullflowerss.github.io/Domino-project/

All of them are my babies and my first steps.

So... thats it. I hope you like it. I will keep writting, not a regular as I want to believe but I want to try.