Title Text
HTML
DOM vs BOM
DOM vs BOM
Document
<html>
<head>
<!-- Metadata -->
<!-- Scripts -->
<!-- Stylesheets -->
</head>
<body>
<!-- Content -->
</body>
</html><html>
<head>
<!-- Metadata -->
<meta name="author" content="Rachnerd">
<meta name="description" content="Example">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Scripts -->
<script src="./main.js"></script>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
<!-- Content -->
<section>
...
</section>
</body>
</html>Head / Body
Chat app
...
<body>
<!-- Chat -->
<section>
<!-- Chat messages -->
<ul>
<li>Welcome</li>
<li>To</li>
<li>The chat</li>
</ul>
<!-- Chat users -->
<ul>
<li>Bot</li>
<li>User 1</li>
</ul>
<!-- Chat input -->
<form>
<input title="message" type="text">
<button type="submit">Send</button>
</form>
</section>
</body>
...
CSS
Element inspector
Chrome F12
Selectors
...
<body>
<!-- Chat -->
<section>
<!-- Chat messages -->
<ul>
<li>Welcome</li>
<li>To</li>
<li>The chat</li>
</ul>
<!-- Chat users -->
<ul>
<li>Bot</li>
<li>User 1</li>
</ul>
<!-- Chat input -->
<form>
<input title="message" type="text">
<button type="submit">Send</button>
</form>
</section>
</body>
...ul {
padding: 0;
list-style: none;
}
li {
font-family: sans-serif;
}
Specificity
Type selectors
Class selectors
ID selectors
p {
...
}
.some-class {
...
}
#someId {
...
}
p {
font-size: 10px !important;
}Important
BEM
Block Element Modifier
block__element--modifier
BEM
...
<body>
<!-- Chat -->
<section>
<!-- Chat messages -->
<ul>
<li>Welcome</li>
<li>To</li>
<li>The chat</li>
</ul>
<!-- Chat users -->
<ul>
<li>Bot</li>
<li>User 1</li>
</ul>
<!-- Chat input -->
<form>
<input title="message" type="text">
<button type="submit">Send</button>
</form>
</section>
</body>
......
<body>
<section class="chat">
<ul class="chat__messages">
<li class="chat__message">Welcome</li>
<li class="chat__message">To</li>
<li class="chat__message">The chat</li>
</ul>
<ul class="chat__users">
<li class="chat__user">Bot</li>
<li class="chat__user">User 1</li>
</ul>
<form class="chat__form">
<input class="chat__form-input"
title="message"
type="text">
<button class="chat__form-button"
type="submit">
Send
</button>
</form>
</section>
</body>
...Selectors
ul {
padding: 0;
list-style: none;
}
li {
font-family: sans-serif;
}...
<body>
<section class="chat">
<ul class="chat__messages">
<li class="chat__message">Welcome</li>
<li class="chat__message">To</li>
<li class="chat__message">The chat</li>
</ul>
<ul class="chat__users">
<li class="chat__user">Bot</li>
<li class="chat__user">User 1</li>
</ul>
<form class="chat__form">
<input class="chat__form-input"
title="message"
type="text">
<button class="chat__form-button"
type="submit">
Send
</button>
</form>
</section>
</body>
....chat__messages, .chat__users {
padding: 0;
list-style: none;
}
.chat__message {
font-family: sans-serif;
}Layout
Messages
Users
Form
Content
Sidebar
Footer
Layout
<section class="chat">
<div class="chat__body">
<div class="chat__content">
<ul class="chat__messages">
<li class="chat__message">Welcome!</li>
<li class="chat__message">To</li>
<li class="chat__message">The chat</li>
</ul>
</div>
<div class="chat__sidebar">
<ul class="chat__users">
<li class="chat__user">Bot</li>
<li class="chat__user">User 1</li>
</ul>
</div>
</div>
<div class="chat__footer">
<form class="chat__form">
<input class="chat__form-input"
title="message"
type="text">
<button class="chat__form-button"
type="submit">
Send
</button>
</form>
</div>
</section>SCSS?
JavaScript
function / var
function testFn() {
console.log("test fn executed");
}
var testVar = function () {
console.log("test var executed");
}
testFn();
// test fn executed
testVar();
// test var executedtestFn();
// test fn executed
testVar();
// test var executed
function testFn() {
console.log("test fn executed");
}
var testVar = function () {
console.log("test var executed");
}
Hoisting
if(condition) {
var text = "Hello World!";
} else {
text = "Hi";
}Source
Engine
var text;
if(condition) {
text = "Hello World!";
} else {
text = "Hi";
}ES5 Loops
var messages = ["Hello", "World"];
for (var i = 0; i < messages.length; i++) {
console.log(messages[i]);
}
// Hello
// World
for (var i in messages) {
console.log(messages[i]);
}
// Hello
// World
for (var message of messages) {
console.log(message);
}
// Hello
// World
Object
var messages = [
{
content: "Welcome!",
userId: "0",
username: "Bot"
},
{
content: "Hi",
userId: "1",
username: "User 1"
}
];
console.log(messages[0].content);
// Welcome!Scope "this"
const test = new Test();
console.log(test.text);
// Some text
console.log(window.text);
// undefined
Test();
console.log(window.text);
// Some text
console.log(this);
// Window
function Test() {
this.text = "Some text"
}Types?
var variable = "Some text";
console.log(typeof variable);
// string
variable = 123;
console.log(typeof variable);
// number
variable = {};
console.log(typeof variable);
// object
variable = function () {
};
console.log(typeof variable);
// functionfunction (text) {
if (typeof text !== "string") {
throw Error("Text is not a string!");
}
...
}== vs ===
var text = "1";
var number = 1;
console.log(text == number);
// true
// Because text is 1 and number is 1
console.log(text === number);
// false
// Because typeof text is string and typeof number is numberDocument queries
console.log(document.body)
// <body>
// ...
// <ul id="chat__messages">
// <li id="chat__message">Hello</li>
// <li id="chat__message">World!</li>
// </ul>
// ...
// </body>
const chatMessagesElement = document.body.getElementById("chat__messages");
// <ul id="chat__messages">
// <li class="chat__messages">Hello</li>
// <li class="chat__messages">World!</li>
// </ul>
const chatMessageElements = chatMessagesElement.getElementsByClassName("chat__message");
// [
// <li class="chat__messages">Hello</li>,
// <li class="chat__messages">World!</li>
// ]Element creation
var chatMessageElement = document.createElement("li");
// <li></li>
chatMessageElement.className = "chat__message";
// <li class="chat__message"></li>
var chatMessageText = document.createTextNode("Welcome!");
// Welcome!
chatMessageElement.appendChild(chatMessageText);
// <li class="chat__message">Welcome!</li>
document.body.appendChild(chatMessageElement);
//<body>
// <li class="chat__message">Welcome!</li>
// </body>Events
<button type="button" onclick="logEvent(event)">
Submit
</button>function logEvent(event) {
console.log(event);
}
Events
<button type="button" class="chat__form-button">
Submit
</button>function logEvent(event) {
console.log(event);
}
window.onload = function () {
var button = document.getElementsByClassName("chat__form-button")[0];
button.onclick = logEvent;
button.addEventListener("click", logEvent);
};Callstack
Async (timeout, interval, etc)