ACTIVE SERVER PAGES (ASP)

Definição.

O ASP (de Active Server Pages), também conhecido como ASP Clássico hoje em dia, é uma estrutura de bibliotecas básicas (e não uma linguagem) para processamento de linguagens de script no lado servidor para geração de conteúdo dinâmico na Web. Exemplos de linguagens aceitas são: VBScript, JScript, PerlScript, Tcl ou Python sendo que apenas as duas primeiras são suportadas por padrão.[1], Sendo o VBScript, a linguagem de script mais utilizada pelos programadores que utilizavam essa tecnologia.

Apesar do ASP ter sido substituído pelo ASP.NET, até hoje é suportada por versões atuais do IIS e a meu ver, a Microsoft não a substituição por conta dela não ter dado certo. Ainda hoje, existem sistemas que utilizam essa tecnologia no ar.

Ele roda nativamente em Windows, através do serviço chamado de IIS (Internet Information Service) - o servidor web da Microsoft. Além disso ele pode rodar em outras plataformas, como Linux no servidor Apache quando usando um módulo de um programa como o Tomcat.

O processo

Basicamente é feita uma requisição a uma página com a extensão .ASP. O servidor ao receber essa requisição, passa o código para que uma DLL (ASP.DLL) realize o processamento do código de script presente nesta página e retorna o resultado deste processamento ao servidor. O servidor então devolve esse resultado ao navegador que fez a requisição, em formato HTML, XML, TXT.

ASP DLL

Essa DLL nos dá acesso a uma série de objetos e métodos que fornecem diversas funcionalidades necessárias à criação de páginas dinâmicas. Como exemplo, temos um objeto chamado Request, o qual pode ser utilizado para processar as informações que o usuário preenche em um formulário. Temos também um objeto Response, do qual já utilizamos o método Write, o qual é utilizado para retornar informações para o Navegador do cliente, e assim por diante.

O modelo de Objetos do ASP 3.0, apresenta os seguintes objetos:

Response - Utilizamos o Objeto Response para retornar o resultado do processamento de uma página ASP, para o Navegador do cliente. O resultado retornado é código HTML puro. Podemos utilizar o objeto Response para montar uma página de retorno, por exemplo, com os resultados de uma pesquisa em um Banco de Dados.Também podemos utilizar o Objeto Response para gravar Cookies no computador do Cliente.

Request - Com o Objeto Request podemos ter acesso a diversas informações fornecidas pelo cliente ao acessar uma página ASP, ou ao preencher um formulário e enviar os dados do formulário. Podemos ter acesso a informações a respeito do Navegador que o cliente está utilizando, quais os Cookies gravados no computador do usuário, qual Certificado Digital o usuário está utilizando e muitas outras informações importantes.

Application - podemos utilizar o objeto Application para compartilhar informações entre todos os usuários de um determinado aplicativo. Um aplicativo Web baseado no ASP é definido como todos os arquivos .asp em uma pasta virtual e seus subdiretórios. Como o objeto Application pode ser compartilhado por mais de um usuário, existem os métodos Lock e Unlock para garantir que vários usuários não tentarão alterar uma propriedade ao mesmo tempo.

Session - Podemos usar o objeto Session para armazenar as informações necessárias para uma determinada sessão de usuário. As variáveis armazenadas no objeto Session não são descartadas quando o usuário alterna entre as páginas do aplicativo; em vez disso, essas variáveis persistem durante toda a sessão de usuário.

Server - O objeto Server nos fornece a possibilidade de estender as capacidades de nossas páginas ASP, através da utilização de objetos e componentes externos. Estes objetos e componentes fornecem funcionalidades específicas as quais são necessárias à aplicação que está sendo desenvolvida.

A utilização de componentes externos faz parte da filosofia de desenvolvimento de aplicações baseadas em componentes. Para o mundo Windows, os componentes devem seguir o padrão COM (Component Object Model) que no Windows 2000 recebe a denominação de COM+ (COM Plus).

Exemplo de componentes bastante utilizados são ADO, FileSystemObject e o CDONTS.

Um objeto pode conter propriedades, coleções, métodos e eventos.

Propriedades - característica ou atributo de um objeto.

Exemplo: Ao setarmos a propriedade ScriptTimeout do objeto Server,  definimos quanto  tempo  o código ASP pode ficar executando em uma página, antes que o Servidor cancele a execução e retorne uma mensagem de erro.

métodos - comportamento ou ação realizada por um objeto.

Exemplo: Ao chamar o método Write do objeto Response (Response.Write), o comportamento esperado é que o método Write envie o texto fornecido entre aspas, para o servidor Web, o qual por sua vez envia para o Navegador do cliente.

coleções - conjunto de valores do objeto que podem ser acessados via código.

Exemplo: A coleção Form, do objeto Request, contém os nomes e valores de todos os controles de um formulário cujos dados foram passados para processamento da página ASP.

eventos -  é uma determinada ação que pode acontecer, e para a qual podemos escrever código ASP em resposta ao evento.

Exemplo: o Objeto Session possui um evento OnStart, o qual ocorre quando uma usuário estabelece uma seção com uma página ASP e antes que uma requisição do usuário seja executada. Podemos utilizar este evento para iniciar variáveis ou rodar qualquer outro código que seja necessário. Você já deve ter entrado em um site onde é necessário preencher um formulário de cadastramento. Da próxima vez que você entra no site, você recebe uma mensagem dizendo “Bem vindo Fulano de tal!”. Como é que o site sabe que é você, ou pelo menos o seu computador, que está entrando no site? A página utiliza o evento Session.OnStart, para ler informações que foram gravadas no seu computador, normalmente na forma de um Cockie e determinar quem está acessando a página. 

Bom pessoal, a ideia deste post foi dar um overview de como essa tecnologia funciona. Em outro post, vamos detalhar os objetos do ASP e dar exemplos práticos.

Inté.

O que são Frameworks?

Você quer se tornar um desenvolvedor Web e fica se perguntando o que precisa aprender para trabalhar nesse área. Aquele colega que você que você coloca no pedestal lhe fala que você precisa aprender REACT, BOOTSTRAP, JQUERY, NODEJS, ASP.NET entre outras coisas. Daí você pergunta pro colega o que é aquela sopa de letrinhas e fica sem saber por onde começar. O colega explica que se tratam de FRAMEWORKS utilizados no dia a dia do programador WEB e aí se instaura uma confusão na sua cabeça.

Mas que diabos é FRAMEWORK e por qual deles começar a estudar? E aquele colega responde: É o cinto de utilidades do programador web e você continua sem entender não é isso?

Vou tentar explicar. Digamos que você queira desenvolver um sistema WEB do zero, ou seja, escrever da primeira até a última linha de código do mesmo. Isso daria muito trabalho. Agora vamos imaginar em fazer isso através do reúso de código feito por outras pessoas. Concorda que se fizéssemos dessa forma, economizaríamos tempo?

FRAMEWORS  são bibliotecas de códigos escritos por outras pessoas que podem ser reutilizados para a criação de aplicativos ou sistemas.

Tudo bem. Mas código escrito em quê? Depende de qual framework estamos falando? Você quer estilizar uma página HTML? Utilize o Bootstrap que é uma biblioteca de classes CSS. Quer utilizar Javascript nas suas páginas? JQUERY ainda é muito utilizado pra isso, mas tem perdido popularidade para tecnologias do tipo SPA (REACT, Angular, Vue, entre outras).

Quem não utiliza o JDK ao desenvolver um sistema feito em JAVA ou o .NET Framework ao desenvolver sistemas feitos em ASP.NET?

Ficou faltando responder a pergunta do colega: Por qual delas começar? É importante conhecer a linguagem base desses frameworks. Vai mexer com desenvolvimento WEB? Estude HTML, CSS, Javascript, antes de mexer com um Framework.

Será que fui claro?

Abraço!

O protocolo HTTP

     Quando abrimos um navegador, digitamos uma URL na barra de endereço e damos um ENTER, o navegador (O CLIENTE) faz uma requisição para um recurso hospedado em um servidor. O SERVIDOR então devolve para o cliente o recurso requisitado (páginas html, scripts PHP, ASP, JSP, arquivos css, arquivos js, imagens, e documentos de diversas espécies, .DOC.XLS,PDF, XML, JSON,entre outros). 

Essa resposta é uma espécie de pacote composto por dados e por um código de STATUS. Esse código serve para indicar para o cliente, a situação da resposta dada pelo servidor. Se o recurso requisitado foi enviado com sucesso ou não, seja por não ter encontrado o recurso requisitado, seja por conta de alguma problema que o servidor requisitado tenha enfrentado. Toda essa troca de informação é feita por meio do protocolo HTTP.

 HTTP é um protocolo (protocol) que permite a obtenção de recursos, como documentos HTML. É a base de qualquer troca de dados na Web e um protocolo cliente-servidor, o que significa que as requisições são iniciadas pelo destinatário, geralmente um navegador da Web. Um documento completo é reconstruído a partir dos diferentes sub-documentos obtidos, como por exemplo texto, descrição do layout, imagens, vídeos, scripts e muito mais.

Os códigos de status do HTTP são representados por 5 grupos de numeração. São eles

• 100 a 199 - status de informação
• 200 a 299 - status de sucesso (200 OK)
• 300 a 399 - status de redirecionamento
• 400 a 499 - status de erro de cliente (404 página não encontrada)
• 500 a 599 - status de erro de servidor (500 erro no servidor)

Algo muito comum hoje em dia é a requisição a uma API (application programing Interface). Trata-se de um recurso que pode ter diversas funcionalidades que são retornadas em formato XML ou formato JSON. Para requisitar esses recursos, é necessário conhecer o endereço que é a URL(Uniforme Resource Locator) desse recurso. 

Esse endereço é composto pelo tipo de protocolo(http://), mais o IP do servidor (127.0.0.1) e a porta que está sendo utilizada (:5094).

É importante também se conhecer o nome do recurso que é chamado de URN (Uniforme Resource Name).

A junção da URL com a URN é conhecida com URI (Universal Resource Identifier).

Exemplo: http://127.0.0.1:3000/clientes

Sabendo disso, nos resta fazer as requisições de forma padronizada e é aí que entra o conceito de REST (Representational State Transfer).

A requisição é feita por meio de métodos do protocolo HTTP. São eles:

• GET (quando se quer buscar alguma informação)
• POST (quando se quer registrar alguma informação no servidor)
• PUT (quando se quer alterar alguma informação registrada no servidor)
• DELETE (quando se quer excluir alguma informação registrada no servidor)

Bom, vamos parar de papo furado e colocar a mão na massa. Para isso, vamos fazer uso do  CURL.

O que é o curl

Curl é uma ferramenta para transferir dados de/para um servidor, usando um dos protocolos suportados. Normalmente estamos usando o HTTP.

Ele é uma ferramenta de linha de comando que funciona como interface para a biblioteca que faz o serviço pesado, o libcurl.

De forma geral, seu navegador realiza requisições web, recebe respostas, lê/escreve cookies e renderiza sua página. O curl pode fazer tudo isso, exceto a renderização, que cabe ao seu navegador.

Ele oferece uma infinidade de funções úteis como realização de autenticação, interação com API's, preencher formulários HTML, download de arquivos e paginas HTML etc.

Desde de a versão 10 o CURL já vem instalado no windows.

Abra o prompt do windows e digite curl www.google.com/

A resposta será o código HTML da página inicial do google.

Também é possível obter uma resposta mais verbosa, permitindo visualizar os cabeçalhos da requisição HTTP usando a opção -i. Executando o comando abaixo você poderá vizualizar informações como o Status Code da resposta, a data e hora em que ela foi enviada, o tipo do conteúdo da resposta e várias outras informações que podem variar a depender da implementação do servidor.

curl -i http://www.google.com/

A primeira linha indica a versão do protocolo HTTP usada e o Status Code de sucesso (200).

Caso queira ignorar o conteúdo da página e receber somente o cabeçalho, você pode usar a opção -I (i maiúsculo).

curl -I https://www.google.com/

Fazendo download de arquivos:

Vamos utilizar aqui a mídia de instalação da ultima versão do Ubuntu como exemplo. Para fazer o download de um arquivo, salvando com o mesmo nome do arquivo definido pelo servidor, basta usar a opção -O.

curl-O https://releases.ubuntu.com/20.04.1/ubuntu-20.04.1-desktop-amd64.iso

Interagindo com API's REST com GET e POST

O curl também é útil para realizar testes de API's REST. Tomemos como exemplo a aplicação https://jsonplaceholder.typicode.com/ que foi feita justamente para fins de testes.

Ela possui as seguintes rotas:

GET /posts

GET /posts/:id

GET /posts/:id/comments

GET /comments?postId={:id}

POST /posts

PUT /posts/:id

PATCH /posts/:id

DELETE /posts/:id

Por padrão, o curl usa o método HTTP GET para realizar as requisições. Para fazer uma requisição GET, basta executar

curl https://jsonplaceholder.typicode.com/posts

O retorno será em formato JSON contendo uma lista de posts:

[ { "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum

rerum est autem sunt rem eveniet architecto" }, { "userId": 1, "id": 2, "title": "qui est esse", "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate

porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla" }, { "userId": 1, "id": 3, "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut", "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis

pariatur\nmolestiae porro eius odio et labore et velit aut" }, [continua ...]

Também é possível especificar qual método usar, passando a opção -X e o método como argumento:

curl -X GET https://jsonplaceholder.typicode.com/posts

Para realizar a criação de um post, você pode executar:

curl -i -X POST https://jsonplaceholder.typicode.com/comments \ -H 'Content-Type: application/json' \ -d $'{ "postId": 101, "name": "Vitor Almeida", "email": "vitor.almeida@alura.com.br", "body": "De acordo ao manual do curl ( disponível online [...]" }'

Resultando em

HTTP/2 201 date: Tue, 05 Jan 2021 01:17:53 GMT content-type: application/json; charset=utf-8 content-length: 168 set-cookie: __cfduid=d4f15935c351e1b9ece6e8d8cdb1ffa1a1609809470; expires=Thu, 04-Feb-21 01:17:50 GMT;

path=/; domain=.typicode.com; HttpOnly; SameSite=Lax x-powered-by: Express [continua ...] { "postId": 101, "name": "Vitor Almeida", "email": "vitor.almeida@alura.com.br", "body": "De acordo ao manual do curl ( disponível online [...]", "id": 501 }

A opção -H permite adicionar um cabeçalho e a -d permite passar os dados da requisição. Nesse caso, definimos que o conteúdo é no formato JSON e passamos o conteúdo da requisição que será usado para criar uma conta. Podemos ver no resultado que o status foi 201, indicando que um novo recurso foi criado.

Uma alternativa ao CURL é um cara chamado POSTMAN, mas uma coisa de cada vez. Um dia faço um POST sobre o assunto.

Até a próxima!

Single Page Applications

Quando iniciei a minha carreira (optei por atuar na área de desenvolvimento) a maioria dos sistemas eram desenvolvidos em plataforma WEB. 

As tecnologias usadas a época para desenvolver esse tipo de sistema eram ASP 3.0, PHP, JSP, ColdFusion, Javascript, entre outras. Todas essas tecnologias se baseavam na arquitetura do tipo cliente/servidor, aonde um usuário, através de um navegador (browser) fazia uma requisição do tipo HTTP a uma página hospedada em um servidor e este por sua vez devolvia essa página entre outros recursos (html,css, javascript, imagens e documentos) para o cliente que fez a requisição. Esse processo se repetia toda vez que o cliente interagia com a página, ou seja, toda vez que o usuário selecionava uma opção em um combobox, clicava em um link ou ainda uma imagem, o browser fazia uma nova requisição ao servidor. 

Era um processo síncrono, pois a resposta a requisição era dada na mesmo momento em que era feita essa requisição.

Em certo momento da carreira, meu chefe pediu que eu desenvolvesse um formulário aonde havia uma combo de seleção com opções que estavam persistidas em um banco de dados. Ao entregar a encomenda, meu chefe estava incomodado com o fato de toda vez que ele escolhia uma opção, a página que continha o formulário era recarregada.

Ele então me disse: Por que você não utiliza Ajax nessa combo? Eu dei uma risada e falei: Como vou solucionar esse problema com um produto de limpeza, meu líder?

AJAX significa Asynchronous JavaScript and XML, ou JavaScript e XML Assíncronos, em bom português. Ele é um conjunto de técnicas de desenvolvimento voltado para a web que permite que aplicações trabalhem de modo assíncrono, processando qualquer requisição ao servidor em segundo plano.

A partir dali, verifiquei que havia uma forma de se fazer requisição do tipo HTTP sem a necessidade de se carregar a página, ou seja, um jeito de tornar o processo assíncrono.

Com o tempo fui notando que tudo parecia utilizar tecnologia similar AJAX (Gmail, Facebook, Google Maps). As requisições HTTP ficavam todas transparentes, causando ao usuário a experiência semelhante ao uso de aplicações ou sistemas do tipo Desktop. 

Surgia ali o conceito de Single Page Application ou SPA.

Single Page Applications (SPA) são aplicações cuja funcionalidade está concentrada em uma única página. Ao invés de recarregar toda a página ou redirecionar o usuário para uma página nova, apenas o conteúdo principal é atualizado de forma assíncrona, mantendo toda a estrutura da página estática.

Além de otimizar a performance da aplicação, reduzindo o conteúdo a ser carregado, as SPAs têm foco na experiência do usuário, que lida com uma interface mais rápida.

Há atualmente no mercado diversos frameworks/bibliotecas que facilitam a criação de aplicações seguindo esse modelo. Entre os principais estão: Angular, React e Vue.js, frameworks JavaScript que trabalham com o conceito de componentes, mas aí é assunto para um outro post.

Valeu!

Análise de Dados

 Ao assistir Netflix, nos são apresentados os filmes que estão em "alta" e ainda, nos deparamos com recomendações baseadas nos filmes que costumamos assistir.

O mesmo acontece ao acessarmos o Mercado Livre e o Youtube. Nos são sugeridos videos e produtos similares aos que foram pesquisados em visitas passadas.

Fica parecendo que estes sites são videntes que advinham o que se passa pelas nossas cabeças, ou ainda, que seus desenvolvedores fazem magia negra ou até mesmo tem pacto com o Pai do Fogo, não mesmo?

Uma das maiores redes de varejo dos Estados Unidos descobriu que a venda de fraldas descartáveis estava associada à de cerveja. Em geral, os compradores eram homens, que saíam à noite para comprar fraldas e aproveitavam para levar algumas latinhas para casa. Os produtos foram postos lado a lado. Resultado: a venda de fraldas e cervejas disparou. A pergunta que não quer calar é: Como essa empresa chegou a essa conclusão com informações que aparentemente são desconexas? 

Magia negra? Simpatia? Pacto com o Demo? Não! Trata-se de análise de dados.

Análise de dados é o processo de aplicação de técnicas estatísticas e lógicas para avaliar informações obtidas a partir de determinados processos. O principal objetivo da prática é extrair informações úteis a partir dos dados. A partir destas informações, é possível tomar decisões mais assertivas e orientadas para resultados. 

Não é de hoje que análise de dados é uma atividade bastante desempenhada por pessoas e empresas. Quem nunca utilizou o Excel para analisar e contabilizar dados, gerar insights e apoiar nossas decisões? 

Mas como analisar dados? Acredito que a melhor forma de explicar isso é através de exemplos.

Vamos supor que um plano de saúde encomende uma análise de perfil de seus associados. A Operadora utiliza um sistema de gestão que possui o cadastro de todos os associados contendo a data de nascimento, sexo, tipo de plano, procedimentos médicos efetuados, etc.

Uma forma de analisar os dados é se basear em fatos, utilizando procedimentos e técnicas de estatística descritiva.

Algumas medidas que são normalmente usadas para descrever um conjunto de dados são medidas de tendência central. Medidas de tendência central incluem média, mediana e moda. Medidas de variabilidade incluem desvio padrão, variância, o valor máximo e mínimo, obliquidade e curtose.

Depois de promover a agregação em conjunto de dados podemos saber a média da idades dos associados do plano de saúde. O percentual de associados do sexo Masculino ou feminino, quais procedimentos médicos são mais realizados e por aí vai.

Damos a ser tipo de análise o nome de ANÁLISE DESCRITIVA.

Após a produção dessas informações podemos prescrever ações para chegarmos a novos resultados. Vamos supor que a incidência de consultas com clínico geral esteja muito alta. Poderíamos propor a aplicação de programas do tipo medicina em família de modo reduzir essa incidência. Esse tipo de análise é conhecimento com ANÁLISE PRESCRITIVA.

Verifique que os exemplos apresentados são basicamente quantitativos. A estatística serve não só como instrumento quantificador, como também para montar modelos e fórmulas que possam antecipar resultados (PROBABILIDADE). É aí que entra a ANÁLISE PREDITIVA aonde são desenvolvidos modelos de aprendizado de máquina capazes de prever que a abertura de clínicas próprias por parte da Operadora de plano de Saúde tende a reduzir o custo da Operadora com consultas com clínico geral.

Resumindo analisar dados é verificar as possibilidades que esses dados trazem, tirando conclusões sobre eles e antecipar tendências.

Mas isso aí é só a pontinha do Iceberg. Bora pro próximo Post!

Kubernetes na prática I

        Em outro Post, falamos do que trata o Kubernetes, mas complementando a explicação, trata-se de uma engine de orquestração de contêineres Open Source utilizado para automatizar a implantação, dimensionamento e gerenciamento de aplicativos em contêiner. Algum POD caiu? ele se encarrega de provisionar um novo POD. Aumentou o uso da aplicação? Ele possibilita a criação de novos Pods, para escalar essa aplicação. 

Agora vejamos na prática como trabalhar como implantar um aplicativo em contêiner em um cluster.

• Atualizar o aplicativo em contêiner com uma nova versão do software.
• Depurar o aplicativo em contêiner.

Instalação

Quando você realiza a instalação de um cluster Kubernetes, deve decidir o tipo de instalação baseado em critérios como facilidade de manutenção, segurança, controle, quantidade de recursos disponíveis e a experiência necessária para gerenciar e operar o cluster.

Você pode criar um cluster Kubernetes em uma máquina local, na nuvem, em um datacenter on-premises ou ainda escolher uma oferta de um cluster Kubernetes gerenciado pelo seu provedor de computação em nuvem.

Para estudo, uma boa opção é a instalação do Minikube.

Instalou o Minikube? verifique se a instalação foi feita corretamente, executando o comando:

minikube version

Verifique o status do Kubernets executando o comando:

minikube status

Caso o mesmo esteja parado, você pode deletar um cluster. 

minikube delete

Inicialize o cluster, executando o comando:

minikube start

Assim que o seu cluster Kubernetes estiver em execução você pode implementar seu aplicativo em contêiners nele. Para fazer isso, você precisa criar uma configuração do tipo Deployment do Kubernetes. O Deployment define como criar e atualizar instâncias do seu aplicativo. Depois de criar um Deployment, o Master do Kubernetes agenda as instâncias do aplicativo incluídas nesse Deployment para ser executado em nós individuais do Cluster. Na prática fazer um deploy seria criar um Pod em um node. 

kubectl run nginx --image nginx

Podemos verificar se o pod foi criado através do comando 

kubectl get pods

Podemos ter mais informações sobre o Pod, através do comando

kubectl get pods -o wide

Quer mais detalhes sobre um pod específico? Utilize o comando

kubectl describe pod nginx

Até o momento, executamos os comandos via terminal. Contudo podemos fazer isso através de arquivos yaml.

apiVersion: v1

kind: Pod

metadata:

  name: nginx-pod

  labels:

    env: production

spec:

  containers:

    - name: nginx-container

      image: nginx

Com o arquivo em mãos criamos o pod com o seguinte comando:

kubectl create -f pod.yaml ou kubectl apply -f pod.yaml

Javascript

 Quando comecei a programar, a linguagem de programação ensinada na minha faculdade era PASCAL. Logo no início arrumei emprego para trabalhar com páginas HTML e para deixar as páginas mais dinâmicas, tive que aprender Javascript. Com o tempo, imaginei que a linguagem ia logo cair em desuso por conta da evolução das tecnologias utilizadas para construção de página. Ledo engano! As novas tecnologias utilizam javascript(frameworks como JQuery, entre outros). O objetivo deste Post é fazer um resumo de javascript na forma mais básica.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title> Página 1</title>

    </head>

    <body>

        <p>Programação web Com Javascript</p>

        <script>

            //variáveis

            var nome = "Hugo"; //string

            var idade = 48;//inteiro

            var altura = 1.73; //ponto flutuante

            var ativo = true; //boleano

            var alunos =["Hugo", "Fernanda"]; //vetor

            var aluno ={

                nome:"Hugo",

                idade:48,

                altura:1.73,

                ativo:true,

            };  //objeto

            console.log("Imprimindo a variável nome: " + nome);

            console.log(alunos[0]);

            //listando um array

            for(i=0;i<alunos.length;i++){

                console.log(alunos[i]);

            }

            console.log(aluno.nome + aluno.idade);

            //Operadores aritméticos operações matemáticas

            var numero1 = 20;

            var numero2 = 10;

           

            var soma = numero1 + numero2;//soma

            var subtracao = numero1 - numero2;//subtração

            var multiplicacao = numero1 * numero2;//multiplicação

            var divisao = numero1 / numero2;//divisão

            var modulo = numero1 / numero2; //resto da divisão

            var potenciacao = numero1 ** 2

            console.log(soma);

            console.log(subtracao);

            console.log(multiplicacao);

            console.log(divisao);

            console.log(modulo);

            console.log(potenciacao);

            //estruturas de condição

            if(numero1 >= numero2){

                console.log("condição verdadeira");

            }else{

                console.log("condição falsa");

            }

            switch (new Date().getDay()) {

                case 0:

                  day = "Sunday";

                  break;

                case 1:

                  day = "Monday";

                  break;

                case 2:

                   day = "Tuesday";

                  break;

                case 3:

                  day = "Wednesday";

                  break;

                case 4:

                  day = "Thursday";

                  break;

                case 5:

                  day = "Friday";

                  break;

                case 6:

                  day = "Saturday";

              }

              console.log(day);

              //operação ternária

              console.log(day > 6 ? "opção inválida":day);

           

            // estruturas de repetição

            for(var i = 0;i <=10; i++){

                console.log(i);

            }

            while(i <=10){

                console.log(i);

                i = i + 1;

            }

            var contador = 0;

            do{

                contador = contador + 1;

                console.log(contador);

            }while(contador <=10);

            //operadores lógicos

            console.log(10>20 && 20>10);

            console.log(10>20 || 20>10);

            //operadores relacionais

            console.log(5 == 5);

            console.log(5 != 5);

            //Funções

            function somar(num1,num2){

                var res = num1 + num2;

                return res;

            }

            function escrever(){

                console.log("teste");

            }

            console.log(somar(1,2));

            // intervalo

            setInterval(escrever,1000);

            //timeout  Delay

            setTimout(escrever,1000);

            //escopo de variáveis

            function subtrair(num1 - num2){

                var valor = 5;

                return valor = num1 - num2;

            }

            console.log(valor);

            //

        </script>

    </body>

</html>