Web programming cheatsheet
Html
HTML Heading Elements
<h1>This is h1
<h2>This is h2
<h3>This is h3
<h4>This is h4
<h5>This is h5
<h6>This is h6
HTML Paragraph Elements
<p>This is a paragraph.</p>
Self Closing Tags
<br/>
<hr/>
The List Element
<ol type="I">
<li value="3">third item</li>
<ul>
<li>first item of third item</li>
</ul>
<li>fourth item</li>
<li>fifth item</li>
</ol>
Anchor Elements
<a draggable=true href="http://www.google.com">Google</a>
Image Elements
<image src="http://www.google.image/200" alt="virutal google image url"/>
Computer File Paths
Absolute File Path
- C:/project/index.html
- /project/index.html
Relative File Path
- Images/cat.png
- ../essay.docx
- ./dog.png
The Html Boilerplate
<!DOCTYPE html>
<html lange="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
CSS
How to add CSS
Inline CSS
- <html style="background: blue"></html>
Internal CSS
<html>
<head>
<style>
html {
background: red;
}
</style>
</head>
</html>
External CSS
<html>
<head>
<link rel="stylesheet" href="./style.css"/>
</head>
</html>
CSS Selector
Element Selector
h1 {
color: blue;
}
Class Selector
<!--in html file-->
<h2 class="red-text">Red</h2>
//in css file
.red-text {
color: red;
}
ID Selector
//in css file
#rem {
font-size: 1rem;
}
Attribute Selector
p[draggable] {
color: red;
}
Font Properties
1px is 1/96th inch
1pt is 1/72nd inch
1em is 100% of parent
1rem is 100% of root
Font Weight
Normal, bold: Keywords
Lighter, bolder: Relative to Parent
Number: 100-900
Font Family
h1{
font-family: Helvetica, sans-serif;
}
The CSS Box Model - Margin, Padding, and Border
border: 10px solid black;
border-width: 0px 10px 20px 30px;
padding: 20px;
margin:10px;
Combining CSS Selector
Group = apply to both selectors
Selector, selector {
color: blueviolet;
}
Child= Apply to direct child of left side
Selector > selector {
color: firebrick;
}
Descendant= Apply to a descendant of left side
Selector selector {
color: blue;
}
Chaining= Apply where All selectors are true
Selectorselector {
color: seagreen;
}
Combining Combiners
Selector selectorselectorr {
font-size: 2rem;
}
CSS Positioning
Static: HTML default flow
Relative: position relative to default position
Relative positioning takes the static position and then you can move it relative to that location.
Absolute: position relative to nearest positioned ancestor or top left corner of webpage
Fixed: position relative to top left corner of browser window.
Z-index: what this does is it determines which elements go on top of which in the Z axis.
Everything on screen has a default Z index of zero.
CSS Display
<span>Beautiful</span>
Display property
display:inline;
display:block;
display:inline-block;
CSS Float
Img{
float: left;
}
clear: both;
Media Query
@media (max-width: 600px) {
h1{
font-size: 15px;
}
}
Flex Direction
Flex-direction: row;
It's going from left to right and it's on the horizontal.
Fflex-direction: column;
But if we had set the flex direction to column, the what it's going to do is it's going to make all of the items inside this flexible container go from top to bottom.
Flex-basis는 main-axis 방향으로 길이를 조절한다.
Display: inline-flex;
```
<style>
.container {
color:white;
border: 5px solid gold;
display: inline-flex;
flex-direction:column;
}
</style>
```
<body>
<div class="container">
<div class="red">Red</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
</div>
</body>
```
Flex Layout
```
.red {
order: 0;
}
.green {
order: 10;
}
.blue {
order: 5;
}
```
Flex-wrap: nowrap;
Container 안의 요소들이 화면 밖으로 밀려나게 될 경우 그대로 밀려나서 보이지 않음
Flex-wrap: wrap;
container 안의 요소들이 화면 밖으로 밀려나게 될 경우 아랫줄로 내려가서 화면 밖으로 밀려나지 않음
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
Justify-content는 main-axis를 기준으로 정렬함.
Flex-direction: row;일 경우 가로축에 요소들이 놓여지는 것을 전제로 정렬이 이루어짐.
if we set the justify content to flex start, then this is exactly what you're going to see. Everything is going to be bunched up to the left. And on the opposite end of that is flex end where everything gets bunched up all to the end.
space-between property allows you to have spacing between the different elements.
space around makes sure that this gap between the left and the right, the center, add up to the space between each of the items.
space evenly, where each of the gaps are equal.
Align-items는 컨테이너 안에서 main-axis가 아닌 축을 기준으로 정렬함.
Flex-sizing
Content width < Width < flex-basis < min-width/max-width
By default, the max width looks at the longest possible line of the text, and the minimum width looks at the longest word to determine the minimum width.
If Flex-grow and flex-shring is 1, flex-basis is ignored
Flex: 1 1 0 // flex: 1(grow), 1(shring), 0(flex-basis)
.red{
flex:1;
}
.blue{
flex:2;
}
.green{
flex:3;
}
Display: Grid
```
<div class="container">
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
</div>
```
```
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 2fr;
gap: 10px;
}
```
The default behavior for a grid container is to try and take up the full width, but only have as much height as it allows to fit the content so we don't have to change the height.
Grid Sizing
```
.grid-container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 400px 800px;
}
```
```
grid-template: 100px 200px/ 400px 800px;
```
```
grid-template:rows: 100px auto;
grid-template-columns: 200px auto;
```
So now if you go ahead and define youre first column as 200 pixels wide. And then you said the next column sholud be auto. What this means is the second columns is going to be extensible. It can be as wide or as narrow as it needs in order to take up 100% of the width.
```
grid-template-rows: 1fr 2fr;
grid-template-columns: 1fr 2fr;
```
This is where the fractional unit comes in with the FR, and this unit basically defines the ratios
```
grid-template-rows: 200px 400px;
grid-template-columns: 200px minmax(400px, 800px);
```
```
grid-template-rows: repeat(2, 200px);
grid-template0columns: repeat(2, 100px);
```
```
grid-template-rows: 200px 200px;
grid-template-rows: 200px 200px;
grid-auto-rows: 300px;
```
Grid Placement
```
grid-column-start:1;
grid-column-end:-1;
```
```
grid-column: span 2;
grid-row: spna 2;
```
```
.astronaut {
background-color: #03989E
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
// grid-area: 2/ 1/ 3/ 3;
}
```
Bootstrap Layout
12 Column System
div container {
div row {
items(12 items)
}
div row….
}
```
<div class="container">
<div class="row">
<div class="col">Hello</div>
</div>
</div>
```
```
<div class="container">
<div class="row">
<div class="col-2">Hello</div>
<div class="col-4">Hello</div>
<div class="col-6">Hello</div>
</div>
</div>
```
```
<div class="col-lg-12 col-xl-6>50% desktop, 100% mobile</div>
<div class="col-lg-12 col-xl-6>50% desktop, 100% mobile</div>
/*
<div class="col-xl-6>50% desktop, 100% mobile</div>
<div class="col-xl-6>50% desktop, 100% mobile</div>
*/
```
```
Bootstrap Components
<button type"button" class=btn btn-primary">Primary</button>
<button type"button" class=btn btn-secondary">Secondary</button>
<button type"button" class=btn btn-success">Success</button>
<button type"button" class=btn btn-danger">Danger</button>
<button type"button" class=btn btn-warning">Warning</button>
<button type"button" class=btn btn-info">Info</button>
<button type"button" class=btn btn-light">Light</button>
<button type"button" class=btn btn-dark">Dark</button>
<button type"button" class=btn btn-link">Link</button>
Notation
Spacing utilities that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.
Where property is one of:
• m - for classes that set margin
• p - for classes that set padding
Where sides is one of:
• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
• e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:
• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - (by default) for classes that set the margin or padding to $spacer * .25
• 2 - (by default) for classes that set the margin or padding to $spacer * .5
• 3 - (by default) for classes that set the margin or padding to $spacer
• 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
• 5 - (by default) for classes that set the margin or padding to $spacer * 3
• auto - for classes that set the margin to auto
(You can add more sizes by adding entries to the $spacers Sass map variable.)
Basic Javascript es6
http://www.w3schools.com/js/js_es6.asp
jQuery
How to incorporate jQuery into Websites
Download jQuery code file or using jQuery with a CDN
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<srcipt src="index.js" charset="utf-8"></script>
</body>
</html>
$(document).ready(function() {
$("h1").css("color", "red");
})
How Minification Works to Reduce File Size
http://www.minifier.org
Selecting Elements with jQuery
$("<CSS SELECTOR>");
$("h1");
Manipulating Styles with jQuery
$("h1").css("color","green");
console.log($("h1").css("color"));
.big-title {
font-size: 10rem;
color: yellow;
font-family: cursive;
}
.margin-50 {
margin:50px;
}
$("h1").addClass("big-title");
$("h1").removeClass("big-title");
$("h1").addClass("big-title margin-50");
$("h1").hasClass("margin-50");
$"h1").removeClass("big-title margin-50");
Manipulating Text with jQuery
$("h1").text("bye");
$("button").text("Don't Click Me");
$("button").html("<em>Hey</em>");
Manipulating Attributes with jQuery
<img src="drum.png" alt="drum image">
<a href="https://www.google.com"></a>
console.log($("img").attr("src"));
$("a").attr("href", "https://www.yahoo.com");
Adding Event Listeners with jQuery
$("h1").click(function() {
$("h1").css("color", "purple");
});
for (var i = 0; i<5; i++) {
Document.querySelectorAll("button")[i].addEventListener("Click", funtion() {
Document.querySelector("h1").style.color = "purple";
});
}
$("button").click(function() {
$("h1").css("color", "purple");
});
<input type="text" name="" value="">
$("input").keypress(function(event) {
console.log(event.key);
});
$("body").keypress(function(event) {
console.log(event.key);
});
$("document").keypress(function(event) {
console.log(event.key);
});
$("input").keypress(function(event) {
$("h1").text(event.key);
});
$("h1").on("mouseover", function() {
$("h1").css("color", "purple");
});
Event reference
Adding and Removing Elements with jQuery
$("h1").before("<button>New</button>");
//<button>New</button><h1>Hello</h1>
$("h1").after("<button>New</button>");
//<h1>Hello</h1><button>New</button>
$("h1").prepend("<button>New</button>");
//<h1<button>New</button> Hello</h1>
$("h1").append("<button>New</button>");
//<h1>Hello<button>New</button></h1>
$("button").remove();
Website Animations with jQuery
$("button").on("click", function() {
$("h1").hide();
});
$("button").on("click", function() {
$("h1").toggle();
});
$("button").on("click", function() {
$("h1").fadeOut();
});
$("button").on("click", function() {
$("h1").fadeToggle();
});
$("button").on("click", function() {
$("h1").slideUp();
});
$("button").on("click", function() {
$("h1").slideToggle();
});
$("button").on("click", function() {
$("h1").animate({opacity: 0.5}); // 중괄호 안에는 숫자값을 가진 css 속성만 추가 가능
});
$("button").on("click", function() {
$("h1").slideUp().slideDown().animate({opacity:0.5});
});
jQueryEffectMethods
Nodejs
Index | Node.js v18.17.0 Documentation (nodejs.org)
```
const fs = require("fs");
/*
fs.wrtieFile("message.txt", "Hello from NodeJS!", (err) => {
if (err) throw err;
console.log('The file has been saved!');
});
*/
fs.readFile("./message.txt","utf-8", (err, data) => {
if (err) throw err;
console.log(data);
});
```
터미널 창에서 index.js 파일이 있는 폴더로 경로 설정 후, node index.js 입력하면 실행됨
npm
npm (npmjs.com)
NPM 사용 위해서는 경로 설정 후, npm init 해서 패키지생성해주고 사용.
`npm install <something>` or `npm i <something>`
```
var generateName = require("sillyname");
var sillyname = generateName();
console.log(`My name is ${sillyname}.`);
```
ECMAScript Modules
package.json에서 main 밑에다가 `"type" : "module",` 적어주기
`var generateName = require("sillyname");` 대신에
`import generateName from "sillyname";` 같이 적어줄 수 있음.
Express.js with node.js
our first server
Creating an Express Server
1. Create directory
2. Create index.js file.
3. Initialise NPM.
4. Install the Express package
5. Write Server application in index.js
6. Start server.
1. 경로 설정 후 `mkdir "3.1 Express Server"` 입력
2. `touch index.js` 입력
3. index.js가 들어있는 폴더를 경로로 하여, `npm init -y` 입력
4. `npm i express` 입력. module을 사용하기 위해서 package.json에서 `type: module,` 입력해주기
5. 예시 코드는 아래와 같다.
```
import express from "express";
const app = express();
const port = 3000;
app.listen(port, () => {
console.log("Server running on port ${port}.");
});
```
// c에서 소켓할 때 listen()에서는 받을 클라이언트 숫자를 적는 함수였지만 여기서는 포트번호를 적는다. 헷갈리지 말자. 두 번째 매개변수로는 callback function 적음
6. `node your_app.js`입력. 지금 예시의 경우는 `node index.js`입력하면 됨.
Localhost is simply when we don't have a server on the internet and instead we want to host our server locally
출처: <https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12384540#overview>
Now, the reason why there are many doors on our computer is because it has to be able to listen for
different incoming requests.
So, for example, your printer might have a particular door that it gets to use.
And in this case, I'm using Keynote to present this slide deck.
And with Keynote you have a remote function.
So I could use my phone as a remote in order to navigate through the slides.
And that remote is also accessing my computer through a specific port.
And because each port is identified by a unique number, then different services or different applications
or different hardware can tap into a particular port.
And this way we can have multiple services running through the same computer without them interfering
with each other so that each one can be listening on a particular port.
출처: <https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12384540#overview>
windows에서는 `netstat -ano | findstr "LISTENING"`을 입력해서, mac에서는 `sudo lsof -i -P -n | grep LISTEN`을 입력해서 현재 LISTEN 중인 포트를 확인할 수 있다.
접속했을 때 Cannot GET/ means it can't get our index page, our homepage.
HTTP
Request Vocab
GET -> Request resource
POST -> Sending resource
PUT -> Replace resource(entire)
PATCH -> Patch up a resource(piece)
DELETE -> Delete resource
```
import express from "express";
const app = express();
const port = 3000;
app.get("/", (req, res) => {
res.send("Hello, World!");
});
app.listen(port, () => {
console.log("Server running on port ${port}.");
});
```
```
import express from "express";
const app = express();
const port = 3000;
app.get("/", (req, res) => {
console.log(req);
});
app.listen(port, () => {
console.log("Server running on port ${port}.");
});
```
Kill the process
in windows, type `taskkill /PID typeyourPIDhere /F` and in Linux, type `stop`(get a list of all open processes), and `kill pid`(kills the process by process id), or `killall pname(kills the process by name)
nodemon
`npm i -g nodemon`
`nodemon index.js`
Endpoint
```
import express from "express";
const app = express();
const port = 3000;
app.get("/", (req, res) => {
res.send("<h1>Home Page</h1>");
});
app.get("/", (req, res) => {
res.send("<h1>About Me</h1>");
});
app.listen(port, () => {
console.log("Server running on port ${port}.");
});
```
Exercise
1. Create directory
2. Create index.js file.
3. Initialise NPM.
4. Install the Express package
5. Write Server application in index.js
6. Server should be able to handle "/" "/contact" and "/about" endpoints
7. Start server.
```
import express from "express";
const app = express();
const port = 3000;
app.get("/", (req, res) => {
res.send("<h1>Home Page</h1>");
});
app.get("/", (req, res) => {
res.send("<h1>About Me</h1<p>My name is Hyejun</p>");
});
app.get("/", (req, res) => {
res.send("<h1>Contact me</h1><p>Phone: 1234567890</p>");
});
app.listen(port, () => {
console.log("Server running on port ${port}.");
});
```
Making Requests
the purpose of our HTTP is for client computers to communicate with our server.
HTTP Response Status Codes
1. Informational responses(100-199)(Hold on)
2. Successful responses(200-299)(Here you go)
3. Redirection messages(300-399)(Go away)
4. Client error responses(400-499)(You fucked up)
5. Server error responses(500-599)(I fucked up)
you can see all of these in more detail by going to http://www.developer.mozilla.org/docs/Web/HTTP/Status
201
301
404
Postman
by Postman, you can target a specific URL or an endpoint and you can also specify the type of request you want to
```
import express from "express";
const app = express()
const port = 3000;
app.get("/", (req, res) => {
res.send("<h1>Home Page</h1>");
});
app.post("/register", (req, res) => {
//Do something with the data
res.sendStatus(201);
});
app.put("/user/angela", (req, res) => {
res.sendStatus(200);
});
app.patch("/user/angela", (req, res) => {
res.sendStatus(200");
});
app.delete("/user.angela", (req, res) => {
res.sendStatus(200);
});
app.listen(port, () => {
console.log('Server started on port ${port}');
});
```
Express Middleware
'프로그래밍 > Web' 카테고리의 다른 글
| Managing a Component Tree - Component to Component, Function to Function (0) | 2024.05.14 |
|---|---|
| ES6 Spread Operator - How to Simplify Your Code (0) | 2024.05.13 |
| Changing Complex State - What to Do When You have Functions that Do the Same Thing (0) | 2024.05.10 |
| Difference between Class and Functional Component (0) | 2024.05.09 |
| Event Handling in React - How to Handle React Forms (0) | 2024.05.08 |