HTML JavaScript
JavaScript makes HTML pages more dynamic and interactive.
Example
A button that shows the date and time when clicked.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js Intro</title>
</head>
<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>
The HTML <script> Tag
The <script> tag defines a client-side script (JavaScript). It either holds the script statements directly, or points to an external file with the src attribute. Common uses are image manipulation, form validation, and changing content. To select an element, JavaScript most often uses document.getElementById().
Example
A script that writes text into an element with id="demo".
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Script Write</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
A Taste of JavaScript
Here are a few things JavaScript can do: change content, change styles, and change attributes of elements.
Change content
Changing an element's content.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js Change Content</title>
</head>
<body>
<p id="demo">Hello World!</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Change content</button>
</body>
</html>
Change styles
Changing an element's size, color, and background.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js Change Styles</title>
</head>
<body>
<p id="demo">Hello World!</p>
<button type="button" onclick="changeStyle()">Change style</button>
<script>
function changeStyle() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>
</body>
</html>
Change attributes
Changing an image's src attribute.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js Change Attributes</title>
</head>
<body>
<img id="image" src="smiley.gif" alt="Image">
<button type="button" onclick="document.getElementById('image').src = 'picture.gif'">Change image</button>
</body>
</html>
The HTML <noscript> Tag
The <noscript> tag defines alternate content shown to users who have scripts turned off, or whose browser does not support scripts.
Example
A script with a <noscript> fallback message.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Noscript</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</body>
</html>