Skip to content

JavaScript основе

Инсталирати 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!');