자바스크립트(4)-html과 연동_

728x90

자바스크립트를 사용하는 이유?

내 웹 사이트를 동적으로 만들기 위해서!!!!!!!

그럼 오늘은 자바스크립트를 이용해서 함 해보자!

먼저 html에서 자바스크립트를 연결하고 body에 h1태그를 이용해서 ○를 입력했다.

<!DOCTYPE html>

<head>

<title>안녕하세요</title>

</head>

<body>

</body>

</html>

html에 있는 태그를 자바스크립트 파일에 가져오기 위한 방법

1.

document.getElementById("동그라미");

이렇게 하면 불러올 수 있을 거 같지만 안된다.

doucument.

getElementById

보시파시피 id로 불러오는 건데

html에서 보면 id가 아닌 class로 지정되어 있다.

저 class를 id로 바꿔주면 불러오는 게 가능하다.

이 방법 보다는 조금 더 범용적인 방법을 사용하겠다.

2.

document.querySelector(".동그라미");

doucument.

querySelector

이걸 사용하게 되면 id, class, tag 자체를 사용할 수 있다.

id를 사용 시에는 () 괄호 안에 "#id"를

class를 사용할 때는 마찬가지 () 괄호 안에 ".class"

태그를 사용할 때는 그냥 태그 이름을 넣어주면 된다.

이걸 일단 도형 이라는 변수에 넣어두겠다

const 도형 = document.querySelector(".동그라미");

오늘 배운 몇가지를 연습해보자

시작 전에 현재 상태를 점검하자

html에서 불러온 동그라미라는 class를 가진 h1태그가 현재 도형이라는 변수에 들어가 있다.

자, 시작!

스타일 바꾸기

일단 현재 모습이다.

html이나 css를 사용하지 않고 자바스크립트만을 이용해 저 동그라미를 별로 바꾸고 싶다.

추가로 title에 있는 저 하트도.....

근데 단순히

이렇게 결과만 바꾸는 게 아니라

내가 어떠한 행동을 했을 때 바뀌게 하겠다.

이번에 사용할 코드를 보자

document.title = "N잡러의 사무실"; 1

도형.style.color = "blue"; 2

도형.style.color = "orange"; 3

도형.innerHTML = "★"; 4

도형.addEventListener("click", 함수); 5

1. 말 그대로 title를 바꾼다.

기존 ♥ 에서 N잡러의 사무실로 바꾼다

2.3. 변수(○)의 스타일 중에서 컬러를 바꾼다.

검은색에서 파랑 오렌지로

4. 내용을 바꾼다.

아 근데 내가 배운 건 innerText인데 왜 이건 적용이 안되고 innerHTML이 적용이 되는지....

아시는 분 ㅜㅜ

5. 특정한 행동이 발생했을 때 무엇을 실행하겠다

여기서는 클릭을 했을 때 함수를 실행하겠다.

아주 간단히 이 정도만 사용을 하는데 여기서 addEventListener에 들어갈 함수는

function changeColor() {

if (도형.style.color === "orange") {

도형.style.color = "blue";

} else {

도형.style.color = "orange";

}

function changeShape() {

도형.innerHTML = "★";

}

이 2가지로 간단한 if문이다.

그럼 최종 코드들과 결과를 보자 html은 위에 있으니 js코드만 올리겠다.

결과

코드

const 도형 = document.querySelector(".동그라미");

document.title = "N잡러의 사무실";

function changeColor() {

if (도형.style.color === "orange") {

도형.style.color = "blue";

} else {

도형.style.color = "orange";

}

도형.addEventListener("click", changeColor);

function changeShape() {

도형.innerHTML = "★";

}

도형.addEventListener("click", changeShape);

혹시 보시면서 내용상 수정해야 할 부분이나 아니면 더 쉽고 좋은 코드가 있다면 알려주시면 감사하겠다.

결론은

innerHTML 너 뭐냐

저작자표시

'개발공부' 카테고리의 다른 글

< / > 클론 코딩-Wordle(게임)__HTML & CSS_1 (0)	2023.06.24
자바스크립트(5)_시계만들기(웹API ) (2)	2023.06.23
< / > 클론 코딩-당근마켓__HTML & CSS (feat. 슈퍼코딩)_2 (6)	2023.06.23
무료 아이콘 공유 사이트 (3)	2023.06.22
자바스크립트(3)_함수로 카페 계산기 만들기 with chatGPT (3)	2023.06.22

N잡러 지망생