Session 8 - Javascript
1. Copy the script and save as
operators.html
.
<!DOCTYPE html> <html> <body> <!-- A heading --> <h2>JavaScript Operators</h2> <!-- What's happening? --> <p>JavaScript uses arithmetic operators to compute values (just like algebra).</p> <!-- Display the answers --> <h1>Show different a,b,c </h1> <h1 id="large"></h1> <p id="small"></p> <!-- javascript in body goes last --> <script> /* The code below will change the variable values and display answers in my web page */ var a,b,c; // declare variables a = 15; b = 14; c = 12; // set variable values document.getElementById("large").innerHTML = "The large answer is " + (a + b) * c; a = 5; b = 4; c = 2; // change variable values document.getElementById("small").innerHTML = "The small answer is " + (a + b) * c; </script> </body> </html>
2. Copy the script and save as
button.html
.
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <title>JavaScript label example</title> <style> p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor: pointer; } </style> </head> <body> <p>Player 1: Chris</p> <script> const para = document.querySelector('p'); para.addEventListener('click', updateName); function updateName() { let name = prompt('Enter a new name'); para.textContent = 'Player 1: ' + name; } </script> </body> </html>
3. Choose a Team Member.
Replace the images table.
<main> <h3>Choose a Photo</h3> <p><img id="myImage" src="images/Carrie.jpg" style="width:800px"></p> <button onMouseDown="return playImage1()">Carrie</button> <button onMouseDown="return playImage2()">Sally</button> <button onMouseDown="return playImage3()">Jevonie</button> <button onMouseDown="return playImage4()">Talesa</button> <button onMouseDown="return playImage5()">Alyssa</button> </main>
Modify styles.css.
button { background-color: rgb(0,0,140); /* Dark Blue */ border: none; border-radius: 15px; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin: 4px 2px; cursor: pointer; } button:hover { background-color: rgb(255,165,0); /* Orange */ }
Create javascript.
/ * team.js */ function playImage1(){ document.getElementById('myImage').src='images/Carrie.jpg'; return true; } function playImage2(){ document.getElementById('myImage').src='images/Sally.jpg'; return true; } function playImage3(){ document.getElementById('myImage').src='images/Jevonie.jpg'; return true; } function playImage4(){ document.getElementById('myImage').src='images/Talesa.jpg'; return true; } function playImage5(){ document.getElementById('myImage').src='images/Alyssa.jpg'; return true; }
Save in assets as
team.js
.
Add link to index.html.
<!DOCTYPE html> <html lang="en-US"> <head> <title>FSF Training</title> <link rel="stylesheet" href="assets/styles.css"> <script src="assets/team.js"></script> </head>
Open
Website
