Today we will build a simple calculator using the technologies mentioned above. But first, we will learn a little about HTML, CSS, and Javascript before we build our calculator.
- What is HTML?
- HTML stands for Hyper Text Markup Language
- HTML elements are represented as tags and are used to build webpages.
- Browsers don't display HTML tags, but use them to display content on the webpage.
- What is CSS?
- CSS stands for Cascading Style Sheets.
- CSS describes how HTML elements look on the webpage.
- What is Javascript?
- Javascript gives us the ability to make our webpages dynamic.
- Brief introduction to HTML, CSS, and Javascript.
- What are HTML elements/tags?
- How do we target HTML elements with CSS?
- What does CSS allow us to do/change on a webpage?
- How do we declare variables in Javascript?
- What are Javascript functions?
- Practice math concepts learned in class.
- Lets download and install Sublime Text: https://www.sublimetext.com/
- Download ZIP from https://github.com/GainorB/html-css-calculator
- Open the starter folder with Sublime Text
- (if necessary) Download The Unarchiver to unzip: https://theunarchiver.com/
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>- The
<!DOCTYPE html>declaration defines this document to be HTML5 - The
<html>tag is the root element of a HTML page - The
<head>tag contains meta information about the document - The
<title>tag specifies a title for the document - The
<body>tag contains the visible page content - The
<h1>tag defines a large heading - The
<p>tag defines a paragraph
- HTML tags normally come in pairs like
<p>and</p> - The first tag (opening tag) in a pair is the start tag, the second tag (closing tag) is the end tag.
- The end tag is written like the start tag, but with a forward slash inserted before the tag name.
- What are two examples of HTML tags?
- What is another name for the starting tag?
- All HTML elements can have attributes.
- Attributes provide additional information about an element.
- Attributes are always specified in the start tag.
- Attributes usually come in name/value pairs like: name="value".
- THE MOST common attribute we assign are class and id. These attributes allow us to target HTML elements with CSS.
These are HTML tags with attributes:
<div id="container"></div>
<form id="myForm"></form>
<input type="text" id="displayScreen" maxlength="10" placeholder="0" readonly></input>
<input type="button" class="button" id="btn1" value="7" onclick="display(this.value)"></input>- Can anyone identify any HTML attributes above?
- How do we target HTML elements with CSS?
- Can anyone identify any new HTML tags?
body {
background-color: lightblue;
color: black;
width: 300px;
height: 50px;
text-align: center;
}
h1 {
color: navy;
margin-left: 20px;
font-size: 20px;
border: 2px solid red;
}- A CSS declaration always ends with a semicolon.
background-color: lightblue;- Declaration blocks are surrounded by curly braces. We use declaration blocks when we are declaring multiple css declarations.
body {
background-color: lightblue;
color: black;
width: 300px;
height: 50px;
text-align: center;
}- Each declaration includes a CSS property name and a value, separated by a colon.
background-color: lightblue;- How do we end CSS declarations?
- Why do we use declaration blocks?
- Can anyone identify any HTML tags above?
var x = 5;
var y = 6;
var z = x + y;- You declare a Javascript variable with the var keyword.
- Javascript variables are containers for storing data values.
- In this example, x, y, and z, are variables:
- x stores the value 5
- y stores the value 6
- z stores the value 11
- In programming, just like in algebra, we use variables (like x, y) to hold values.
- In programming, just like in algebra, we use variables in expressions (z = x + y).
- How do we declare a Javascript variable?
- What are Javascript variables?
function myFunction(num1, num2) {
return num1 * num2;
}- A Javascript function is a block of code designed to perform a particular task.
- A Javascript function is defined with the function keyword, followed by a name, followed by parentheses ().
- The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...).
- The code to be executed, by the function, is placed inside curly brackets: {}.
- When Javascript reaches a return statement, the function will stop executing.
- What does the function we declared above return?
- What are the parameters in this function?
- What is the name of the function?