JavaScript - RibaFS Portal

Frameworks JavaScript para Matemática

2017-08-01T16:58:12-03:00

Frameworks JavaScript para Matemática

https://www.mathjax.org/

http://mathlib.de/en
http://mathlib.de/en/demos

https://jsxgraph.uni-bayreuth.de/wp/index.html

Exemplos
https://jsxgraph.uni-bayreuth.de/wiki/index.php/Category:Examples

http://mathjs.org/

http://mathnotepad.com/

http://asciimath.org/

Introdução ao JavaScript

2017-06-22T17:41:08-03:00

Introdução ao JavaScript

JavaScript é uma linguagem de script que funciona no lado cliente, ou seja, é interpretada pelo próprio navegador. É usada para tornar o site interativo, podendo disparar ações em eventos, enviar mensagens, efetuar algumas ações.

Atualmente o JavaScript está em alta, pois com a chegada do HTML5 e CSS3 ele ganhou muito destaque e força. A cada dia aparecem novos frameworks para criação de jogos e aplicativos para celular usando JavaScript. Se fizer uma busca por frameworks em Javascript para a criação de jogos encontrará uma enormidade.

O foco do JavaScript é implementar o comportamento ou a inteligência das páginas.

De forma semelhane ao CSS podemos usar o JavaScript com o HTML de 3 formas:

- Inline - dentro das tags do HTML
- Internamente - como um trecho de código da página HTML, usando a tag <script>
- Externamente - criando um arquivo externo com código JS e fazendo o include no arquivo HTML, sem a tag <script>

A forma mais flexível é usando um arquivo externo, quando se fica mais a vontade e inclusive separa o HTML do JavaScript, organizando melhor o código.

Para incluir um arquivo externo entramos na tag <head> a linha:
<script type="text/javascript" src="http://backup/portal/script.js"></script>

Mas idealmente devemos usar o include acima na parte inferior da página, logo acima de </body>.

Mais sobre JavaScript

2017-06-22T17:41:08-03:00

Comentários

// Comentário de uma única linha

/* Comentário
* para
* várias
* linhas
*/

É uma linguagem completa, inclusive tem orientação a objetos.
Conta com as estruturas: if, for, while, switch, etc.

Variáveis

Escopo: local e global

Funções

Pequeno exemplo de uso de objetos:

var pessoa = new Object();
pessoa.nome = "Ribamar";
pessoa.idade = 59;
pessoa.profissao = "Programador";

Outra forma:

var pessoa = {
nome: "Ribamar",
idade: 59,
profissao = "Programador",

digaNome: function(){
alert(this.nome);
}
};

var formacaoJava = {
sigla : " K10", nome : " Formação Desenvolvedor Java ",
cursos : [
{
sigla : "K11 ",
nome : " Orientação a Objetos em Java "
},
{
sigla : "K12 ",
nome : " Desenvolvimento Web com JSF2 e JPA2 "
},
]
};

Algumas Ferramentas
- Firebug é uma ótima extensão para o Firefox
- Netbeans para HTML5/JavaScript - http://netbeans.org
- Eclipse para JavaScript - http://www.eclipse.org/downloads/packages/eclipse-ide-javascript-web-developers/heliossr1

Apareceram vários frameworks sobre o JavaScript:
- AngularJS - https://angularjs.org/
- Backbone - http://backbonejs.org/
- TypeScript - https://www.typescriptlang.org/

Mais sobre JavaScript:
http://www.w3schools.com/JS/

JavaScript PopUp Boxes

With JavaScript you can create three types of PopUp boxes: Alert, Confirm and Prompt. In javaScript you can also manipulate browsers to create popup windows, but that is covered in a later tutorial.

Alert

An alert box is often used if you want to make sure information comes through to the user or during testing. A developer can use alerts to see how code is being interpreted. When an alert box pops up, the user will have to click "OK" to proceed.

Confirm Box

A confirm box is often used if you want the user to verify or accept something.. When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

Prompt Box

A prompt box is often used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

<input type="button" onclick="disp_promt()" value="Display Prompt" />

Conclusão

PopUp boxes are simple to use, yet are an invaluable tool. As you start developing more complex code, you will see how wonderful an alert is to test if statements. Just remember there are three basic types of PopUp boxes: Alert, Confirm and Prompt. Think about using a prompt box as a way to ask for a password.

http://www.quackit.com/javascript/tutorial/javascript_popup_boxes.cfm

Integração do JS com o PHP

2017-06-22T17:41:08-03:00

Integração entre PHP e JavaScript

O PHP pode ter acesso às variáveis do JavaScript e o JavaScript pode ter acesso às variáveis do PHP. Veja alguns exemplos:

PHP Comunicando com JavaScript: PHP recebendo variáveis do JavaScript e JavaScript recebendo variáveis do PHP

<h1 style='font-size:18px;text-align:center;'>Integração entre PHP e JavaScript</h1>

Lembrando que o PHP é processado no servidor (pelo Apache, por exemplo)

Enquanto que o JavaScript é processado no cliente (pelo Navegador).

<h2>Variáveis em JavaScript</h2>

<script>

var variavel_js=250;

alert("A variável_js vale "+variavel_js);

document.write("A variável_js vale "+variavel_js);

document.write("<br>");

document.write("Aqui não saimos do Navegador ainda<br>");

</script>

<h2>Variáveis em PHP</h2>

<?php

$variavel_php=850;

print "<script>alert('A variavel_php vale '+$variavel_php)</script>";

print "O alert anterior recebeu a variável do servidor e exibiu<br>";

print "<br>A \$variavel_php vale $variavel_php<br>";

?>

<h2>JavaScript recebendo de PHP</h2>

<script>

variavel2_js = '<?=$variavel_php?>' - 150;

alert("variavel2_js recebeu \"$variavel_php - 150\" e agora vale " + variavel2_js);

alert("Para receber o valor da variável do PHP no navegador, a página já deve ter vindo do servidor.");

document.write("variavel2_js recebeu \"$variavel_php - 150\" e agora vale " + variavel2_js);

document.write("<br>");

</script>

<h2>PHP recebendo de JavaScript</h2>

<?php

$variavel2_php="<script>document.write(variavel2_js)</script>";

print "Usando PHP: A variavel2_php recebeu variavel2_js e agora vale $variavel2_php<br><br>";

print "Isso acima está errado, pois apenas é algo que tem valor quando chega ao navegador.<br><br>";

print "Para que o PHP receba de fato o valor de uma variável em JS, esta variável deve ser recebida por uma variável

em PHP submetida para o servidor, por exemplo o campo de um formulário<br><br>";

// Não podemos concatenar assim: <script>alert('A variável variavel2_php agora vale' + $variavel2_php)</script>

// Pois a variável $variavel2_php contém <script>alert(...

print "<script>document.write('Usando JS: A variável variavel2_php agora vale' )</script> $variavel2_php";

?>

<script>var varSigla="DNOCS";</script>

<form method="POST" action="php_js2.php">

<br><br>

Clique Neste campo e mude o foco:

<input name="sigla" maxlength="13" value="ValorOriginal" onFocus="this.value=varSigla">

<input type=submit value=Enviar>

</form>


<?php

print "<font color='red'><h4>Para Ajuda com a depuração do JavaScript:

usando o Firefox vá em Ferramentas - Console de Erros</h4></font>";

echo "<hr><h2>Código Fonte</h2>";

show_source(__FILE__);

?>

<?php

// Arquivo php2_js.php

if ($_POST['sigla']){

echo "A variável sigla, campo do Form que valia 'ValorOriginal', recebeu o valor da variável JS 'DNOCS'<br>";

echo "que foi atribuído à variável \$sigla do PHP através do campo do form!";

}

echo "<hr><h2>Código Fonte</h2>";

show_source(__FILE__);

?>

Outro Exemplo de Integração do PHP com JavaScript

<h1>Integração entre PHP e JavaScript</h1>

var nome;

nome = prompt('Qual o seu nome?','João Brito Cunha');

</script>

<h2>PHP Mostrando variável JavaScript</h2>

<?php

echo "Seu nome é <script>document.write(nome)</script>";

echo "<script>alert('Seu nome é '+nome)</script>";

<h2>JavaScript Mostrando variável PHP</h2>

<?php

$arquivo="phpjs.php";

$acao='excluir';

$tipo='diretorio';

echo "<br><br>Arquivo = $arquivo Ação = $acao e Tipo = $tipo";

?>

<script>

if(!confirm("Confirma?")){

alert("Não confirmou!");

}else{

alert("Arquivo = <?=$arquivo?> Acao = <?=$acao?> Tipo = <?=$tipo?>");

}

</script>

<h2>HTML e JavaScript Mostrando variável PHP</h2>

<?php $sigla="DNOCS"; ?>

<form>

Clique Neste campo e mude o foco<br>

<input name="sigla" maxlength="10" value="<?=$sigla?>"

onBlur="javascript:location.href='<?=$PHP_SELF?>?sigla=document.forms[0].sigla.value'">

</form>

Passing JavaScript variables to PHP

Original em:

http://www.webcheatsheet.com/php/passing_javascript_variables_php.php

Criar arquivo js.html com o conteúdo:

<script type="text/javascript">

width = screen.width;

height = screen.height;

if (width > 0 && height >0) {

window.location.href = "http://localhost/main.php?width=" + width + "&height=" + height;

} else

exit();

</script>

Criar o arquivo main.php com o seguinte conteúdo:

<?php

echo "<h1>Screen Resolution:</h1>";

echo "Width : ".$_GET['width']."<br>";

echo "Height : ".$_GET['height']."<br>";

?>

Utilitários JavaScript

2017-06-22T17:41:08-03:00

Utilitários em JavaScript e HTML

uteis_jshtml.zip

- Cálculo de Feriados Móveis

- Validação de CPF e CNPJ

- Validação da Inscrição Estadual

- Dia da semana em que você nasceu

- Select com estados do Brasil

- Select com países do mundo

- Limitar caracteres de textarea

Funções em JavaScript

2017-06-22T17:41:08-03:00

Funções em JavaScript

funcoes_js.zip

Diversas funções úteis em JavaScript.

Joguinhos em JavaScript

2017-06-22T17:41:08-03:00

Joguinhos em JavaScript

jogos_js.zip

Diversas joguinhos em JavaScript.

Bom para oferecer em sites. Simples mas dá para se divertir e para aproveitar seu código como aprendizado.