Na primeru jednostavnog HTML dokumenta:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Modern JavaScript</title>
<link rel="stylesheet" href="https://bootswatch.com/4/cyborg/bootstrap.min.css">
</head>
<body>
<main role="main" class="container">
<br>
<div class="jumbotron">
<h1 id="heading">Sample text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia libero, laudantium at laboriosam neque repudiandae! Vel quae corporis debitis, asperiores, autem provident quaerat beatae totam possimus quia, esse necessitatibus porro.</p>
<p>Necessitatibus sint vel animi magni, omnis ducimus libero, expedita nemo eveniet voluptatum in rerum temporibus quam provident perspiciatis delectus ex asperiores doloribus voluptatem tempora non soluta id. Deserunt, nihil, ad recusandae quisquam dicta deleniti dolorum ipsam magni, voluptatibus esse temporibus. Architecto, quaerat!</p>
<p id="toRemove">To be removed</p>
</div>
<a href="#" id="link" class="btn btn-danger btn-lg">Don't push me</a>
</main>
</body>
</html>
imamo:
CSS stilizovanje
<script>
document.querySelector('.jumbotron').style.color('red');
document.querySelector('.jumbotron').style.color = 'cornflowerblue';
document.querySelectorAll('main p').forEach(p => p.style['font-family'] = 'arial');
</script>
CSS klase
<script>
document.querySelector('.jumbotron').classList.remove('jumbotron');
document.querySelector('.container').classList.add('active');
document.querySelectorAll('p').forEach(p => p.classList.add('active'));
</script>
Loading Events
<script>
document.addEventListener('DOMContentLoaded', init);
window.addEventListener('load', load);
</script>
forEach()
<script>
let p = document.querySelectorAll(".jumbotron p");
p.forEach((item, index) => {
console.log(index, item.textContent);
});
</script>
DOM manipulacije
<script>
let heading = document.querySelector('#heading')
console.log(heading.innerText)
alert("Last paragraph will be removed")
let el = document.querySelector('#toRemove')
el.remove()
let paragraphs = document.querySelectorAll(".jumbotron p")
//console.log(jumbotron[0].innerText)
Array.from(paragraphs).forEach(p => {
console.log(p.innerText)
})
alert("Adding text")
let jumbotron = document.querySelector('.jumbotron')
jumbotron.prepend('And now something completely different...')
jumbotron.before('Here goes Jumbotron:')
let parent = jumbotron.parentNode
console.log(parent)
let main = document.querySelector('main');
let par = document.createElement('p');
par.textContent = 'New paragraph';
main.insertAdjacentElement('beforeend', par);
//beforebegin, afterbegin, beforeend, afterend
</script>
Događaji
<script>
let link = document.querySelector('#link')
link.addEventListener('click', e => {
e.preventDefault()
alert("Don't push me!")
})
document.querySelector('.jumbotron').addEventListener('click', function(ev){
//this.style.color = 'purple';
ev.currentTarget.style.color = 'gold';
});
document.querySelectorAll('p').forEach(function(p, index){
p.addEventListener('mouseover', function(ev){
ev.currentTarget.style.backgroundColor = 'skyblue';
});
p.addEventListener('mouseout', function(ev){
ev.currentTarget.style.backgroundColor = 'transparent';
});
});
</script>
Ajax & vanilla JavaScript
<script>
const URL = 'http://jsonplaceholder.typicode.com/albums';
document.addEventListener('DOMContentLoaded', () => {
let req = new Request(URL, {
method: 'GET'
});
});
fetch(req)
.then(response => response.json())
.then(data => {
console.log(data);
console.log(JSON.stringify(data, null, 2));
})
.catch(err => {
console.log('error')
});
</script>
Ajax & Axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get('https://swapi.co/api/starships')
.then(res => console.log(res.data))
.catch(error => console.log(error))
</script>
Izvor: Traversy Media, Steve Griffith
