Concepts of Algorithmic Thinking HTML and Javascript: Working together to add interactivity and resp

1
Concepts of Algorithmic ThinkingHTML and
JavascriptWorking together to add interactivity
and responsiveness to a static HTML page

• D.A. Clements
• UW Information Schoolischool.washington.edu

2
HTML Basics
3
Basic HTML Structure

• All HTML files use the same structure

lthtmlgt ltheadgt lttitlegtName of Page Goes
Here lt/titlegt Heading content goes here
lt/headgt ltbodygt Body content goes here
lt/bodygt lt/htmlgt
4
Basic HTML Structure

• lthtmlgt, ltheadgt, lttitlegt, and ltbodygt tags, and
  their closing tags are required.

lthtmlgt ltheadgt lttitlegtName of Page Goes
Here lt/titlegt Heading content goes here
lt/headgt ltbodygt Body content goes here
lt/bodygt lt/htmlgt
5
Basic HTML Structure

• Tags are pairedopening and closing tags

lthtmlgt ltheadgt lttitlegtName of Page Goes
Here lt/titlegt Heading content goes here
lt/headgt ltbodygt Body content goes here
lt/bodygt lt/htmlgt
6
Basic HTML Structure

• Other tags nest inside the lthtmlgt tags

lthtmlgt ltheadgt lttitlegtName of Page Goes
Here lt/titlegt Heading content goes here
lt/headgt ltbodygt Body content goes here
lt/bodygt lt/htmlgt
7
Basic HTML Structure

• An HTML file is divided into head and body
  sections.

lthtmlgt ltheadgt lttitlegtName of Page Goes
Here lt/titlegt Heading content goes here
lt/headgt ltbodygt Body content goes here
lt/bodygt lt/htmlgt
8
Basic HTML Structure

• The ltheadgt contains metadata.

lthtmlgt ltheadgt lttitlegtName of Page Goes
Here lt/titlegt Heading content goes here
lt/headgt ltbodygt Body content goes here
lt/bodygt lt/htmlgt
Metadata
9
Basic HTML Structure

• The body contains the page contenteverything
  that shows on the Web page.

lthtmlgt ltheadgt lttitlegtName of Page Goes
Here lt/titlegt Heading content goes here
lt/headgt ltbodygt Body content goes here
lt/bodygt lt/htmlgt
Content
10
Implementing javascript

• How JavaScript and HTML work together

11
JavaScripts and HTML

• Types of JavaScripts
• Body scripts
• Header scripts
• External scripts

12
Body Script
lthtmlgt ltheadgt lttitlegtName of Pagelt/titlegt
lt/headgt ltbodygt ltscript typetext/javascript
gt //JavaScript goes here lt/scriptgt
lt/bodygt lt/htmlgt
13
Body Script
lthtmlgt ltheadgt lttitlegtName of Pagelt/titlegt
lt/headgt ltbodygt ltscript typetext/javascript
gt //JavaScript goes here lt/scriptgt
lt/bodygt lt/htmlgt
14
Header Script
lthtmlgt ltheadgt lttitlegtName of Pagelt/titlegt
ltscript typetext/javascript
//JavaScript goes here lt/scriptgt lt/headgt
ltbodygt Body content goes here
lt/bodygt lt/htmlgt
15
External Script

• Linked in the ltheadgt
• src gives pathname

lthtmlgt ltheadgt lttitlegtName of Pagelt/titlegt
ltscript typetext/javascript
srcbasic.jsgtlt/scriptgt lt/headgt ltbodygt
Body content goes here lt/bodygt lt/htmlgt
16
External JavaScript

• Make changes to scripts in one place
• Reusable
• Can be linked to any page, every page in a site,
  or many sites

17
End papers