Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Web Development

21 Aufrufe

Veröffentlicht am

PhDigital Bootcamp - Web Development

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Web Development

  1. 1. Web Development
  2. 2. Outline • Review HTML/CSS concepts • Using a Bootstrap installation • DOM Manipulation with JavaScript • Quiz Exercise • Filtering and Visualizing Data
  3. 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. 4. 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 -->
  5. 5. 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”>
  6. 6. CSS Flexbox • CSS has been updated to include some new layout features. These features provide simpler, more flexible ways to achieve desired layout and design, without having to use the confusing float property. Bootstrap 4 is based on Flexbox, and most modern browsers now support Flexbox. • Flexbox provides new css properties that help with aligning sections of your page within rows. • Flexbox is predicated on the concept that you will align objects based on an axis or row. The parent item is a flex container and the direct child elements are considered flex items. • Use display: flex on the parent element and style the child elements with % widths.
  7. 7. 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)
  8. 8. 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"; }
  9. 9. 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");
  10. 10. 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
  11. 11. 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. 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 } ];
  13. 13. Exercise • We'll be using a basic Bootstrap installation to design this page. Bootstrap is a frontend framework that assists with layout and design features. https://getbootstrap.com • Find the zip file link in the exercise and unzip it. Notice the structure of the folder, with html and folders for img, css and js. • Open the index.html file in Brackets (or you can use another html editor). Re-save this file as quiz.html in the same folder, so as to not overwrite the index.html file. Open the Chrome browser and open the html file so you can review the file as you edit it in Brackets. • Follow along with the exercise