PhDigital Bootcamp: Web Development Concepts

1. Web Development

2. Outline
• Review HTML/CSS concepts
• Using a Bootstrap installation
• DOM Manipulation with JavaScript
• Quiz Exercise
• Filtering and Visualizing Data

3. HTML
Layout elements
<div>
<span>
Forms
<form id="myform">
<input type="text" id="firstname" />
<select id="car">
<option value="ford">Ford</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</form>

4. CSS
• Cascading Stylesheets provide a way to style elements across a site
• It is used for establishing layout, color, font-sizes and more
• Can be used in an external stylesheet, linked in each html page
<link rel="stylesheet" href="css/style.css" type=”text/css" >
• in the head of a document
<style>
p {
font-family: Helvetica;
font-size: 14px;
}
</style>
• Inline
<p style= ”font-famly: Helvetica”>

5. HTML
• Attributes
Provide options within elements (href, src, bgcolor, text…)
<a href= "http://google.com" target="_blank">Google</a>
<img src= "img/cindy.jpg" />
• IDs and Classes
• Generic attributes used for styling and to define elements to be manipulated by script
• IDs used once on page; Classes can be used multiple times
• <div id="header”>
• <p class="red">
• Comments
Comments are used to remove text from code, does not render – site instructions or to void
something for testing
<!-- this is a comment -->

6. Programming Concepts
• Variables – store data to be used elsewhere in the program
name="cindy"
• Data Types – string, number, boolean
• Concatenation – combining variables, string and numbers
name= firstname + " " + lastname
Concatenates the value in firstname, a space and value in lastname
• Methods
num = password.length
password = name.substring(0,8)

7. Programming Concepts
• if statements
if(pw.length > 8) {
message = "password accepted";}
else {
message = "password rejected";
}
• loops
for(i=0; i< 10; i++) {
message = "repeating this 10 times";
}

8. Programming Concepts
• functions – a function is a way to store a series of instructions to be
referenced later in the program
• Definition and execution
function hello(a) {
message = "Hello " + a;
}
hello("Cindy");

9. Programming Concepts
• Arrays and Objects – ways to store data in a program
Array
bands = ["Coldplay", "U2", "Foo Fighters"];
access with index number, in square brackets, starting with 0
firstband = bands[0];
Object
bands = [{name: "Coldplay", country: "England"},
{name: "U2", country: "Ireland"},
{name: "Foo Fighters", country: "United States"};]
access with index number and property
firstbandname = bands[0].name

10. JavaScript Methods
Use JavaScript methods to manipulate the Document Object Model
(DOM)
document.getElementById("msg").innerHTML = "Hello World";
Grab value from a form element
first = document.getElementById("firstname").value;
These procedures are very powerful in making interactive
presentations

12. JSON
• JavaScript Object Notation – a way to store and organize data in a text format
• Use a loop to access it and return to the DOM; use a condition to filter it
data = [ { "incnum": 16002735, "month": "Jan", "day": 10, "battalion": "B5",
"status": "Code 3", "priority": "3F", "unit": "ENG01", "district": 9, "lat":
30.228627, "long": -97.746432 },
{ "incnum": 16002786, "month": "Jan", "day": 10, "battalion": "B3", "status":
"Code 3", "priority": "3F", "unit": "ENG14", "district": 1, "lat": 30.300323,
"long": -97.640077 },
{ "incnum": 16002786, "month": "Jan", "day": 10, "battalion": "B3", "status":
"Left Blank", "priority": "3F", "unit": "QNT18", "district": 1, "lat": 30.300323,
"long": -97.640077 } ];