JavaScript in the Browser
- JavaScript was created to make web pages interactive
- Load into page (several ways)
- Trigger execution (also several ways)
- Manipulate Document Object Model (DOM)
log_on_load.html
- Put code directly in
<script>
tag in head of page
- Executed as the page loads
- View output in console tab in browser's developer tools
- But this is not reliable
- Code may run while browser is still converting HTML to DOM (or loading other assets)
show_headings.html
finds things in the DOM
document
refers to the content of the page
getElementsByTagName
finds nodes match a CSS selector
- But it doesn't show anything
show_headings_onload.html
is a better approach
- Define a function
- Use the
onload
attribute of body
to run it when the body has fully loaded
emphasize_headings.html
modifies the DOM
- JavaScript changes in-memory representation of page
- Browser decides what to re-draw and when
emphasize_multistep.html
does the same thing by explicitly manufacturing new nodes
button_click.html
adds a button with an event handler
- Browser standards define lots of different events you can listen to
- You provide the function, you browser calls it when something happens
emphasize_click.html
show_hide.html
controls visibility of elements
- But now we have to manage state
async_fetch.html
introduces two new ideas
- Put the code in
async_fetch.js
- Use
async
and await
keywords to wait for things
server.py
returns RGB color components
- Use
style
property rather than setAttribute
because style can have many sub-properties