PhDigital Bootcamp: Web Development Concepts
Download as PPTX, PDF0 likes311 views
This document outlines concepts for web development including HTML, CSS, JavaScript, and JSON. It discusses using HTML elements like divs and forms, styling with CSS, programming concepts like variables, data types, and functions. It also covers manipulating the DOM with JavaScript methods and using JSON to store and access data.
![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](https://image.slidesharecdn.com/webinperson-180513161731/85/PhDigital-Bootcamp-Web-Development-Concepts-9-320.jpg)
![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 } ];](https://image.slidesharecdn.com/webinperson-180513161731/85/PhDigital-Bootcamp-Web-Development-Concepts-12-320.jpg)
PhDigital Bootcamp: Web Development Concepts
- 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 } ];
Editor's Notes
- #2: Will be covering a lot. Can't cover everything, but will attempt to provide resources and food for thought to follow on later.Some general rules/infoHow workshop will work Try to remove distractions as much as possible. Glad to get you away from routine bathrooms snacks – water, juices, teas in milab. Soft drinks, if you really want, there is a vending machine. campus – will walk to San Marcos Square for dinner tonight.