JavaScript Fundamentals
Have a Schedule, and workout every day.
Programming applied to web solution creation.
1.-Introduction
History behind JavaScript
Was created for web page creation, and it is not related to Java at all, it has more
in common wit C++. It is the only language executed in web, and from the 2000’ in
the server.
Java script works inside blocks like this {}. Indentation is a very good practice.
Java is known for having very good libraries for applications and webs, as for
Python has better libraries for statistics. If you are going for web development,
java is a better starting point, and for data science, is better to start with python.
NodeJS, which is the runtime that runs JavaScript, Is known for being pretty fast;
but C or C++ are faster since they are lower lever languages.
Understand how JS executes code
One fundamental skill is understanding how does the machine works, this will
help you understand how to fix the code when it is not working.
Declaring a function is different than executing it, are 2 different things and are
defined differently in code.
Java script is a single-threaded language, it means that it can only execute
one thing at a time. This might have implications (my hypothesis) like you
cannot create a function later on that affects something earlier in the code, or
that functions or variables change their meaning on the go, and information
that was available when the first parts of the code where available are no
longer available later on.
Dive deeper into understanding the implication of this
JavaScript Fundamentals 1
My main question is about the single threaded nature, my hypothesis is that
you cannot create a function that affects something that it’s earlier in the code,
because for example if you have a variable and it changes it content when the
code evolves, if you call that variable trying to get the first original value, is
lost and no longer available. Like the main implication that I think about is that
the information available at every line of the code is not the same, like, it
evolves through the process of reading the code. Another implication that I
see is that this makes the code lighter and less prone to break, since you only
have some information available, the computer is not processing the whole
code at the same time. And less prone to break because if something fails it
breaks it’s part and not the entire web, or code process, since it is dividing the
process of reading into steps. Also I believe it helps to have more complex
webs, since the code is read in steps you are not that limited for how much
information the pc can process at one time.
Where to write and run JS
You can use codepen.io to start learning before getting into visual code.
How to use AI
It is not recommended to ask for solving problems, but to allow you know how
to move and solve sintaxis, or information access problems.
Ask for explanations, not solutions, use AI as a tutor.
Prioritize understanding over speed, and learn from fighting with a problem.
What to expect
At first, you wont see much. This is the most difficult part, this is where you
should endure and persevere. This part is vital and extremely important, to
learn.
You will also feel a peak of expectation (the dunnin-krugger effect) and then a
disillusionment, and you will feel the challenge and hardness, and this is the
critical point, where there is a slight slope of enlightment and you find a
plateau of productivity, where you have a balanced amount of motivation.
JavaScript Fundamentals 2
When you are feeling like, ou this is not easy, is when you are stepping out of
your confort zone and you are entering the learning zone.
It is a marathon, it is vital to be consistent, every other day.
Practical things you can do, goals
Why are you doing this? Why do you want to become a programmer?
I want to learn to use code as a tool for solving problems, first webs, because
that is in high demand, and later other problems.
I want to do something technical and structured.
I want to improve my job situation, and support my girlfriend and brother to
study.
I want to work as a developer while I study, and dive deep into computer
science, and get a university degree.
I want to later on specialize and use programming skills to earn better, or to
dive into art as a technical artist.
I want to have a job that is compatible with doing art, I want to have enough
free time to do art.
Big 5 steps to get my why: I want to improve my job situation and support my
girlfriend.
1. Build my foundation on computer science
2. Build my foundation on full stack development
3. Build my strong portfolio and get a Job
4. Work and support Kate, while I get my computer science degree and
specialize into cybersecurity, AI or Technical Art
5. I transition towards a better land
Next SMART 3 goals.
1. complete preparation course this week.
2. Complete CS50 next week.
3. Build my first portfolio piece 2 weeks later.
JavaScript Fundamentals 3
Prepare post-its with the plans on top.
Planning & Focus
Define the daily must haves, the things you cannot not do.
4 days a week I go training, and the days I do not train I have walking and
meditating sessions in nature at the morning. 4x4h and 2x3 h
Every day I allocate time to cook my own meals 2x7h
Every evening I spend one hour fully dedicated to my girlfriend, we do
things together 1x7h
Every day I spend 2 hours doing art since it is my hobby.
3 days a week I work around 5 hours with one hour to go and return, and
this takes 7x3h
Everyday I sleep 8 hours and take 1 hour to slowly fade into sleeping,
maybe with a book 9x7
Everyday I take around 1h in total taking care of my higiene.
16+6+14+7+14+21+61+7=146h
Total hours in a week=16
168-146=22
22/7=3.1 h a day available right now
I’ll introduce programming blocks in the morning after training, the evening is
for working, my girlfriend, and hobbies.
Structure your time with time blocks.
Support and Accountability
Whenever you feel anything, make something about it, express it, do some
constructive action in that direction.
Make sure to make your card every day of your daily progress.
2.- Variables & Types
JavaScript Fundamentals 4
2.1.-JavaScript Types
If the code is in-between // it overrides as a comment
The main data types that we work with are:
Numbers: Unlike other languages, JS does not distinguish integers and other
numbers. NaN means ‘Not a Number”. Dive deeper into understanding what
NaN is
Strings: Represents text, In-between ‘’ or “”, `` offers extra features that we will
see later on.
Boolean: true or false.
Objects: For storing complex data, in between {}, contains pairs of key: value
separated with comas (,). Objects can be nested inside other objects Why
does it go in pairs? The singe threated nature is also applied in here? is it
everywhere?
Empty: default value of any variable, technically a primitive. null is the same,
but you use it to represent an intentionally empty value.
Symbol: a type used for more advanced data structures.
2.2.- Define and assign a Variable
A variable is a container for storing data, we give it a label to be able to reference
it later.
var firstName = "Sam" //We create a value, we define the key and we define t
he content"
let firstName = "Nielson" //Nowadays we use let more, it is the same as var?
const firstName = "Craig" // we use const to define constants, AKA inmmutabl
e data
The question that arises, are there different kind of values for different purposes,
like databases, or visual features.
Nowadays we use more let, why?
Why some people put a ; at the end of the code?
JavaScript Fundamentals 5
Does this work in ASCII
2.23.-Coercion
Have your code very clean using indexation and tab.
Is vital for you as a professional to be aware of the type of values that you are
working with.
Coercion in JavaScript is changing the type of value from one to another. Like
going from a number to a string. The web is built on text, so when doubt, JS tends
to coerce to string format.
typeof //Asks JavaScript which type of variable we have
//Convert to string//
let numerito = 42.toString() //It turns the nomber to a string
let booleanito = false.toString()
//Convert to number//
let numerito = "42"
stringToNumber = parseInt(numerito)
console.log(2 + stringToNumber)
4.- Functions
It helps modularize pieces of code and use them, and re-use them a lot.
//Anatomy of a function//
function funcioncita (arg1, arg2) {
return 'hello'
}
const result = funcioncita()
Hosting: JavaScript put all your functions in first priority whether you put the on
top or not ,JS internally moves them up.
4.1.- Take arguments as functions:
JavaScript Fundamentals 6
//Double
function double(number) {
return number*2
}
const result = double(12)
console.log(result)
//Add
function add(number1, number2) {
return number1 + number2
}
const result = add(10,7)
console.log(result)
//Yell
function yell(originalString) {
const upperCase = originalString.toUpperCase()
return upperCase
}
const result = yell('hello, world')
console.log(result)
4.2.-Understand the Scope
The scope defines when and where you can access the variables you have
created.
Each block {} has it’s own scope, a lower level scope can access variables
declared in higher-level scopes:
const x = 2
function doubleX() {
// 'x' is in a higher-level scope, so it can be accessed from inside this lower s
cope
const doubled = x * 2
JavaScript Fundamentals 7
return doubled
}
Based on this, I can think that is vital to understand which scope you need for your
variable or constant. There is the global scope and the function scope, if you only
want a constant to work inside the function, you can create it inside. But If you
need to access it in other functions, you need to create in an upper level.
Is important to understand the order of information, if you create a constant inside
a function you cannot declare it outside.
4.3.-Arrow function
This another way of function expression.
const double = (number) => {
return number + number
}
5.- Arithmetic's
5.1.-Basic Operators
They are(+,-,*,/)
Remainder: The remainder operation allows you to see if a number divides
cleanly into another.
10 % 5 = 0 // This means that 5 divides cleanly into 10, giving a result of 0
5 % 2 = 1 // This means that 2 divides like : 2x2+1=5, the one is the residuous
What is the use of the remainder?
Power/Exponent
//You can express it in different ways
let result = 4**2 //16
JavaScript Fundamentals 8
let result = Math.pow(4, 2)//16
Square root
let result = Math.sqrt(16) //4
5.2.-Operator precedence
Remember the priority in math: Parenthesis, exponents or powers, multiplication
or division, addition or subtraction.
Check this link to see the order of operation: MDN Documentation
Useful shorthand: (a += 3) == (a= a + 3) ; you can do (a*= 3 , a-= 3 …)
5.3.-Increment and decrement
Increment: Increments a numerical variable by 1
Postfix: a++
Prefix ++a
Decrement: Decrease a numerical variable by 1
Postfix: a - -
Prefix: - - a
Postfix vs Prefix
The difference is timing, when used in an expression, postfix uses the old value
while prefix uses the updated value.
5.4.-Using the math object
The Math object is a built in feature that helps you access useful properties and
methods.
Can we control the speed at which we execute the code, for example, the
random function?
Check the MDN Documentation, Math
JavaScript Fundamentals 9
Math.Pi // Gives Pi
Math.random() // Gives a random value between o and 1, if you want bigger n
umbers you can multiply it
Math.floor() // Rounds down
Math.ceil() // Rounds up
Math.round() // Round to the nearest integer
Math.max() // Returns the highest of 2+ numbers
Math.min() // Returns the lowest of 2+ numbers
5.5.-Infinity and NaN
When you operate with strings and numbers, you can get a NaN. It represents
data type number that is not a valid number. 3 * “Hello”
Use: Number.isNaN(Value) to check if Value is NaN
You have infinity
JavaScript Fundamentals 10
