Computation for Linguists

HTML and JavaScript, Day 5: Baby JavaScript

Dr. Andrew M. Byrd

2025-09-17

Review

  • What did you learn last time about HTML?

Review from Days 1, 2, & 3

  • Days 1-2:

    • We learned basic tags: <h1>, <p>, <em>, <strong>, <a>, <img>, <ul>, <li>
    • We practiced attributes like href and alt
    • Structure: <head>, <nav>, <main>, <section>, <footer>

  • Days 3-4:

    • CSS
    • GitHub Pages

Trying Out Some Real Coding

Recall: Footers

  </main>
  ...
    <footer>
      © 2025 Andrew M. Byrd · <a href="#top">Back to top</a>
    </footer>
</body>
  • So… we have to update our website every year with the correct year?

Date Automated

<footer>
  <p>&copy; <span id="year"></span> Your Name</p>
</footer>

<script>
  const yearSpan = document.getElementById("year");
  yearSpan.textContent = new Date().getFullYear();
</script>

Let’s Look at this More Closely

<footer>
  <p>&copy; <span id="year"></span> Your Name</p>
</footer>
  • This is the <footer> code. Before we typed “2025”.
  • <span id="year"></span> is the code that is giving us the correct value
  • id=“year” is a variable defined in the JavaScript code

What is JavaScript?

  • JavaScript (JS) is a very popular programming language;
  • Adds interactivity and dynamic behavior to your site;
  • Runs in the browser, so no installation needed;
  • We’ll use it for small, useful effects on our personal website.

The <script>

<script>
  const yearSpan = document.getElementById("year");
  yearSpan.textContent = new Date().getFullYear();
</script>
  • Embedded in your html file is a script
  • Scripts are instructions that we give to programming languages

The <script>

<script>
  const yearSpan = document.getElementById("year");
  yearSpan.textContent = new Date().getFullYear();
</script>
  • const is one way that JS defines a variable
  • The variable here is constant (hence const)
  • year is that name that we give to the variable; Span is required in calling up that variable in our script
    • we could call it cookie, nananananana, whatever!
    • so why not call it nananananana?

The <script>

<script>
  const yearSpan = document.getElementById("year");
  yearSpan.textContent = new Date().getFullYear();
</script>

  • document.getElementById("year")

    • Looks through the HTML and finds the element with id=“year”.
    • That’s the <span> inside the footer.
    • The result is stored in a constant named yearSpan.

The <script>

<script>
  const yearSpan = document.getElementById("year");
  yearSpan.textContent = new Date().getFullYear();
</script>

  • new Date()

    • Creates a JavaScript Date object representing “right now.”

  • .getFullYear()

    • pulls just the 4-digit year (e.g., 2025) from that Date.

  • yearSpan.textContent = new Date().getFullYear();

    • Inserts that year as text into the <span>.

Activity: Let’s Modify Your Website!

  • In your LIN_301 “staging” folder, modify your firstname_lastname.html doc
  • Modify your <footer>
  • Add the <script>
    • Place at the bottom of <body>, right before </body>
  • Save, stage, commit, push!
  • Test it. Does it work?

Another JS Script: Dark Mode

Dark Mode

  • Let’s add a “Dark Mode” button toggle to our website
  • Here is a link to some code for a standalone site:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}

.dark-mode {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<h2>Toggle Dark/Light Mode</h2>
<p>Click the button to toggle between dark and light mode for this page.</p>

<button onclick="myFunction()">Toggle dark mode</button>

<script>
function myFunction() {
   var element = document.body;
   element.classList.toggle("dark-mode");
}
</script>

</body>
</html>

Activity: Dark Mode

  • Add Dark Mode to your Own Website
  • Test: is it possible to use different colors?
  • Look carefully at the code. With your neighbors, try to figure out exactly what each word (like function) is doing.
  • After discussing this, google each term. Do they mean what you thought they did?

The Final Product

  • Click here for instructions on your website