Html_CSS_JavaScript

Introduction to HTML & CSS & Javascript
In this course, diving into the design and creation of web applications. We’ll build our web-design skills by working on
a number of projects throughout the course, including an open-ended final project where you’ll have the chance to
create a website of your own!
In this course, you’ll need a text editor where you can write code locally on your computer. Some popular ones
include Visual Studios Code, Sublime Text, Atom, and Vim, but there are many more to choose from!
HTML (Hypertext Markup Language)

• HTML is a markup language that defines the structure of a web page. It is interpreted by your web browser
(Safari, Google Chrome, Firefox, etc.) in order to display content on your screen.
• Let’s get started by writing a simple HTML file!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world!
</body>
<html>
• When we open up this file in our browser, we get:
• Now, let’s take some time to talk about the file we just wrote, which seems to be pretty complicated for such
a simple page.
o In the first line, we are declaring (to the web browser) that we are writing the document in the latest
version of HTML: HTML5.
1
o After that, the page consists of nested HTML elements (such as html and body), each with an opening
and closing tag marked with either <element> for an opening and </element> for a closing.
o Notice how each of the inner elements is indented just a bit further than the last. While this is not
necessarily required by the browser, it will be very helpful to keep this up in your own code.
o HTML elements can include attributes, which give the browser extra information about the element.
For example, when we include lang="en" in our initial tag, we are telling the browser that we are using
English as our primary language.
o Inside the HTML element, we typically want to include both a head and a body tag. The head element
will include information about your page that is not necessarily displayed, and the body element will
contain what is actually visible to users who visit the site.
o Within the head, we have included a title for our webpage, which you’ll notice is displayed in the tab
at the top of our web browser.
o Finally, we’ve included the text “Hello, world!” in the body, which is the visible part of our page.
Document Object Model (DOM)
2
• The DOM is a convenient way of visualizing the way HTML elements relate to each other using a tree-like
structure. Above is an example of the DOM layout for the page we just wrote.
More HTML Elements

• There are many HTML elements you may want to use to customize your page, including headings, lists, and
bolded sections. In this next example, we’ll see a few of of these in action.
• One more thing to note:  gives us a comment in HTML, so we’ll use that below to explain some of the
elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Elements</title>
</head>
<body>

<h1>A Large Heading</h1>
<h2>A Smaller Heading</h2>
<h6>The Smallest Heading</h6>

A <strong>bold</strong> word and an <i>italicized</i> word!

View the <a href="https://aydin.edu.tr/">Website</a>!

An unordered list:
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
An ordered list:
<ol>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ol>

An image:
<img src="../../images/duck.jpeg" alt="Rubber Duck Picture">


3
<br/> <br/>

<table>
<thead>
<th>Ocean</th>
<th>Average Depth</th>
<th>Maximum Depth</th>
</thead>
<tbody>
<tr>
<td>Pacific</td>
<td>4280 m</td>
<td>10911 m</td>
</tr>
<tr>
<td>Atlantic</td>
<td>3646 m</td>
<td>8486 m</td>
</tr>
</tbody>
</table>
</body>
<html>
4
This page, when rendered, looks something like this:
• In case you’re worried about it, know that you’ll never have to memorize these elements. It’s very easy to
simply search something like “image in HTML” to find the img tag. One resource that’s especially helpful for
learning about these elements is W3 Schools.
5
Forms
• Another set of elements that is really important when creating a website is how to collect information from
users. You can allow users to enter information using an HTML form, which can contain several different types
of input. Later in the course, we’ll learn about how to handle information once a form has been submitted.
• Just as with other HTML elements, there’s no need to memorize these, and W3 Schools is a great resource for
learning about them!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forms</title>
</head>
<body>
<form>
<input type="text" placeholder="First Name" name="first">
<input type="password" placeholder="Password" name="password">
<div>
Favorite Color:
<input name="color" type="radio" value="blue"> Blue
<input name="color" type="radio" value="green"> Green
<input name="color" type="radio" value="yellow"> Yellow
<input name="color" type="radio" value="red"> Red
</div>
<input type="submit">
</form>
</body>
</html>
6
CSS (Cascading Style Sheets)
• CSS is used to customize the appearance of a website.
• While we’re just getting, started, we can add a style attribute to any HTML element in order to apply some
CSS to it.
• We change style by altering the CSS properties of an element, writing something like color: blue or text-align:
center
• In this example below, we make a slight change to our very first file to give it a colorful heading:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1 style="color: blue; text-align: center;">A Colorful Heading!</h1>
Hello, world!
</body>
<html>
• If we style an outer element, all of the inner elements automatically take on that style. We can see this if we
move the styling we just applied from the header tag to the body tag:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="color: blue; text-align: center;">
<h1 >A Colorful Heading!</h1>
Hello, world!
</body>
<html>
7
• While we can style our web page as we’ve done above, to achieve better design, we should be able to move
our styling away from the individual lines.
o One way of doing this is to add your styling between <style> tags in the head. Inside these tags, we
write which types of elements we want to be style, and the styling we wish to apply to them. For
example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
Hello, world!
</body>
</html>
8
Another way is to include in a <link> element in your head with a link to a styles.css file that contains some styling.
This means the HTML file would look like:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
Hello, world!
</body>
</html>
And our file called styles.css would look like:
h1 {
color: blue;
text-align: center;
}
• There are far too many CSS properties to go over here, but just like HTML elements, it’s typically easy to Google
something along the lines of “change font to blue CSS” to get the result. Some of the most common ones
though are:
o color: the color of text

o text-align: where elements are placed on the page
o background-color: can be set to any color
o width: in pixels or percent of a page
o height: in pixels or percent of a page
o padding: how much space should be left inside an element
o margin: how much space should be left outside an element
o font-family: type of font for text on page
o font-size: in pixels
o border: size type (solid, dashed, etc) color
9
• Let’s use some of what we just learned to improve upon our oceans table from above. Here’s some HTML to
start us off:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nicer Table</title>
</head>
<body>
<table>
<thead>
<th>Ocean</th>
<th>Average Depth</th>
<th>Maximum Depth</th>
</thead>
<tbody>
<tr>
<td>Pacific</td>
<td>4280 m</td>
<td>10911 m</td>
</tr>
<tr>
<td>Atlantic</td>
<td>3646 m</td>
<td>8486 m</td>
</tr>
</tbody>
</table>
</body>
<html>
10
• The above looks a lot like what we had before, but now, either by including a style tag or a link to a stylesheet
in the head element, we add the following css:
table {
border: 1px solid black;
border-collapse: collapse;
}
td {
padding: 2px;
}
th {
padding: 2px;
}
Which leaves us with this nicer-looking table:
• You may already be thinking that there’s some needless repetition in our CSS at the moment, as td and th have
the same styling. We can (and should) condense this down to the following code, using a comma to show the
styling should apply to more than one element type.
table {
border-collapse: collapse;
}
td, th {
padding: 2px;
}
11
• This is a good introduction into what are known as CSS selectors. There are many ways to determine which
HTML elements you are styling, some of which we’ll mention here:
o element type: this is what we’ve been doing so far: styling all elements of the same type.
o id: Another option is to give our HTML elements an id like so: <h1 id="first-header">Hello!</h1> and
then applying styling using #first-header{...} using the hashtag to show that we’re searching by id.
Importantly, no two elements can have the same id, and no element can have more than one id.
o class: This is similar to id, but a class can be shared by more than one element, and a single element
can have more than one class. We add classes to an HTML element like this: <h1 class="page-text
muted">Hello!</h1> (note that we just added two classes to the element: page-text and muted). We
then style based on class using a period instead of a hashtag: .muted {...}
• Now, we also have to deal with the problem of potentially conflicting CSS. What happens when a header
should be red based on its class but blue based on its id? CSS has a specificity order that goes:
▪ In-line styling
▪ id
▪ class
▪ element type
• In addition to the comma for multiple selectors, there are several other ways to specify which elements you
would like to style. This table from lecture provides a few, and we’ll go through a few examples below:
12
div p Selects all <p> elements inside <div> elements
div, p Selects all <div> elements and all <p> elements
div > p Selects all <p> elements where the parent is a <div> element
div + p Selects the first <p> element that is placed immediately after
<div> elements
[lang|=en] Selects all elements with a lang attribute value equal to "en" or
starting with "en-"
a[href*="w3schools"] Selects every <a> element whose href attribute value contains
the substring "w3schools"
a:active Selects the active link
What are Pseudo-Elements?

A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
13
Descendant Selector: Here, we use the descendant selector to only apply styling to list items found within an
unordered list:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using Selectors</title>
<style>
ul li {
color: blue;
}
</style>
</head>
<body>
<ol>
<li>foo</li>
<li> bar
<ul>
<li>hello</li>
<li>goodbye</li>
<li>hello</li>
</ul>
</li>
<li>baz</li>
</ol>
</body>
<html>
14
Attributes as Selectors: We can also narrow down our selection based on the attributes we assign to HTML elements
using brackets. For example, in the following list of links, we choose to only make the link to Amazon red:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using Selectors</title>
<style>
a[href="https://www.amazon.com/"] {
color: red;
}
</style>
</head>
<body>
<ol>
<li><a href="https://www.google.com/">Google</a></li>
<li><a href="https://www.amazon.com/">Amazon</a> </li>
<li><a href="https://www.facebook.com/">Facebook</a></li>
</ol>
</body>
<html>
15
• Not only can we use CSS to change what an element looks like permanently, but also what it looks like under
certain conditions. For example, what if we wanted a button to change color when we hover over it? We can
acheive this using a CSS pseudoclass, which provides additional styling during special circumstances. We write
this by adding a colon after our selector, and then adding the circumstance after that colon.
In the case of the button, we would add :hover to the button selector to specify the design only when hovering:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pseudoclasses</title>
<style>
button {
background-color: red;
width: 200px;
height: 50px;
font-size: 24px;
}
button:hover {
background-color: green;
}
</style>
</head>
<body>
<button>Button 1</button>
</body>
<html>
16
Responsive Design
Today, many people view websites on devices other than computers, such as smartphones and tablets. It’s important
to make sure your website is readable to people on all devices. Following are the ways of implementing it:
• Viewport: One way we can achieve this is through knowledge of the viewport. The viewport is the part of
the screen that is actually visible to the user at any given time. By default, many webpages assume that the
viewport is the same on any device, which is what leads to many sites (especially older ones) being difficult to
interact with on mobile devices.
o One simple way to improve the appearance of a site on a mobile device is to add the following line in
the head of our HTML files. This line tells the mobile device to use a viewport that is the same width
as that of the device you’re using rather than a much larger one.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
• Media Queries: Another way we can deal with different devices is through media queries. Media queries
are ways of changing the style of a page based on how the page is being viewed.
For an example of a media query, let’s try to simply change the color of the screen when it shrinks down to a
certain size. We signal a media query by typing @media followed by the type of query in parentheses:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Screen Size</title>
<style>
@media (min-width: 600px) {
body {
background-color: red;
}
}
@media (max-width: 599px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<h1>Welcome to the page!</h1>
</body>
</html>
17
18
• Flexbox: Another way to deal with differing screen size is using a new CSS attribute known as a flexbox. This
allows us to easily have elements wrap around to the next line if they don’t fit horizontally. We do this by
putting all of our elements in a div that we’ll call our container. We then add some styling to that div specifying
that we want to use a flexbox display for the elements inside of it. We’ve also added some additional styling
to the inner divs to better illustrate the wrapping that’s occuring here.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Screen Size</title>
<style>
#container {
display: flex;
flex-wrap: wrap;
}
Select all div elements where the parent is #container
#container > div {
font-size: 20px;
margin: 20px;
padding: 20px;
width: 200px;
}
</style>
</head>
<body>
<div id="container">
<div>Some text 1!</div>
</div>
</body>
</html>
19
20
• Grid: Another popular way of styling a page is using an HTML grid. In this grid, we can specify style attributes
such as column widths and gaps between columns and rows, as demonstrated below. Note that when we
specify column widths, we say the third one is auto, meaning it should fill the rest of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid {
display: grid;
padding: 20px;
grid-column-gap: 20px;
grid-row-gap: 10px;
grid-template-columns: 200px 200px auto;
}
.grid-item {
background-color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid">
<div class="grid-item">1</div>
</div>
</body>
</html>
21
22
Bootstrap
• It turns out that there are many libraries that other people have already written that can make the styling of
a webpage even simpler. One popular library that we’ll use throughout the course is known as bootstrap.
• We can include bootstrap in our code by adding a single line to the head of our HTML file:
<link rel="stylesheet" href=https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css

integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
• Next, we can look at some of bootstrap’s features by navigating to the documentation portion of their website.
On this page, you’ll find many examples of classes you can add to elements that allow them to be styled with
bootstrap.
• One popular bootstrap feature is their grid system. Bootstrap automatically splits a page into 12 columns, and
we can decide how many columns an element takes up by adding the class col-x where x is a number between
1 and 12. For example, in the following page, we have a row of columns of equal width, and then a row where
the center column is larger:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
<style>
.row > div {
padding: 20px;
background-color: teal;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4">
This is a section.
</div>
<div class="col-4">
This is another section.
</div>
<div class="col-4">
This is a third section.
</div>
</div>
</div>
23
<br/>
<div class="row">
<div class="col-3">
This is a section.
</div>
<div class="col-6">
</div>
<div class="col-3">
</div>
</div>
</div>
</body>
</html>
24
To improve mobile-responsiveness, bootstrap also allows us to specify column sizes that differ depending on the
screen size. In the following example, we use;
• col-lg-3 to show that an element should take up 3 columns on a large screen,
• col-sm-6 to show an element should take up 6 columns when the screen is small.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css
integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
<style>
.row > div {
padding: 20px;
background-color: teal;
}
</style>
</head>
<body>
<div class="row">
<div class="col-lg-3 col-sm-6">
This is a section.
</div>
</div>
</div>
This is a fourth section.
</div>
</div>
</div>
</body>
</html>
25
26
JavaScript
So far, we’ve discussed how to build simple web pages using HTML and CSS. Today, we’ll introduce a new programming
language: JavaScript.
Recall that in most online interactions, we have a client/user that sends an HTTP Request to a server, which sends back
an HTTP Response. JavaScript will allow us to run code on the client side, meaning no interaction with the server is
necessary while it’s running, allowing our websites to become much more interactive.
In order to add some JavaScript to our page, we can add a pair of <script> tags somewhere in our HTML page. We
use <script> tags to signal to the browser that anything we write in between the two tags is JavaScript code we wish
to execute when a user visits our site. Our first program might look something like this:
alert('Hello, world!');
The alert function in JavaScript displays a message to the user which they can then dismiss. To show where this would
fit into an actual HTML document, here’s an example of a simple page with some JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<script>
alert('Hello, world!');
</script>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
27
Events
One feature of JavaScript that makes it helpful for web programming is that it supports Event-Driven Programming.
Event-Driven Programming is a programming paradigm that centers around the detection of events, and actions that
should be taken when an event is detected.
An event can be almost anything including;
▪ a button being clicked,

▪ the cursor being moved,
▪ a response being typed, or
▪ a page being loaded.
Just about everything a user does to interact with a web page can be thought of as an event. In JavaScript, we use Event
Listeners that wait for certain events to occur, and then execute some code.
Let’s begin by turning our JavaScript from above into a function called hello:
function hello() {
alert('Hello, world!')
}
Now, let’s work on running this function whenever a button is clicked. To do this, we’ll create an HTML button in our
page with an onclick attribute, which gives the browser instructions for what should happen when the button is
clicked:
<button onclick="hello()">Click Here</button>

These changes allow us to wait to run parts of our JavaScript code until a certain event occurs.
Variables
JavaScript is a programming language just like Python, C, or any other language you’ve worked with before, meaning
it has many of the same features as other languages including variables. There are three keywords we can use to assign
values in JavaScript:
▪ var: used to define a variable globally
var age = 20;

• let: used to define a variable that is limited in scope to the current block such as a function or loop
let counter = 1;
• const: used to define a value that will not change
const PI = 3.14;
28
For an example of how we can use a variable, let’s take a look at a page that keeps track of a counter:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Count</title>
<script>
let counter = 0;
function count() {
counter++;
alert(counter);
}
</script>
</head>
<body>
<h1>Hello!</h1>
<button onclick="count()">Count</button>
</body>
</html>
29
“querySelector” Function
In addition to allowing us to display messages through alerts, JavaScript also allows us to change elements on the page.
In order to do this, we must first introduce a function called document.querySelector. This function searches for and
returns elements of the DOM. For example, we would use:
let heading = document.querySelector('h1');
to extract a heading. Then, to manipulate the element we’ve recently found, we can change its innerHTML property:
heading.innerHTML = "Goodbye!";
We can also take advantage of conditions in JavaScript. For example, let’s say rather than always changing our header
to Goodbye!, we wish to toggle back and forth between Hello! and Goodbye!. Our page might then look something
like the one below. Notice that in JavaScript, we use === as a stronger comparison between two items which also
checks that the objects are of the same type. We typically want to use === whenever possible.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function hello() {
const header = document.querySelector('h1');
if (header.innerHTML === 'Hello!') {
header.innerHTML = 'Goodbye!';
}
else {
header.innerHTML = 'Hello!';
}
}
</script>
</head>
<body>
<h1>Hello!</h1>
<button onclick="hello()">Click Here</button>
</body>
</html>
30
DOM Manipulation
Let’s use this idea of DOM manipulation to improve our counter page:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
let counter = 0;
function count() {
counter++;
document.querySelector('h1').innerHTML = counter;
}
</script>
</head>
<body>
<h1>0</h1>
<button onclick="count()">Count</button>
</body>
</html>
31
Template Literals
We can make this page even more interesting by displaying an alert every time the counter gets to a multiple of ten.
In this alert, we’ll want to format a string to customize the message, which in JavaScript we can do using template
literals. Template literals requre that there are backticks (`) around the entire expression and a $ and curly
braces around any substitutions. For example, let’s change our count function
function count() {
counter++;
if (counter % 10 === 0) {
alert(`Count is now ${counter}`)
}
}
32
Now, let’s look at some ways in which we can improve the design of this page. First, just as we try to avoid in-line
styling with CSS,
!!! we want to avoid in-line JavaScript as much as possible. !!!
We can do this in our counter example by adding a line of script that changes the onclick attribute of a button on the
page, and removing the onclick attribute from within the button tag.
document.querySelector('button').onclick = count;
One thing to notice about what we’ve just done is that we’re not calling the count function by adding parentheses
afterward, but instead just naming the function. This specifies that we only wish to call this function when the button
is clicked. This works because, JavaScript supports functional programming, so functions can be treated as values
themselves.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
let counter = 0;
function count() {
counter++;
}
function count1() {
counter++;
if (counter % 10 === 0) {
}
}
// Button is not rendered yet. Problem???
document.querySelector('button').onclick = count1;
</script>
</head>
<body>
<h1>0</h1>
<button>Count</button>
</body>
</html>
33
The above change alone is not enough though, as we can see by inspecting the page and looking at our browser’s
console:
34
This error came up because when JavaScript searched for an element using document.querySelector('button'), it didn’t
find anything. This is because it takes a small bit of time for the page to load, and our JavaScript code ran
before the button had been rendered. To account for this, we can specify that code will run only after the page has
loaded using the addEventListener function. This function takes in two arguments:
1. An event to listen for (eg: 'click')
2. A function to run when the event is detected (eg: hello from above)
We can use the function to only run the code once all content has loaded:
document.addEventListener('DOMContentLoaded', function() {
// Some code here
});
In the example above, we’ve used an anonymous function, which is a function that is never given a name. Putting all
of this together, our JavaScript now looks like this:
let counter = 0;
function count() {
counter++;
if (counter % 10 === 0) {
}
}
});
35
Final Version
<!DOCTYPE html>
<html lang="en">
<head>
<script>
let counter = 0;
function count() {
counter++;
}
function count1() {
counter++;
if (counter % 10 === 0) {
}
}
});
</script>
</head>
<body>
<h1>0</h1>
</body>
</html>
36
Seperate JS File
Another way that we can improve our design is by moving our JavaScript into a separate file. The way we do this is
very similar to how we put our CSS in a separate file for styling:
1. Write all of your JavaScript code in a separate file ending in .js, maybe index.js.
2. Add a src attribute to the <script> tag that points to this new file.
For our counter page, we could have a file called counter.html that looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="counter.js"></script>
</head>
<body>
<h1>0</h1>
</body>
</html>
And a file called counter.js that looks like this:
let counter = 0;
function count() {
counter++;
if (counter % 10 === 0) {
}
}
// !!! set functions to run after a set amount of time.

// setInterval(count, 1000);
});
37
Having JavaScript in a separate file is useful for a number of reasons:
• Visual appeal: Our individual HTML and JavaScript files become more readable.
• Access among HTML files: Now we can have multiple HTML files that all share the same JavaScript.
• Collaboration: We can now easily have one person work on the JavaScript while another works on HTML.
• Importing: We are able to import JavaScript libraries that other people have already written. For
example Bootstrap has their own JavaScript library you can include to make your site more interactive.
Let’s get started on another example of a page that can be a bit more interactive. Below, we’ll create a page where a
user can type in their name to get a custom greeting.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<script>
document.querySelector('form').onsubmit = function() {
const name = document.querySelector('#name').value;
alert(`Hello, ${name}`);
};
});
</script>
</head>
<body>
<form>
<input autofocus id="name" placeholder="Name" type="text">
<input type="submit">
</form>
</body>
</html>
Some notes about the page above:
▪ We use the autofocus field in the name input to indicate that the cursor should be set inside that
input as soon as the page is loaded.
▪ We use #name inside of document.querySelector to find an element with an id of name. We can use
all the same selectors in this function as we could in CSS.
▪ We use the value attribute of an input field to find what is currently typed in.
38
We can do more than just add HTML to our page using JavaScript, we can also change the styling of a page! In the page
below, we use buttons to change the color of our heading.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Colors</title>
<script>
document.querySelectorAll('button').forEach(function(button) {
// onclick event added to each button
button.onclick = function() {
// data-color is accessed as dataset.color. "data-" is "dataset".
document.querySelector("#hello").style.color =
button.dataset.color;
}
});
});
</script>
</head>
<body>
<h1 id="hello">Hello</h1>
<button data-color="red">Red</button>
<button data-color="blue">Blue</button>
<button data-color="green">Green</button>
</body>
</html>
39
Some notes on the page above:
• We change the style of an element using the style.SOMETHING attribute.
• We use the data-SOMETHING attribute to assign data to an HTML element. We can later access that data in
JavaScript using the element’s dataset property.
• We use the querySelectorAll function to get an Node List (similar to a JavaScript array) with all elements that
match the query.
• The forEach function in JavaScript takes in another function, and applies that function to each element in an
array.
JavaScript Console
The console is a useful tool for testing out small bits of code and debugging. You can write and run JavaScript code in
the console, which can be found by inspecting element in your web browser and then clicking console. (The exact
process may change frome browser to browser.) One useful tool for debugging is printing to the console, which you
can do using the console.log function. For example, in the colors.html page above, I can add the following line:
console.log(document.querySelectorAll('button'));
Which gives us this in the console:
40
Arrow Functions
In addition to the traditional function notation we’ve seen already, JavaScript now gives us the ability to use Arrow
Functions where we have an input (or parentheses when there’s no input) followed by => followed by some code to
be run. For example, we can alter our script above to use an anonymous arrow function:
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('button').forEach(button => {
button.onclick = () => {
document.querySelector("#hello").style.color = button.dataset.color;
}
});
});
We can also have named functions that use arrows, as in this rewriting of the count function:
count = () => {
counter++;
if (counter % 10 === 0) {
}
}
To get an idea about some other events we can use, let’s see how we can implement our color switcher using a
dropdown menu instead of three separate buttons. We can detect changes in a select element using
the onchange attribute.
In JavaScript, this is a keyword that changes based on the context in which it’s used.
In the case of an event handler, this refers to the object that triggered the event.
41
<!DOCTYPE html>
<html lang="en">
<head>
<title>Colors</title>
<script>
document.querySelector('select').onchange = function() {
document.querySelector('#hello').style.color = this.value;
}
});
</script>
</head>
<body>
<h1 id="hello">Hello</h1>
<select>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</body>
</html>
42
There are many other events we can detect in JavaScript including the common ones below:
• onclick
• onmouseover
• onkeydown
• onkeyup
• onload
• onblur
• …
TODO List (Example)

To put together a few of the things we’ve learned in this lecture, let’s work on making a TODO list entirely in JavaScript.
We’ll start by writing the HTML layout of the page. Notice below how we leave space for an unorderd list, but we dont
yet add anything to it. Also notice that we add a link to tasks.js where we’ll write our JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tasks</title>
<script src="tasks.js"></script>
</head>
<body>
<h1>Tasks</h1>
<ul id="tasks"></ul>
<form>
<input id="task" placeholder = "New Task" type="text">
<input id="submit" type="submit">
</form>
</body>
</html>
Now, here’s our code which we can keep in tasks.js. A few notes on what you’ll see below:
• Here,
o we only query for our submit button and input task field once in the beginning and
o store those two values in the variables submit and newTask.
• We can enable/disable a button by setting its disabled attribute to false/true.
• In JavaScript, we use .length to find the length of objects such as strings and arrays.
• At the end of the script, we add the line return false. This prevents the default submission of the form which
involves either reloading the current page or redirecting to a new one.
• In JavaScript, we can create HTML elements using the createElement function. We can then add those
elements to the DOM using the append function.
43
tasks.js
// Wait for page to load
// Select the submit button and input to be used later
const submit = document.querySelector('#submit');
const newTask = document.querySelector('#task');
// Disable submit button by default:
submit.disabled = true;
// Listen for input to be typed into the input field
newTask.onkeyup = () => {
if (newTask.value.length > 0) {
submit.disabled = false;
}
else {
}
}
// Listen for submission of form
document.querySelector('form').onsubmit = () => {
// Find the task the user just submitted
const task = newTask.value;
// Create a list item for the new task and add the task to it
const li = document.createElement('li');
li.innerHTML = task;
// Add new element to our unordered list:
document.querySelector('#tasks').append(li);
// Clear out input field:
newTask.value = '';
// Disable the submit button again:
// Stop form from submitting
return false;
}
});
44
45

Html_CSS_JavaScript

Uploaded by

Copyright:

Available Formats

Html_CSS_JavaScript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Html_CSS_JavaScript

Uploaded by

Copyright:

Available Formats

Introduction to HTML & CSS & Javascript

HTML (Hypertext Markup Language)

• Let’s get started by writing a simple HTML file!

• When we open up this file in our browser, we get:

Document Object Model (DOM)

More HTML Elements

And our file called styles.css would look like:

o color: the color of text

Which leaves us with this nicer-looking table:

div, p Selects all <div> elements and all <p> elements

a:active Selects the active link

What are Pseudo-Elements?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href=https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css

An event can be almost anything including;

▪ a button being clicked,

<button onclick="hello()">Click Here</button>

▪ var: used to define a variable globally

var age = 20;

let heading = document.querySelector('h1');

!!! we want to avoid in-line JavaScript as much as possible. !!!

1. An event to listen for (eg: 'click')

And a file called counter.js that looks like this:

// !!! set functions to run after a set amount of time.

Some notes about the page above:

• We change the style of an element using the style.SOMETHING attribute.

TODO List (Example)

You might also like