명령문 순서

[정은빈]

안녕하세요 선생님! 웹 강의 마치고 자바스크립트 듣는 중인데요 궁금한 점이 생겨서요.

지금 JQuery 기초 듣는 중인데 한 html 안에 배운 것들을 좀 쌓아두고 있거든요?? 표현이 이상하지만
아래에 코드 보여드리겠습니당. 그런데 궁금한 것이 코드가 적용되는 순서가 있는 것 같은데, 이게 어떤
기준일지 알 수 있을까요?? 왜나면 굵게 표시해 놓은 코드를 중간에 두면 적용이 되는데, 저 코드를 맨 아래에
썼을 때는 적용이 안되더라구요ㅜㅜ 궁금합니다.

* Code *

<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
 
<ul class="list-group" id="test1">
<li class="list-group-item">An item
<li class="list-group-item">A second item
<li class="list-group-item">A third item
<li class="list-group-item">A fourth item
<li class="list-group-item">And a fifth one

 
<br>
<br>

<h1 id="hello">Hello World</h1>
<h1 id="hi">JS beginner</h1>

<div class="alert-box" id="alert">
<p id="title">Alert Window</p>
<button id="close">X</button>
</div>
<button onclick="alert('block')">Alert</button>

<button onclick="login('id')">button 1</button>
<button onclick="login('password')">button 2</button>

<br>
<br>

<p class="hello">Hello!</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>

document.querySelector('.list-group-item')[2];

document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function() {
document.getElementsByClassName('list-group')[0].classList.toggle('show-list');
 });

document.querySelector('.hello').innerHTML = 'Idiot';

document.getElementById('hello').innerHTML = 'Hey';
document.getElementById('hi').innerHTML = 'JS senior';
document.getElementById('hi').style.fontSize = '16px';

function alert(hole) {
document.getElementById('alert').style.display = hole;
 }

function login(name) {
document.getElementById('title').innerHTML = 'please enter a valid ' + name;
document.getElementById('alert').style.display = 'block';
 }

document.getElementById('close').addEventListener('click', function() {
document.getElementById('alert').style.display = 'none';
 });

document.getElementById('open').addEventListener('click', function() {
document.getElementById('alert').style.display = 'none';
 });

</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

[codingapple]

위에서부터 한줄한줄 실행됩니다 조작할 html이 js코드보다 위에 있어야 조작가능합니다

[글쓴이]

글