sábado, 21 de dezembro de 2013

Javascript Básico - Parte 2

Vamos seguir mais alguns Exemplos:

JavaScript, estartando Comentários e Blocos:

JavaScript statements

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph.</p>

<div id="myDIV">A DIV.</div>

<script>
document.getElementById("demo").innerHTML="Hello Dolly";
document.getElementById("myDIV").innerHTML="How are you?";
</script>

</body>
</html>


Resultado no Navegador: 

My Web Page


Hello Dolly

How are you?

JavaScript blocks

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<p id="myPar">I am a paragraph.</p>
<div id="myDiv">I am a div.</div>

<p>
<button type="button" onclick="myFunction()">Try it</button>
</p>

<script>
function myFunction()
{
document.getElementById("myPar").innerHTML="Hello Dolly";
document.getElementById("myDiv").innerHTML="How are you?";
}
</script>

<p>When you click on "Try it", the two elements will change.</p>

</body>
</html>


Resultado no Navegador: 
  Tryit Editor v1.8
Source Code:
Result:
W3Schools.com - Try it yourself 

I am a paragraph.
I am a div.


When you click on "Try it", the two elements will change.


Comentários de Linha:

<!DOCTYPE html>
<html>
<body>

<h1 id="myH1"></h1>

<p id="myP"></p>

<script>
// Write to a heading:
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// Write to a paragraph:
document.getElementById("myP").innerHTML="This is my first paragraph.";
</script>

<p><strong>Note:</strong> The comments are not executed.</p>

</body>
</html>


Resultado no Navegador: 

Welcome to my Homepage

This is my first paragraph.
Note: The comments are not executed.


Simples linha de comentários:

<!DOCTYPE html>
<html>
<body>

<h1 id="myH1"></h1>

<p id="myP"></p>

<script>
// Write to a heading:
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// Write to a paragraph:
document.getElementById("myP").innerHTML="This is my first paragraph.";
</script>

<p><strong>Note:</strong> The comments are not executed.</p>

</body>
</html>


Resultado no Navegador: 

Welcome to my Homepage

This is my first paragraph.
Note: The comments are not executed.


Multiplos comentários de linha:

<!DOCTYPE html>
<html>
<body>

<h1 id="myH1"></h1>

<p id="myP"></p>

<script>
// Write to a heading:
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// Write to a paragraph:
document.getElementById("myP").innerHTML="This is my first paragraph.";
</script>

<p><strong>Note:</strong> The comments are not executed.</p>

</body>
</html>



Resultado no Navegador: 

Welcome to my Homepage

This is my first paragraph.
Note: The comments are not executed.


Comentário de linha única para impedir a execução.

<!DOCTYPE html>
<html>
<body>

<h1 id="myH1"></h1>

<p id="myP"></p>

<script>
//document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
</script>

<p><strong>Note:</strong> The comment is not executed.</p>

</body>
</html> 


Resultado no Navegador: 

This is my first paragraph.
Note: The comment is not executed.


Várias linhas comentadas para impedir a execução

<!DOCTYPE html>
<html>
<body>

<h1 id="myH1"></h1>

<p id="myP"></p>

<script>
/*
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
*/
</script>

<p><strong>Note:</strong> The comment-block is not executed.</p>

</body>
</html>


Resultado no Navegador:  

Note: The comment-block is not executed.

Fonte:.w3schools.com

Nenhum comentário:

Postar um comentário