Como chamar o Js no html = <script src="script.

js"></script>
console.log serve para usar o console no inspecionar do Google

TIPOS DE DADOS

String: definida pelas aspas, cadeia de caracteres qualquer.

Number: números, aparecem em azul no console.
Undefined: quando o pc não se sabe o que há dentro da variável.
Null: quando sabidamente não há nada dentro da variável.
Boolean: true(verdadeiro) or false(falso), aparece em azul.

\n pra pular de linha

pra realizar comentário no código JS :

// comentário (finaliza na mesma linha)
Ou
/* comentário*/ (finaliza com o fechamento)

FUNÇÕES ARITIMETICAS

+ adição += Formas abrevidadas das funções

- Subtração -=
* Multiplicação *=
/ Divisão /=
% Modulo (Resto de Divisão) %=

++ Incremento (variável mais um) Sempre coloque o ++ ou -- na frente da variável

-- Decremento (variável menos um)
** Potência

OPERADORES DE COMPARAÇÃO
== igual a
=== valor igual e igual
!= não é igual
! == não igual ou não igual
> maior que
< menor que
>= maior que ou igual a
<= menor ou igual a

OPERADORES LÓGICOS

&& Se uma das variáveis for false, o resultado vai ser false. TBM FUNCIONA COMO UM
and NO IF ELSE
|| Se uma das variáveis for true, o resultado vai ser true. TBM FUNCIONA COMO UM
or NO IF ELSE
! + variável, é o contrário da variável

parseInt Transforma strings em números inteiros.

parseFloat Transforma strings em números flutuantes.

OPERADOR TERNÁRIO
Ele avalia expressões condicionais, de maneira parecida com o if:
var variavel = x
“variavel” condição ‘?’ valorSeTrue : valorSeFalse;

SWITCH
Uma alternativa para estruturas condicionais como if else
switch(condição){
case "Alternativa":
}

PARA MELHOR ENTENDIMENTO

-if para especificar um bloco de código a ser executado, se uma condição
especificada for verdadeira;
-else para especificar um bloco de código a ser executado, se a mesma condição for
falsa;
-else if para especificar uma nova condição para testar, se a primeira condição for
falsa;
-switch para especificar muitos blocos de código alternativos a serem executados;

REPETIÇÃO (LOOP) ou Laço

FOR: utilizado pra repetir algum objeto especificado um determinado n° de vezes. O
comando entre parênteses é executado até quando a expressão deixar de ser
verdadeira
Ex:
Var num = 5;
For (var i = 0; i < num; i++){
Console.log(“executando”)
}
Console.log(“texto que reproduz quando condição deixa de ser verdadeira”)

WHILE: a principal diferença entre o “for” é que no “while” é um número

indeterminado de ações.

Var num = 5;
while (num < 10){
Console.log(“numero “ + num)
}
Console.log(“texto que reproduz quando condição deixa de ser verdadeira”)

ARRAYS: sequência de variáveis agrupadas ou uma lista como em Python

FORMA DE CRIAÇÃO
1 - var vetor = new Array (dado1, dado2, ...);
Console.log(vetor[0]);
*imprime dado1*
2 - var vetor = [dado1, dado2, ...];

Dentro do array os dados devem ser separados por vírgula.

Os dados dentro do array seguem uma ordem (index, índice) que inicia no número
zero, este representando a primeira posição e assim sucessivamente
*Length: mostra o comprimento do array

ARRAY e FOR
FOR + IN= imprime número do index
For (var i in vetor)
FOR + OF = imprime dado real da posição do index
For (var i of vetor)

FUNÇÃO: "apelido" pra um bloco de comando

Declarando função:
Function nomedafunção () {bloco de comando a ser executado}

Para executar o bloco de função é necessário chama-la:

Nomedafunção();

No momento de declaração da uma função ela pode receber argumentos (dentro do

parênteses), estes argumentos são valores que serão executados no momento do
“chamamento” da função. *argumentos são separados por vírgula*

return serve para retornar o resultado de uma função para uma variável

Função Anônima Exemplo:

var media = function (n1, n2) {
return (n1, n2)/2:
}
console.log(media(5, 6));

ArrowFunction Exemplo:
var media = (n1, n2) => {
return (n1, n2)/2:
}
console.log(media(5, 6));

OBJETOS são semelhantes ao Array, porém são feitos com chaves{} ao inves de
colchetes[], e os objetos tem propriedades que são uma variável com nome diferente,
e métodos que são funções com nome diferente. É como se fosse uma dicionario de
Python
Ex: var aluno = {
nome: "Victor", <-- PROPRIEDADE
notas: [9.5, 10]

media: function(n1, n1) { <-- MÉTODO

return(n1 + n1) / 2
}
}
E para simplificar os métodos, podemos fazer uma função fora do objeto e usa-lo
dentro do objeto depois
Ex: function calcMedia() {
return(this.notas[0] + this.notas[1]) / 2
}
OBJETOS CONSTRUTORES é uma forma de construir objetos sem ficar repetindo várias
vezes à mesma coisa, diminuindo as chances de errar, usando funções
Ex: function criarMateria(materia, n1, n2, n3){
return{
materia: materia,
nota1: n1,
nota2: n2,
nota3: n3,
media: function(){
return(this.nota1 + this.nota2 + this.nota3) / 3
}
}
}
RESUMÃO OBJETOS:

Objetos em JavaScript são como objetos na vida real, ou seja, são entidades
independentes com propriedades e tipo.
Propriedade: é o par nome : valor, esse par é chamado de propriedade
Acessando a propriedade: podemos acessar de duas maneiras
usando ponto : nomeDoObjeto.Propriedade
ex: pessoa.nome
usando colchetes: nomeDoObjeto["Propriedade"] ex:
pessoa["nome"]

Métodos: são ações realizadas pelo objeto. Os métodos são armazenados

nas propriedades dos objetos como funções definidas.
Acessando métodos: podemos acessar usando a seguinte sintaxe
nomeDoObjeto.NomeDoMetodo()

Formas de instanciar uma Data:

var d = new Date();

var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Métodos para manipular datas:

getDate() Returns the day of the month (from 1-31)

getDay() Returns the day of the week (from 0-6)
getFullYear() Returns the year
getHours() Returns the hour (from 0-23)
getMilliseconds() Returns the milliseconds (from 0-999)
getMinutes() Returns the minutes (from 0-59)
getMonth() Returns the month (from 0-11)
getSeconds() Returns the seconds (from 0-59)
getTime() Returns the number of milliseconds since midnight Jan 1 1970, and a
specified date
getTimezoneOffset() Returns the time difference between UTC time and local
time, in minutes
getUTCDate() Returns the day of the month, according to universal time (from
1-31)
getUTCDay() Returns the day of the week, according to universal time (from 0-6)
getUTCFullYear() Returns the year, according to universal time
getUTCHours() Returns the hour, according to universal time (from 0-23)
getUTCMilliseconds() Returns the milliseconds, according to universal time (from
0-999)
getUTCMinutes() Returns the minutes, according to universal time (from 0-59)
getUTCMonth() Returns the month, according to universal time (from 0-11)
getUTCSeconds() Returns the seconds, according to universal time (from 0-59)
getYear() Deprecated. Use the getFullYear() method instead
now() Returns the number of milliseconds since midnight Jan 1, 1970
parse() Parses a date string and returns the number of milliseconds since
January 1, 1970
setDate() Sets the day of the month of a date object
setFullYear() Sets the year of a date object
setHours() Sets the hour of a date object
setMilliseconds() Sets the milliseconds of a date object
setMinutes() Set the minutes of a date object
setMonth() Sets the month of a date object
setSeconds() Sets the seconds of a date object
setTime() Sets a date to a specified number of milliseconds after/before January
1, 1970
setUTCDate() Sets the day of the month of a date object, according to
universal time
setUTCFullYear() Sets the year of a date object, according to universal time
setUTCHours() Sets the hour of a date object, according to universal time
setUTCMilliseconds() Sets the milliseconds of a date object, according to
universal time
setUTCMinutes() Set the minutes of a date object, according to universal time
setUTCMonth() Sets the month of a date object, according to universal time
setUTCSeconds() Set the seconds of a date object, according to universal time
setYear() Deprecated. Use the setFullYear() method instead
toDateString() Converts the date portion of a Date object into a readable string
toGMTString() Deprecated. Use the toUTCString() method instead
toISOString() Returns the date as a string, using the ISO standard
toJSON() Returns the date as a string, formatted as a JSON date
toLocaleDateString() Returns the date portion of a Date object as a string,
using locale conventions
toLocaleTimeString() Returns the time portion of a Date object as a string,
using locale conventions
toLocaleString() Converts a Date object to a string, using locale conventions
toString() Converts a Date object to a string
toTimeString() Converts the time portion of a Date object to a string
toUTCString() Converts a Date object to a string, according to universal time
UTC() Returns the number of milliseconds in a date since midnight of January 1,
1970, according to UTC time
valueOf() Returns the primitive value of a Date object

VAR, CONST, LET

VAR: variável global

Ex: var n1= 5;

LET: variável local (possui bloco de escopo)

Ex: let n2= 6;

CONST: constante, não recebe novos valores, mas pode ter seu valor original
alterado, se comporta como variável local (possui bloco de escopo)
Ex: const n3= 7
*a principal vantagem da variável local é de poder ser mais facilmente localizada
em caso de algum eventual erro no código

WINDOW é tudo, tudo está dentro do Window, Window é como se fosse uma objeto mãe,
console por exemplo é um objeto que tem vários métodos como o log(), e está dentro
de outro objeto, o Window no caso

DOCUMENT é mais uma propriedade do Window, que possibilita acessar nosso HTML e
modifica-lo
Ex: dentro do console no google, digitamos document.body.innerHTML = "<h1>Hello
World</h1>" + document.body.innerHTML Assim colocando um título diretamente pelo JS
Podemos também acessar id e class da seguinte forma:
document.body.getElementsByClassName("Nome da Class") e
document.body.getElementById("Nome da Id")

Eventos de HTML DOM

Os eventos HTML DOM permitem que o JavaScript registre diferentes manipuladores de

eventos em elementos em um documento HTML.

Os eventos são normalmente usados em combinação com funções, e a função não será
executada antes do evento ocorrer (como quando um usuário clica em um botão).
Event Description Belongs To
abort The event occurs when the loading of a media is aborted UiEvent, Event
afterprint The event occurs when a page has started printing, or if the print
dialogue box has been closed Event
animationend The event occurs when a CSS animation has completed
 AnimationEvent
animationiteration The event occurs when a CSS animation is repeated
AnimationEvent
animationstart The event occurs when a CSS animation has started
AnimationEvent
beforeprint The event occurs when a page is about to be printed Event
beforeunload The event occurs before the document is about to be unloaded
UiEvent, Event
blur The event occurs when an element loses focus FocusEvent
canplay The event occurs when the browser can start playing the media (when it
has buffered enough to begin) Event
canplaythrough The event occurs when the browser can play through the media
without stopping for buffering Event
change The event occurs when the content of a form element, the selection, or
the checked state have changed (for <input>, <select>, and <textarea>) Event
click The event occurs when the user clicks on an element MouseEvent
contextmenu The event occurs when the user right-clicks on an element to open a
context menu MouseEvent
copy The event occurs when the user copies the content of an element
ClipboardEvent
cut The event occurs when the user cuts the content of an element
ClipboardEvent
dblclick The event occurs when the user double-clicks on an element MouseEvent
drag The event occurs when an element is being dragged DragEvent
dragend The event occurs when the user has finished dragging an element
DragEvent
dragenter The event occurs when the dragged element enters the drop target
DragEvent
dragleave The event occurs when the dragged element leaves the drop target
DragEvent
dragover The event occurs when the dragged element is over the drop target
DragEvent
dragstart The event occurs when the user starts to drag an element DragEvent
drop The event occurs when the dragged element is dropped on the drop target
DragEvent
durationchange The event occurs when the duration of the media is changed Event
ended The event occurs when the media has reach the end (useful for messages like
"thanks for listening") Event
error The event occurs when an error occurs while loading an external file
ProgressEvent,UiEvent, Event
focus The event occurs when an element gets focus FocusEvent
focusin The event occurs when an element is about to get focus FocusEvent
focusout The event occurs when an element is about to lose focus FocusEvent
fullscreenchange The event occurs when an element is displayed in fullscreen mode
Event
fullscreenerror The event occurs when an element can not be displayed in
fullscreen mode Event
hashchange The event occurs when there has been changes to the anchor part of a
URL HashChangeEvent
input The event occurs when an element gets user input InputEvent, Event
invalid The event occurs when an element is invalid Event
keydown The event occurs when the user is pressing a key KeyboardEvent
keypress The event occurs when the user presses a key KeyboardEvent
keyup The event occurs when the user releases a key KeyboardEvent
load The event occurs when an object has loaded UiEvent, Event
loadeddata The event occurs when media data is loaded Event
loadedmetadata The event occurs when meta data (like dimensions and duration)
are loaded Event
loadstart The event occurs when the browser starts looking for the specified
media ProgressEvent
message The event occurs when a message is received through the event source
Event
mousedown The event occurs when the user presses a mouse button over an element
MouseEvent
mouseenter The event occurs when the pointer is moved onto an element MouseEvent
mouseleave The event occurs when the pointer is moved out of an element
MouseEvent
mousemove The event occurs when the pointer is moving while it is over an element
MouseEvent
mouseover The event occurs when the pointer is moved onto an element, or onto one
of its children MouseEvent
mouseout The event occurs when a user moves the mouse pointer out of an element,
or out of one of its children MouseEvent
mouseup The event occurs when a user releases a mouse button over an element
MouseEvent
mousewheel Deprecated. Use the wheel event instead WheelEvent
offline The event occurs when the browser starts to work offline Event
online The event occurs when the browser starts to work online Event
open The event occurs when a connection with the event source is opened Event
pagehide The event occurs when the user navigates away from a webpage
PageTransitionEvent
pageshow The event occurs when the user navigates to a webpage
PageTransitionEvent
paste The event occurs when the user pastes some content in an element
ClipboardEvent
pause The event occurs when the media is paused either by the user or
programmatically Event
play The event occurs when the media has been started or is no longer paused
Event
playing The event occurs when the media is playing after having been paused or
stopped for buffering Event
popstate The event occurs when the window's history changes PopStateEvent
progress The event occurs when the browser is in the process of getting the
media data (downloading the media) Event
ratechange The event occurs when the playing speed of the media is changed Event
resize The event occurs when the document view is resized UiEvent, Event
reset The event occurs when a form is reset Event
scroll The event occurs when an element's scrollbar is being scrolled
UiEvent, Event
search The event occurs when the user writes something in a search field (for
<input="search">) Event
seeked The event occurs when the user is finished moving/skipping to a new
position in the media Event
seeking The event occurs when the user starts moving/skipping to a new position
in the media Event
select The event occurs after the user selects some text (for <input> and
<textarea>) UiEvent, Event
show The event occurs when a <menu> element is shown as a context menu Event
stalled The event occurs when the browser is trying to get media data, but data
is not available Event
storage The event occurs when a Web Storage area is updated StorageEvent
submit The event occurs when a form is submitted Event
suspend The event occurs when the browser is intentionally not getting media
data Event
timeupdate The event occurs when the playing position has changed (like when the
user fast forwards to a different point in the media) Event
toggle The event occurs when the user opens or closes the <details> element
Event
touchcancel The event occurs when the touch is interrupted TouchEvent
touchend The event occurs when a finger is removed from a touch screen
TouchEvent
touchmove The event occurs when a finger is dragged across the screenTouchEvent
touchstart The event occurs when a finger is placed on a touch screen TouchEvent
transitionend The event occurs when a CSS transition has completed
TransitionEvent
unload The event occurs once a page has unloaded (for <body>) UiEvent,
Event
volumechange The event occurs when the volume of the media has changed
(includes setting the volume to "mute") Event
waiting The event occurs when the media has paused but is expected to resume
(like when the media pauses to buffer more data) Event
wheel The event occurs when the mouse wheel rolls up or down over an element
WheelEvent
Propriedades e métodos de eventos HTML DOM
Property/Method Description Belongs To
altKey Returns whether the "ALT" key was pressed when the mouse event was
triggered MouseEvent
altKey Returns whether the "ALT" key was pressed when the key event was
triggered KeyboardEvent,TouchEvent
animationName Returns the name of the animation AnimationEvent
bubbles Returns whether or not a specific event is a bubbling eventEvent
button Returns which mouse button was pressed when the mouse event was
triggered MouseEvent
buttons Returns which mouse buttons were pressed when the mouse event was
triggered MouseEvent
cancelable Returns whether or not an event can have its default action prevented
Event
charCode Returns the Unicode character code of the key that triggered the
onkeypress event KeyboardEvent
changeTouches Returns a list of all the touch objects whose state changed
between the previous touch and this touch TouchEvent
clientX Returns the horizontal coordinate of the mouse pointer, relative to the
current window, when the mouse event was triggered MouseEvent,TouchEvent
clientY Returns the vertical coordinate of the mouse pointer, relative to the
current window, when the mouse event was triggered MouseEvent,TouchEvent
clipboardData Returns an object containing the data affected by the clipboard
operation ClipboardData
code Returns the code of the key that triggered the event KeyboardEvent
composed Returns whether the event is composed or not Event
createEvent() Creates a new event Event
ctrlKey Returns whether the "CTRL" key was pressed when the mouse event was
triggered MouseEvent
ctrlKey Returns whether the "CTRL" key was pressed when the key event was
triggered KeyboardEvent,TouchEvent
currentTarget Returns the element whose event listeners triggered the event
Event
data Returns the inserted characters InputEvent
dataTransfer Returns an object containing the data being dragged/dropped, or
inserted/deleted DragEvent, InputEvent
defaultPrevented Returns whether or not the preventDefault() method was called for
the event Event
deltaX Returns the horizontal scroll amount of a mouse wheel (x-axis)
WheelEvent
deltaY Returns the vertical scroll amount of a mouse wheel (y-axis)
WheelEvent
deltaZ Returns the scroll amount of a mouse wheel for the z-axis WheelEvent
deltaMode Returns a number that represents the unit of measurements for delta
values (pixels, lines or pages) WheelEvent
detail Returns a number that indicates how many times the mouse was clicked
UiEvent
elapsedTime Returns the number of seconds an animation has been running
AnimationEvent
elapsedTime Returns the number of seconds a transition has been running
eventPhase Returns which phase of the event flow is currently being evaluated
Event
getTargetRanges() Returns an array containing target ranges that will be affected
by the insertion/deletion InputEvent
getModifierState() Returns an array containing target ranges that will be
affected by the insertion/deletion MouseEvent
inputType Returns the type of the change (i.e "inserting" or "deleting")
InputEvent
isComposing Returns whether the state of the event is composing or not
InputEvent,KeyboardEvent
isTrusted Returns whether or not an event is trusted Event
key Returns the key value of the key represented by the event KeyboardEvent
key Returns the key of the changed storage item StorageEvent
keyCode Returns the Unicode character code of the key that triggered the
onkeypress event, or the Unicode key code of the key that triggered the onkeydown
or onkeyup event KeyboardEvent
location Returns the location of a key on the keyboard or device
KeyboardEvent
lengthComputable Returns whether the length of the progress can be computable or
not ProgressEvent
loaded Returns how much work has been loaded ProgressEvent
metaKey Returns whether the "META" key was pressed when an event was triggered
MouseEvent
metaKey Returns whether the "meta" key was pressed when the key event was
triggered KeyboardEvent,TouchEvent
MovementX Returns the horizontal coordinate of the mouse pointer relative to the
position of the last mousemove event MouseEvent
MovementY Returns the vertical coordinate of the mouse pointer relative to the
position of the last mousemove event MouseEvent
newValue Returns the new value of the changed storage item StorageEvent
newURL Returns the URL of the document, after the hash has been changed
HasChangeEvent
offsetX Returns the horizontal coordinate of the mouse pointer relative to the
position of the edge of the target element MouseEvent
offsetY Returns the vertical coordinate of the mouse pointer relative to the
position of the edge of the target element MouseEvent
oldValue Returns the old value of the changed storage item StorageEvent
oldURL Returns the URL of the document, before the hash was changed
HasChangeEvent
onemptied The event occurs when something bad happens and the media file is
suddenly unavailable (like unexpectedly disconnects)
pageX Returns the horizontal coordinate of the mouse pointer, relative to the
document, when the mouse event was triggered MouseEvent
pageY Returns the vertical coordinate of the mouse pointer, relative to the
document, when the mouse event was triggered MouseEvent
persisted Returns whether the webpage was cached by the browser
PageTransitionEvent
preventDefault() Cancels the event if it is cancelable, meaning that the default
action that belongs to the event will not occur Event
propertyName Returns the name of the CSS property associated with the
animation or transition AnimationEvent,TransitionEvent
pseudoElement Returns the name of the pseudo-element of the animation or
transition AnimationEvent,TransitionEvent
region MouseEvent
relatedTarget Returns the element related to the element that triggered the
mouse event MouseEvent
relatedTarget Returns the element related to the element that triggered the
event FocusEvent
repeat Returns whether a key is being hold down repeatedly, or not
KeyboardEvent
screenX Returns the horizontal coordinate of the mouse pointer, relative to the
screen, when an event was triggered MouseEvent
screenY Returns the vertical coordinate of the mouse pointer, relative to the
screen, when an event was triggered MouseEvent
shiftKey Returns whether the "SHIFT" key was pressed when an event was triggered
MouseEvent
shiftKey Returns whether the "SHIFT" key was pressed when the key event was
triggered KeyboardEvent,TouchEvent
state Returns an object containing a copy of the history entries PopStateEvent
stopImmediatePropagation() Prevents other listeners of the same event from being
called Event
stopPropagation() Prevents further propagation of an event during event flow Event
storageArea Returns an object representing the affected storage object StorageEvent
target Returns the element that triggered the event Event
targetTouches Returns a list of all the touch objects that are in contact with
the surface and where the touchstart event occured on the same target element as
the current target element TouchEvent
timeStamp Returns the time (in milliseconds relative to the epoch) at which the
event was created Event
total Returns the total amount of work that will be loaded ProgressEvent
touches Returns a list of all the touch objects that are currently in contact
with the surface TouchEvent
transitionend The event occurs when a CSS transition has completed
TransitionEvent
type Returns the name of the event Event
url Returns the URL of the changed item's document StorageEvent
which Returns which mouse button was pressed when the mouse event was triggered
MouseEvent
which Returns the Unicode character code of the key that triggered the onkeypress
event, or the Unicode key code of the key that triggered the onkeydown or onkeyup
event KeyboardEvent
view Returns a reference to the Window object where the event occurred
UiEvent