Увод у свет програмирања

Перановић Цвиjан
Бобичић Душан
Садржаj

1. Уводна реч
1.1 О курсу
1.2 Зашто JavaScript?
1.3 Како jе све настало?
1.4 Frontend vs Backend
1.5 Окружење

2. HTML, CSS и прстохват JavaScript-a

2.1 HTML
2.2 CSS
2.3 Увод у програмирање
2.4 Git & GitHub
1/23
О курсу

• Предавач и асистент:
– Бобичић Душан
– Перановић Цвиjан
• Обавезе:
– Домаћи задаци
– Тестови
– Завршни проjекат
• Траjање курса
– 10 недеља
• Додатна настава
– TODO

2/23
Зашто JavaScript?

3/23
Како jе све настало?

• Tim Berners-Lee
• HTTP, URI, HTML (CERN 1990)
• W3C (MIT 1994)
• JavaScript (1995)

4/23
Frontend vs Backend

Frontend Backend
• Како ствари изгледаjу • Како ствари раде
• Слике и садржаj • Логика и подаци
• HTML, CSS, JavaScript • PHP, JavaScript, Ruby,
• React Python, Java итд.

5/23
6/23
Окружење коjе ћемо користити

Visual Studio Code

7/23
Питања?

8/23
Садржаj

1. Уводна реч
1.1 О курсу
1.2 Зашто JavaScript?
1.3 Како jе све настало?
1.4 Frontend vs Backend
1.5 Окружење

2. HTML, CSS и прстохват JavaScript-a

2.1 HTML
2.2 CSS
2.3 Увод у програмирање
2.4 Git & GitHub
9/23
HTML - Семантика

10/23
HTML

Чести тагови:
• h1 - h6
• p, a (href), img (src)
• ul, ol, li, table, tr, th, td
• div, span
• form, input (type), select > option, textarea
• button
Атрибути:
• Важан део HTML-a
• Ближе описуjу тагове
11/23
12/23
CSS - селектори

• Селектор елемента: име-елемента (нпр. img)

• Селектор класе: .име-класе
• Селектор ИД-а: #име-ид
• Груписање: елемент1,елемент2 (селектуjе оба
елемента,може и више)
• Комбинатор: елемент1 елемент2 (селектуjе елемент2
коjи jе унутар елемент1)

13/23
CSS - своjства

• color, background-color, background-image

• border, margin, padding
• font-family, font-size, font-style, text-decoration
• width, height, z-index

14/23
15/23
Увод у програмирање

• Шта jе програмирање?
• Зашто учити програмирање?

16/23
Пример

17/23
const app = document.getElementById(’app’);
app.innerHTML = ’<p>Hello to BootcampPizza by JavaScript
Basics</p>’;

18/23
Git & GitHub

• Инсталирање
• Шта jе Git и како ради?
• Шта jе GitHub?

19/23
Шта jе Git?

• Алат за верзионисање кода

• Кључне речи:
– Snapshot
– Commit
– Repositories (Repo)
– Cloning, Pulling, Pushing
– Branches, master, merge

20/23
Пример

21/23
Пример

22/23
Хвала на пажњи!
Питања? 1

23/23
1
Ако приметите грешку, приjавите jе овде: cvijanperanovic@aol.com