Promoção Pacote Profissional JavaScript + jQuery

Com pressa?
Acesse direto o curso clicando aqui


Olá pessoal!

Durante o mês de Setembro estamos com uma promoção para o curso Pacote Profissional JavaScript, ES2020 e jQuery (+ jQuery UI).

Neste curso, abordamos o desenvolvimento web com JavaScript e jQuery.

Você vai utilizar as tecnologias:

  • JavaScript;

  • jQuery e jQuery UI;

  • ES2019;

  • ES2020;

  • Conceitos modernos de desenvolvimento web.

E você vai aprender:

  • Fundamentos do JavaScript;

  • Estruturas básicas de programação;

  • Aprofundamento das estruturas ensinadas;

  • Atualizações que o JavaScript vem recebendo;

  • Conceitos essenciais de JQuery.

Tudo isso resolvendo projetos que lhe auxiliarão no desenvolvimento dos seus sites e aplicações web!

Mostramos no curso as novas atualizações do ECMAScript 2020, que auxiliam o desenvolvedor a otimizar os seus códigos.

O curso está com desconto de 75% pelos próximos 31 dias e pode ser adquirido diretamente por este link:

Use nosso cupom : 1E2D3E957FADED9578A2  ou acesse direto pelo link abaixo

Acessar curso

Compartilhe com seus amigos!

 

Nossos Cursos na Udemy

Precisando aprender JavaScript? Confira então nossos cursos na Udemy

Introdução ao JavaScript

Grátis!!
Curso para inicantes que desejam aprender os fundamentos da programação JavaScript
O que você aprenderá:
  • Variáveis
  • Condicionais
  • Loops
  • Funções
  • Tipos de Dados
O curso inclui
  • Vídeo sob demanda de 2 horas
  • 4 recursos para download
  • 8 exercícios de programação
  • Acesso total vitalício
  • Acesso no dispositivo móvel e na TV

 

JavaScript Básico

R$39,99

Aprenda JavaScript do zero, descubra como manipular websites e faça 2 projetos práticos

O que você aprenderá
  • Será ensinado dos fundamentos de JavaScript
  • Será capaz de manipular websites e apps
  • Conseguirá criar eventos para ações em para elementos HTML
O curso inclui
  • Vídeo sob demanda de 6,5 horas
  • 11 recursos para download
  • 28 exercícios de programação
  • Acesso total vitalício
  • Acesso no dispositivo móvel e na TV
  • Certificado de Conclusão

 

Atualização JavaScript: ES2019 e ES2020

R$39,99
Aprenda sobre as atualizações do ECMAScript 2019 e 2020
O que você aprenderá
  • Implementações do ECMAScript 2019
  • Implementações do ECMAScript 2020
O curso inclui
  • Vídeo sob demanda de 1 hora
  • 4 artigos
  • 2 recursos para download
  • Acesso total vitalício
  • Acesso no dispositivo móvel e na TV
  • Certificado de Conclusão

 

Introdução ao jQuery

Grátis!!

Aprenda do zero sobre as funcionalidades essenciais do jQuery
O que você aprenderá
  • Fundamentos de jQuery
  • Criação de eventos
  • Manipulação do DOM
  • Animações simples
O curso inclui
  • Vídeo sob demanda de 1,5 horas
  • Acesso total vitalício
  • Acesso no dispositivo móvel e na TV

 

JQuery Prático

R$39,99

Aprenda sobre os métodos mais comuns do JQuery e JQuery UI que você encontrará na vida real

O que você aprenderá
  • Fundamentos de JQuery
  • Os métodos do JQuery mais utilizados em websites
  • Jquery UI
Este curso inclui
  • Vídeo sob demanda de 3,5 horas
  • 2 artigos
  • 1 recurso para download
  • 14 exercícios de programação
  • Acesso total vitalício
  • Acesso no dispositivo móvel e na TV
  • Certificado de Conclusão

Atualizações de Cursos MundoJS!

Olá pessoal! Estamos aqui para contar as novidades para vocês! Neste último mês, aconteceram algumas mudanças em nosso site! Nossa aba de cursos, no site, sofreu algumas alterações. Antes nós disponibilizávamos alguns links para cursos pagos e gratuitos de JavaScript.

Mas agora, o MundoJS começou a lançar seus próprios cursos!

No último mês, lançamos dois cursos na plataforma Udemy, sendo um totalmente gratuito e outro pago, chamados Introdução ao JavaScript e JavaScript Básico, respectivamente. Você pode acessar diretamente:

No curso de Introdução ao JavaScript, abordamos conceitos básicos da linguagem, criamos pequenos algoritmos, vemos as chamadas estruturas condicionais, enfim, o conteúdo básico para qualquer programador, que você provavelmente aprenderia no seu primeiro ano de faculdade.

No curso de JavaScript Básico, começamos a abordar conceitos um pouco mais avançados. Com um foco interessante na Manipulação do DOM e Eventos, abordamos de forma prática a utilização de eventos sobre elementos HTML. O curso também possui dois projetos práticos: Um jogo da velha e uma calculadora, feitos com HTML, CSS e JavaScript! O mais interessante é: disponibilizamos o HTML e CSS para você e, durante o curso, focamos apenas na lógica de programação por trás destes projetos!

Continue lendo “Atualizações de Cursos MundoJS!”

Curso Grátis de JavaScript by MundoJS

logo

Nosso primeiro curso de JavaScript está no ar, segue o link:

Instrodução ao JavaScript

Esperamos que gostem e nos mande uma mensagem aqui no site se você tiver alguma dúvida ou sugestão.
Para quem é o curso: Todo mundo, por favor se inscrevam… kkk

Descrição

O curso é para iniciantes no mundo da programação. Ele ensinará o conteúdo do primeiro semestre de algoritmos da maioria das faculdades, mas de uma forma mais sucinta para você não perder tempo. Conforme tivermos chance, iremos adicionar mais exercícios relevantes e ir atualizando qualquer problema que vocês nos informarem.

Neste curso você aprenderá os fundamentos de JavaScript necessários para entender os algoritmos criados com a linguagem. Você não precisa ter qualquer conhecimento técnico e se já souber o básico de algoritmos, terá bastante facilidade em entender todo o conteúdo.

Ao término dele você saberá mais sobre

  • Variáveis
  • Tipos de dados
  • If/Else
  • Switch
  • For
  • For Of
  • While
  • Do While

Como é grátis, convidamos todos a se inscreverem e nos darem sua opinião.

Bons estudos!!

Atualizações de Junho

logo
Prezados leitores do MundoJS,

A partir de hoje, será disponibilizado no site uma nova aba chamada Cursos, onde estarão disponíveis cursos gratuitos e pagos de empresas parceiras do MundoJS. Aqui, você encontrará e será direcionado para diversos cursos na área de desenvolvimento web, desde JavaScript básico até Front-End avançado e FullStack.

Clicando na palavra gratuitos, no subtítulo principal do site, você será redirecionado diretamente aos cursos que estão disponíveis gratuitamente. Fique ligado, pois novos cursos serão adicionados com o passar do tempo.

Atenciosamente,

Equipe Moderadora.

Aprendendo ReactJS: Parte 3

Este artigo é uma continuação da série Aprendendo ReactJS.

Para acessar primeiro o artigo, acesse: Aprendendo ReactJS: Introdução

Para acessar o anterior a este, acesse: Aprendendo ReactJS: Parte 2



Renderização condicional

A exibição de um componente funcional pode ser determinada baseado em suas propriedades. Por exemplo:

function Feature(props) {
    if (props.ativa == true) {
        return <h1>Esta funcionalidade está ativa.</h1>
    }
    else {
        return <h1>Esta funcionalidade está inativa.</h1>
    }
}

A mesma lógica pode ser expressada utilizado um operador ternário.

function Feature(props){
    return <h1>Está funcionalidade está {props.ativa? "ativa" : "inativa"}</h1>
}

Bloqueando a renderização

A exibição de um componente funcional pode ser evitada de renderizar como no exemplo abaixo:

function Feature(props) {
    if (props.ativa!) {
        return null
    }
    else {
        return <h1>{props.mensagem}</h1>
    }
}

Você também pode obter o mesmo resultado utilizando o operado &&:

function Feature(props){
    return (
        props.ativa && <h1>{props.mensagem}</h1>
    )
}

Com o operador && com um booleano e uma expressão, se o booleano for verdadeiro, ele executará a expressão. Caso ele seja falso, o JavaScript computa que falso e uma a expressão resultam sempre em falso e já sai do teste. Por isso ela não será renderizada.

Componentes de Classe

Além de poderem ser escritos como uma função, os componentes React podem também ser escritos usando as classes do ES6. Componentes de classe são diferentes dos components funcionais pois eles permitem ter métodos de ciclo de vida e estado. Eles também vem com duas propriedades instanciadas, this.state e this.props, que representam o estado e propriedades do componente.

Componentes React escritos usando classes ES6:

class BemVindo extends React.Component{
    render(){
        return <h1>Olá MundoJS!</h1>
    }
}

O código acima é o equivalente do seguinte componente funcional:

function BemVindo(){
    return <h1>Olá MundoJS!</h1>
}

Ambos components React podem ser escritos com seus nomes dentro de uma tag HTML:

let elemento = < BemVindo/>

Render()

O método render de um componente é usado para descrever qual tipo de elemento React será reotornado pelo componente de classe. É o equivalente ao valor passado no return do componente funcional. Por exemplo, o componente abaixo renderizará <h1> Olá MundoJS!</h1>:

class BemVindo extends React.Component {
    render() {
        return <h1> Olá MundoJS!</h1>
    }
}

//renderizará <h1> Olá MundoJS!</h1>
ReactDOM.render(
    < BemVindo />,
    document.getElementById("root")
)

Adicionando propriedades aos componentes de classe.

As propriedades de um componente podem ser acessadas através do atributo this.props. Isso difere levemente dos componentes funcionais onde elas precisam ser passadas como uma variável.

class BemVindo extends React.Component{
    render(){
        return <h1>Mensagem: {this.props.mensagem}</h1>
    }
}

Você pode fornecer as propriedades da mesma forma em ambos componentes.

<Welcome message="Olá MundoJS!"/>

Constructor(props)

O método contructor() é chamado antes do componente React ser montado e pode ser usado para configurar o estado inicial do componente. É importante chamar super(props) no começo do construtor pois senão o this.props poderá não funcionar corretamente. O primeiro argumento do construtor representará as propriedades sendo passadas para o componente.

class Counter extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return <div>Componente</div>
    }
}

Adicionando um estado inicial para os components de classe

O estado inicial dos componentes de classe podem ser declarados dentro do método constructor(). O estado deste componenetes deve ser declarado como um objeto com atributos.

class Counter extends React.Component{
    constructor(props){
        super(props)
        this.valores= {
  foo:123,
  bar:456
  }
    }

    render(){
        return <div>foo:{this.valores.foo} bar:{this.valores.bar}</div>
    }
}

Atualizando o estado

O método setState(updater,[callback]) é utilizado para atualizar o estado do componente. Ele recebe um objeto “atualizador” e atualiza o estado do componente através de uma mescla superficial do atributos dos dois objetos de estado (atual e novo). Como este metodo atualiza o estado de forma assinacrona, existe uma opção de chamar uma função de callback uma vez que a atualização terminou. Para poder usar o setState(), ele precisa ser referenciado através da chamada this.setState().

O método setState ativará a fase de atualização no ciclo de vida do componente, causanda a rerenderização a não ser que a função shouldComponentUpdate() retorne falso.

class Msg extends React.Component{
    constructor(props){
        super(props)
        //estado inicial
        this.state = {mensagem:"Mensagem Inicial"}
    }

    // Este método é chamado após todos os element filhos e instancias do components tenham carregado no Native UI.
    componentDidMount(){
        //updating state
        this.setState({mensagem:"Nova Mensagem"})
    }
    
    render(){
        return <div>Mensagem:{this.state.mensagem}</div>
    }
}

Por hoje seria isso. Assim que montar mais uma parte deste tutorial estarei liberando ele aqui no site do MundoJS.

Caso você encontre algum erro, tenha um contribuição ou dica, deixe seu comentário aqui em baixo que irei responder o mais breve possível.

Cursos completos de JavaScript

Seguindo a linha da postagem feita ano passado sobre Cursos completos que você não conhecia, estou postando uma nova lista atualizada para de cursos de empresas menos conhecidas, mas que nem por isso sejam ruins. Já cursei alguns dos listados abaixo e posso dizer que são muito bons.

Para ficar mais fácil de se organizar, os cursos estão agrupados pelas pessoas ou empresas que os criaram.


Alfamidia

Programação JavaScript Completo

Descrição: Um curso do básico ao avançado sobre JavaScript e JQuery. Ele permite que um pessoa que não saiba muito de programação possa aprender a usar o JS e conceitos mais avançados de programação a medida que o aluno avança nas aulas

Nível: Básico – Avançado

Duração: Você define e o curso possuí acesso vitálicio

Curso recebe atualizações: Não

Investimento: Sob consulta

 

Desenvolvimento Web e Mobile

Descrição: O curso online de desenvolvimento web e mobile percorre todos os campos da programação (do front-end ao back-end). O intuito é ensinar o estudante a ser um desenvolvedor com capacitação em todas as áreas do desenvolvimento de apps.

Nível: Básico – Avançado

Duração: Você define e o curso possuí acesso vitálicio

Curso recebe atualizações: Não

Investimento: Sob consulta

 


A´gora

JavaScript Completo

Descrição: Completo e passo a passo tem por objetivo principal ensinar todos os passos necessários que um iniciante na linguagem javascript precisa para dominar esta linguagem de programação que está crescendo bastante neste últimos tempos. Nela você terá todos os conhecimentos exigidos pelo mercado, do mais elementar ao mais avançados.

Nível: Básico

Duração: Você define e o curso possuí acesso vitálicio

Curso recebe atualizações: Não

Investimento: R$197,00, podendo parcelar em 2x sem juros

 

Formação Jquery Completo

Descrição: Este curso tem por objetivo ensinar do básico ao avançado do Jquery. Então você não tem muito conhecimento ou gostaria de aprimorar o que sabe para o nível profissional, esse é o curso ára você.

Nível: Básico

Duração: Você define e o curso possuí acesso vitálicio

Curso recebe atualizações: Não

Investimento: R$157,00, podendo parcelar em 2x sem juros


Udacity

Fundamentos Web Front-End

Descrição: Curso criado nos Estados Unidos com o foco em ensinar os fundamentos da programação Front-end. Ele lida com diversos detalhes da programação JavaScript não encontramos em qualquer lugar e aponta você para outros cursos gratuitos dentro do site deles.

Nível: Básico

Duração: 2 meses de curso e acesso irrestrito somente se você completar tudo

Curso recebe atualizações: Não

Investimento: 5 x R$106,00 – Com desconto à vista

 

Web Front-end Avançado

Descrição: Continuação do curso anterior. Aprofunda-se no entendimento do JavaScript de forma a ensinar a diferença entre as novas técnicas e as antigas. Você também descobrirá mais sobre o ganho de performance e aumento de produtividade do ES6.

Nível: Avançado

Duração: 3 meses meses de curso e acesso irrestrito somente se você completar tudo

Curso recebe atualizações: Não

Investimento: 9 x R$119,00 – Com desconto à vista

 


Danki Code

Curso Webmaster Front-end Completo

Descrição: Um curso de front-end bem completo que tem por objetivo ensinar do zero sobre como lidar com todos aspectos da tela, tanto visuais quanto lógicas. Diferente de um curso de web design que foca mais na questão visual e manipulação de imagens

Nível: Do básico ao avançado

Duração: Você define seu ritmo e com acesso vitalício.

Curso recebe atualizações: Sim

Investimento: 12 x R$19,00 – Com desconto à vista

 

Pacote Fullstack

Descrição: Inclui o curso Webmaster Front-end completo mencionado acima e fornece ainda mais material para ensina-lo sobre o funcionamento do back-end. É bem indicado para aqueles que querem se tornar desenvolvedores responsaveis (ou com o conhecimento) de ambas pontas da criação de uma aplicação web.

Nível: Do básico ao avançado

Duração: Você define

Tempo de acesso: Irrestrito

Curso recebe atualizações: Sim

Investimento: 12 x R$27,00 – Com desconto à vista

 

Desenvolvimento Web Completo

Descrição: Pronto para além de estudar os conceitos de HTML, CSS e JavaScript, também estudar muito PHP? Se sim, esse curso tavez seja para você. No curso de desenvolvimento Web Completo você estará se tornando um desenvolvedor Full Stacke aprendendo a conectar todas as pontas de uma aplicação web.

Nível: Do básico ao avançado

Duração: Você define

Tempo de acesso: Irrestrito

Curso recebe atualizações: Sim

Investimento: 12 x R$22,12 – Com desconto à vista


 

Conclusão

Isso ai, espero que algum destes cursos possam ajudar alguém. Caso você tenha uma duvida, pegunta ou sugestão, deixe seu comentário aqui abaixo para que possamos melhorar essa postagem.

Aprendendo ReactJS: Parte 2

Este artigo é uma continuação da série Aprendendo ReactJS.

Para acessar o artigo anterior, acesse: Aprendendo ReactJS: Introdução



Utilizando atributos com JSX

É possível fornecer valores de atributos usando strings

let elemento = <button className="btnRemover">Remover</button>

Obs.: devido ao fato que “class” é uma palavra reservado do JavaScript, quando você estiver definindo a propriedade classe de uma tag html, utilize a palavra propriedade JavaScript className.

Você também pode fornecer atributos utilizando expressões JavaScript cercadas por chaves:

let elemento = <img src={produto.urlImagem}/>

 

Obs.: Não coloque a expressão dentro de uma string pois isso fará ela ser tratada como uma string pura.

//Não faça isso.    
let elemento = <img src="{produto.urlImagem}"/>

 

Nota: Atributos JSX tem sua nomenclatura definida pela convenção “camelCase”. Por isso atributos HTML como fontsize se tornam fontSize no JSX.

 

Utilizando um objeto style no JSX

O atributo “style” das tags html podem ser populados com um objeto style no lugar de uma string. Veja o exemplo abaixo:

let styleObject = {

    backgroundColor: 'red',

    color: 'blue',

    fontSize: 25,

    width: 100

}

let elemento = <input style={styleObject} />

 

No exemplo abaixo, usaremos o primeiro grupo de chaves para a expressão JavaScript e o segundo para definir o objeto anônimo que definirá o style.

let element = <input style = {{width:200,height:100}}/>

 

 

Utilizando o JSX com elemento aninhados.

Elemento React podem ser aninhados/agrupados dentro de outros elementos React desde que na raiz do elemento exista uma única tag que contem todos.

// Neste exemplo, possuímos 3 elemento e apenas a div externa está na raiz
let elemento = (

    <div>
        <div>Olá MundoJS</div>
        <div>Olá MundoJS</div>
    </div>

)

// Já neste exemplo temos 2 elementos na raiz do objeto. Isso fará com que o React de erro.
var elemento2 = (

    <div>Olá MundoJS</div> 
    <div>Olá MundoJS</div>
)

 

Utilizando objetos JSX

Objetos criados com JSX podem ser manipulados como objetos JavaScript. Eles podem ser inseridos em vetores, utilizados em condicionais, utilizados em loops, passados como argumentos e retornados por funções.

// Exemplo de um objeto JSX utilizado em um IF

let produto = { nome: "banana", quantidade: 0 }

if (produto.quantidade === 0) {

    let elemento = <h1>O produto {produto.nome} não possuí estoque</h1>

}

else {

    let elemento = <h1>O produto {produto.nome} possuí {produto.quantidade} unidades em estoque</h1>

}

ReactDOM.render(

    elemento,
    document.getElementById("root")

)

Componentes React

Um componente React é um componente independente e reutilizável que exibe Elementos React baseados em suas propriedades e estados. Existem 2 tipos de componentes:

  • Componentes Funcionais
  • Componentes de Classe

Os componentes de classe têm um estado, métodos de ciclo de vida e propriedades. Enquanto componentes funcionais tem apenas propriedades. Primeiro veremos como funcionam os componentes funcionais e mais tarde falaremos de como os componentes de classe.

 

Componentes Funcionais

Este tipo de componente é apenas uma função que retorna elementos React. A convenção padrão do ReactJS pede que ao criar uma função, que o nome dela comece com letra maiúscula. Veja o exemplo abaixo:

function OlaMundoJS() {
    return <h1>Olá MundoJS!</h1>
}

 

Para utilizar o componente React que você criou dentro do JSX, basta criar uma tag HTML com o mesmo nome que o componente React.

let elemento = <OlaMundoJS/>

 

Outro exemplo

ReactDOM.render(

    <OlaMundoJS />,

    document.getElementById("root")
)

Em ambos casos, o elemento React exibido será aquele retornado pelo componente funcional HelloWorld.

 

Adicionando propriedades aos componentes funcionais

O primeiro parâmetro passado para um componente funcional é um objeto que contem as propriedades do componente.

function OlaMundo(props) {

    return <h1>mensagem: {props.mensagem}</h1>

}

 

Você pode dar valores as propriedades da mesma forma que são dados valores a atributos HTML.

ReactDOM.render(

    <HelloWorld message="Olá Mundo!" />,

    document.getElementById("root")

)

 

Propriedades podem ser strings, vetores ou qualquer outro tipo de objeto JavaScript. Você também pode utilizar elementos React como propriedades:

function OlaMundo(props) {
    return <h1>Valor: {props.listanumeros[props.index]} </h1>
}

ReactDOM.render(
    <OlaMundo index="3" listaNumeros={[1, 2, 3, 4, 5]} />,
    document.getElementById("root")
)

Criando Componentes

Componentes funcionais podem incluir outros componentes funcionais na sua exibição. Isto nos permite deixar nossos componentes organizados e fáceis de entender. Por exemplo, veja o exemplo abaixo de uma lista de supermercado.

function TituloCompras(props) {
    return (
        <div>
            <h1>{props.titulo}</h1>
            <h2>Total de Itens: {props.numItens}</h2>
        </div>
    )
}


function ItemLista(props) {
    return <li>{props.item}</li>
}


function ListaCompras(props) {
    return (
        <div>
            <h3>{props.cabecalho}</h3>
            <ol>
                <ItemLista item={props.itens[0]} />
                <ItemLista item={props.itens[1]} />
                <ItemLista item={props.itens[2]} />
            </ol>
        </div>
    )
}


function AppDeCompras(props) {
    return (
        <div>
            <TituloCompras titulo="Minha Lista de Compras" numItens="9" />
            <ListaCompras cabecalho="Comida" itens={["Maça", "Pão", "Banana"]} />
            <ListaCompras cabecalho="Roupa" itens={["Camiseta", "Tenis"]} />
            <ListaCompras cabecalho="Outros" itens={["Papel", "Copos", "Potes"]} />
        </div>
    )
}

ReactDOM.render(
    <AppDeCompras />,
    document.getElementById("root")
)

 

E compare isso com apenas definir todos os componentes de IU em um único componente funcional.

function AppDeCompras(props) {
    return (
        <div>
            <div>
                <h1>Minha lista de Compras</h1>
                <h2>Total Number of Items: 9</h2>
            </div>
            <div>
                <h3>Comida</h3>
                <ol>
                    <li>Maça</li>
                    <li>Pão</li>
                    <li>Banana</li>
                </ol>
            </div>
            <div>
                <h3>Roupa</h3>
                <ol>
                    <li>Camiseta</li>
                    <li>Tenis</li>
                </ol>
            </div>
            <div>
                <h3>Outros</h3>
                <ol>
                    <li>Papel</li>
                    <li>Copos</li>
                    <li>Potes</li>
                </ol>
            </div>
        </div>
    )
}



ReactDOM.render(
    <AppDeCompras />,
    document.getElementById("root")
)

É isso ai, esse artigo apresentou diversas coisas que valem serem testadas e praticadas para você se sentir confiante em usar o JSX e criar componentes.

Fique de olho que assim que possível estarei postando a terceira parte.

Você pode fornecer quantas propriedades você quiser. Todas elas serão acessíveis pelo parâmetro “props”.