Introduction to Technology for Musicians
2025_Spring
2025_Spring2024_Fall2024_Spring2023_Fall2023_Spring2022_Fall2022_Spring2021_Fallold
2025_Spring
2025_Spring2024_Fall2024_Spring2023_Fall2023_Spring2022_Fall2022_Spring2021_Fallold
  • Introduction to Technology for Musicians
  • Badge Requirements
  • Final Exam
  • Appendix
    • Sound Reinforcement
    • HTML, CSS, and JavaScript
    • Copyright & Licensing
    • Software Suggestions
    • Hardware Suggestions
    • Audio Recording
    • Audio Mixing (exercise)
    • Dorico Reference
    • Audio Synthesis & MIDI
    • Still Photography - Portraits
    • Stop Motion
    • Single Camera Video - Recording
    • Single Camera Video - Editing
    • Multicamera Video - Recording
    • Multicamera Video - Editing
    • DaVinci Resolve - Saving
    • Electroacoustic Music
    • Music Video Student Project Examples
Powered by GitBook
On this page
  • Getting Started
  • HTML Boilerplate (explained)
  • Understanding HTML, CSS, and JavaScript
  • Great Resource

Was this helpful?

  1. Appendix

HTML, CSS, and JavaScript

Getting Started

  1. create an account for = https://codesandbox.io/

  2. create a new HTML+CSS project

  3. add an index.js file

HTML Boilerplate (explained)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MUS1331</title>
    <link rel="stylesheet" href="styles.css" />
    <script defer src="index.js"></script>
  </head>
  <body>
    <p id='dog'>This is a paragraph.</p>
  </body>
</html>

Understanding HTML, CSS, and JavaScript

style.css

p {
  font-size: 2em;
  color: green;
}

font size explained

index.js Example 1 (popup box)

alert("Hello World!");

index.js Example 2 (changing content of a paragraph)

var p = document.getElementById('dog');
p.addEventListener('click', function(event) {
  p.innerHTML = 'You clicked it!';
});

index.js Example 3 (guessing a number between 1 and 10)

function myFunction() {
  let text;
  let randomNumber = Math.floor(Math.random() * 10) + 1;

  let person = prompt("Please enter your name:", "Harry Potter");

  let guess = prompt(
    "Hello " + person + " guess a number between 1 and 10:", "7");

  if (guess == randomNumber) {
    text = "Congratulations " + person + "! Your guess is correct!";
  } else {
    text = "Nope, " + person + ". The number was " + randomNumber;
  }

  document.getElementById("dog").innerHTML = text;
}

Great Resource

PreviousSound ReinforcementNextCopyright & Licensing

Last updated 2 months ago

Was this helpful?

LogoHTML & CSS Is Hardinternetinghard