HTML Coding - Lesson 20 - HTML JavaScript
Examples of what Javascript can do: (2 - JavaScript can change HTML styles)
<!DOCTYPE html> <html> <body> <h1>My First JavaScript</h1> <p id="demo">JavaScript can change the style of an HTML element.</p> <script> function myFunction() { document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow"; } </script> <button type="button" onclick="myFunction()">Click Me!</button> </body> </html>
Examples of what Javascript can do: (1 - JavaScript can change HTML content)
<!DOCTYPE html> <html> <body> <h1>My First JavaScript</h1> <p>JavaScript can change the content of an HTML element:</p> <button type="button" onclick="myFunction()">Click Me!</button> <p id="demo">This is a demonstration.</p> <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script> </body> </html>
Sample Code for Getting an HTML element from Javascript:
<!DOCTYPE html> <html> <body> <h2>Use JavaScript to Change Text</h2> <p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> </body> </html>
Sample Code for the *<noscript>* Tag
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> <noscript>Sorry, your browser does not support JavaScript!</noscript> <p>A browser without support for JavaScript will show the text written inside the noscript element.</p> </body> </html>
Examples of what Javascript can do: (3 - JavaScript can change HTML attributes)
<!DOCTYPE html> <html> <body> <script> function light(sw) { var pic; if (sw == 0) { pic = "pic_bulboff.gif" } else { pic = "pic_bulbon.gif" } document.getElementById('myImage').src = pic; } </script> <img id="myImage" src="pic_bulboff.gif" width="100" height="180"> <p> <button type="button" onclick="light(1)">Light On</button> <button type="button" onclick="light(0)">Light Off</button> </p> </body> </html>
What are some common uses for Javascript?
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
What is HTML Javascript?
HTML Javascript is code used to make HTML pages more dynamic and interactive.
How do you get an HTML element from a Javascript code?
Javascript often uses the *document.getElementbyId()* method to get the HTML element. An example is shown below.
What is the <noscript> tag used for in Javascript?
The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support client-side scripts.
What is the tag used for HTML Javascript?
You use the *<script>* tag. It is used to define a client-side script (JavaScript).
