Инсталирати Visual Studio Code едитор.
- инсталирати екстензију Live Server
- пречица за HTML бојлер:
! + TAB
- пречица за script таг:
script + TAB
- у оквиру HTML странице script таг наводимо у дну body секције, на пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
// Ovo je komentar o metodi console.log...
console.log('Ispisan je naslov: Hello, World!');
</script>
</body>
</html>
- пречица за Console у Google Chrome
CTRL + SHIFT + j
- Иако је могуће у истом фајлу писати све, JS КÔД УВЕК ПИШЕМО У ЗАСЕБНОМ ФАЈЛУ, а не као у претходном примеру – separation of concerns 🙂 – у HTML фајловима је садржај, у CSS фајловима стил, а у JS понашање веб страница. На пример:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello, World!</h1>
<script src="script.js"></script>
</body>
</html>
script.js
// Ovo je komentar o metodi console.log...
console.log('Ispisan je naslov: Hello, World!');
Поред исписа у конзолу прегледача помоћу методе console.log()
, JS може да “исписује” податке у HTML елементу користећи innerHTML
, на HTML излазу методом document.write()
и у поп-ап упозорењима прегледача методом window.alert()
.
На пример, нека је наслов дефинисан идентификатором 'naslov'
и нека је задатак исписати текст Hello, World!
у наслову помоћу JS-a.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="naslov"></h1>
<script src="script.js"></script>
</body>
</html>
script.js
document.getElementById("naslov").innerHTML = 'Hello, World!';
Исти задатак без коришћења идентификатора може се решити методом document.write()
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
<script>
document.write('Hello, World!');
</script>
</h1>
</body>
</html>
Слично као код исписа у конзолу прегледача, ако треба исписати текст Hello, World!
у поп-ап упозорењима, то се постиже методом window.alert()
, односно alert()
.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
<script src="script.js"></script>
</h1>
</body>
</html>
script.js
alert('Hello, World!');