0% found this document useful (0 votes)
11 views50 pages

JavaScript Basics: A Beginner's Guide

This document is an introductory guide to JavaScript for beginners, emphasizing its importance and versatility in web development. It covers fundamental concepts such as variables, functions, operators, data types, and control structures, providing a foundation for programming in JavaScript. The guide also highlights the various applications of JavaScript, including front-end and back-end development, mobile applications, and game development.

Translated by

ScribdTranslations
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
11 views50 pages

JavaScript Basics: A Beginner's Guide

This document is an introductory guide to JavaScript for beginners, emphasizing its importance and versatility in web development. It covers fundamental concepts such as variables, functions, operators, data types, and control structures, providing a foundation for programming in JavaScript. The guide also highlights the various applications of JavaScript, including front-end and back-end development, mobile applications, and game development.

Translated by

ScribdTranslations
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

JAVASCRIPT

FOR BEGINNERS
From Zero to the First Code
SUMMARY

02 INTRODUCTION

03 TO BEGIN: WHY IS IT A
IS IT A GOOD IDEA TO LEARN JAVASCRIPT?

11 GLOSSARY: A DIVE
IN TERMS OF LANGUAGE

22 MAIN FRAMEWORKS

29 JAVASCRIPT INTERACTION
WITH THE GIFT

33 EVENTS IN JAVASCRIPT

38 FIRST STEPS BEFORE


PROGRAM

42 HANDS ON: CREATING YOUR


FIRST CODE
INTRODUCTION

JavaScript is a very powerful language. It unites


a series of applications to the incredible advantages of
use it in these numerous contexts. Furthermore, it is
always being updated, with new libraries and
frameworks to overcome limitations and achieve greater
versatility. Therefore, it is essential for anyone who wants to
continue in the front-end for those who need to advance in
full stack world.

Despite everything, JavaScript is also a language


simple. It involves basic knowledge about
programming and about internet infrastructure,
but once you know them, everything becomes easier
easy.

That's why it's great that you are reading this e-book.
Nele, you will understand what these fun concepts are.
fundamental to take the first steps, such as JS
acts on a web page, the importance of language
and will understand in practice how to take these initial steps
with some codes that we will teach.

We will show the base concepts as a guide, of


a way that helps you understand what you must do
help. Then, we will show you how to do it. Follow along and
learn more about this fascinating technology.
TO START:
WHY IS IT A GOOD IDEA
LEARN JAVA SCRIPT?
_
TO START: WHY IS IT A GOOD IDEA TO LEARN JAVASCRIPT?

Let's start with a question: why


Learn JavaScript? If there are so many technologies-
effective actions around the world, why focus on this
language?

We will respond with three topics. In the first,


we will address what can be done with this lin-
language today. Thus, you will have an insight into your
versatility. In the second, we will talk about the fun-
function of JS on a common site. Finally, we will talk about
about the opportunities and the field of vision for
who deals with JavaScript on a daily basis.

[Link] 04
_
TO START: WHY IS IT A GOOD IDEA TO LEARN JAVASCRIPT?

WHAT DO YOU
CAN DO WITH
JAVASCRIPT

The main function of JS is to generate dynamism for


a web page. Considering an already existing framework
created with HTML and CSS, JavaScript appears to
add a programming logic and bring it to life
to a series of crucial resources for the fulfillment
requirements mentor.

In addition, a good part of the frameworks and libraries


focus on this: the presentation part of the sites, the
called front-end.

However, JS does not stop there. It is already adopted for the


currently back-end as well, with the framework
[Link]. Thus, it is used to handle APIs,
authenticate information flows and other actions
on the server side.

We can also have JS paratest and for au-


task automation —such as compression of
CSS, website optimization and other processes im-
important. For automation, Gulp is used,
a specific library.

[Link] 05
_
TO BEGIN: WHY IS IT A GOOD IDEA TO LEARN JAVASCRIPT?

There are records of applications for mobile as well,


with the development of responsive interfaces
You go from typical applications for smaller screens. The
JavaScript also manipulates the database.
with MongoDB.

In more different and interesting uses, we have the


JS applied for game development, with
the libraries Impact and Phaser.

It is worth mentioning the application for intelligence


artificial, a very important theme in us-
these days, and for operating systems. To deal
with AI, we have the [Link] library, version of

[Link] 06
_
TO START: WHY IS IT A GOOD IDEA TO LEARN JAVASCRIPT?

known TensorFlow. For operating systems-


Nice, we have [Link].

In initiatives focused on the back-end, many


people have been achieving good results with
real-time conversation applications, such as in
a chat.

WHAT IS THE FUNCTION OF


JAVASCRIPT IN A
SITE?

On websites, the main application of JS is in the optimization


front-end action. Once the HTML and CSS
provide a visually already per-
personalized, JS is used to add the final touches
final touches. (And these final touches are very important
yes, because they allow the site to interact with the user
(actively harmful.)

Imagine, for example, an HTML element with


a certain color. From the HTML only,
it is not possible to change the color dynamically, with
the user's click, let's say. However, with a
embedded logic in JS, you can do it. Starting from
configuration of the click treatment, it is possible

[Link] 07
_
TO START: WHY IS IT A GOOD IDEA TO LEARN JAVASCRIPT?

change the color automatically (we will see more


about this in the events section of this e-book).

This becomes a possibility for other actions.


also: it is feasible to make something appear or disappear from
dynamic fabric and other types of use.

In addition, it is possible to zoom in on images,


show an automatically updating counter
mind on the screen, draw a number, show menus
animated or interactive and show carousels. In
interface of Netflix and websites like YouTube, the
mechanism that allows horizontal dragging

[Link] 08
_
TO GET STARTED: WHY IS IT A GOOD IDEA TO LEARN JAVASCRIPT?

to see more movies or videos is possible with the


JS.

Recently, we have the importance of the single-


-page application, an example of a page that
can update elements without changing the page
in full. An example of this? Gmail, with the feature-
action of sending emails and checking the inbox
at the same time. Or Twitter with the function of
check the most talked about topics while the time-
line is updated.

[Link] 09
WHO WORKS USING
THIS LANGUAGE?

The person who deals with JS on a daily basis is usually the person in charge of
front-end. It takes care of the graphical interface, the experience, and the visual aspect.
generally. However, full stack professionals also need to master the lin-
language, as they may use it for the front, for the database or
for the back.

Furthermore, other people can use this technology: scientists


data piles, people who create games, as well as mobile devs.

After this first topic with an overview of the language, you


you have probably already noticed that you are facing one of the most important
contemporary technologies. Now, let's move on to concepts that
You need to know before you start programming in JS.

WE .C
O
ARET
M
ARE 10
GLOSSARY:
A DIVE INTO
TERMS OF LANGUAGE
JAVASCRIPT
_
GLOSSÁRIO: UM MERGULHO NOS TERMOS DA LINGUAGEM JAVASCRIPT

Understand more about some terms of the universe


JavaScript is essential to take the first steps
steps even before coding. We separate al-
concepts for you to understand a little
of the technical language that involves the process of
programming in JavaScript.

» VARIABLES

» FUNCTIONS OR METHODS

» OPERATORS

» DATA TYPES

» REPETITION STRUCTURES

» CONDITIONAL STRUCTURES

» FRAMEWORKS

[Link] 12
_
GLOSSÁRIO: UM MERGULHO NOS TERMOS DA LINGUAGEM JAVASCRIPT

VARIABLES

Let's start with the variables: they represent


a space in the available memory to allocate
a certain value. The objective is to record
an important piece of information to use it later
previously. The advantage of using a variable, in
instead of declaring the value directly, it is possible ma-
nibbling this space in memory and submitting this
small structure to changes in logic.

For example, a numerical variable can start


start with a value of 10. However, with the sub-logic
subsequent addition processing is done and
this variable becomes 20. Then, it changes in-
again for 354.

So that you do not need to keep this number


on your head after his changes, you
stores in memory space. This space will
to be accessed always to make the changes
automatically (the person who programs neither
you need to know about these changes, only really about the

logic).

The variables also serve as a way to


make the code cleaner and easier to understand
end. Instead of having a loose number in the middle of
code, the programmer can define a
variable named Total_Income, which indicates
very clearly what it is about.

[Link] 13
_

FUNCTIONS
GLOSSÁRIO: UM MERGULHO NOS TERMOS DA LINGUAGEM JAVASCRIPT

OR METHODS

Functions are pieces of code that perform al-


specific task. Thus, every time that cha-
we have this function, we obtain its solution of
simple and encapsulated form. The alternative to
the use of functions would be a complex and
organized in which we would need to develop
a set of code whenever you needed it
most of that task.

Let's say you need a code to de-


return to the percentage of a number in relation to
to another. This is a calculation a little more with-
plex to be done and requires a set of steps
Help. So, if you do this in the most ...
intuitive, writing all the code every time that
to clarify, your source code will become a ba-
sucker. Besides, you'll have the task of writing
again always.
_
GLOSSARY: A DEEP DIVE INTO JAVASCRIPT LANGUAGE TERMS

With functions, you encapsulate that task and


its operating logic in one term
specific (the name of the function). So, you just have to
call the function and pass what we call
parameters — which are the values with which
the function works. In our example, parameters-
those would be the numbers I want to use for the
calculation.

We will see several functions throughout this e-book.


that do ready tasks, with which not even
even we care about logic, only-
you with the task executed. Thus, we will understand
better how a function is used.

[Link] 15
_
GLOSSARY: A DIVE INTO THE TERMS OF JAVASCRIPT LANGUAGE

OPERATORS

In JavaScript and in other programming languages


Operators are symbols that represent
it's an operation. They can be operators
arithmetic, which basically resemble the
what we learn in mathematics at school: add-
addition, subtraction, multiplication, and division. Being
that for multiplication, we use '*' and for division,
we use “/”.

In division, we specifically have the division in-


land, which is represented by "%". It returns
only the integer part of the answer.

Other important types of operators are the


of comparison of numbers, which comprise
greater than (>), less than (<), equal (== or ===) and
different (!=).

Finally, we have the class of logical operators.


These are learned when we study logic
boolean. They are: && (and), || (or), and ! (not). The "and" only
is satisfied when two conditions are met
thus, the 'or' is satisfied when one of the conditions
is satisfied, while the 'no' denies what comes
then it is only satisfied when the condition is
negative.

[Link] 16
_
GLOSSARY: A DEEP DIVE INTO THE TERMS OF JAVASCRIPT LANGUAGE

DATA TYPES

Data types are standards that we use in


programming to determine different modes
the two dice we are working with.
In this way, it becomes easier to develop logic-
logical flows case.

Assume that types of data differ-


they cannot be processed as similar-
yes, example: a number is not of the same type
that a string (set of letters), therefore, does not
we can simply perform a calculation
between a number and a string.

That is, with this delimitation between the types, it is


is it possible to know exactly when we will be able to
perform a calculation or processing between variables
able to do so without errors. In addition to numbers and strings,
we have the boolean type (true or false) and the
null (which determines an empty value).

The great highlight of JS concerning types


data is that the language is not strongly
typed. Thus, if you define a variable, not
it is necessary to specify the strictly data type and
you can change the type whenever you want. In other words, when-
assigns a value to your variable, you define the
type of her temporarily.

17
_

STRUCTURES
GLOSSÁRIO: UM MERGULHO NOS TERMOS DA LINGUAGEM JAVASCRIPT

ON REPETITION

One of the most important elements of logic


Programming is the ability to create loops.
flow controllers that repeat the same
operation until a certain condition
may it be fulfilled.

You can have, for example, a set of da-


two that you want to display on the screen. With a loop, you
displays this set until the counter of them-
the set of mentos reaches its limit, the number-
of elements of the set.

One of the main applications of a structure


Repetition is traversing data structures (that
are a grouping of variables), whether to exhibi-
one of the elements, either to carry out some process -
sameness with them.

SOME TYPES OF LOOP STRUCTURE ARE:


for, while, forEach and do-while.
Basically, they establish a counter element and execute a
code block (an encapsulated block, similar to a function) until
that the counter reaches the established limit.

It is always important to be careful with logic, as a structure


this poorly formulated leads the system to what we call deloop
infinite can freeze the application.
_

STRUCTURES
GLOSSARY: A DIVE INTO THE TERMS OF JAVASCRIPT LANGUAGE

CONDITIONALS

Other flow control elements of ex-


such importance are the conditioning structures-
Nice. The two main ones are the "if-else" block and the
switch

The if-else block works in a very simple way.


You define a comparison condition (if X <
2, for example) and place a code block inside the
if it will be executed if that condition is
fulfilled (if satisfied, add 1 to X, for example).
The "else" is the contrasting element that executes
a certain instruction only in the case of
if condition does not pass (if X is not < 2).

if(x< 2){
/ifcode
else {
<h1>test of if </h1>
}

In a common code of an application, you


you will see many 'ifs'. In fact, it is common that there are -
put an if-else block inside a loop, for test-
have conditions in elements of a certain
data structure only.

[Link] 19
_
GLOSSARY: A DEEP DIVE INTO JAVASCRIPT LANGUAGE TERMS

The switch analyzes a variable and establishes


conditions to execute different pieces of
code. For example, let's say the switch analyzes
If our variable X, the cases can be: case > 2,
case < 2 or case == 2. For each case, we have a
instruction that must be executed.

Conditional structures divide the flow into


a logic similar to that of a tree. Each con-
the edition allows the system to go to one side or
for another of the branching.

[Link] 20
_
GLOSSARY: A DIVE INTO THE TERMS OF JAVASCRIPT LANGUAGE

FRAMEWORKS

Frameworks are standards of libraries and classes


that can be used in different projects. Or
they are a kind of ready-made code that can
streamline the programming work.

JavaScript is a language known for its


incredible number of libraries and frameworks. They are
they, in fact, make technology so versatile
and powerful for various applications.

[Link] 21
MAIN
FRAMEWORKS
_
MAIN FRAMEWORKS

As we said, JS frameworks are essential-


ways for programmers to earn
agility in code creation. Thus, it is int-
it's interesting to know the main frameworks of
market, those that emerge most in discussions
sessions and job openings to help you
to prepare oneself.

Before we begin, a warning is worth noting: the frameworks


JavaScripts change quite a lot, in a way
fast. New versions always emerge and even mes-
my new frameworks to improve life for the
programming people. Therefore, this guide to be-
To obtain a visa, just present the main ones.

[Link] 23
_
MAIN FRAMEWORKS

ANGULAR

One of the most famous is undoubtedly Angular,


whose purpose is traditional development
front-end. Requires a more complex process
of installation and configuration, but generates very
the positive effects for companies. One of
its advantages is the fact that it is a framework
open-source.

It is a very useful tool for those who


needs to manipulate the DOM (structure of elements-
page layout) and for those who seek simplicity
in the management of data binding and testing. Thus, the
code changes are already designed in the part
of visualization, which enables better performance
I yearn for the interfaces.

For being probably the most famous and adored


in job openings, the Angular community
it is very large. Once you commit to
this standard, you will find many people ready
to help with problems and challenges on the internet.

[Link]
_
MAIN FRAMEWORKS

REACT

The technology created by Facebook had a pro-


very clear statement: allow the development of
SPA (single-page applications) interfaces with fa-
facilitate. In other words, enable the creation of interfaces
those with elements that changed without needing to
reload the entire page.

In this way, it became a very relevant standard.


for those who want to reach dynamic pages.
It is very useful also for encouraging encapsulation.
lament and the reuse of code, which pos-
ability that functions and scripts created with a
function should be used in several projects.

Similar to Angular, React is known


for involving a large community and being very-
it's important for front-end and full positions
stack.

[Link] 25
_
MAIN FRAMEWORKS

[Link]

[Link] is an extremely important solution that


revolutionized the use of JS language by allowing
that she could be used outside the browser. The very
framework works as an execution environment
With that, the use of language has expanded.
for the applications we have already mentioned, include-
of operating systems and the back-end.

By the way, when it comes to back-end, Node ...


has some very interesting possibilities. One of them
it is the chance to work with microservices and
serverless architecture.

This means a much greater capacity to


produce independent elements that can
be changed without affecting others
(a section, a menu, a sidebar). The use of mi-
cross-services is a modern trend.

[Link] 26
_
MAIN FRAMEWORKS

EMBER JS

It is one of the competitors of Angular, with a focus


quite developed in performance. Also
presents a large and interesting community
health to help with daily projects. One of
its uses are precisely the creation of single pa-
ge applications, as well as for tests
robust
_
MAIN FRAMEWORKS

[Link]

Considered a great competitor of React and


Angular, [Link] is a simpler option than
is gaining ground. Even if it's not so
dear to people who recruit devs, it is still
very important for the front-end community.
Allows the development of single-page applications,
with a good control of data-binding as well.

It is a lighter framework, using a logic of


DOM virtual and allows you to change its values
ponents easily. Its great highlight
it is the fact that Vue is a progressive framework
that is, which enables use and adaptation to
step by step in small parts of the system.

[Link] 28
INTERACTION OF
JAVASCRIPT WITH THE DOM
_
INTERACTION OF JAVASCRIPT WITH THE DOM

We talked a lot about the DOM in the last topic.


Now let's define what this is about
Yes. The acronym stands for Document Object Model and
represents a tree of elements of the structure
from a web page.

If we talk about structure, you should already be thinking about

HTML. Exactly. The DOM is the set of tags


do HTML, arranged in a hierarchy in the mo-
tree structure. For example: the main node of
every page is the HTML tag, which is the main one in
all web document. Inside this tag, we have the
tags HEAD and BODY. And so on.

Source:Tableless
_
INTERACTION OF JAVASCRIPT WITH THE DOM

Being the DOM the skeleton of the page, JavaScript


one of its main functions is the
manipulation of it. It is possible to add elements
tos, remove elements, react to events
that affect these elements, among other actions.
From a specific object that manipulates the
document, are you able to bring
HTML elements and add them to the logic of
JS for control.

Thus, it is possible to use those concepts that


we have seen, as a repetition structure and structure
conditional to work with the components
from our page.

In this sense, it is important to address two con-


concepts of HTML that you will see a lot in codes
JavaScript: id and class. These are two strategies for
name elements and allow them to be iden-
qualified and recovered in the JS code, in order to
be part of your logic.

The difference between them? The id is generally used


as a way to identify a unique element
to. While the class is used for grouping
as elements similar. Thus, you can
group similar elements by calling them
all of the same class.

[Link] 31
_
INTERACTION OF JAVASCRIPT WITH THE DOM

This is why we have functions and methods that help


to handle class and id. One of them is "[Link]-
elementById, which will allow retrieving any
elements with that id, and another is the document.
getElementsByClassName(), which will enable
search for elements by class name.

It is important to note here that on this subject the


JavaScript becomes a highly technology
dependent on HTML and CSS. So, to do-
master JS and use it correctly in daily life,
you will also need a good basis of
HTML/CSS.

32
EVENTS
JAVASCRIPT
_
EVENTS IN JAVASCRIPT

Another important concept in JS programming


it is the event. In summary, an event is an occurrence-
treatment that changes the status of some element
on the page and can be manipulated in the logic
of programming. The event usually takes place by
account of some action of the browser or the person
user

When we enter the event part, our


JavaScript is starting to get more interesting and
fun. Because it is at this point that we understand
how to add real interactivity to our page
and really deal with people's actions that
I use a website.

[Link] 34
_
EVENTS IN JAVASCRIPT

For that, we need an element that


Get ready to notice any change in the st-
your two DOM elements. The term for this in
web programming is 'listen' or 'hear'. It's like a
always on alert to capture these changes.

An example of this is the click. A click is a


event, as it is an action of the user
mouse pull.

The information is recorded by the operating system


and finally arrives at the browser that interprets
that as an event. If you have drawn-
turned a logic to handle that event, something
it will happen. For example, we can define that
our page changes color whenever the user
click on something.

The event handling follows a logic


very similar to that of conditional structures and
to the repetition structures we discussed
in the glossary. Only that this logic occurs in a way
automated, given that we only have access to
your final version. It works like this: if an event is
detected, then do something. If not, continue ten-
I have to capture it.

[Link] 35
_
EVENTS IN JAVASCRIPT

Other examples of events are: loading


complete the page, when a key is pressed
nothing, loading an image, when the
mouse is placed over an object, types-
action of something in the form field, etc.

With these treatments, the possibilities of


animations increase and allow for an interface
but live. For example, when the user passes
the mouse over the menu, it may increase
of size; or when the user hovers the mouse
on the carousel arrow, it drags horizontally,
show other elements and update.

With this, the page becomes dynamic and improves.


the user experience, providing answers
faster.

It is interesting to notice how the DOM and event themes


they connect. An event is nothing more than a
change that affects all elements of the DOM in
a hierarchical sequence. Remember the tree? Well,
a change in a child element begins to be
detected by the parent nodes until it reaches him.

Subsequently, the event is propagated back to the element.


root-mentor, rising in the hierarchy in the opposite order
to the capture.
FIRST STEPS
BEFORE PROGRAMMING
_
FIRST STEPS BEFORE PROGRAMMING

Well, you already know the main concepts.


to program in JS: conditional structures,
operadores, variáveis, funções, eventos, DOM,
etc. You already understand the reason for using the language in

your projects and recognizes the importance of


keep studying. The time has come to understand what
what are the preparatory steps for programming
fact.

[Link] 38
_
FIRST STEPS BEFORE PROGRAMMING

One of them is the configuration of your environment.


This term may seem complex, but it is very-
it's simpler than it seems, since programming
for web does not require any installed systems.
Can you do your first example with the
good old notepad.

However, if you want something a little more useful,


with more resources, you can install Notepad++
a kind of notebook with upgrades.

Another option is to look for an IDE instead. An IDE


it is a complete platform for development
to applications in programming languages.
Offers syntax recognition resources,
autocomplete, compilation and execution and int-
grace with libraries. It is still possible to test
and analyze the code for errors (which are
pointed out clearly.

In other words, it is a complete suite for programming.


Among the known ones, we have Vim, Visual Studio
Code, WebStorm, NetBeans, and others.

[Link] 39
_
FIRST STEPS BEFORE PROGRAMMING

The installation is usually very simple and ...


depends on other specific packages/resources of the
language used. For pure JavaScript, you
it will take a few minutes.

For the case of JavaScript with frameworks, for


to program it is necessary to configure the environment and the

code packages. Angular, for example, de-


hangs from the installation of a mechanism called
from NPM, which can be done in a terminal of
command.

A great advantage in recent years in the uni-


the reverse of programming is the possibility of not
you don't need to install anything on your machine and even
thus obtaining the robust resources of an IDE. It is the
use of cloud programming software.
For web development, we have Code Pen
(which also functions as a project hub)
and a social network) and Replit.

With them, you start instantly and already


you can see your code working. Including,
we recommend using them for the next topic.

[Link] 40
HANDS ON: CREATING
YOUR FIRST CODE
_
HANDS ON: CREATING YOUR FIRST CODE

Here we are. Now that you have learned concei-


basic concepts and the logic behind JS, it's time to
get your hands dirty. In this topic, we will en-
show two simple JavaScript applications for
you understand how to start.

[Link] 42
_
HANDS ON: CREATING YOUR FIRST CODE

HELLO,
WORLD

The tradition when starting a new technology is to come-


with a simple "hello, world". So, this is
just our first example.

We recommend that you open the Code Pen website


for these examples. In the upper left part
from the home page, click on "start coding".

First, start with the structure of a shovel-


standard web page in the HTML section. Includes a
tag 'html', a 'head' tag, a 'title' tag, a
tag 'meta', a 'body' tag and a 'script' tag.
All with their proper closure.

<html>
<head>

<metacharset="utf-8"/>
<title>Meu Primeiro Codigo</title>

<body>

</body>

</head>

</html>
_
HANDS ON: CREATING YOUR FIRST CODE

Now, let's go to our js file. There, we will write...


mos "[Link]("hello, world!");". In summary,
we are asking for our writing function to
see in the DOM that it prints a message.

hello, world!

The result of this code will appear in a


web page like this:

44
_
HANDS ON: CREATING YOUR FIRST CODE

SIMPLE FORM

For the second example, maintain the structure already.


created from HTML.

For our form, we will need a tag


"form". Inside it, the form elements
they belong to the tags "label" (name of the cham-
po) and "input" (blank space for typing).

<formname=“meu_form”>

Register

Name
<inputtype=“text”id=“nome-id”placeholder=“nome e sobrenome”required=“required”name=“nome”/>
<br>
<br>

Email
<inputtype=“email”id=“email-id”placeholder=“fulano@[Link]”name=“email”/>
<br>
<br>

<inputtype=“submit”class=“enviar”onclick=“Enviar();”value=“Enviar”/>
</form>

The first input is of the text type. We define that


this field will be mandatory, so we added it
or 'required'. The email input type is email, when
the step that the submit button is of type "submit".
_
HANDS ON: CREATING YOUR FIRST CODE

Ready. Our form HTML is ready.


Now, let's move on to JS.

There, we will create a function named 'send'. The


the first part of this function will take the element
that has the id "name-id" of our DOM and pass
for the variable 'name'.

functionSend(){

varnome=[Link](“nome-id”);

if([Link]!=""){
alert('Thank you, ' + [Link] + ', your data has been successfully submitted');
}

Then, we make a verification: if the value of


variable is not null, we can then assume that the
person filled in the name. Thus, we display a
message with the function 'alert'. The result is
the form:
CONCLUSION

Congratulations! If you made it this far, you have already taken your first steps.

my steps in this language and now, it is enough to con-


continue to develop and explore other ideas and
frameworks.

As you saw, JavaScript is a versatile technology.


it is essential for the construction of modern web pages
nas, responsive and dynamic. It is also a standard
highly required in the market, thus fundamental
such for full stack and front-end development.

With the basic knowledge, you can already en-


tender how the language works and try to write
the first codes. We hope this is just
the beginning of your web development journey.

Feels like it's time to move forward in this career.


Oh? Then get to know the new course from Tera, Full Stack
Development, which will shape the next generation of
Full Stack professionals!

MEET THE COURSE

[Link]
ABOUT THE TERA

We are more than a school, we are a community-


of people passionate about education and technology.

We believe that a better world is born from work.


of aware, responsible, and courageous people who
we appropriate technology to serve the collective.
EDITORIAL TEAM

Composition
Gabriel Sacramento

Review
Rebeca Nascimento

Art direction
Tatiane Rocha

Typesetting
Marina Ferreira

Common questions

Powered by AI

Loops in JavaScript, such as 'for', 'while', 'forEach', and 'do-while', enable repetitive execution of code blocks until a specified condition is met. They are crucial for iterating over data structures and executing tasks on each element . Conditionals like 'if-else' and 'switch' allow for decision-making within code by executing code blocks based on whether certain conditions are true or false . Together, these constructs provide logical flow control in programming, allowing complex and conditional logic to be implemented efficiently within applications.

JavaScript event handling and DOM manipulation work together to facilitate dynamic content updates by responding to user interactions or changes within the document. Event handlers are set up to monitor specific user actions, like clicks or inputs, and trigger functions that modify the Document Object Model (DOM) accordingly . This enables the changing of element properties, adding or removing elements, and updating content on the page in real time without requiring a full page reload. This interaction underpins modern interactive and responsive web applications, allowing them to operate smoothly and enhance user engagement by delivering interactive experiences .

Node.js has expanded JavaScript's use by enabling server-side scripting, which allows developers to use JavaScript to script server-side operations, such as handling APIs, serving web pages, and managing databases . This unification of front-end and back-end JavaScript usage simplifies development processes by allowing developers to work within a single language across the full stack, reducing the need for context switching and leveraging their existing skill set. The implication is a more cohesive development experience and potentially faster project turnaround times .

JavaScript enhances user experience by allowing dynamic changes to the webpage content and layout without needing to reload the page. It uses event handlers to respond to user inputs, making elements appear or disappear, change color, or animate, thus providing an interactive and responsive interface. For example, on platforms like Netflix or YouTube, JavaScript enables features like horizontal drag for browsing content . This capability to modify elements in response to user interaction makes it integral to enhancing the user experience.

JavaScript is essential for creating dynamic web pages and interactive user interfaces on the front-end, as it allows for real-time updates and user interaction . On the back-end, JavaScript, through Node.js, offers functionality for handling APIs, managing information flows, and performing tasks such as database manipulation with MongoDB . It also supports automation tasks and is applied in mobile applications, game development, and even artificial intelligence . This versatility and wide range of applications make JavaScript a valuable skill for modern developers.

Gulp is a JavaScript-based task runner that automates common development tasks like CSS preprocessing, image optimization, and website deployment . It operates using a 'stream' pipeline allowing for the chaining of tasks, resulting in increased efficiency as tasks can be processed concurrently. By automating repetitive tasks, developers can focus on coding rather than maintenance processes, significantly improving productivity . Gulp's configuration is code-based rather than configuration-file-driven, providing flexibility and ease of integration into various projects, making it an efficient tool for streamlining development workflows .

Using an Integrated Development Environment (IDE) in JavaScript programming significantly enhances productivity by providing features such as syntax highlighting, code completion, and debugging tools, which simplify coding tasks and reduce errors . IDEs like Visual Studio Code and WebStorm integrate with libraries and frameworks, allowing seamless project management and execution. They also offer comprehensive toolsets that assist in developing, testing, and managing code efficiently, which is particularly beneficial for complex projects . The use of IDEs streamlines the development process, allowing developers to focus more on creating functionality rather than managing development logistics.

JavaScript frameworks like Angular, React, and Vue provide pre-built structures and components that significantly expedite the software development process by offering ready-to-use code and consistent architecture for applications . They allow developers to focus on building the functionality of applications rather than reinventing the wheel, thus reducing development time and improving code maintainability. Additionally, as open-source tools, these frameworks foster collaboration and ongoing improvement through community contributions, keeping them up-to-date and robust for creating modern web applications .

JavaScript's non-strong typing, or dynamic typing, allows developers to assign any type of data to variables without explicit data type declaration. This flexibility means that a variable can hold a string, number, or boolean at different times without constraint . This leads to easier management when dealing with dynamic datasets. However, it also necessitates caution as type-related errors can occur if operations are performed on incompatible types. The flexibility improves development speed and reduces verbosity, but it requires careful programming to avoid runtime errors caused by unexpected data types .

Functions in JavaScript encapsulate specific tasks within reusable code blocks, allowing developers to avoid repetitive logic throughout their codebase. Instead of rewriting code for a task, developers can define a function and call it with different parameters as needed, simplifying code updates and debugging . This encapsulation leads to clearer, more maintainable code and improved efficiency since logic is centrally managed rather than scattered across the codebase. Functions also facilitate modular programming, enabling developers to build and integrate discrete, independently testable units within larger applications .

You might also like