//This is a bunch of JavaScript Code to be used in HTML <h2>What Can JavaScript Do?</h2> <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> <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> <h2>JavaScript in Body</h2> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script> //This section follows the html tags up until <head> this goes in head & body both <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </head> <body> <h2>Demo JavaScript in Head</h2> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> //Add more body text here if you'd like finish up with footer possibly, // and close it all up //This one is similar the the last except this one, JavaScript goes in the // <body> instead of the <head> <h2>Demo JavaScript in Body</h2> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> //This one is the External Version Of The Above Two // Make a file labeled "anything.js" {literally anything} // Insert This Inside function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } //Now you'll need to put something like this inside your .html document <h2>Demo External JavaScript</h2> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction()">Try it</button> <p>This example links to "myScript.js".</p> <p>(myFunction is stored in "myScript.js")</p> <script src="myScript.js"></script> //This ^^^ is the most essential of these lines in this example // "Placing scripts in external files has some advantages: // * It separates HTML and code // * It makes HTML and JavaScript easier to read and maintain // * Cached JavaScript files can speed up page loads" //The above notes quoted directly from : <a href="https://www.w3schools.com/Js/js_whereto.asp">This Site</a>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter