Quick Recap презентация

web page
index.html
<br> Домашняя страница Васи Пупкина<br>
...

теги

вложенные теги
nested.html
Какой-то блок
Нырнём поглубже Достаточно.

атрибуты

glance at your creation

why

basic syntax
selector {
property: value;
}

селекторы
.className
#idValue
div

file tree

тег link
href='main.css' />

Практика

practice

JS

devtools encounter

Basics

variables
let variable = value

To ; or not to ;

bad
var variable = value

pro
const some = constVal

examples
variables.js
const number = 0.5
const string = ‘Hey guys, massive legend here!’
const array = [‘some’, 42, number]
// yikes
const greeter = name => `Hello, ${name}`
console.log(greeter(‘world’))

Типы данных

Number

Number
42.0

Number
> 42 / 0
Infinity

String

String
‘Продам гараж’

String
> ‘THANOS’ + ‘CAR’
THANOS CAR

immutable
const str = ‘Hello’
str[0] = ‘B’
// no effect

Boolean

Boolean
> true !== false
true

Null

Undefined

Symbol

Object

Object
const object = {
someKey: ‘value’,
another: 7
}

Object
> object.someKey
value
> object[‘another’]
7

always by reference
const a = {k: 1}
const b = a
a.k = 2
b.k
// 2

Синтаксические
конструкции

If clause

if
if (condition) {
statements
}

if-else
if (condition) {
statements
} else {
more statements
}

if-elseif
if (condition) {
statements
} else if (cond) {
more statements
}

falsy
0, null, undefined, ‘’,
false, NaN

truthy
if (‘0’)
console.log(‘yikes’)

many pitfalls of js comparisons
> 5 == ‘5’
true
> 5 === ‘5’
false

Lööps

while
while (condition) {
statements
}

for
for (i; cond; i++) {
statements
}

for-of
for (el of iterable) {
statements
}

for-of
for-of.js
const numbers = [1, 2, 3, 7]
for (let number of numbers) console.log(number)
/*
1
2
3
7
*/

for-in
for (key in iterable) {
statements
}

for-in
for-of.js
const numbers = [1, 2, 3, 7]
for (let index in numbers) console.log(index)
/*
0
1
2
3
*/

Functions

functions
function name (args) {
statements
}

anonymous functions
function (args) {
statements
}

anonymous.js
const greeter = function (name) {
console.log(‘Hello, ‘ + name.toString())
}
greeter(‘Billy’)

Практика

DOM API

file tree

include
<br>

or
<br> your awesome code<br>

button tag
button.html
Press me, ye mongrel

query selector
queryselector.js
const button = document.querySelector(‘#button’)
button.textContent = 'Please, press me'

event listeners
addEventListener.js
const button = document.querySelector(‘#button’)
button.addEventListener(‘click’, function () {
alert(‘Thank you kindly!’)
})

Практика