S Javascript #1

HTML and CSS

You already have an intuition for
- what HTML is: the structure and content of a page
- what CSS is: how that page looks
so you know when to reach for each one.

What if you also had an intuition for when to use...
- Javascript: when the page needs to do something (respond to clicks, change, move)
- A library (p5.js, three.js, D3.js): when someone has already written the code you need
- JSON: when you need to store or pass around data
- An API: when you want data or services from somewhere else (maps, weather, AI)
- Server side scripting (Node.js, Python): when code has to run on the server instead of in the browser
- A database: when the page needs to remember things after it is closed
- socket.io: when several people need to see the same thing change in real time
- Git and GitHub: when you need to save versions of your work and share it
- A different programming language (like Python, C, C++) when you need something else that Javascript can't give you
One goal of this class is to build that intuition. You don't need to memorize the code, but you need to know how to architect software

Notes

Why/Does JavaScript Matter/?

HTML + CSS + Javascript

Javascript:

De facto programming language for the Web
Javascript integrated with the browser
Most web apps written in Javascript
Having literacy makes a huge difference
- various javascript libraries that extend and build upon JS. (eg. gaming, 3D, multimedia, design...etc)

If English is the new programming language, the language itself no longer matters. If it runs, you can ask AI to write in any langauge
For us, context (what environment we are on) and understanding architecture (server <---> client) matter more?

Ask:
"What is JavaScript and what can it do that HTML and CSS cannot? Give me three concrete examples of things on a web page that require JavaScript." "HTML, CSS, and JavaScript each have a different job on a web page. Can you explain what each one is responsible for, and how they work together?"

Notes

Client Side vs Server Side

- Clientside: works inside a web browser. Content can appear/disappear, move around the screen, automatically update.

- Serverside: runs on the server. Php, Ruby on Rails, node.js (javascript) ...etc. Use of databases (storing and managing data), complex processing of information (credit card).

- API (Application Programming Interface) - allows the client program to talk to well known servers/services (Google Map, Facebook, Twitter...etc).

Ask:
"What is the difference between client-side and server-side code? Which one runs in the browser and which one runs on a server?" "What is an API? Give me a simple, non-technical analogy for how a web page uses an API to get data from a server."

Notes

Adding Javascript to a page

Use the <script> tag



   <!DOCTYPE html>
   <html>

   <head>

   </head>

   <body>





   

   <script>
     window.alert('hello world');
   </script>

   </body>
   </html>

Note that JavaScript is added at the bottom of the page, just before </body>. This is because JavaScript may reference HTML elements that haven't been created yet — the browser reads and renders HTML from top to bottom, so a script that tries to access a <div> before that <div> appears in the file will fail. Placing the script at the bottom ensures all elements exist before JavaScript runs.

Modern alternative: add the defer attribute to a <script> tag in <head> and the browser will wait until the page is fully loaded before running it:

   <script src="myscript.js" defer></script>

Ask:
"Why do people put JavaScript at the bottom of an HTML page, right before the closing body tag? What goes wrong if you put it at the top?" "What does the 'defer' attribute do on a script tag? How is it different from putting the script at the bottom of the page?"

Notes

Introducing the DOM

A Document Object Model (DOM) is a conceptual way of visualizing a document and its contents. The browser creates this internal model when it loads a document.

You can use JavaScript to access and edit the DOM representation (and hence the HTML document the user sees).

In the DOM, elements of your web page have a logical, hierarchical structure, like a tree of interconnected parent and child objects.

Ask:
"What is the DOM? Explain it as if I have never programmed before. What is it and why does JavaScript need it?" "If I have an HTML page with a div that contains a paragraph, how does that look as a tree in the DOM? Draw it in text." "When JavaScript changes the DOM, does it change the original HTML file on disk? What actually changes?"

Notes

Accessing objects using the object notation

JavaScript uses dot notation to navigate the object tree: parent.child. Each dot moves one level deeper. Because window is the global root, its prefix is optional.

Copy and paste the file below, open it in a browser, and watch the console:

<!DOCTYPE html>
<html>
<head>
  <title>My Test Page</title>
</head>
<body>
  <h1>Hello World</h1>
  <p>Some text here.</p>

  <script>
    // reading properties
    console.log( window.location.href );     // full URL of this file
    console.log( document.title );           // "My Test Page"
    console.log( navigator.language );       // e.g. "en-US"
    console.log( document.body.innerHTML );  // all HTML inside <body>

    // calling a method
    window.alert('hello');                   // opens a popup — same as alert('hello')
  </script>
</body>
</html>

Ask:
"In the line console.log( window.location.href ) — what is window, what is location, and what is href? What does each dot mean?" "What is the difference between a property and a method in JavaScript? Which lines above are reading a property, and which are calling a method?" "Why can I write alert('hello') instead of window.alert('hello')? What makes window special?"
Run the file. Do the console outputs match what Copilot predicted?

Go further:
"I got an object back when I logged window.location. How do I see all the properties inside that object in the console?" "What other useful properties does the window object have? Give me five examples I can try in the console right now."

Notes

Hello World with alert() and document.write()

Sample file: 01_hello.html


<!DOCTYPE html>
<html>
<head>
<title> The Title of this HTML Page </title>
</head>

<body>


<script>
window.alert('hello world');
</script>
</body>
</html>

will open up an alert window with the message hello world.

Another method, document.write(), writes directly into the document body.

<script>
document.write('Hello document');
</script>

If you run the above script, the text "Hello document" will be displayed in the body of the HTML page.

Note: document.write() is considered outdated and is rarely used in modern JavaScript. A better alternative for printing output and debugging is console.log(), which writes to the browser's JavaScript console instead of the page:

<script>
console.log('Hello console');
</script>

You will use console.log() constantly as you write more JavaScript — it is how you inspect values without changing the page.

Ask:
"What does window.alert() do in JavaScript? What does it look like when it runs in the browser?" "What is the difference between alert(), document.write(), and console.log()? When would I use each one?"
Then type the examples yourself and run them. Do they match what Copilot described?

Notes

Tracking Down Errors - Javascript Console

The use of Javascript console is a must. Before asking anyone else why your javascript does not work, make sure you check the console.

On Chrome (Mac):

View -> Developer -> JavaScript Console

It can be cryptic at first but it is helpful in:

Finding the location of the error — it usually tells you which line in your code has the problem (not always exact, but close).
Telling you the type of error — the message itself describes what went wrong.

See what kind of error message you see in the console when you:

forget to close the ) after the argument list
forget the quote marks around the message (called a string)
misspell a JavaScript command — e.g. allert instead of alert

Ask:
"I got this error in the JavaScript console: [paste the error message here]. What does it mean and how do I fix it?" "What is an 'Uncaught ReferenceError' in JavaScript? What usually causes it?" "What is a 'SyntaxError' in JavaScript? What kinds of mistakes produce it?"
Important: before asking Copilot, try to read the error yourself. The console tells you the line number — look there first.

Notes

Lab — Hello World & the Console

Part 1 — Run your first JavaScript

Copy and run 01_hello.html.

Next, add a console.log('hello from the console'); line to the script and open the JavaScript console. Can you see the message there?

Part 2 — Deliberately break it

Make each of the following mistakes one at a time, save the file, reload, and read the console error message carefully:

Remove the closing ) from alert('hello world')
Remove the opening quote mark from the string: alert(hello world')
Misspell the command: allert('hello world')

For each error: what line does the console point to? What type of error is it? Fix each mistake before moving on to the next.

Ask:
"I got this JavaScript error: [paste exact error text]. What caused it and what do I need to fix?" "What is the difference between a SyntaxError and a ReferenceError in JavaScript?" Compare Copilot's explanation to what you figured out yourself from the console. Which was clearer?

Submit: email your Part 2 results

Send an email to the instructor with the subject line ILCP JS01 Lab: Your Name.

In the body of the email, for each of the three mistakes, write:

The exact error message from the console (copy and paste it)
The line number the console pointed to
The type of error (for example SyntaxError or ReferenceError)
How you fixed it

Notes