SlideShare uma empresa Scribd logo
JavaScript - Aula 01
Jessyka Lage
https://jesslage.wordpress.com/
JavaScript - Porque estudar JavaScript?
● JavaScript é uma linguagem de programação interpretada
poderosa, flexível e rápida, sendo bastante usada para o
desenvolvimento de páginas Web.
● O JavaScript é conhecido principalmente como a linguagem
da maioria dos navegadores modernos.
● JS permite que você adicione comportamento às suas
páginas web, recursos que faltam no HTML, possibilitando
a criação de páginas interativas e dinâmicas.
O que podemos fazer
com JS?
● Interagir com usuário (através de
eventos)
● Interagir com o conteúdo do
documento, alterando propriedades
da página (ex. validação de
campos).
● Operações matemáticas e
computacionais.
● Manipular informações como
histórico, barra de estados, plug-
ins, etc.
Vamos iniciar?
Por onde
começar?
Editores de texto
Para o desenvolvimentos de
programas em JS, vamos precisar
de um editor de texto de sua
preferência. Ex: NotePad++,
Sublime Text...
Quais as formas
de usar JS?
Podemos encontrar códigos JS
em:
● Blocos <script></script>
das páginas HTML.
● Em arquivos externos,
importados a página.
● Dentro de descritores
HTML, sensível a
eventos.
Introdução a linguagem
Tipos de Dados JS
Tipos de dados são classificações para as diferentes estruturas de dados que podemos
utilizar na linguagem. Em JS, existem sete tipos de dados fundamentais:
● Number: incluindo inteiros e decimais.
● String: Para qualquer grupo de caracteres (letras, numeros, símbolos, etc).
Utilizando aspas “” ou aspas simples ‘’.
● Boolean: dados que podem assumir apenas valores verdadeiro(true) ou
falso(false).
● Null: Tipo de dados que representam intencionalmente a ausência de valor.
representado pela palavra null (sem aspas).
● Undefined: Tipo de dado que representa valor ainda não definido.
● Symbol: Novo tipo de dado na linguagem, único e imutável, pode ser usado como um
identificador para propriedades de objeto.
● Object: coleções de dados.
Operadores matemáticos:
● Soma: +
● Subtração: -
● Multiplicação: *
● Divisão: /
● Resto: %
Outros operadores:
● Incremento : ++
● Decremento: --
● -=, *=, e /=.
Declaração de variáveis:
Anteriormente ao ES6, programas em JS poderiam apenas
declarar variáveis usando a palavra var. Atualmente, para
declaração de variáveis utilizamos:
● let - usado para criação ou declarações de variáveis que
sofrerão mudanças no decorrer do programa.
● const - abreviação de constante, utilizado para variáveis
que não sofrerão alterações.
= é o operador de atribuição.
ex:
let languageName = ‘JavaScript’;
Declaração de variáveis:
Ainda sobre declaração de variáveis, devemos estar ciente das
seguintes regras para nomeação de variáveis:
● Não podem iniciar com números.
● Variáveis case sensitive, ou seja, por exemplo quando
utilizamos com os nomes name e Name, estamos tratando de
duas variáveis.
Estruturas de condição:
Inicialmente iremos tratar:
● Operador If/else.
● Operador switch/case.
Operadores condicionais:
Nos próximos passos, estudaremos estruturas de condição, mas antes
disso, precisamos conhecer os principais operadores condicionais em
JavaScript:
Operadores Condicionais:
Menor que: <
Maior que: >
Menor ou igual a: <=
Maior ou igual a: >=
Igual a: ===
Diferente de: !==
Operadores Condicionais
Lógicos:
Operador and/e: &&
Operador or/ou: ||
Operador not/não: !
Estruturas de condição (IF):
Recurso utilizado para indicar instruções de como o sistema
deve processar a partir de uma expressão booleana (verdadeiro
ou falso). A seguir um exemplo do comando if/else:
Operador ternário:
Além do if/else, em JavaScript também podemos utilizar
operadores ternários. No exemplo anterior, a estrutura de
condição pode ser substituída por um operador ternário,
conforme demonstrado a seguir:
Estruturas de condição (switch):
Recurso utilizado para indicar instruções de como o sistema deve processar com
base em uma comparação de valores. A seguir um exemplo do comando switch/case
em JavaScript:
Obrigada!
Referências:
● https://www.codecademy.com/learn/introduction-to-javascript
● https://developer.mozilla.org/en-US/docs/Web/JavaScript
● Freeman, E. Robson, E. Head First JavaScript Programming. 2014.
O’Reilly’s.
● https://pt.slideshare.net/brunogrange/minicurso-de-
javascript?qid=b06cc17f-20ac-4ed8-9ff9-
a7f307cc32be&v=&b=&from_search=2
Ficou com alguma dúvida ou sugestão?
Fala comigo :)
jessykalage@gmail.com

Mais conteúdo relacionado

Mais procurados

Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
Daniel Brandão
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
Léo Dias
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
Tiago Antônio da Silva
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
Rodrigo Bueno Santa Maria, BS, MBA
 
Curso javascript básico
Curso javascript básicoCurso javascript básico
Curso javascript básico
Vinicius Dacal Lopes
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
Gabriel Moura
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento WebSérgio Souza Costa
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
Leonardo Soares
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
Vinícius Roggério da Rocha
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
ledsifes
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
Rodrigo Bueno Santa Maria, BS, MBA
 
Aula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para WebAula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para Web
Daniel Brandão
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
Eduardo Mendes
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
Centro Paula Souza
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
Tiago Luiz Ribeiro da Silva
 
Conceitos Iniciais de Linguagens de Programação
Conceitos Iniciais de Linguagens de ProgramaçãoConceitos Iniciais de Linguagens de Programação
Conceitos Iniciais de Linguagens de ProgramaçãoSidney Roberto
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
Rodrigo Branas
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
MarceloRosenbrock1
 

Mais procurados (20)

Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Curso javascript básico
Curso javascript básicoCurso javascript básico
Curso javascript básico
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
Aula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para WebAula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para Web
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
 
Conceitos Iniciais de Linguagens de Programação
Conceitos Iniciais de Linguagens de ProgramaçãoConceitos Iniciais de Linguagens de Programação
Conceitos Iniciais de Linguagens de Programação
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 

Semelhante a Aula 01 - JavaScript: Introdução

Tutorial java script orientado à objeto e jquery
Tutorial java script orientado à objeto e jqueryTutorial java script orientado à objeto e jquery
Tutorial java script orientado à objeto e jquery
Luan Campos
 
08 Java Script Introdução - Teoria
08 Java Script   Introdução  - Teoria08 Java Script   Introdução  - Teoria
08 Java Script Introdução - Teoria
Centro Paula Souza
 
09 Java Script - As formas de usar
09  Java Script  - As formas de usar09  Java Script  - As formas de usar
09 Java Script - As formas de usar
Centro Paula Souza
 
Introdução ao javascript
Introdução ao javascriptIntrodução ao javascript
Introdução ao javascript
Luís Cobucci
 
Javascript - Aplicações Interativas para a Web
Javascript - Aplicações Interativas para a WebJavascript - Aplicações Interativas para a Web
Javascript - Aplicações Interativas para a Web
Adriano Lima
 
Tutorial JSP parte 1
Tutorial JSP parte 1Tutorial JSP parte 1
Tutorial JSP parte 1
Bruno Strik
 
Java script1
Java script1Java script1
Java Server Pages
Java Server PagesJava Server Pages
Introdução JavaScript e DOM 2016
Introdução JavaScript e DOM 2016Introdução JavaScript e DOM 2016
Introdução JavaScript e DOM 2016
Romualdo Andre
 
JS FUNDAMENTOS - AULA 01.pdf
JS FUNDAMENTOS - AULA 01.pdfJS FUNDAMENTOS - AULA 01.pdf
JS FUNDAMENTOS - AULA 01.pdf
AntonioSvio1
 
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
Julio Betta
 
Aula 1 - Java - Prof.ª Cristiane Fidelix
Aula 1 - Java - Prof.ª Cristiane FidelixAula 1 - Java - Prof.ª Cristiane Fidelix
Aula 1 - Java - Prof.ª Cristiane Fidelix
Cris Fidelix
 
Aula1- Java PRof.ª Cristiane Fidelix
Aula1- Java PRof.ª Cristiane FidelixAula1- Java PRof.ª Cristiane Fidelix
Aula1- Java PRof.ª Cristiane Fidelix
Cris Fidelix
 
Java e orientação a objetos
Java e orientação a objetosJava e orientação a objetos
Java e orientação a objetos
Frederico Maia Arantes
 
Programação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com DojoProgramação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com Dojo
fabioginzel
 
JSP - Java Serves Pages
JSP - Java Serves PagesJSP - Java Serves Pages
JSP - Java Serves Pages
Amanda Luz
 
Linguagens de programação
Linguagens de programaçãoLinguagens de programação
Linguagens de programação
Elaine Cecília Gatto
 
Escalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLIDEscalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLID
Ruben Marcus Luz Paschoarelli
 
AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!
Lucas Brasilino
 

Semelhante a Aula 01 - JavaScript: Introdução (20)

Tutorial java script orientado à objeto e jquery
Tutorial java script orientado à objeto e jqueryTutorial java script orientado à objeto e jquery
Tutorial java script orientado à objeto e jquery
 
08 Java Script Introdução - Teoria
08 Java Script   Introdução  - Teoria08 Java Script   Introdução  - Teoria
08 Java Script Introdução - Teoria
 
FC-Logic
FC-LogicFC-Logic
FC-Logic
 
09 Java Script - As formas de usar
09  Java Script  - As formas de usar09  Java Script  - As formas de usar
09 Java Script - As formas de usar
 
Introdução ao javascript
Introdução ao javascriptIntrodução ao javascript
Introdução ao javascript
 
Javascript - Aplicações Interativas para a Web
Javascript - Aplicações Interativas para a WebJavascript - Aplicações Interativas para a Web
Javascript - Aplicações Interativas para a Web
 
Tutorial JSP parte 1
Tutorial JSP parte 1Tutorial JSP parte 1
Tutorial JSP parte 1
 
Java script1
Java script1Java script1
Java script1
 
Java Server Pages
Java Server PagesJava Server Pages
Java Server Pages
 
Introdução JavaScript e DOM 2016
Introdução JavaScript e DOM 2016Introdução JavaScript e DOM 2016
Introdução JavaScript e DOM 2016
 
JS FUNDAMENTOS - AULA 01.pdf
JS FUNDAMENTOS - AULA 01.pdfJS FUNDAMENTOS - AULA 01.pdf
JS FUNDAMENTOS - AULA 01.pdf
 
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
 
Aula 1 - Java - Prof.ª Cristiane Fidelix
Aula 1 - Java - Prof.ª Cristiane FidelixAula 1 - Java - Prof.ª Cristiane Fidelix
Aula 1 - Java - Prof.ª Cristiane Fidelix
 
Aula1- Java PRof.ª Cristiane Fidelix
Aula1- Java PRof.ª Cristiane FidelixAula1- Java PRof.ª Cristiane Fidelix
Aula1- Java PRof.ª Cristiane Fidelix
 
Java e orientação a objetos
Java e orientação a objetosJava e orientação a objetos
Java e orientação a objetos
 
Programação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com DojoProgramação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com Dojo
 
JSP - Java Serves Pages
JSP - Java Serves PagesJSP - Java Serves Pages
JSP - Java Serves Pages
 
Linguagens de programação
Linguagens de programaçãoLinguagens de programação
Linguagens de programação
 
Escalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLIDEscalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLID
 
AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!
 

Aula 01 - JavaScript: Introdução

  • 1. JavaScript - Aula 01 Jessyka Lage https://jesslage.wordpress.com/
  • 2. JavaScript - Porque estudar JavaScript? ● JavaScript é uma linguagem de programação interpretada poderosa, flexível e rápida, sendo bastante usada para o desenvolvimento de páginas Web. ● O JavaScript é conhecido principalmente como a linguagem da maioria dos navegadores modernos. ● JS permite que você adicione comportamento às suas páginas web, recursos que faltam no HTML, possibilitando a criação de páginas interativas e dinâmicas.
  • 3. O que podemos fazer com JS? ● Interagir com usuário (através de eventos) ● Interagir com o conteúdo do documento, alterando propriedades da página (ex. validação de campos). ● Operações matemáticas e computacionais. ● Manipular informações como histórico, barra de estados, plug- ins, etc.
  • 5. Por onde começar? Editores de texto Para o desenvolvimentos de programas em JS, vamos precisar de um editor de texto de sua preferência. Ex: NotePad++, Sublime Text...
  • 6. Quais as formas de usar JS? Podemos encontrar códigos JS em: ● Blocos <script></script> das páginas HTML. ● Em arquivos externos, importados a página. ● Dentro de descritores HTML, sensível a eventos.
  • 8. Tipos de Dados JS Tipos de dados são classificações para as diferentes estruturas de dados que podemos utilizar na linguagem. Em JS, existem sete tipos de dados fundamentais: ● Number: incluindo inteiros e decimais. ● String: Para qualquer grupo de caracteres (letras, numeros, símbolos, etc). Utilizando aspas “” ou aspas simples ‘’. ● Boolean: dados que podem assumir apenas valores verdadeiro(true) ou falso(false). ● Null: Tipo de dados que representam intencionalmente a ausência de valor. representado pela palavra null (sem aspas). ● Undefined: Tipo de dado que representa valor ainda não definido. ● Symbol: Novo tipo de dado na linguagem, único e imutável, pode ser usado como um identificador para propriedades de objeto. ● Object: coleções de dados.
  • 9. Operadores matemáticos: ● Soma: + ● Subtração: - ● Multiplicação: * ● Divisão: / ● Resto: % Outros operadores: ● Incremento : ++ ● Decremento: -- ● -=, *=, e /=.
  • 10. Declaração de variáveis: Anteriormente ao ES6, programas em JS poderiam apenas declarar variáveis usando a palavra var. Atualmente, para declaração de variáveis utilizamos: ● let - usado para criação ou declarações de variáveis que sofrerão mudanças no decorrer do programa. ● const - abreviação de constante, utilizado para variáveis que não sofrerão alterações. = é o operador de atribuição. ex: let languageName = ‘JavaScript’;
  • 11. Declaração de variáveis: Ainda sobre declaração de variáveis, devemos estar ciente das seguintes regras para nomeação de variáveis: ● Não podem iniciar com números. ● Variáveis case sensitive, ou seja, por exemplo quando utilizamos com os nomes name e Name, estamos tratando de duas variáveis.
  • 12. Estruturas de condição: Inicialmente iremos tratar: ● Operador If/else. ● Operador switch/case.
  • 13. Operadores condicionais: Nos próximos passos, estudaremos estruturas de condição, mas antes disso, precisamos conhecer os principais operadores condicionais em JavaScript: Operadores Condicionais: Menor que: < Maior que: > Menor ou igual a: <= Maior ou igual a: >= Igual a: === Diferente de: !== Operadores Condicionais Lógicos: Operador and/e: && Operador or/ou: || Operador not/não: !
  • 14. Estruturas de condição (IF): Recurso utilizado para indicar instruções de como o sistema deve processar a partir de uma expressão booleana (verdadeiro ou falso). A seguir um exemplo do comando if/else:
  • 15. Operador ternário: Além do if/else, em JavaScript também podemos utilizar operadores ternários. No exemplo anterior, a estrutura de condição pode ser substituída por um operador ternário, conforme demonstrado a seguir:
  • 16. Estruturas de condição (switch): Recurso utilizado para indicar instruções de como o sistema deve processar com base em uma comparação de valores. A seguir um exemplo do comando switch/case em JavaScript:
  • 18. Referências: ● https://www.codecademy.com/learn/introduction-to-javascript ● https://developer.mozilla.org/en-US/docs/Web/JavaScript ● Freeman, E. Robson, E. Head First JavaScript Programming. 2014. O’Reilly’s. ● https://pt.slideshare.net/brunogrange/minicurso-de- javascript?qid=b06cc17f-20ac-4ed8-9ff9- a7f307cc32be&v=&b=&from_search=2
  • 19. Ficou com alguma dúvida ou sugestão? Fala comigo :) jessykalage@gmail.com