Javascript

<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello

JavaScript!"'>Click Me!</button>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
<html>
<body>
<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click
Me!</button>
</body>
</html>
<html>
<body>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click

Me!</button>
</body>
</html>
<html>
<body>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click

Me!</button>
</body>
</html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
<html>
<body>
<h2>JavaScript in Body</h2>
<script>
document.getElementById("demo").innerHTML = "Paragraph changed.";

}
</script>
</body>
</html>
<html>
<body>
<h2>External JavaScript</h2>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
JavaScript Display Possibilities

JavaScript can "display" data in different ways:
 Writing into an HTML element, using innerHTML.

 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().
 Writing into the browser console, using console.log().
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
<html>
<body>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
<html>
<body>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
<html>
<body>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>
<p id="demo"></p>
<script>
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>The sort() method sorts an array alphabetically.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
fruits.sort();
</script>
</body>
</html>
<html>
<body>
<p>The sort() method sorts an array alphabetically.</p>
<p>The reverse() method reverts the elements.</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
</script>
</body>
</html>
<html>
<body>
<p>Click the button to sort the array in ascending order.</p>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
points.sort(function(a, b){return a - b});
</script>
</body>
</html>
<html>
<body>
<p>Click the buttons to sort the array alphabetically or numerically.</p>

<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
function myFunction1() {
points.sort();
function myFunction2() {
points.sort(function(a, b){return a - b});
</script>
</body>
</html>
<html>
<body>
<p>Click the button to display a time-based greeting:</p>
<p id="demo"></p>
<script>
var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
document.getElementById("demo").innerHTML = greeting;
</script>
</body>
</html>

Javascript

Uploaded by

Copyright:

Available Formats

Javascript

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript

Uploaded by

Copyright:

Available Formats

<html>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello

<h2>My First JavaScript</h2>

Click me to display Date and Time.</button>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click

document.getElementById("demo").innerHTML = "Paragraph changed.";

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

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

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

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

document.getElementById("demo").innerHTML = "Paragraph changed.";

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

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

<p>(myFunction is stored in an external file called "myScript.js")</p>

JavaScript Display Possibilities

 Writing into an HTML element, using innerHTML.

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

<p>Strings are written with quotes.</p>

<p>Numbers are written without quotes.</p>

var person = "John Doe";

var answer = 'Yes I am!';

pi + "<br>" + person + "<br>" + answer;

<h2>JavaScript Array Sort</h2>

<p>The sort() method sorts an array alphabetically.</p>

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];

<h2>JavaScript Array Sort</h2>

<p>The sort() method sorts an array alphabetically.</p>

<p>The reverse() method reverts the elements.</p>

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];

<h2>JavaScript Array Sort</h2>

<p>Click the button to sort the array in ascending order.</p>

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

var points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){return a - b});

<h2>JavaScript Array Sort</h2>

<p>Click the buttons to sort the array alphabetically or numerically.</p>

<button onclick="myFunction2()">Sort Numerically</button>

var points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){return a - b});

<p>Click the button to display a time-based greeting:</p>

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

if (hour < 18) {

greeting = "Good day";