Light Blue Pointer
본문 바로가기
Developing/TIL(Develop)

스파르타코딩클럽 사전캠프 2주차 Javascript

by Greedy 2023. 9. 14.

Javascript

</style>
<script>
        
</script>

style 밑에 script 생성

<script>
        let a = 'hello';

        console.log(a);

    </script>

실행시키고 개발자 도구 Console에 가면 로그가 찍혀있다.

 

Alert

기록하기 버튼을 눌렀을 때 Alert 창이 뜨게 만들어 본다.

<script>
        function hey(){
            alert('안녕하세요');
        }

    </script>
 <button onclick="hey()" type="button" class="btn btn-danger">기록하기</button>​

버튼에 onclick으로 함수를 연결해준다

기록하기 눌렀더니 경고창이 잘 뜬다

상세정보 버튼을 누르면 영화 제목 색이 바뀌게 해본다.

제목을 부를만한 이름표가 필요해서 id값을 넣어준다.

<h1 id="title" class="display-5 fw-bold">Ginny & Georgia</h1>
function color(){
            document.getElementById('title').style.color = 'red';

        }
<button onclick ="color()" type="button" class="btn btn-outline-light">상세정보</button>

상세정보를 눌렀더니 영화 제목이 바뀌었다.