Programação informática

Índice Programação

Javascript: Batalha Naval II

Publicado a 03/04/2019, 11:12 por Luis Pitta -org-   [ atualizado a 03/04/2019, 11:14 ]


Battleship-JavaScript

A very very simple Battleship game written in plain JavaScript: https://github.com/LearnTeachCode/Battleship-JavaScript

Read about the game and its rules here: https://en.wikipedia.org/wiki/Battleship_(game)

Step 1: Create your files

Useful references:

Step 2: Create a grid on your HTML page for the game board

Useful references:

Step 3: Model the game board in JavaScript and place ships

Useful references:

Step 4: Create event handler and write the game logic

Useful references:

Step 5: Play the game!

Play the game here: http://learntocodela.github.io/Battleship-JavaScript/

Features to implement next:

  • Display game messages within the HTML page instead of using alert()
  • Randomize placement of the ships at the start of each game
  • Make better graphics, maybe add sound effects?
  • Make a 2-player version of the game!




Javascript: O que é o ES2015 ou ES6? (EN)

Publicado a 30/03/2019, 13:13 por Luis Pitta -org-   [ atualizado a 03/04/2019, 10:00 ]



JavaScript é uma linguagem de programação que implementa o standard ECMAScript.
ECMAScript 6 (ES6) é sinónimo de ECMAScript 2015 (ES2015) e é a versão standard utilizada nos principais browsers da atualidade.
ECMA é a sigla que quer dizer European Computer Manufacturers Association

O que é o ES2015 (ou ES6)?

Put simply, ECMAScript is a standard. While JavaScript is the most popular implementation of that standard.
JavaScript implements ECMAScript and builds on top of it.

ES6 refers to version 6 of the ECMA Script programming language.

ECMA Script is the standardized name for JavaScript, and version 6 is the next version after version 5, which was released in 2011.
It is a major enhancement to the JavaScript language, and adds many more features intended to make large-scale software development easier.

ECMAScript 6, or ES6, was published in June 2015. It was subsequently renamed to ECMAScript 2015. Web browser support for the full language is not yet complete, though major portions are supported. Major web browsers support some features of ES6. However, it is possible to use software known as a transpiler to convert ES6 code into ES5, which is better supported on most browsers.

Let us now look at some major changes that ES2016 (or ES6) brings to JavaScript.

1. Constants

Finally the concept of constants has made it to JavaScript! Constants are values that can be defined only once (per scope, scope explained below). A re-definition within the same scope triggers an error.

const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.

You can use the constant wherever you can use a variable (var).

console.log("Value is: " + joe * 2)
// prints: 8

2. Block-Scoped Variables and Functions

Welcome to the 21st century, JavaScript! With ES6, variables declared using let (and constants describe above) follow block scoping rules just like in Java, C++, etc.

Before this update, variables in JavaScript were function scoped. That is, when you needed a new scope for a variable, you had to declare it within a function.

Variables retain the value till the end of the block. After the block, the value in the outer block (if any) is restored.

{
  let x = "hello";
  {
    let x = "world";
    console.log("inner block, x = " + x);
  }
  console.log("outer block, x = " + x);
}
// prints
inner block, x = world
outer block, x = hello

You can redefine constants too, within such blocks.

{
  let x = "hello";
  {
    const x = 4.0;
    console.log("inner block, x = " + x);
    try {
      x = 3.5
    } catch(err) {
      console.error("inner block: " + err);
    }
  }
  x = "world";
  console.log("outer block, x = " + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world

3. Arrow Functions

ES6 brings a new syntax for defining functions using an arrow. In the following example, xis a function that accepts a parameter called a, and returns its increment:

var x = a => a + 1;
x(4) // returns 5

Using this syntax, you can define and pass arguments in functions with ease.

Using with a forEach():

[1, 2, 3, 4].forEach(a => console.log(a + " => " + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16

Define functions accepting multiple arguments by enclosing them in parentheses:

[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]

4. Default Function Parameters

Function parameters can now be declared with default values. In the following, x is a function with two parameters a and b. The second parameter b is given a default value of 1.

var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4

Unlike other languages such as C++ or python, parameters with default values may appear before those without defaults. Note that this function is defined as a block with a returnvalue by way of illustration.

var x = (a = 2, b) => { return a * b }

However arguments are matched left to right. In the first invocation below, b has an undefined value even though a has been declared with a default value. The passed-in argument is matched with a rather than b. The function returns NaN.

x(2)
// returns NaN
x(1, 3)
// returns 3

When you explicitly pass in undefined as an argument, the default value is used if there is one.

x(undefined, 3)
// returns 6

5. Rest Function Parameters

When invoking a function, a need sometimes arises to be able to pass in an arbitrary number of arguments, and to process these arguments within the function. This need is handled by the rest function parameters syntax. It provides a way to capture the rest of the arguments after the defined arguments using the syntax shown below. These extra arguments are captured in an array.

var x = function(a, b, ...args) { console.log("a = " + a + ", b = " + b + ", " + args.length + " args left"); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left

6. String Templating

String templating refers to interpolating variables and expressions into strings using a syntax like perl or the shell. A string template is enclosed in back-tick characters (`). By contrast single quotes () or double quotes () indicate normal strings. Expressions inside the template are marked out between ${ and }. Here is an example:

var name = "joe";
var x = `hello ${name}`
// returns "hello joe"

Of course, you can use an arbitrary expression for evaluation.

// define an arrow function
var f = a => a * 4

// set a parameter value
var v = 5

// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns "hello 20"

This syntax for defining strings can also be used to define multi-line strings.

var x = `hello world
next line`
// returns
hello world
next line

7. Object Properties

ES6 brings a simplified object creation syntax. Take a look at the example below:

var x = "hello world", y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}

Computed property names are quite nifty too. With ES5 and earlier, to set an object property with a computed name, you had to do this:

var x = "hello world", y = 25
var a = {x: x, y: y}
a["joe" + y] = 4
// a is now:
{x: "hello world", y: 25, joe25: 4}

Now you can do it all in a single defintion:

var a = {x, y, ["joe" + y]: 4}
// returns
{x: "hello world", y: 25, joe25: 4}

And of course, to define methods, you can just define it with the name:

var a = {x, y, ["joe" + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6

8. Formal Class Definition Syntax

Class Definition

And finally, JavaScript gets a formal class definition syntax. While it is merely syntactic sugar over the already available protytype-based classes, it does serve to enhance code clarity. That means this does not add a new object model or anything fancy like that.

class Circle {
  constructor(radius) {
    this.radius = radius
  }
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}

Declaring Methods

Defining a method is also quite simple. No suprises there.

class Circle {
  constructor(radius) {
    this.radius = radius
  }
  computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669

Getters and Setters

We now have getters and setters too, with a simple update to the syntax. Let us redefine the Circle class with an area property.

class Circle {
  constructor(radius) {
    this.radius = radius
  }
  get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669

Let us now add a setter. To be able to define radius as a settable property, we should redefine the actual field to _radius or something which won’t clash with the setter. Otherwise we encounter a stack overflow error.

Here is the redefined class:

class Circle {
  constructor(radius) {
    this._radius = radius
  }
  get area() { return Math.PI * this._radius * this._radius }
  set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255

All in all, this is a nice addition to object-oriented JavaScript.

Inheritance

In addition to defining classes using the class keyword, you can also use the extendskeyword to inherit from super classes. Let us see how this works with an example.

class Ellipse {
  constructor(width, height) {
    this._width = width;
    this._height = height;
  }
  get area() { return Math.PI * this._width * this._height; }
  set width(w) { this._width = w; }
  set height(h) { this._height = h; }
}

class Circle extends Ellipse {
  constructor(radius) {
    super(radius, radius);
  }
  set radius(r) { super.width = r; super.height = r; }
}

// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483

Versões do ECMAScript:

Every time you see ES followed by a number, it is referencing an edition of ECMAScript. 

In fact, there are eight editions of ECMAScript published:

ES1, ES2, ES3, ES4

ES1: June 1997 — ES2: June 1998 — ES3: Dec. 1999 — ES4: Abandoned

I’ve grouped all of these together. These were the first 4 editions of ECMAScript, and to save time, we wont go too in-depth.
Just know that the first three editions were annual, and the fourth was abandoned due to political differences.

ES5

December 2009: Nearly 10 years later, ES5 was released in 2009.
It would then take almost six years for the next version of ECMAScript to be released.

ES6 / ES2015

June 2015: Perhaps the cause for all of your confusion begins here.
You see, ES6 and ES2015 are the same thing.

ES6 was the popularized name prior to release. However, the committee that oversees ECMAScript specifications made the decision to move to annual updates. With this change, the edition was renamed to ES 2015 to reflect the year of releaseSubsequent releases will therefor also be named according to the year they are released.

ES2016 (ES7)

June 2016: Seventh edition of ECMAScript.

ES2017 (ES8)

June 2017: Eighth edition of ECMAScript.

ES.Next

You may have also seen ES.Next used online. This term is dynamic and references the next version of ECMAScript coming out.


Se o meu Pai fosse uma linguagem de programação?

Publicado a 30/03/2019, 11:57 por Luis Pitta -org-   [ atualizado a 30/03/2019, 12:03 ]

Existem pais de todos os tipos: bravo, sério, engraçado, trabalhador, conservador, liberal, rabugento, entre muitos outros.
Mas você já imaginou como seria o seu “velho” se ele fosse uma linguagem de programação?


A Ironhack elaborou uma lista com estilos de pais que têm tudo a ver com algumas linguagens de programação. Se ele pertence ao universo tecnológico, nerd ou geek, você vai se identificar.

Qual destes pais se parece mais com o seu?

  • Pai Workaholic (Java)

Trabalha incansavelmente para você

Seu pai é aquele que trabalha muitas horas por dia e, aos finais de semana, não para um minuto? Saiba que esse estilo workaholic tem tudo a ver com a linguagem Java! Afinal, ele está em todos os lugares, de console de games a datacenters, de computadores de bordo em automóveis a dispositivos móveis, além de se destacar por atender a diversas demandas do mercado.

  • Pai Amigo (Linguagem C)

Sempre disponível para te dar conselhos

O seu pai está sempre a postos para ajudar todo mundo e ser referência no que for preciso? Então, provavelmente, ele se parece com a linguagem C. Não entendeu? Por ser uma plataforma estruturada, ela facilita o processo de aprendizagem em programação, é referência para outras linguagens, além de ser simples, por contar com funções que auxiliam no desenvolvimento de sistemas. Resumindo: sua influência está presente em quase tudo o que você precisa fazer, assim como muitos pais.

  • Pai Hipster (Python)

Atualizado nas mais recentes tendências em moda e cultura

A linguagem de programação Python tem tudo a ver com aquele pai estiloso e antenado. Para começar, ela é multiplataforma e pode ser utilizada em sistemas operacionais diferentes. Por ser fácil de aprender, é perfeita também para iniciantes em programação, além de ser simples, porém, de alto nível!

  • Pai Educador (JS – JavaScript)

Te ensina tudo o que você precisa para se dar bem

Sendo uma linguagem desenvolvida para rodar no navegador do utilizador e agora também em servidores, o JS atende às mais diversas demandas dos usuários, sendo possível desenvolver sites, aplicativos para smartphones, programas para desktop e controlar hardware. É ou não é a cara daquele pai que é “pau pra toda obra” e vive ensinando tudo o que sabe?

  • Pai Disciplinador (Assembly)

Exige tudo de você

Uma das primeiras linguagens estruturadas de que se tem notícia, a Assembly é considerada difícil, já que depende totalmente do hardware para rodar. Além disso, o programador precisa conhecer a estrutura da máquina para utilizá-la. Esse nível de exigência é similar ao daquele pai que vive pegando no seu pé, não é mesmo?


HTML: Cores em HTML e CSS

Publicado a 18/03/2019, 13:28 por Luis Pitta -org-   [ atualizado a 18/03/2019, 13:41 ]

As cores em CSS podem ser codificadas utilizando:
    • Cores Hexadecimais
    • Cores RGB
    • Cores RGBA
    • Cores HSL
    • Cores HSLA 
    • Nomes de cores predefinidos


Utilização de um "Color Picker":



Mais sobre cores em CSS: 



A combinação de cores tem a sua "ciência". Veja as principais te´cnicas para misturarmos cores:

CSS: Utilizando a propriedade "color":




CSS: Formatar tabelas com estilo!

Publicado a 17/03/2019, 05:38 por Luis Pitta -org-   [ atualizado a 17/03/2019, 06:07 ]

Este exercício é muito interessante e pode ser feito em 15 minutos:

A partir de uma tabela inicial, académica e aborrecida vamos utilizar CSS para a formatar "over the top!"




Siga os seguintes passos:





Se gostaste deste exemplo deves agora visitar 

 Complete Guide to the Table Element




Podes também utilizar este gerador automático de formatação CSS:




Sabias que podes fazer toda a tabela só com DIVs e CSS?

Porquê?
Para a tornar mais rápida a carregar e permitir melhor adaptação aos dispositivos moveis (ecrãs mais pequenos).





CSS: Combinadores: espaço, >, + e ~

Publicado a 15/03/2019, 03:51 por Luis Pitta -org-   [ atualizado a 15/03/2019, 03:55 ]

Combinadores em CSS


CSS Combinadores

NotaUm elemento de combinação é algo que explica a relação entre os selectores.

Um seletor CSS pode conter mais de um seletor simples. Entre os seletores simples, que pode incluir um elemento de combinação.

Há quatro combinators diferentes em CSS3:

    • seletor descendente (space)
    • seletor filho (>)
    • seletor irmão adjacente (+)
    • selector irmão em geral (~)



CSS Combinators

A combinator is something that explains the relationship between the selectors.

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

    • descendant selector (space)
    • child selector (>)
    • adjacent sibling selector (+)
    • general sibling selector (~)


Javascript: Exercicios com funções

Publicado a 15/02/2019, 01:54 por Luis Pitta -org-   [ atualizado a 13/03/2019, 04:45 ]


Cria uma página no teu portefólio e elabora os seguintes exercícios:



Exercício 1: O seguinte código vai resultar em que valor?

function teste(numero)
{
while(numero < 6) {
numero++;
}
return numero;
}

alert(teste(3));


Exercício 2: Qual o output da seguinte expressão?

function multNums(a, b) {
var c = a*b;
}

multNums(5, 4);


Exercício 3: Preencher os espaços em branco com o nome de uma das 3 possíveis caixas de diálogo disponíveis em Javascript:


    _____________ serve para obter um input do utilizador.

    _____________ serve para mostrar uma mensagem numa caixa de popup.



Exercício 4: Preencher os espaços em branco para calcular o maior valor dos parâmetros:

function max(a, b) {
___ 
(a >= b)
    return __
;
_____  
 
 

    return b;
}


Exercício 5: Qual a sintaxe correta para nos referirmos a uma script externa com o nome "codigo.js":

<script href="codigo.js">
<script src="codigo.js">
<script name="codigo.js">



Exercício 6: Que alerta vai surgir no ecrã?

function teste(a, b) {
if(a > b) {
return a*b;
} else {
return b / a;
}
}
alert(teste(5, 15));



Brevemente mais exercícios!



Sololearn: Javascript Functions

Publicado a 14/02/2019, 09:48 por Luis Pitta -org-   [ atualizado a 19/02/2019, 05:26 ]


JavaScript Functions



A JavaScript function is a block of code designed to perform a particular task.
The main advantages of using functions:
Code reuse: Define the code once, and use it many times.
Use the same code many times with different arguments, to produce different results.
A JavaScript function is executed when "something" invokes, or calls, it.



What is a function?

A certain block of code that can be reused over and over again
Profession
Arithmetical term


Defining a Function



To define a JavaScript function, use the function keyword, followed by a name, followed by a set of parentheses ().

The code to be executed by the function is placed inside curly brackets {}.
function name() {.
//code to be executed.
}

Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).


Add the corresponding keyword and symbols to create a function named "test".

 
 
 test() 
 
 

   /* some code */
 
 


Calling a Function



To execute the function, you need to call it.
To call a function, start with the name of the function, then follow it with the arguments in parentheses.
Example:
function myFunction() {
alert("Calling a Function!");
}

myFunction();
//Alerts "Calling a Function!"
Try It Yourself

Always remember to end the statement with a semicolon after calling the function.


Fill in the blanks to define and call the "hello" function.

 
 
 hello() {
   alert("Hi there");
}
 
 
();


Calling Functions



Once the function is defined, JavaScript allows you to call it as many times as you want to.
function myFunction() {
alert("Alert box!");
}

myFunction();
//"Alert box!"

// some other code

myFunction();
//"Alert box!"
Try It Yourself

You can also call a function using this syntax: myFunction.call(). The difference is that when calling in this way, you're passing the 'this' keyword to a function. You'll learn about it later.


Function Parameters



Functions can take parameters
Function parameters are the names listed in the function's definition.

Syntax:
functionName(param1, param2, param3) {
// some code
}

As with variables, parameters should be given names, which are separated by commaswithin the parentheses.

Using Parameters



After defining the parameters, you can use them inside the function.
function sayHello(name) {
alert("Hi, " + name);
}

sayHello("David");
//Alerts "Hi, David"
Try It Yourself

This function takes in one parameter, which is called name. When calling the function, provide the parameter's value (argument) inside the parentheses. 
Function arguments are the real values passed to (and received by) the function.

When and how is the parameter used?

By placing the value before the function call
By placing the value before the function name
By calling the function and placing the value in the parentheses


Function Parameters



You can define a single function, and pass different parameter values (arguments) to it.
function sayHello(name) {
alert("Hi, " + name);
}
sayHello("David");
sayHello("Sarah");
sayHello("John");
Try It Yourself

This will execute the function's code each time for the provided argument.


Drag and drop from the options below to declare a function and call it, by passing "Test" as the argument:

 myAlert(txt) {
   alert("Hello " + txt);
}
;
Test
 
myAlert
 
()
 
("Test")
 
var
 
function


Multiple Parameters



You can define multiple parameters for a function by comma-separating them.
function myFunc(x, y) {
// some code
}

The example above defines the function myFunc to take two parameters.



CSS: Onde colocar o código CSS?

Publicado a 10/02/2019, 14:41 por Luis Pitta -org-   [ atualizado a 18/03/2019, 16:09 ]

Onde colocar o código CSS?

O código CSS pode ser inserido em três locais distintos: em linha (inline), em folha de estilos interna e em folha de estilos externa.



Vamos utilizar o seguinte exemplo de formatação:

Pretendemos atribuir a cor linen (#FAF0E6: salmão claroao fundo da página HTML ou seja, ao body.


1. Em linha (inline), ou seja, no atributo style da tag body:

<body style="background-color: linen">

   <h1>Este é um cabeçalho</h1>
   <p>Este é um parágrafo.</p>
   <p>Este é outro parágrafo.</p>

</body> 

2. Folha de estilos interna, ou seja, na tag style dentro do head:

   </head>
<style>
   body {
       background-color: linen;
   }
</style>
   </head>

   <body>

      <h1>Este é um cabeçalho</h1>
      <p>Este é um parágrafo.</p>
      <p>Este é outro parágrafo.</p>

   </body> 

3. Folha de estilos externa, ou seja, no ficheiro separado meuestilo.css:

   <head>
      <link rel="stylesheet" type="text/css" href="meuestilo.css">
   </head>

   <body>

      <h1>Este é um cabeçalho</h1>
      <p>Este é um parágrafo.</p>
      <p>Este é outro parágrafo.</p>

   </body> 

Conteúdo do ficheiro meuestilo.css:

 body {
       background-color: linen;
}


Mais informação em:




1-10 of 102