hidden.c

.py

.js

sidemain()
square()area

volumearea

volumecube()#include <stdio.h>
float side;
float area;
float volume;
void square(){ area = side * side; }void cube(){ volume = area * side; }int main(){side = 2;
square();cube();
printf("Volume: %f\n", volume);
return 0;}main()

side

printf#include <iostream>class Cube {float side;public:volumeCube(float s){ side = s; }float volume() { return side * side * side; }};int main(){float side = 2;
Cube cube(side);
std::cout << "Volume: " << cube.volume() << std::endl;
return 0;}main()
class

Cube

Cube
volume()function cube(side){
return side*side*side;}
console.log("Volume: " + cube(2));

side

Math

importimport { OrbitControls } from 'modules/OrbitControls.js';

from

make

pythonnodedocument
document
document

GET
POST

PUT

DELETE/srv/www/en/about.html/srv/www/en/about.html

DELETEhttps://learning.lpi.org/ja/

httpslearning.lpi.org/ja/learning.lpi.org

/ja/
/

https://learning.lpi.org/ja/

GET /ja/ HTTP/1.1
Host: learning.lpi.org
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:87.0) Gecko/20100101
Firefox/87.0
Accept: text/html/ja/HTTP/1.1

Host

Host

User-Agent

AcceptAccept*/*name=value&

GET /cgi-bin/receive.cgi?name=LPI&email=info@lpi.org HTTP/1.1/cgi-bin/receive.cgi
name

email
name=LPI&email=info@lpi.org
receive.cgi

POST /cgi-bin/receive.cgi HTTP/1.1
Host: learning.lpi.org
Content-Length: 1503
Content-Type: multipart/form-data; boundary=-----------------------405f7edfd646a37d

Content-Length

Content-Type
multipart/form-databoundary

HTTP/1.1 200 OK
Accept-Ranges: bytes
Content-Length: 18170
Content-Type: text/html
Date: Mon, 05 Apr 2021 13:44:25 GMT
Etag: "606adcd4-46fa"
Last-Modified: Mon, 05 Apr 2021 09:48:04 GMT
Server: nginx/1.17.10

OK

301 Moved Permanently
Location

302 Found

401 Unauthorized

403 Forbidden
Forbidden

404 Not Found

500 Internal Server Error

502 Bad Gateway

4xx

5xx
4xx
5xx

/var/www/learning.lpi.org/
DocumentRoot/var/www/learning.lpi.org

serverroot /var/www/learning.lpi.org/var/www/learning.lpi.org/
Content-TypeEtag:
ETag

ETag"606adcd4-46fa"

Set-Cookie
name=value

HTTP/1.1 200 OK
Accept-Ranges: bytes
Set-Cookie: client_id=62b5b719-fcbf

GET /ja/ HTTP/1.1
Host: learning.lpi.org
Cookie: client_id=62b5b719-fcbf

Set-Cookie

POST /cgi-bin/receive.cgi HTTP/1.1
Host: learning.lpi.org
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:87.0) Gecko/20100101
Firefox/87.0
Accept: */*Content-Length: 27
Content-Type: application/x-www-form-urlencoded

https://www.google.com/search?q=LPI

POST /cgi-bin/receive.cgi HTTP/1.1
Host: learning.lpi.org
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:87.0) Gecko/20100101
Firefox/87.0
Accept: */*Content-Length: 27
Content-Type: application/x-www-form-urlencoded

POST /cgi-bin/receive.cgi HTTP/1.1
Host: learning.lpi.org
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:87.0) Gecko/20100101
Firefox/87.0
Accept: */*Content-Length: 27
Content-Type: application/x-www-form-urlencoded

Host
https://www.google.com/search?q=LPILPI

qPOST /cgi-bin/receive.cgi HTTP/1.1
Host: learning.lpi.org
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:87.0) Gecko/20100101
Firefox/87.0
Accept: */*Content-Length: 27
Content-Type: application/x-www-form-urlencodedindex.html
404 Not Found<!DOCTYPE html><html><head><body><meta>

namecontent

<!DOCTYPE html><html><head><title>My HTML Page</title><!-- This is the Document Header --></head><body><!-- This is the Document Body --></body></html><title><title><title><title>My HTML Page</title>

My

HTML

Page

</title><html></html><head></head><body></body><html><head><body><title><title><html><head><title><body><head><html><!DOCTYPE><!DOCTYPE

html>

<!--

-->

<!-- This is a comment. --><!-This is amultiline
comment.
--><!--<!-This is the Document Body -->

This

-->

is

the

Document

Header--><!--<tag attribute-a="value-a" attribute-b="value-b">

'

"
"

title

id
id

style

&quot;'&apos;

classlang

datadata-additionalinfo
data-

<img>

<head><head><title><title>My test page</title><title>src

<meta><meta><meta>

nameauthordescription

keywords
http-equiv
content

refreshnamecontentnamehttp-equiv

charsetutf-8<meta><meta name="author" content="Name Surname"><meta name="description" content="A short summary of the page content."><meta name="keywords" content="keyword1, keyword2, keyword3, keyword4, keyword5">

<meta><meta><meta http-equiv="refresh" content="30"><meta http-equiv="refresh" content="30; url=http://www.lpi.org">

http://www.lpi.org
content="0;

url=http://www.lpi.org"

charset<meta charset="utf-8">

utf-8
utf-8

<meta>

<body><head><html><meta><title><title>HTML Page Title</title><meta>

My

first

HTML

document

Hello

World
<p>

Kevin Author

This is my first HTML page.

HTML<meta charset="ISO-8859-1">
こんにちは世界

Hello
https://www.google.com

World

ExampleTest

Metadata

Hello World

<!DOCTYPE html><html><head><body><meta>

<body></body><head></head><html></html><meta><title></title><title>HTML Page Title</title><title>HTMLPage

Title</title><!--<title></title>--><meta><meta>
namecontent
charset

My

first

HTML

document

Hello

World
<p>

<!DOCTYPE html><html><head><title>My first HTML document</title></head><body><p>Hello World</p></body></html>Kevin Author

This is my first HTML page.

<!DOCTYPE html><html><head><title>My first HTML document</title><meta name="author" content="Kevin Author"><meta name="description" content="This is my first HTML page."></head><body><p>Hello World</p></body></html>HTML<!DOCTYPE html><html><head><title>My first HTML document</title><meta name="author" content="Kevin Author">

ExampleTest

Metadata

<meta name="description" content="This is my first HTML page."><meta name="keywords" content="HTML, Example, Test, Metadata"></head><body><p>Hello World</p></body></html><meta charset="ISO-8859-1">

Hello World

こんにちは世界

<meta

Hello

charset="utf-8">

Worldhttps://www.google.com<!DOCTYPE html><html><head><title>My first HTML document</title><meta name="author" content="Kevin Author"><meta name="description" content="This is my first HTML page."><meta name="keywords" content="HTML, Example, Test, Metadata"><meta charset="utf-8"><!-- The page is redirected to Google after 30 seconds --><meta http-equiv="refresh" content="30; url=https://www.google.com"></head><body><p>Hello World</p></body></html><h1> <h2> <h3> <h4> <h5> <h6><p><ul> <ol> <li><dl> <dt> <dd>
<pre><strong> <em> <code><b> <i> <tt><span><div><main> <header> <nav> <section> <footer><html><body><head><head><body><body><p><p>Short text element spanning only one line.</p><p>A text element containing much longer text that may span across multiple lines,
depending on the size of the web browser window.</p>

<p>
<p>

<h1>

<h2>

<h6>

<h1>Heading level 1 to uniquely identify the page</h1><h2>Heading level 2</h2><h3>Heading level 3</h3><h4>Heading level 4</h4><h5>Heading level 5</h5><h6>Heading level 6</h6>

<h3>

<h4>

<h5>

<h1>
<title>

<h1>

<h2>

<h3>

<h6>

<h1>

Garden<p>
Agenda<h2>
Please bringParty<h1>Garden Party</h1><p>Invitation to John's garden party on Saturday next week.</p><h2>Agenda</h2><h2>Please bring</h2>

<p>
<br>
<p>

<p>
Invitation to John's garden party.<br>
Saturday, next week.
</p>

<hr>
<hr>

<h1>Garden Party</h1><p>Invitation to John's garden party on Saturday next week.</p><h2>Agenda</h2><hr><h2>Please bring</h2>

<ol>

<li>

<ol>
<ol>

<h2>Agenda</h2><ol><li>Welcome</li><li>Barbecue</li><li>Dessert</li><li>Fireworks</li>
</ol>

<ol>

type
1

a

I

<ol>
start

type

<h2>Agenda</h2><ol type="A" start="3"><li>Welcome</li><li>Barbecue</li><li>Dessert</li><li>Fireworks</li>
</ol>

start

A
i

reversed

<li>

value
value

<ul>
<li>
<li>

<h2>Please bring</h2><ul><li>Salad</li><li>Drinks</li><li>Bread</li><li>Snacks</li><li>Desserts</li>
</ul>

<ul>

<li>
<li>

<h2>Agenda</h2><ol type="A" start="3"><li>Welcome</li><li>
Barbecue<ul><li>Vegetables</li><li>Meat</li><li>Burgers, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li><li>Fireworks</li>
</ol>

<dl>

<dt>

<dd>

<h3>Exotic Fruits</h3><dl><dt>Banana</dt><dd>
A long, curved fruit that is yellow-skinned when ripe. The fruit's skin
may also have a soft green color when underripe and get brown spots whenoverripe.
</dd><dt>Kiwi</dt><dd>
A small, oval fruit with green flesh, black seeds, and a brown, hairy
skin.
</dd>

<dt>Mango</dt><dd>
A fruit larger than a fist, with a green skin, orange flesh, and one big
seed. The skin may have spots ranging from green to yellow or red.
</dd>
</dl>

<b>

<i>

<u>

<b>

This <b>word</b> is bold.

<b><b><strong><i>

This <i>word</i> is in italics.

<i>
<i>

<u>

This <u>word</u> is underlined.

<u>
<u>

<tt>

This <tt>word</tt> is in fixed-width font.

<tt>
<tt>
<code>

<kbd>

<var>

<samp><em><strong><code><em>This <em>word</em> is emphasized.

<em>
<i>

<em>

<em>

<strong>

This <strong>word</strong> is important.

<strong><strong><b><strong><code>The Markdown code <code># Heading</code> creates a heading at the highest level inthe hierarchy.

<code><mark>

This <mark>word</mark> is highlighted.

<mark>

<h1>Garden Party</h1><p>Invitation to <strong>John's garden party</strong>.<br><strong>Saturday, next week.</strong></p><h2>Agenda</h2><ol><li>Welcome</li><li>
Barbecue<ul><li><em>Vegetables</em></li><li><em>Meat</em></li><li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li><li><mark>Fireworks</mark></li>
</ol>
<hr>
<h2>Please bring</h2><ul><li>Salad</li><li>Drinks</li><li>Bread</li><li>Snacks</li><li>Desserts</li></ul><strong><em><mark><pre><code>

<pre>
field() {shift $1 ; echo $1}</pre>

<pre>

<p>

<ol>

<h2>

<strong>

<div>
<div>

<div>

<span><span><em><i><span>

<p>

<div>

<p>Text within a paragraph</p><p>Another paragraph of text</p><hr><div>Text wrapped within a <code>div</code> element</div><div>Another <code>div</code> element with more text</div><hr><span>Span content</span><span>and more span content</span>

<p>
<div>
<div>
<span><div><span><span>

<header><header><h1><h6><body><section><article><nav><aside><header><header><header><footer><header><header><h1>Garden Party</h1></header><h1><main><main><main><main><main><header><h1>Garden Party</h1></header><p>
Invitation to <strong>John's garden party</strong>.<br><strong>Saturday, next week.</strong></p><h2>Agenda</h2><ol><li>Welcome</li><li>
Barbecue<ul><li><em>Vegetables</em></li><li><em>Meat</em></li><li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li><li><mark>Fireworks</mark></li>
</ol>
<hr>
<h2>Please bring</h2><ul><li>Salad</li><li>Drinks</li><li>Bread</li><li>Snacks</li><li>Desserts</li></ul></main><header><main><footer><footer><section><nav><aside><footer><footer><footer><footer><p>John Doe</p><header><footer>

<p>john.doe@example.com</p></footer>

<nav>
<nav>

<nav>

<aside><aside><aside><aside><p>
10, Main Street<br>
Newville</p><p>Parking spaces available.</p></aside><section><section><section><header><h2>Agenda</h2></header><ol><li>Welcome</li><li>
Barbecue<ul><li><em>Vegetables</em></li><li><em>Meat</em></li><li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li><li><mark>Fireworks</mark></li></ol></section><hr><section><header><h2>Please bring</h2></header><ul><li>Salad</li><li>Drinks</li><li>Bread</li><li>Snacks</li><li>Desserts</li></ul></section><header><header><article><article><article><section><article><article><header><h2>Agenda</h2></header><ol><li>Welcome</li><li>
Barbecue<ul><li><em>Vegetables</em></li><li><em>Meat</em></li><li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li><li><mark>Fireworks</mark></li></ol></article><header><article><header><!DOCTYPE html><html lang="en"><head><title>Garden Party</title></head><body><main><h1>Garden Party</h1><p>Invitation to <strong>John's garden party</strong>.<br><strong>Saturday, next week.</strong></p><article><h2>Agenda</h2><ol><li>Welcome</li><li>
Barbecue<ul><li><em>Vegetables</em></li><li><em>Meat</em></li><li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li><li><mark>Fireworks</mark></li></ol></article><hr><section><h2>Please bring</h2><ul><li>Salad</li><li>Drinks</li><li>Bread</li><li>Snacks</li><li>Desserts</li></ul></section></main><aside><p>
10, Main Street<br>
Newville</p><p>Parking spaces available.</p></aside><footer><p>John Doe</p><p>john.doe@example.com</p></footer></body></html><h5>
<br>
<ol>
<dd>
<hr>
<strong><tt><main><h3><span>
<b>
<div>
<em>
<dl>
<li>
<nav>
<code><pre><div>

<div>

<div>

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

<p>

<ol>

<ul>

<li>

<dl>

<dt>

<dd>

<pre>

<b>

<div>

<i>

<u>

<span><tt><em><strong><code><mark>

<header><main><nav><aside><footer>

<h5>

</h5>

<br>
<ol>

</ol>

<dd>

</dd>

<hr>
<strong></strong>

<tt>

</tt>

<main></main><h3><span>
<b>
<div>
<em>
<dl>
<li>
<nav>
<code>
<pre>

<ol>
</ul>

</ol>
<dl>

<ul>
</dl>
<li>

<dt>
</dd>

</dt>

</li>
<dd>

<header></header><main><nav><aside><footer></footer></aside></nav></main><!DOCTYPE html><html><head><title>Form Rules</title></head><body><h1>How to fill in the request form</h1><p>
To receive the PDF document with the complete HTML course, it isnecessary
to fill in the following fields:
</p>
<ul>
<li>Name</li><li>Surname</li><li>Email Address</li><li>Nation</li><li>Country</li><li>Zip/Postal Code</li></ul></body></html><!DOCTYPE html><html><head><title>Form Rules</title></head><body><h1>How to fill in the request form</h1><p>
To receive the PDF document with the complete HTML course, it isnecessary
to fill in the following fields:
</p>
<ul>
<li><strong> Name </strong></li><li><strong> Surname </strong></li><li><strong> Email Address </strong></li><li>Nation</li><li>Country</li><li>Zip/Postal Code</li></ul><h2>Required fields</h2><p>Bold fields are mandatory.</p></body></html><!DOCTYPE html><html><head><title>Form Rules</title></head><body><h1>How to fill in the request form</h1><p>
To receive the PDF document with the complete HTML course, it isnecessary
to fill in the following fields:
</p>
<ul>
<li><strong> Name </strong></li><li><strong> Surname </strong></li><li><strong> Email Address </strong></li><li>Nation</li><li>Country</li><li>Zip/Postal Code</li></ul><h2>Required fields</h2><p>Bold fields are mandatory.</p><h2>Steps to follow</h2><p>There are four steps to follow:</p><ol><li>Fill in the fields</li><li>Click the Submit button</li><li>
Check your e-mail and confirm your request by clicking on the link you
receive</li><li>
Check your e-mail - You will receive the full HTML course in minutes
</li>
</ol>
</body></html><div><!DOCTYPE html><html><head><title>Form Rules</title></head><body><h1>How to fill in the request form</h1><p>
To receive the PDF document with the complete HTML course, it isnecessary
to fill in the following fields:
</p>
<ul>
<li><strong> Name </strong></li><li><strong> Surname </strong></li><li><strong> Email Address </strong></li><li>Nation</li><li>Country</li><li>Zip/Postal Code</li>
</ul>
<div>
<h2>Required fields</h2><p>Bold fields are mandatory.</p></div><div><h2>Steps to follow</h2><p>There are four steps to follow:</p><ol><li>Fill in the fields</li><li>Click the Submit button</li><li>
Check your e-mail and confirm your request by clicking on the linkyou
receive</li><li>
Check your e-mail - You will receive the full HTML course in minutes
</li>
</ol>
</div></body></html><div><!DOCTYPE html><html><head><title>Form Rules</title></head><body><div><h1>How to fill in the request form</h1><p>
To receive the PDF document with the complete HTML course, it isnecessary to fill in the following fields:
</p>
<ul>
<li><strong> Name </strong></li><li><strong> Surname </strong></li><li><strong> Email Address </strong></li><li>Nation</li><li>Country</li><li>Zip/Postal Code</li></ul></div><hr><div><h2>Required fields</h2><p>Bold fields are mandatory.</p></div><div><h2>Steps to follow</h2><p>There are four steps to follow:</p><ol><li>Fill in the fields</li><li>Click the Submit button</li><li>
Check your e-mail and confirm your request by clicking on the linkyou
receive</li><li>
Check your e-mail - You will receive the full HTML course in minutes
</li>
</ol>
</div></body></html><div><!DOCTYPE html><html>

<head><title>Form Rules</title></head><body><header><h1>Form Rules - 2021</h1></header><main><div><h1>How to fill in the request form</h1><p>
To receive the PDF document with the complete HTML course, it isnecessary to fill in the following fields:
</p>
<ul>
<li><strong> Name </strong></li><li><strong> Surname </strong></li><li><strong> Email Address </strong></li><li>Nation</li><li>Country</li><li>Zip/Postal Code</li></ul></div><hr><div><h2>Required fields</h2><p>Bold fields are mandatory.</p></div><div><h2>Steps to follow</h2><p>There are four steps to follow:</p><ol><li>Fill in the fields</li><li>Click the Submit button</li><li>
Check your e-mail and confirm your request by clicking on the link
you receive
</li>
<li>
Check your e-mail - You will receive the full HTML course inminutes
</li>
</ol>
</div></main><footer><p>Copyright Note - 2021</p></footer></body></html>

id
id
<img>

_blank
src

alt

_self

_parent_top<img><img src="logo.png">

<img>

src
logo.png<img src="../logo.png">

http://example.com/library/periodicals/index.html../logo.png
http://example.com/library/logo.png/

alt<img src="logo.png" alt="The Company logo">

alt

width
height<img src="logo.png" alt="The Company logo" width="300" height="100">

<img>
width

height<audio><video><audio><video><audio controls src="/media/recording.mp3"><p>Unable to play <em>recording.mp3</em></p></audio><audio></audio><img><audio><video></video>

alt

src

<img>
controls<iframe><iframe name="viewer" src="gallery.html"><p>Unsupported browser</p></iframe><iframe>src
widthheightiframenameanchor<a>href<a href="contact.html">Contact Information</a>

お問い合わせ先<a href="contact.html"><img src="contact.png" alt="Contact Information"></a>

href

mailto:<a href="mailto:info@lpi.org">Contact by email</a>tel:<a href="tel:+123456789">Contact by phone</a>target_blank<a href="contact.html" target="_blank">Contact Information</a>target_self<iframe><iframe>target<p><a href="gallery.html" target="viewer">Photo Gallery</a></p><iframe name="viewer" width="800" height="600"><p>Unsupported browser</p></iframe>target_parent<iframe>gallery.html<p><a href="gallery.html" target="_parent">Open as parent document</a></p><iframe>_top<iframe>#History

https://en.wikipedia.org/wiki/Internet#Historyid
https://en.wikipedia.org/wiki/Internet#History

id<span class="mw-headline" id="History">History</span>

<a>

href
<a

href="#History">History</a>idhttp://www.lpi.org/articles/linux/index.html../logo.png

<img>

alt

<img>

src

<a href="pic1.jpeg">First picture</a><iframename="gallery"></iframe>_self<img>

src

alt<audio><video><a>hrefhttp://www.lpi.org/articles/linux/index.html../logo.png<img>

http://www.lpi.org/articles/logo.png
<img>

alt

alt

<video>src

<a href="pic1.jpeg">First picture</a><iframeaname="gallery"></iframe>

target<ahref="pic1.jpeg"

target="gallery">First

picture</a>

_self

id
id

<form>method<input>type

checkbox<button>actiontext

email

password

numberhiddentype

submitreset

hidden<textarea>form<label>enctype

name
for

value

id

button

date

file

range

radio

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Working with HTML Forms</title></head><body><!-- The body content goes here --></body></html>.html

form.html<form><!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Working with HTML Forms</title></head><body><!-- Form to collect personal information --><form><h2>Personal Information</h2><p>Full name:</p><p><input type="text" name="fullname" id="fullname"></p><p><input type="reset" value="Clear form"></p><p><input type="submit" value="Submit form"></p></form></body></html>type
type="text"

type=text

<form><form>…

</form><h2><p><input><form><form></form><p><p><label><form><h2>Personal Information</h2><label for="fullname">Full name:</label><p><input type="text" name="fullname" id="fullname"></p><p><input type="reset" value="Clear form"></p><p><input type="submit" value="Submit form"></p></form><label>

for

id

id
name
name
name

type
type

hiddentext
search
tel
url
email

password

date

month

week

time

datetime-local

number

range

color

checkbox

radio

file

submitimage

buttonreset

passwordsearch

tel

url

email

text

tel
email

numberdate<form><p><label for="date">Date:</label><input type="date" name="date" id="date"></p></form>value<form><p><label for="date">Date:</label><input type="date" name="date" id="date" value="2020-08-06"></p></form>placeholder<p>Address: <input type="text" name="address" id="address" placeholder="e.g. 41
John St., Upper Suite 1"></p>required

<p>Address: <input type="text" name="address" id="address" required
placeholder="e.g. 41 John St., Upper Suite 1"></p>requiredautocomplete
autocomplete="off"autocomplete
offtextarea<p> <label for="comment">Type your comment here:</label> <br><textarea id="comment" name="comment" rows="10" cols="50">My multi-line, plain-text comment.
</textarea></p>textarea
textarea</textarea>rows<select>

radio<select><p><label for="browser">Favorite Browser:</label><select name="browser" id="browser"><option value="firefox">Mozilla Firefox</option><option value="chrome">Google Chrome</option><option value="opera">Opera</option><option value="edge">Microsoft Edge</option></select></p><option><select>

checkboxcols

select

selectedradio<select><p>Favorite Browser:</p><p><input type="radio" id="browser-firefox" name="browser" value="firefox"
checked><label for="browser-firefox">Mozilla Firefox</label></p><p><input type="radio" id="browser-chrome" name="browser" value="chrome"><label for="browser-chrome">Google Chrome</label></p><p><input type="radio" id="browser-opera" name="browser" value="opera"><label for="browser-opera">Opera</label></p><p><input type="radio" id="browser-edge" name="browser" value="edge"><label for="browser-edge">Microsoft Edge</label></p>radio
radio

name
value

name
<select>

checkedselected<label>radio
checkbox<p>Favorite Browser:</p><p><input type="checkbox" id="browser-firefox" name="browser" value="firefox"
checked><label for="browser-firefox">Mozilla Firefox</label></p><p><input type="checkbox" id="browser-chrome" name="browser" value="chrome"checked><label for="browser-chrome">Google Chrome</label></p><p><input type="checkbox" id="browser-opera" name="browser" value="opera"><label for="browser-opera">Opera</label>
</p>

<p>
<input type="checkbox" id="browser-edge" name="browser" value="edge"><label for="browser-edge">Microsoft Edge</label></p>checkedcheckbox<fieldset><fieldset><legend>Favorite Browser</legend><p><input type="checkbox" id="browser-firefox" name="browser" value="firefox"
checked><label for="browser-firefox">Mozilla Firefox</label></p><p><input type="checkbox" id="browser-chrome" name="browser" value="chrome"checked><label for="browser-chrome">Google Chrome</label>
</p>

<p>
<input type="checkbox" id="browser-opera" name="browser" value="opera"><label for="browser-opera">Opera</label></p><p><input type="checkbox" id="browser-edge" name="browser" value="edge"><label for="browser-edge">Microsoft Edge</label></p></fieldset><legend><fieldset>

fieldset<fieldset><fieldset>

disabled

hidden<input type="hidden" id="form-token" name="form-token" value="e730a375-b953-4393847d-2dab065bbc92">

file

<p>
<label for="attachment">Attachment:</label><br><input type="file" id="attachment" name="attachment">
</p>

file
ファイルを選択

file

acceptacceptsubmit<input type="submit" value="Submit form">

value

reset

accept="image/jpeg,

image/png"

<input type="reset" value="Clear form">

value<button><input><button>Submit form</button>

buttonreset

receive_form.php
action<form action="receive_form.php">

actiongetmethod<form action="receive_form.php" method="get">

post

form

<form action="receive_form.php" method="post">

getaction

get
post

post
post
get

get
post

post

enctypeenctypeapplication/x-www-form-urlencoded
file
multipart/form-dataget<label>placeholder<input>nameid<form><label><fieldset><legend><label><input><label>for<input>range
placeholder
placeholder

optionselectedaccept

application/pdf

*

name

id

<form action="receive_form.php" method="get"><h2>Personal Information</h2><label for="fullname">Full name:</label><p><input type="text" name="fullname" id="fullname"></p><p><label for="date">Date:</label><input type="date" name="date" id="date"></p><p>Favorite Browser:</p><p><input type="checkbox" id="browser-firefox" name="browser" value="firefox"
checked><label for="browser-firefox">Mozilla Firefox</label></p><p><input type="checkbox" id="browser-chrome" name="browser" value="chrome"checked><label for="browser-chrome">Google Chrome</label></p><p><input type="checkbox" id="browser-opera" name="browser" value="opera"><label for="browser-opera">Opera</label></p><p><input type="checkbox" id="browser-edge" name="browser" value="edge"><label for="browser-edge">Microsoft Edge</label></p><p><input type="reset" value="Clear form"></p><p><input type="submit" value="Submit form"></p></form>styletype<style><link>
;
/,/

rel

type

style
style
style

<p>My stylized paragraph</p>

プロパティ:

値

プロパティ

値

color
red

green

blue

color

yellow
purplecolor: purple

style<p style="color: purple">My first stylized paragraph</p>

style
style

; font-size: larger<p style="color: purple; font-size: larger">My first stylized paragraph</p><!DOCTYPE html><html><head><meta charset="utf-8" /><title>CSS Basics</title></head><body><p style="color: purple; font-size: larger">My first stylized paragraph</p><p style="color: green; font-size: larger">My second stylized paragraph</p></body></html>

p
span

em

div

sectionap
background-color<p style="color: purple; font-size: larger; background-color: silver">My firststylized paragraph</p><p style="color: green; font-size: larger; background-color: silver">My second
stylized paragraph</p>style
style

style

セレクタ

{

プロパティ:

値

}

style

p { color: purple; font-size: larger }pcolor

font-size
body<p>body { color: purple; font-size:
larger}style<style><style><!DOCTYPE html><html><head><meta charset="utf-8" /><title>CSS Basics</title><style type="text/css">headp { color: purple; font-size: larger }</style></head><body><p>My first stylized paragraph</p><p>My second stylized paragraph</p></body></html>type<style><style>text/cssmedia<style type="text/css">p { color: purple; font-size: larger }</style><style type="text/css">p {color: purple;
font-size: larger;}</style>type<style>font-size:/*

larger;*/p {color: purple;/*
font-size: larger;
*/
}

p {
color: purple;/* font-size: larger; */}font-size:

larger/* Texts inside <p> are purple and larger */p {color: purple;
font-size: larger;
}

style

<style>.css<head><body><style><style><link>
head<head><meta charset="utf-8" /><title>CSS Basics</title><link href="style.css" rel="stylesheet"></head>p
href<link>

rel="stylesheet"media

style.css<style>

<p>

div

<link>

link

style

<div>/*em<style><link>*/

style<style><link>

<p>

<p>

div
div

<link>
href
link
link

head

style

<div>

<div>

/*

em

em { text-decoration: underline }em { text-decoration-line: underline }<style>media<link>

speech*/element; .class; #id;a, b; a.class; a[attr] a b;
:hover focus!important

* {color: purple;
font-size: large;
}

*

body

p

table

em

*

body

body {
color: purple;
font-size: large;}

body {
color: purple;
font-size: large;}li {
font-size: small;}color:

purplefont-size:

large

body

li
font-size:lili {
font-size: small;}li {
font-size: x-small;
}

small

font-size:
li

large

body

li

importantlili {
font-size: small !important;}li {
font-size: x-small;}!important<ul><!DOCTYPE html><html><head><meta charset="utf-8" /><title>CSS Basics</title><link rel="stylesheet" href="style.css"></head><body><ul><li><a href="/">Home</a></li><li><a href="/articles">Articles</a></li><li><a href="/about">About</a></li></ul><div id="content"><p>The three rocky planets of the solar system are:</p><ul><li>Mercury</li><li>Venus</li><li>Earth</li><li>Mars</li></ul><p>The outer giant planets made most of gas are:</p><ul><li>Jupiter</li><li>Saturn</li><li>Uranus</li><li>Neptune</li></ul></div><!-- #content --><div id="footer"><ul><li><a href="/">Home</a></li><li><a href="/articles">Articles</a></li><li><a href="/about">About</a></li></ul></div><!-- #footer --></body></html>

li

id

id
ul

id="topmenu"<ul id="topmenu"><li>Home</li><li>Articles</li><li>About</li>
</ul>

head
style.css

link

ul#topmenu {list-style-type: none}

#topmenu
list-style-type

ul
ul
li

div

div

list-style-type
div#topmenu {list-style-type: none}#content ul {list-style-type: circle}#contentulcontent#content

ul

li

ul
content

ul

li

li

ul
#content

topmenu

font-styleul#topmenu {font-style: oblique}#footer ul {font-style: oblique}#topmenu, #footer ul {font-style: oblique}ulclassfont-style:obliqueclass<ul id="topmenu" class="menu"><li><a href="/">Home</a></li><li><a href="/articles">Articles</a></li><li><a href="/about">About</a></li></ul><div id="footer"><ul class="menu"><li><a href="/">Home</a></li><li><a href="/articles">Articles</a></li><li><a href="/about">About</a></li></ul></div><!-- #footer -->#topmenu,#footerul.menu.menu {
font-style: oblique}menu
ul.menu

menu

ul

.menu
menu

<ul id="topmenu" class="menu top"><ul class="menu footer">

class
menu

.menu {
font-style: oblique}.menu.top {font-size: large}.menu.footer {font-size: small}.menu.top

.menu

.top
menu
top

top
menu

.menu.top a {text-decoration: none}

:hover.menu.top a:hover {text-decoration: underline}:hover:visited:focusp {color: green;}p {color: red;}p

div#main

#main

#main

div

p.highlightp.highlightfont-styleoblique<div

id="sidebar"></div><ulclass="links"></ul>a<pclass="article

reference">class.article.article

color

red

.reference.reference

p {color: green;}p {color: red;
}

p
red

div#main#main

div#main

main

div

#main

main
#main

div

p

#main pp.highlight.highlightp.highlightp.highlighthighlight

highlightfont-styleoblique<div

id="sidebar"></div><ulclass="links"></ul>a#sidebar a, ul.links a {font-style: oblique}<pclass="article

reference">class.article.article.article.reference.reference.reference

articlereference

articlereference.article.referencecolor

a:visited {color: red;}red

px % em rem vw vhcolor background background-* font font-* text-* list-style line-heightblack

white

red

purplegreen

yellow

blue

color

* {
color: purple;}

rgb(255,0,0)* {color: rgb(255,0,0);
}

0

* {
color: rgb(100%,0%,0%);
}

#

0
255

FF

赤

#FF0000

00

red

#F00

black

rgb(0,0,0)#000000white

rgb(255,255,255)#FFFFFFred

rgb(255,0,0)#FF0000

purplergb(128,0,128)#800080green

rgb(0,128,0)#008000

yellow

rgb(255,255,0#FFFF00

blue

rgb(0,0,255)#0000FF

0

1

0
1

rgb

rgba

rgba(255,0,0,0.5)

00

FF

red

#FF000080

background-color
color
background-imageaurl()

body {
background-image: url("background.jpg");}

background.jpg

background-repeat
no-repeatbody {
background-image: url("background.jpg");
background-repeat: no-repeat;}background-repeat:background-repeat: repeat-y

repeat-x

background-repeat

background-image
repeatbackground-repeat

background:url("background.jpg")

background-position
top

body {
background-image: url("background.jpg");
background-repeat: no-repeat;background-position: 30% 10%;}bottom

left

right

centerno-border-color

border-styleborder-widthborder-color

border-style:dasheddotteddoublegroove

ridge

inset

outsetborder-width
medium

thin
thick

in

cm

mm

px

pt

%

em

rem

vw

vh

pt
rem
vw

vh

font-family

serifsans-serifmonospacesans-serif* {font-family: sans-serif;}* {font-family: "DejaVu Sans", sans-serif;
}

font-

size

font-weight

font-stylefont-sizexx-smallxx-large

x-smallsmallmediumlarge

x-largexxx-large
largersmallerline-heightline-height1
font-size

font-weightnormallighterfont-styleboldbolderitalicoblique<span><p>CSS is the <span class="under">proper mechanism</span> to style HTML
documents.</p>.undertext-decoration.under {text-decoration: underline;}aatext-decoration

none

a {
text-decoration: none;}text-decoration

line-through.disregard {text-decoration: line-through;}<span><p>Netscape Navigator <span class="disregard">is</span> was one of the most popular
Web browsers.</p>list-styletypelist-style-type:squarelist-style-typenonergb(0,0,255)

color

#000

Times

New

Roman

serif
Times

New

Roman

<p

serif

class="disclaimer">

backgroundbackground-*backgroundbody {
background-image: url("background.jpg");
background-repeat: repeat-x;}<div

id="header"></div>

4px

font-size

px

em

rem

vw

vh

rgb(0,0,255)

color

rgba

0.5

rgba(0,0,0,0.5)
#000
black
Times

New

#000
Roman

#000000

serif
Times

New

Roman

serif

* {
font-family: "Times New Roman", serif;}<psmallerp.disclaimer {font-size: smaller;}class="disclaimer">

backgroundbackground-*backgroundbody {
background-image: url("background.jpg");
background-repeat: repeat-x;}

body {
background: repeat-x url("background.jpg");}<div

id="header"></div>

4px#header {border-bottom-width: 4px;}

font-sizeremfont-size: 2rememline-height
2em

width height padding padding-* margin margin-* border border-*top left right bottom
display: block | inline | flex | inline-flex | none
position: static | relative | absolute | fixed | sticky
float: left | right | none
clear: left | right | both | none

div

div

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>CSS Box Model and Layout</title><link rel="stylesheet" href="style.css"></head><body><div id="first"><h2>First div</h2><p><span>Sed</span> <span>eget</span> <span>velit</span><span>id</span> <span>ante</span> <span>tempus</span><span>porta</span> <span>pulvinar</span> <span>et</span><span>ex.</span></p></div><!-- #first --><div id="second"><h2>Second div</h2><p><span>Fusce</span> <span>vitae</span> <span>vehicula</span><span>neque.</span> <span>Etiam</span> <span>maximus</span><span>vulputate</span> <span>neque</span> <span>eu</span><span>lobortis.</span> <span>Phasellus</span> <span>condimentum,</span><span>felis</span> <span>eget</span> <span>eleifend</span><span>aliquam,</span> <span>dui</span> <span>dolor</span><span>bibendum</span> <span>leo.</span></p></div><!-- #second --><div id="third"><h2>Third div</h2><p><span>Pellentesque</span> <span>ornare</span> <span>ultricies</span><span>elementum.</span> <span>Morbi</span> <span>vulputate</span><span>pretium</span> <span>arcu,</span> <span>sed</span><span>faucibus.</span></p></div><!-- #third --></body></html>spanstyle.css

* {font-family: sans;font-size: 14pt;}
div {border: 2px solid #00000044;}#first {background-color: #c4a000ff;}#second {background-color: #4e9a06ff;}#third {background-color: #5c3566da;}h2 {background-color: #ffffff66;}
p {background-color: #ffffff66;}
span {
background-color: #ffffffaa;
}

div

h2

div

p

body

h2

p

h1

h2

h3

span

a

div
p

ul

ol

table

li

div

section

form

aside

h1

div
h1

em

strong

img

input

p

section

p

aside

li

label
span
span

marginpadding

h2

p

h2

p

h2 {
background-color: #ffffff66;
margin: 0;}
p {background-color: #ffffff66;
margin: 0;}

marginbody
marginmarginpadding
div

h2

p
div

padding#second {background-color: #4e9a06ff;
padding: 1em;
}

div

div

div

div
marginmargin-top

margin-rightmargin-bottom

margin-left

marginmargin:padding

1em

2em

marginwidth#first {background-color: #c4a000ff;
width: 6em;}

width:

6em

divwidth

div

div

auto

#first {background-color: #c4a000ff;
width: 6em;
margin: 0 auto;}

margindiv

floatfloat
div
float: right#first {background-color: #c4a000ff;
width: 6em;
float: right;}

margin
div

div

div

div

div

div

div

div

div

clear

#third {background-color: #5c3566da;clear: right;
}

clear

right

clear
clear:

left

clear: both

position

positionrelative
top

right

bottom

left

top

right

bottom

left

top

right

bottomleft

absolute

fixed

sticky
top

right
top

top

right

bottombottom
10px

left
top

heightbottomdisplay

display
display:none

display
display:

inlinedisplayleftdisplay
flex

div
div

<div id="container"><div id="first"><h2>First div</h2><p><span>Sed</span> <span>eget</span> <span>velit</span><span>id</span> <span>ante</span> <span>tempus</span><span>porta</span> <span>pulvinar</span> <span>et</span><span>ex.</span></p></div><!-- #first --><div id="second"><h2>Second div</h2><p><span>Fusce</span> <span>vitae</span> <span>vehicula</span><span>neque.</span> <span>Etiam</span> <span>maximus</span><span>vulputate</span> <span>neque</span> <span>eu</span><span>lobortis.</span> <span>Phasellus</span> <span>condimentum,</span><span>felis</span> <span>eget</span> <span>eleifend</span><span>aliquam,</span> <span>dui</span> <span>dolor</span><span>bibendum</span> <span>leo.</span></p></div><!-- #second --><div id="third"><h2>Third div</h2><p><span>Pellentesque</span> <span>ornare</span> <span>ultricies</span><span>elementum.</span> <span>Morbi</span> <span>vulputate</span><span>pretium</span> <span>arcu,</span> <span>sed</span><span>faucibus.</span></p></div><!-- #third --></div><!-- #container -->div#container {display: flex;
}

div

flex

inline-flex

div

600px

@media (min-width: 600px){#container {display: flex;}}

@media
600px
div

div

position

margin
6em

4px

top

displayflex

displayposition

static

clear

both

margin4px

6em
margin: 4px 6em

margin-left

margin: 4px 6em 4px 6em

margin-right

auto

<div

class="picture">.picture { float: left; }top
topdisplayflex

<script> type;// /* */
console.log

src<html><head></head><body><h1>Website Headline</h1><p>Content</p><script>
console.log('test');</script></body></html><script></script><script><h1><script><script><head>

src<script><html><head><script src="/button-interaction.js"></script></head><body></body><p></html>src
https://www.lpi.org/example.js
src
src

GET

src

<script>…</script><html><head><script src="/button-interaction.js">
console.log("test"); // <-- This is ignored</script></head><body></body></html>scriptasync
script<script

async

src="/script.js"></script>

defer
async

async
async

defer

defer

DOMContentLoaded<head>

defer

type
type="application/javascript"

type

src

template

async
scriptdefer

script

Ctrl

Shift

J

Cmd

Option

J

Ctrl

Shift

K

Cmd

Option

K

Ctrl

Shift

?

Cmd

Option?

console.log('test')
test;

var message = "test"; console.log(message);var message = "test";
console.log(message);console.log("hello")
console.log("world")

console.log("hello");console.log("world");/*
This script was written by the author of this lesson in May, 2020.
It has exactly the same effect as the previous script, but includes comments.
*/// First, we define a message.
var message = "test";
console.log(message); // Then, we output the message to the console.

/**/

console.log(/* what we want to log: */ "hello world")*/

//
console.log(message);// We temporarily want to use a different message// var message = "test";
var message = "something else";

ColorName

console.log("hello")
console.log("world");
console.log("hello");console.log("world");// console.log("hello")
console.log("world");
console.log("hello");console.log("world") //;console.log("hello"); /*console.log("world") */

RED

x

y

console.log()

script

src
async

defer

;

//

/*…*/

console.log("text")
console.log()

ColorNameRED

var ColorName = "RED";

console.log("hello")
console.log("world");

console.log("hello");console.log("world");// console.log("hello")
console.log("world");
console.log("hello");console.log("world") //;console.log("hello"); /*console.log("world") */console.log()

xyvar x = 5;
var y = 10;
console.log(x+y);= + - * / % -- ++ += -= *= /=var let const
boolean number string symbol
array object
undefined null NaN

namePI

COMPANY_NAME

const update_interval = 10;
function setup_app(){console.log("Update every " + update_interval + "minutes");}

setup_app()

Updateupdate_interval

TypeError: Assignment to constant variable

every

10

minutes
const

=

value

constupdate_intervalvarvar update_interval;
update_interval = 10;
function setup_app(){console.log("Update every " + update_interval + "minutes");}

update_interval
{}

if
var

var success = true;
if ( success == true ){var message = "Transaction succeeded";var retry = 0;}else{
var message = "Transaction failed";
var retry = 1;}
console.log(message);console.log(message)

ifmessagemessagevar success = true;
if ( success == true ){forconst message = "Transaction succeeded";var retry = 0;}
else{
const message = "Transaction failed";
var retry = 1;}
console.log(message);

ReferenceError: message is not defined

var

let
var

let

typeofconsole.log("Undefined variables are of type", typeof variable);{let variable = true;
console.log("Value `true` is of type " + typeof variable);}{let variable = 3.14159265;
console.log("Value `3.14159265` is of type " + typeof variable);}{
let variable = "Text content";
console.log("Value `Text content` is of type " + typeof variable);}{let variable = Symbol();console.log("A symbol is of type " + typeof variable);}

undefined variables are of type undefined
Value `true` is of type boolean
Value `3.114159265` is of type number
Value `Text content` is of type string
A symbol is of type symbol

let cart = ['Milk', 'Bread', 'Eggs'];

lengthlet cart = ['Milk', 'Bread', 'Eggs'];
console.log(cart.length);3
push()

cart.push('Candy');
console.log(cart.length);

40

console.log(cart[0]);console.log(cart[3]);

Milk
Candy

push()

pop()

let cart = ['Milk', 1, 'Bread', 4, 'Eggs', 12, 'Candy', 2];// Item indexes are evenlet item = 2;// Quantities indexes are odd
let quantity = 3;
console.log("Item: " + cart[item]);console.log("Quantity: " + cart[quantity]);

Item: Bread
Quantity: 4

namequantity

let item = { name: 'Milk', quantity: 1 };console.log("Item: " + item.name);
console.log("Quantity: " + item.quantity);{}
item.nameItem: Milk
Quantity: 1

let cart = [{ name: 'Milk', quantity: 1 }, { name: 'Bread', quantity: 4 }];cart.push({ name: 'Eggs', quantity: 12 });console.log("Third item: " + cart[2].name);
console.log(cart[2].name + " quantity: " + cart[2].quantity);

third item: eggs
Eggs quantity: 12+

item.quantity = item.quantity + 1;

item.quantity
console.log

let item = { name: 'Milk', quantity: 1 };console.log("Item: " + item.name);
console.log("Quantity: " + item.quantity);
item.quantity = item.quantity + 1;
console.log("New quantity: " + item.quantity);

Item: MilkQuantity: 1
New quantity: 2

item.quantity=

item.quantity+

1

item.quantity

item.quantity

item.quantity += 1;

a = a - ba -= ba = a * ba *= ba = a / ba /= ba = a + 1a++a = a - 1a--

let total = item.quantity * 9.99 + 3.15;

a

*

(b

+

c)

if

if ( item.quantiy % 2 == 0 ){console.log("Quantity for the item is even");
}
else

{
console.log("Quantity for the item is odd");}%if

item.quantity

2

item.quantity+
console.log

Number()sum = Number(value1) + value2;

null
if

(

value1

==

null

)

let item = { name: 'Milk', quantity:
1}

var value = "Global";{value = "Location";}
console.log(value);

let

cart

=

['Milk','Bread','Eggs']

varlet

let item = { name: 'Milk', quantity:1}

let item = { name: 'Milk', quantity: 1, price: 4.99 };

value

=

value

/

2
/=

value /= 2var value = "Global";{value = "Location";}
console.log(value);

Location

NaN

let

cart

=

['Milk','Bread','Eggs']

pop()
cart.pop()

if else if else
switch case break
for while break continuefunction return== != < ⇐ > >==== !==

if
if
1

if ( 1 ) console.log("1 is always true");

1
1

true

console.log

console.log

let my_number = 3;
if ( my_number ) console.log("The value of my_number is", my_number, "and it yields
true");

my_number3

let my_number = 3;
if ( my_number == 3 ) console.log("The value of my_number is", my_number, "indeed");

value1 == value2
value1value2

value1 != value2
value1value2

value1 < value2
value1value2

value1 > value2
value1value2

value1 <= value2
value1value2

value1 >= value2
value1value2

1
==
===

!==

if

let my_number = 4;
if ( my_number == 3 ) console.log("The value of my_number is 3");else console.log("The value of my_number is not 3");

else

if

let my_number = 4;
if ( my_number == 3 ){console.log("The value of my_number is 3");
console.log("and this is the second statement in the block");}
else{
console.log("The value of my_number is not 3");
console.log("and this is the second statement in the block");}

let my_number = 4;
if ( my_number > 0 ){console.log("The value of my_number is positive");if ( my_number % 2 == 0 ){console.log("and it is an even number");}
else{
console.log("and it is an odd number");}} // end of if ( my_number > 0 )else{
console.log("The value of my_number is less than or equal to 0");console.log("and I decided to ignore it");
}

if
if
%

my_number

%
%

==

if

let my_number = 4;
if ( my_number > 0 && my_number % 2 == 0 ){console.log("The value of my_number is positive");console.log("and it is an even number");
}
else
{

2

console.log("The value of my_number either 0, negative");console.log("or it is a negative number");
}

&&
||

let my_number = -4;
if ( my_number > 0 || my_number % 2 == 0 ){console.log("The value of my_number is positive");console.log("or it is a even negative number");}!

let my_number = -5;
if ( ! ( my_number > 0 || my_number % 2 == 0 ) ){console.log("The value of my_number is an odd negative number");}my_number
&&

>

0

||
!

if
switchif

// Available languages: en (English), es (Spanish), pt (Portuguese)
let language = "pt";// Variable to register whether the language was found in the list
let found = 0;
if ( language == "en" ){found = 1;
console.log("English");}if ( found == 0 && language == "es" ){found = 1;
console.log("Spanish");}if ( found == 0 && language == "pt" ){found = 1;
console.log("Portuguese");}if ( found == 0 ){console.log(language, " is unknown to me");
}

if

found
switchswitch ( language ){case "en":console.log("English");break;
case "es":console.log("Spanish");break;
case "pt":console.log("Portuguese");break;default:
console.log(language, " not found");
}

case
break

break

switchswitchcase

caseswitch ( language ){case "en":case "en_US":
case "en_GB":
console.log("English");break;
case "es":console.log("Spanish");break;
case "pt":case "pt_BR":
console.log("Portuguese");break;
default:
console.log(language, " not found");}ifswitchwhile// A naive prime number tester// The number we want to evaluate
let candidate = 231;// Auxiliary variable
let is_prime = true;// The first factor to try
let factor = 2;// Execute the block statement if factor is// less than candidate and keep doing it// while factor is less than candidate
while ( factor < candidate ){if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime
is_prime = false;
break;}// The next factor to try. Simply// increment the current factor by one
factor++;}// Display the result in the console window.
// If candidate has no integer factor, then// the auxiliary variable is_prime still true
if ( is_prime ){console.log(candidate, "is prime");}else{
console.log(candidate, "is not prime");
}

while

factor<candidatefactorcandidatewhilecandidateiffactor
break

while
while
factorif

while ( factor < candidate ){// Skip even factors bigger than two
if ( factor > 2 && factor % 2 == 0 ){factor++;continue;}if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime
is_prime = false;
break;}// The next number that will divide the candidate
factor++;}continuebreakfactorcontinueforfor ( let factor = 2; factor < candidate; factor++ ){// Skip even factors bigger than two
if ( factor > 2 && factor % 2 == 0 ){continue;}if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime
is_prime = false;
break;
}
}

while
let
factor<factor=2

candidatefactor++continuefactor++

break

for

continuefor// A naive prime number tester// The array of numbers we want to evaluate
let candidates = [111, 139, 293, 327];// Evaluates every candidate in the arrayfor (candidate of candidates){// Auxiliary variable
let is_prime = true;for ( let factor = 2; factor < candidate; factor++ ){// Skip even factors bigger than two
if ( factor > 2 && factor % 2 == 0 ){continue;}if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime
is_prime = false;
break;}}// Display the result in the console window
if ( is_prime ){console.log(candidate, "is prime");}else{
console.log(candidate, "is not prime");
}
}

for

(candidateofcandidates)

candidates

candidateforcandidatemy_varmy_varwhile

let i = 0;
while ( 1 ){if ( i == 10 ){continue;}i++;}my_var>0&&

my_var<9

my_var>0||

my_var

<

9

==

=

if

for

for ( let factor = 2; factor < candidate; factor++ )ifswitchcasedefault

while

break

for

my_varmy_var>0&&

my_var<9&&

my_varmy_var||while

let i = 0;
while ( 1 ){if ( i == 10 ){continue;
}
i++;
}

>

0

||

my_var

<

9

==

=

if

let a = "1";
let b = 1;
if ( a == b ){console.log("An ordinary comparison will match.");}if ( a === b ){console.log("A strict comparison will not match.");}forfor ( let factor = 2; factor < candidate; factor++ )for ( let factor = 2; ! (factor >= candidate); factor++ )for ( let factor = 2; factor <= my_number; factor++ ){if ( my_number % factor == 0 ){console.log(factor, " is an integer factor of ", my_number);}}// A naive prime number tester

// The number we want to evaluate
let candidate = 231;// Auxiliary variable
let is_prime = true;// Start with the lowest prime number after 1
let factor = 2;// Keeps evaluating while factor is less than the candidate
while ( factor < candidate ){if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime
is_prime = false;
break;}// The next number that will divide the candidate
factor++;}// Display the result in the console window
if ( is_prime ){console.log(candidate, "is prime");}else{
console.log(candidate, "is not prime");}// A naive prime number tester function
function test_prime(candidate){// Auxiliary variable
let is_prime = true;// Start with the lowest prime number after 1
let factor = 2;// Keeps evaluating while factor is less than the candidate
while ( factor < candidate ){if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime
is_prime = false;
break;}// The next number that will divide the candidate
factor++;}// Send the answer backreturn is_prime;}functionarguments
arguments[0]arguments[1]test_prime
candidatetest_prime(231)test_prime

candidatereturntest_prime

is_prime// The number we want to evaluate
let candidate = 231;// Display the result in the console window
if ( test_prime(candidate) ){console.log(candidate, "is prime");}else{
console.log(candidate, "is not prime");}returnreturnreturnreturnreturnreturnundefinedlet test_prime = function(candidate){// Auxiliary variable
let is_prime = true;// Start with the lowest prime number after 1
let factor = 2;// Keeps evaluating while factor is less than the candidate
while ( factor < candidate ){if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime
is_prime = false;
break;}// The next number that will divide the candidate
factor++;}// Send the answer backreturn is_prime;}function
test_prime(candidate)lettest_prime=

function(candidate)test_prime

while// This function returns the next prime number// after the number given as its only argument
function next_prime(from){// We are only interested in the positive primes,// so we will consider the number 2 as the next// prime after any number less than two.
if ( from < 2 ){return 2;}// The number 2 is the only even positive prime,// so it will be easier to treat it separately.
if ( from == 2 ){return 3;}// Decrement "from" if it is an even number
if ( from % 2 == 0 ){from--;}// Start searching for primes greater then 3.
// The prime candidate is the next odd number
let candidate = from + 2;// "true" keeps the loop going until a prime is foundwhile ( true ){// Auxiliary control variable
let is_prime = true;// "candidate" is an odd number, so the loop will// try only the odd factors, starting with 3for ( let factor = 3; factor < candidate; factor = factor + 2 ){if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime.
// Test the next candidate
is_prime = false;
break;}}// End loop and return candidate if it is prime
if ( is_prime ){return candidate;}// If prime not found yet, try the next odd number
candidate = candidate + 2;}}
let from = 1024;
console.log("The next prime after", from, "is", next_prime(from));

while

true
is_prime// This function returns the next prime number// after the number given as its only argument
function next_prime(from){// We are only interested in the positive primes,// so we will consider the number 2 as the next// prime after any number less than two.
if ( from < 2 ){return 2;}// The number 2 is the only even positive prime,// so it will be easier to treat it separately.
if ( from == 2 ){return 3;}// Decrement "from" if it is an even numberif ( from % 2 == 0 ){from--;}// Start searching for primes greater then 3.
// The prime candidate is the next odd number
let candidate = from + 2;// "candidate" is an odd number, so the loop will// try only the odd factors, starting with 3for ( let factor = 3; factor < candidate; factor = factor + 2 ){if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime.
// Call the next_prime function recursively, this time// using the failed candidate as the argument.
return next_prime(candidate);}}// "candidate" is not divisible by any integer factor other// than 1 and itself, therefore it is a prime number.
return candidate;}let from = 1024;
console.log("The next prime after", from, "is", next_prime(from));

next_prime

from
for
while

for
for
from

factorcandidate%factorcandidate==0

next_primefromnext_prime
next_prime

candidatenext_prime

next_primefactorfromtomultiples_of
console.log()

factorfromtoreturnundefinedfactorfromtomultiples_of
console.log()

factorfunction multiples_of(factor, from, to){for ( let number = from; number <= to; number++ ){if ( number % factor == 0 ){console.log(factor, "*", number / factor, "=", number);
}
}
}

from

to

document.getElementById()

document.getElementsByClassName()

document.getElementsByTagName()

document.querySelector()

document.querySelectorAll()
innerHTML

setAttribute()classList

classList.add()

removeAttribute()classList.remove() classList.toggle()
onClick onMouseOver onMouseOut

example.html<!DOCTYPE html><html><head><meta charset="utf-8" /><title>HTML Manipulation with JavaScript</title></head><body><div class="content" id="content_first"><p>The dynamic content goes here</p></div><!-- #content_first --><div class="content" id="content_second" hidden><p>Second section</p></div><!-- #content_second --></body></html></body><script>
let body = document.getElementsByTagName("body")[0];
console.log(body.innerHTML);</script>

document
getElementsByTagName()

documentbody

getElementsByTagName()[0]

document.getElementsByTagName("body")[0]
body

body
innerHTMLconsole.log(body.innerHTML)<body></body>
body.innerHTML="<p>Content

erased</p>"document
getElementsByTagName()*let elements = document.getElementsByTagName("*");for ( element of elements ){if ( element.id == "content_first" ){element.innerHTML = "<p>New content</p>";}}document

elements

elements

forid

content_first
if<p>New

content</p>element.id

forelement.getAttribute("id")id
getAttribute()

document.getElementsByClassName()let elements = document.getElementsByClassName("content");
for ( element of elements ){if ( element.id == "content_first" ){element.innerHTML = "<p>New content</p>";}}document.getElementById()

let element = document.getElementById("content_first");element.innerHTML = "<p>New content</p>";id
document.getElementById()
element

document.getElementById("content_first").innerHTML = "<p>New content</p>";getElementById()

innerHTMLquerySelector()querySelectorAll()

getElementById()

content_firstquerySelector()

document.querySelector("#content_first").innerHTML = "<p>New content</p>";querySelector()querySelector()

content_firstp

document.querySelector("#content_first p").innerHTML = "New content";

"#content_firstp"content_firstp<div class="content" id="content_first"><p>Don't change this paragraph.</p><p>The dynamic content goes here.</p></div><!-- #content_first -->:nth-child(2)pdocument.querySelector("#content_first p:nth-child(2)").innerHTML = "New content";

p:nth-child(2)2<!DOCTYPE html><html><head><meta charset="utf-8" /><title>HTML Manipulation with JavaScript</title></head><body><div class="content" id="content_first" hidden><p>First section.</p></div><!-- #content_first --><div class="content" id="content_second" hidden><p>Second section.</p></div><!-- #content_second --><div class="content" id="content_third" hidden>

<p>Third section.</p></div><!-- #content_third --></body></html>div

hidden// Which content to show
let content_visible;
switch ( Math.floor(Math.random() * 3) ){case 0:content_visible = "#content_first";
break;
case 1:
content_visible = "#content_second";
break;
case 2:
content_visible = "#content_third";
break;}
document.querySelector(content_visible).removeAttribute("hidden");switchcontent_visible

querySelector(content_visible)
removeAttribute("hidden")hiddenhiddencontent_visible
hiddenquerySelectorAll()// Which content to show
let content_visible;

switch ( Math.floor(Math.random() * 3) ){case 0:content_visible = "#content_first";
break;
case 1:
content_visible = "#content_second";
break;
case 2:
content_visible = "#content_third";
break;}// Hide all content divs, except content_visiblefor ( element of document.querySelectorAll(".content:not("+content_visible+")") ){// Hidden is a boolean attribute, so any value will enable itelement.setAttribute("hidden", "");}

content_visible#content_first.content:not(#content_first)

content

content_first

setAttribute()

displayhidden<style>div.content { display: none }</style><div class="content" id="content_first"><p>First section.</p></div><!-- #content_first --><div class="content" id="content_second"><p>Second section.</p></div><!-- #content_second --><div class="content" id="content_third"><p>Third section.</p></div><!-- #content_third -->block

<script>// Which content to show
let content_visible;
switch ( Math.floor(Math.random() * 3) ){case 0:content_visible = "#content_first";
break;
case 1:
content_visible = "#content_second";
break;
case 2:
content_visible = "#content_third";
break;}
document.querySelector(content_visible).style.display = "block";</script>classList

content

div.content {border: 1px solid black;
opacity: 0.25;}
div.content.highlight {border: 1px solid red;
opacity: 1;}content
highlight
classList.add("highlight")// Which content to highlight
let content_highlight;
switch ( Math.floor(Math.random() * 3) ){case 0:content_highlight = "#content_first";
break;
case 1:
content_highlight = "#content_second";
break;
case 2:
content_highlight = "#content_third";
break;}// Highlight the selected div
document.querySelector(content_highlight).classList.add("highlight");

buttondiv<p><button>First</button><button>Second</button>

<button>Third</button></p><div class="content" id="content_first"><p>First section.</p></div><!-- #content_first --><div class="content" id="content_second"><p>Second section.</p></div><!-- #content_second --><div class="content" id="content_third"><p>Third section.</p></div><!-- #content_third -->div
onClick<p><button
onClick="document.getElementById('content_first').classList.toggle('highlight')">Fi
rst</button><button
onClick="document.getElementById('content_second').classList.toggle('highlight')">S
econd</button><button
onClick="document.getElementById('content_third').classList.toggle('highlight')">Th
ird</button></p>classList.toggle()
div
div
div

highlight

function highlight(id){// Remove the "highlight" class from all content elementsfor ( element of document.querySelectorAll(".content") ){element.classList.remove('highlight');}// Add the "highlight" class to the corresponding element
document.getElementById(id).classList.add('highlight');}<script>
highlight
div

highlight

highlight
onClick<p><button onClick="highlight('content_first')">First</button><button onClick="highlight('content_second')">Second</button><button onClick="highlight('content_third')">Third</button></p>

onClick

onMouseOver
onMouseOut

contentdocument.getElementById()messagedocument.querySelector()
document.getElementById()

classList.remove()myelement.classList.toggle("active")

myelement

activedocument.querySelectorAll()
document.getElementsByTagName("input")classListdocument.getElementById()

document.getElementsByClassName()

document.getElementsByTagName()
document.querySelectorAll()

innerHTML
setAttribute()classList

removeAttribute()

document.querySelector()document.getElementById()messageinnerHTML

document.getElementById("message").innerHTML = "Dynamic content"

document.querySelector()
document.getElementById()
document.querySelector()classList.remove()class

myelement.classList.toggle("active")

myelement

activemyelement

activedocument.querySelectorAll()
document.getElementsByTagName("input")

document.querySelectorAll("input")
document.getElementsByTagName("input")

input

classList

classListfornode [file.js]
npm init
npm install [module_name]package.json
node_modules

node_examples
node
>
>

> let array = ['a', 'b', 'c', 'd'];undefined> array.map( (element, index) => (`Element: ${element} at index: ${index}`));['Element: a at index: 0','Element: b at index: 1','Element: c at index: 2','Element: d at index: 3'
]
>

.exit

start.js

let array = ['a', 'b', 'c', 'd'];array.map( (element, index) => ( console.log(`Element: ${element} at index: ${index}`)));$ node ./start.js
Element: a at index: 0Element: b at index: 1
Element: c at index: 2
Element: d at index: 3

volumeCalculator.js

const sphereVol = (radius) => {return 4 / 3 * Math.PI * radius}console.log(`A sphere with radius 3 has a ${sphereVol(3)} volume.`);console.log(`A sphere with radius 6 has a ${sphereVol(6)} volume.`);$ node volumeCalculator.js
A sphere with radius 3 has a 113.09733552923254 volume.
A sphere with radius 6 has a 904.7786842338603 volume.

volumeCalculator.js

polyhedrons.js

const coneVol = (radius, height) => {return 1 / 3 * Math.PI * Math.pow(radius, 2) * height;}
const cylinderVol = (radius, height) => {return Math.PI * Math.pow(radius, 2) * height;}
const sphereVol = (radius) => {return 4 / 3 * Math.PI * Math.pow(radius, 3);}
module.exports = {coneVol,cylinderVol,
sphereVol}

volumeCalculator.js

const polyhedrons = require('./polyhedrons.js');
console.log(`A sphere with radius 3 has a ${polyhedrons.sphereVol(3)} volume.`);console.log(`A cylinder with radius 3 and height 5 has a ${polyhedrons.cylinderVol(3, 5)} volume.`);console.log(`A cone with radius 3 and height 5 has a ${polyhedrons.coneVol(3, 5)}
volume.`);$ node volumeCalculator.js
A sphere with radius 3 has a 113.09733552923254 volume.
A cylinder with radius 3 and height 5 has a 141.3716694115407 volume.
A cone with radius 3 and height 5 has a 47.12388980384689 volume.

volumeCalculator.js

npm

npm

init

init

--yes
package.json

package.json

package.json
package.json

package-lock.json$ npm i dayjs

iinstall
dayjs
package.json

package-lock.json

node_modules

node_modules
package.json
package.json
npm

install
node_modules

dayjs

const dayjs = require('dayjs');
dayjs().format('YYYY MM-DDTHH:mm:ss')

package.json

dayjsrequire2020 11-22T11:04:36

const http = require('http');
const url = require('url');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {const queryObject = url.parse(req.url,true).query;
let result = parseInt(queryObject.a) + parseInt(queryObject.b);res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');res.end(`Result: ${result}\n`);});server.listen(port, hostname, () => {console.log(`Server running at http://${hostname}:${port}/`);});

basic_server.js

nodeServer running at http://127.0.0.1:3000/

http://127.0.0.1:3000/numbers?a=2&b=17

http

url

http

http

package.json

node_modules

package.json

package.json

node_modules
node_modules
package.json

nodePATH/FILE_NAME.js

PATH

FILE_NAME.js

（&）

mult
Ctrl

C

http://127.0.0.1:3000/numbers?a=2&b=17&operation=mult

let result = queryObject.operation == 'mult' ? parseInt(queryObject.a) *parseInt(queryObject.b) : parseInt(queryObject.a) + parseInt(queryObject.b);expressapp.get() app.post()
res.query() res.body()

res.render()body-parser

<% … %> <%= … %> <%# … %> <%- … %>views/

echo

npm
myserver$ mkdir myserver$ cd myserver/$ npm init

index.js
index.js

const express = require('express')
const app = express()
const host = "myserver"
const port = 8080
app.get('/', (req, res) => {res.send('Request received')})
app.listen(port, host, () => {console.log(`Server ready at http://${host}:${port}`)})expressapp

express

app
host

port

host

myserverlocalhostapp
GETapp.get()app.listen()node

$ node i express$ node index.js

Serverreadyat

http://myserver:8080

curl

curl

$ curl http://myserver:8080 -v* Trying 192.168.1.225:8080...
* TCP_NODELAY set* Connected to myserver (192.168.1.225) port 8080 (#0)
> GET / HTTP/1.1> Host: myserver:8080> User-Agent: curl/7.68.0>Accept: />* Mark bundle as not supporting multiuse< HTTP/1.1 200 OK< X-Powered-By: Express< Content-Type: text/html; charset=utf-8< Content-Length: 16< ETag: W/"10-1WVvDtVyAF0vX9evlsFlfiJTT5c"< Date: Fri, 02 Jul 2021 14:35:11 GMT< Connection: keep-alive<* Connection #0 to host myserver left intact
Request received

curl

-v
>
<
*

curl
Request received

http://myserver:8080
curl
/
>

GET

/

HTTP/1.1

curl

index.js

app.get('/', (req, res) => {res.send('Request received')
})

GET

app

get

/echo
myserver:8080/echo

=>
req
res

POST
curl
POST

POST

--dataPOST / HTTP/1.1

POST

GET
curl

POST

$ curl http://myserver:8080/echo --data message="This is the POST request body" -v* Trying 192.168.1.225:8080...
* TCP_NODELAY set* Connected to myserver (192.168.1.225) port 8080 (#0)
> POST / HTTP/1.1> Host: myserver:8080> User-Agent: curl/7.68.0>Accept: /> Content-Length: 37> Content-Type: application/x-www-form-urlencoded>* upload completely sent off: 37 out of 37 bytes* Mark bundle as not supporting multiuse< HTTP/1.1 404 Not Found< X-Powered-By: Express< Content-Security-Policy: default-src 'none'< X-Content-Type-Options: nosniff< Content-Type: text/html; charset=utf-8< Content-Length: 140< Date: Sat, 03 Jul 2021 02:22:45 GMT< Connection: keep-alive<<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Error</title></head><body><pre>Cannot POST /</pre></body></html>* Connection #0 to host myserver left intact--data message="This is the POST request body"curlmessage

This

is

the

POST

request body/

GET
HTTP/1.1

404

Not

Found

Cannot POST
curl

POST

Content-Typeapplication/x-www-form-urlencoded
express.urlencoded
req

req.body.message
messageapp.useconst express = require('express')
const app = express()
const host = "myserver"
const port = 8080
app.use(express.urlencoded({extended:true}))app.getapp.post

POST

app.post('/', (req, res) => {res.send(req.body.message)
})

/echo

echo

POST

/ip

/echo

app.post('/echo', (req, res) => {res.send(req.body.message)})

req
messagereq.body.message
res.send(req.body.message)

node

index.jscurl$ curl http://myserver:8080/echo --data message="This is the POST request body"This is the POST request body

POST
GET
?message=This+is+the+message
req.query
req.query.message

message

GET

app.get('/echo/:message', (req, res) => {res.send(req.params.message)})/echo/:message:message
req.params
echo$ curl http://myserver:8080/echo/hello

GEThelloreq
req.ipapp.get('/ip', (req, res) => {res.send(req.ip)
})

/ip

GET

$ curl http://myserver:8080/ip
187.34.178.12

req

req.headers
req.headers.user-agent

res
resContent-Typecharset=utf-8
res.type('text/plain')text/plain

text/html;

npm$ npm install cookie-parser

const cookieParser = require('cookie-parser')app.use(cookieParser())

/
req
res

req.cookies

res.cookie()known
res.cookie('known',

'1')

1

app.get('/', (req, res) => {res.type('text/plain')if ( req.cookies.known === undefined ){res.cookie('known', '1')
res.send('Welcome, new visitor!')}else
res.send('Welcome back, visitor');
})

curl
-c

cookies.txt-b$ curl http://myserver:8080/ -c cookies.txt -b cookies.txt -v* Trying 192.168.1.225:8080...
* TCP_NODELAY set* Connected to myserver (192.168.1.225) port 8080 (#0)

cookies.txt

> GET / HTTP/1.1> Host: myserver:8080> User-Agent: curl/7.68.0>Accept: />* Mark bundle as not supporting multiuse< HTTP/1.1 200 OK< X-Powered-By: Express< Content-Type: text/plain; charset=utf-8* Added cookie known="1" for domain myserver, path /, expire 0< Set-Cookie: known=1; Path=/< Content-Length: 21< ETag: W/"15-l7qrxcqicl4xv6EfA5fZFWCFrgY"< Date: Sat, 03 Jul 2021 23:45:03 GMT< Connection: keep-alive<* Connection #0 to host myserver left intact
Welcome, new visitor!

Set-Cookie:

known=1;
curl

known=1$ curl http://myserver:8080/ -c cookies.txt -b cookies.txt -v* Trying 192.168.1.225:8080...
* TCP_NODELAY set* Connected to myserver (192.168.1.225) port 8080 (#0)
> GET / HTTP/1.1> Host: myserver:8080> User-Agent: curl/7.68.0>Accept: /> Cookie: known=1>* Mark bundle as not supporting multiuse< HTTP/1.1 200 OK< X-Powered-By: Express< Content-Type: text/plain; charset=utf-8< Content-Length: 21< ETag: W/"15-ATq2flQYtLMYIUpJwwpb5SjV9Ww"< Date: Sat, 03 Jul 2021 23:45:47 GMT< Connection: keep-alive

Path=/

<* Connection #0 to host myserver left intact
Welcome back, visitor

expresssession

cookie-session

GET

GET

comment/agentuser-agent/user/:name
name
name

myserver<form action="/contact/feedback" method="post"> ... </form>

POST
req.body/user/:name/user/GET

POST
requestGET

comment

comment

req.query.comment
GET/agentuser-agent

app.get('/agent', (req, res) => {res.send(req.headers.user-agent)})/user/:name
name
name

name

req.params.namemyserver<form action="/contact/feedback" method="post"> ... </form>

app.post('/contact/feedback', (req, res) => {
...
})

POST
req.body

express.urlencoded/user/:name:name404 Not Found/user/

servernpm$ mkdir server$ cd server/$ npm init
$ npm install express

index.js
index.js

const express = require('express')
const app = express()
const host = "myserver"
const port = 8080
app.listen(port, host, () => {console.log(`Server ready at http://${host}:${port}`)})express.static
express.static

app.use(express.static('public'))

publicpublicpublicpublic/layout.css/layout.css

POST

app.post('/echo', (req, res) => {res.send(req.body.message)})

res.send()

POST
POST
GET
/
POST
GET

const express = require('express')
const app = express()
const host = "myserver"
const port = 8080
app.use(express.static('public'))
const cookieParser = require('cookie-parser')app.use(cookieParser())
const { v4: uuidv4 } = require('uuid')
app.use(express.urlencoded({ extended: true }))// Array to store messages
let messages = []app.post('/', (req, res) => {// Only JSON enabled requests
if ( req.headers.accept != "application/json" ){res.sendStatus(404)return}// Locate cookie in the request
let uuid = req.cookies.uuid// If there is no uuid cookie, create a new one
if ( uuid === undefined )uuid = uuidv4()// Add message first in the messages arraymessages.unshift({uuid: uuid, message: req.body.message})// Collect all previous messages for uuid
let user_entries = []messages.forEach( (entry) => {if ( entry.uuid == req.cookies.uuid )user_entries.push(entry.message)})// Update cookie expiration datelet expires = new Date(Date.now());
expires.setDate(expires.getDate() + 30);
res.cookie('uuid', uuid, { expires: expires })// Send back JSON response
res.json(user_entries)})
app.get('/', (req, res) => {// Only JSON enabled requests
if ( req.headers.accept != "application/json" ){res.sendStatus(404)return}// Locate cookie in the request
let uuid = req.cookies.uuid// Client's own messages
let user_entries = []// If there is no uuid cookie, create a new one
if ( uuid === undefined ){uuid = uuidv4()}
else {// Collect messages for uuid
messages.forEach( (entry) => {if ( entry.uuid == req.cookies.uuid )user_entries.push(entry.message)})}// Update cookie expiration datelet expires = new Date(Date.now());
expires.setDate(expires.getDate() + 30);
res.cookie('uuid', uuid, { expires: expires })// Send back JSON response
res.json(user_entries)})
app.listen(port, host, () => {console.log(`Server ready at http://${host}:${port}`)})layout.css
cookie-parser
uuid
npm

installparser uuid
messagesuuidmessageres.json()cookie-// Send back JSON response
res.json(user_entries)

acceptapplication/json// Only JSON enabled requests
if ( req.headers.accept != "application/json" ){res.sendStatus(404)return}curl

acceptapplication/json
curl$ curl http://myserver:8080/ --data message="My first message" -c cookies.txt -b
cookies.txt
Not Found-H"accept:

application/json"$ curl http://myserver:8080/ --data message="My first message" -c cookies.txt -b
cookies.txt -H "accept: application/json"["My first message"]GET$ curl http://myserver:8080/ -c cookies.txt -b cookies.txt -H "accept:
application/json"["Another message","My first message"]$ npm install ejs

index.js

app.set('view engine', 'ejs')

res.render()app.post('/', (req, res) => {let uuid = req.cookies.uuid
if ( uuid === undefined )uuid = uuidv4()

messages.unshift({uuid: uuid, message: req.body.message})
let user_entries = []messages.forEach( (entry) => {if ( entry.uuid == req.cookies.uuid )user_entries.push(entry.message)})
let expires = new Date(Date.now());
expires.setDate(expires.getDate() + 30);
res.cookie('uuid', uuid, { expires: expires })if ( req.headers.accept == "application/json" )res.json(user_entries)
else
res.render('index', {title: "My messages", messages: user_entries})})
app.get('/', (req, res) => {let uuid = req.cookies.uuid
let user_entries = []if ( uuid === undefined ){uuid = uuidv4()}
else {
messages.forEach( (entry) => {if ( entry.uuid == req.cookies.uuid )user_entries.push(entry.message)})}
let expires = new Date(Date.now());
expires.setDate(expires.getDate() + 30);
res.cookie('uuid', uuid, { expires: expires })if ( req.headers.accept == "application/json" )res.json(user_entries)
else
res.render('index', {title: "My messages", messages: user_entries})})acceptif ( req.headers.accept == "application/json" )res.json(user_entries)
else
res.render('index', {title: "My messages", messages: user_entries})

index
user_entries
title:"My

messages"views/
index
views/index.ejs
views/index.ejs<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title><%= title %></title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/layout.css"></head><body><div id="interface"><form action="/" method="post"><p><input type="text" name="message"><input type="submit" value="Submit"></p></form><ul><% messages.forEach( (message) => { %><li><%= message %></li><% }) %></ul></div></body></html><head><title><%= title %>res.render()
title

GET
action="/"

POST

/

method="post"<% … %><%
messages.forEach( (message) => { %><%# … %><%= … %><%= title %><%- … %><ul><% messages.forEach( (message) => { %><li><%= message %></li><% }) %>
</ul>

<%

…

%>

<%

forEachmessage%>messages<li><%=

message%></li>$ curl http://myserver:8080/ --data message="This time" -c cookies.txt -b
cookies.txt<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>My messages</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/layout.css"></head><body><div id="interface"><form action="/" method="post"><p><input type="text" name="message"><input type="submit" value="Submit"></p></form><ul><li>This time</li><li>in HTML</li></ul></div></body></html>views/
public/assets
express.staticrescontent

viewstemplates<title></title><title><%

head
title

%></title>h2
h2<h2></h2>

express.staticassets
express.static
app.use(express.static('assets'))

req.headers.accept

resres.json()

acceptcontent

res.json(content)

viewstemplates

app.set('views',<title></title>head<title><%<%= %>

title%></title><%= title %>h2h2<% if ( h2 != "" ) { %><h2><%= h2 %></h2><% } %>'./templates')<h2></h2>sqlite3
Database.run() Database.close() Database.all() Database.get() Database.each()
CREATE TABLE
INSERT SELECT DELETE UPDATEnamecontacts

email

INSERT INTO contacts (name, email) VALUES ("Carol", "carol@example.com");

INSERT
VALUES

SELECT

SELECT email FROM contacts;
dave@example.com
carol@example.com

SELECT

email

contacts

WHERE

SELECT email FROM contacts WHERE name = "Dave";
dave@example.com

sqlite3$ npm install sqlite3

better-sqlite3

INTOsqlite3

sqlite3

index.js

sqlite3

const sqlite3 = require('sqlite3')
const db = new sqlite3.Database('messages.sqlite3');

index.js

messages.sqlite3
messages.sqlite3

sqlite3db

CREATE TABLE

db.run('CREATE TABLE IF NOT EXISTS messages (id INTEGER PRIMARY KEY AUTOINCREMENT,

uuid CHAR(36), message TEXT)')

db.run()

run

node
IF

NOT

index.js

EXISTS

messagesmessagesid

uuid

messageid
PRIMARY

id

AUTOINCREMENTROWID
INTEGERPRIMARY

ROWID
ROWID
INTEGER

uuid

message
CHAR(36)
TEXT

message
uuid

app.post('/', (req, res) => {PRIMARY

KEY

KEY

KEY

let uuid = req.cookies.uuid
if ( uuid === undefined )uuid = uuidv4()// Insert new message into the databasedb.run('INSERT INTO messages (uuid, message) VALUES (?, ?)', uuid, req.body.message)// If an error occurrs, err object contains the error message.
db.all('SELECT id, message FROM messages WHERE uuid = ?', uuid, (err, rows) => {let expires = new Date(Date.now());
expires.setDate(expires.getDate() + 30);
res.cookie('uuid', uuid, { expires: expires })if ( req.headers.accept == "application/json" )res.json(rows)
else
res.render('index', {title: "My messages", rows: rows})})})

db.run()uuid

req.body.message
db.run()db.all()db.run()db.all()(err, rows) => {}

err

rows

err

rows
uuid

messagerows
res.json()res.render()<ul><% rows.forEach( (row) => { %><li><strong><%= row.id %></strong>: <%= row.message %></li><% }) %>
</ul>

rows

db.each()db.each()db.all()

(err,

row)

⇒

{}

row

id

id

app.post('/:id', (req, res) => {let uuid = req.cookies.uuid
if ( uuid === undefined ){uuid = uuidv4()// 401 Unauthorized
res.sendStatus(401)}else {// Update the stored message// using named parameters
let param = {$message: req.body.message,$id: req.params.id,$uuid: uuid}
db.run('UPDATE messages SET message = $message WHERE id = $id AND uuid = $uuid', param, function(err){
if ( this.changes > 0 ){// A 204 (No Content) status code means the action has// been enacted and no further information is to be supplied.
res.sendStatus(204)}elseres.sendStatus(404)})}})

UPDATE

WHERE

param
db.run()

$
$

WHERE
db.run()this.changes
function(){}
の

:id

こ

app.delete('/:id', (req, res) => {let uuid = req.cookies.uuid
if ( uuid === undefined ){uuid = uuidv4()
res.sendStatus(401)}else {// Named parameters
let param = {$id: req.params.id,$uuid: uuid}
db.run('DELETE FROM messages WHERE id = $id AND uuid = $uuid', param, function(err){
if ( this.changes > 0 )res.sendStatus(204)elseres.sendStatus(404)})}})

DELETE

FROM

db

Ctrl

Ctrl

C

process.on()Cprocess.on('SIGINT', () => {db.close()server.close()
console.log('HTTP server closed')
})

Ctrl

C

SIGINT
SIGINT
process.on()db.close()server.close()db.all()db.each()sqlite3

rows
rows

db.run()

INSERT

INTO

db.all()pricesqlite3

INSERT INTO

UPDATE

DELETEdb.all()db.each()db.all()db.each()sqlite3

db.get()db.all()rows

db.all()

rows

price

rows
price

db.run()

INSERTrows[0].priceINTO

db.run()function(){}this.lastID