web programming Flashcards
HTML structure
<!DOCTYPE html>
<html>
<head>
</head> // The <head> element is a container for metadata
<body>
</body>
</html>
<title> - defines title of document
<p> paragraph
<br></br> produces line break
<h1>-<h6> section headings
</h6></h1></p></title></head></html>
Links
<a>Visit Loughborough University website</a>
OR
<a>Visit Loughborough University website</a> // displays page on new tab
id and class
<a>Visit Lboro</a>
<a>Visit Lboro</a>
<p> This is a paragraph.</p>
<p> This is a paragraph.</p
</p>
making page reactive 1st step. Put in Head
<meta></meta>
Inserting images
<img></img>
Bullet points
<ul>
<li> description </li>
</ul>
Tables
<table>
</table>
<tr> // Creates a row
<td> stores info in that row
<th> table header
also use <thead>, <tbody> and <tfoot>
<td>info</td> // colspan defines number of columns a cell should extend
</tfoot></tbody></thead></th></td></tr>
div
The <div> tag is a container that is used to define a division or a section
input
<input></input> https://www.w3schools.com/html/html_form_input_types.asp all input types
iframe
The <iframe> tag specifies an inline frame for embedding another document within the current HTML document
<iframe></iframe>
Inline CSS
uses style attribute to a single html element
e.g <body style ="background-color: skyblue;">
Internal CSS
defined in the <head> section of an HTML page, within a <style> element</style>
used on classes, ids
e.g
<style>
#main-header {
background-color: lightblue; }
.module {
background-color: purple; }
<h1 id="main-header">
<h2 class="module"></style>Selectors more info
https://www.w3schools.com/cssref/css_selectors.php
Every box is composed of
Content: The content of the box is where text and images appear
* Padding: Clears an area around the content. The padding is transparent
* Border: A border that goes around the padding and content
* Margin: Clears an area outside the border. The margin is transparent
CSS box sizing
Say we have two div containers
if we do
.div1,.div2{box-sizing: border-box;} in styleing
they become same size
Positioning
static. HTML elements are positioned static by default. it is always positioned according to the normal flow of the page.
- relative. An element with “position: relative” is positioned relative to its normal position
fixed. An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled
absolute. The absolutely positioned element is positioned relative to its nearest ancestor that is not static. If a positioned ancestor doesn’t exist, it uses the document body
float
places element on right or left side of container allowing text to wrap around
Responsive web page development
Using <meta></meta> viewport element
o Using Media Query technique
o Set width property to a percentage
o Using max-width and min-width
@media (max-width: 600px) {
article{ width:100%; }
body {background-color: blue; }
}
Flexbox (RWD)
items in a container
set display : flex;
flex-wrap: wrap;
actual div elemtns
flex: 300px;
javascript function
tag
getting input
<div></div>
<script>
let name = window.prompt("Please enter your name:");
document.getElementById("output").innerHTML = "Hello " + name;
</script>
declaring variables
let a, b, c; // to store string
const // cannot be changed
var// to store numbers
backticks
With backticks, you can embed variables and expressions directly within a string
e.g
let name = “Alex”;
let num = 10;
let message = Hello ${name}! You're number ${num}.;
Conditional statements
if (condition) {
// code block
} else {
// code block
}
Shorthand
let age = 20;
let canDrive = age >= 18 ? “Old enough”:”Too young”;
Function expression
const sumFunction = function (a,b) {
return a + b;
};
OR arrow Expression
const sumFunction = (a,b) =>{return a + b;};
Self invoking functions
self-invoking function executes immediately after it is defined
<script>
let userName = "Adam";
((name) => {
console.log(`Welcome, ${name}!`);
})(userName);
</script>
Callback function
A callback function is a function passed into another function as an argument
Callback Function & Asynchronous Programming
function fetchData(url ) {
// 1. Makes a request to url to get data
// 2. If the response was successful, stores received data to collectedData variable}
// 3. Execute callback:
callback(collectedData);
function analyseData(result) {
// Do something with results
}
// Do something
fetchData(‘https://data.police.uk/api/crimes-street/all-crime’,analyseData);// Do something else
Asynchronous Programming
fetch(link) - initiates a http request to specified link
.then((response)=>response.json()): Once the response is received from the server, this line of code processes the response. It takes the response object and calls its .json() method.
.catch(err => alert(err)); // if fetch fails it will show an error alert
const link = “https://data.police.uk/api/crime-categories?date=2024 06”
fetch(link) .then((response)=>response.json()) .then((data)=>console.log(data)) .catch(err => alert(err));
or
use async function getData(){
response= await fetch(link)
data = await response.json
