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 executed
testFn();
// 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);
// function
function (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 number

Document 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)

Made with Slides.com