<순서 이해하기>
1. 글자색을 변하게 만들고 싶은 태그에 id값을 부여한다.
2. button 을 생성하고, 버튼에 onclick 시 발생할 함수를 입력해준다.
onclick="메소드명();"
3. javascript에서 아까 부여했던 id값을 불러온다
그냥 id이름을 부를 수 없고 몇가지 절차가 필요함
4. 아래 내용
[1] let [2] 변수명 [3]= [4]document. [5]getElement [6]ById [7]("id값");
[1] : let은 자료형
[2] : 변수명 (즉, 우리가 앞으로 부를 변수 이름인 셈)
[3] : =은 쉽게 말하자면 (오른쪽 의 값을 왼쪽에 담는다)
docu부터 시작해서 ");까지 끝나는 데이터를 변수 안에 넣겠다는 것
[4] : document '현재 문서'라는 의미
[5],[6] : getElementById("id값");
[7] : id값
한번에 묶어 해석하면?
=> 현재 문서 안에 있는, "id값"을 변수명에 넣어 호출할게.
😎 아래 짠 코드보면서 이해하기
1. <body> 부분
<p id="abc">내가 글자색이 변해볼게! 얍! </p>
<button onClick="fontChangeColor()">난 버튼이야</button>
2.<script> 부분
let fontchangetarget = document.getElementById("abc");
function fontChangeColor(){
fontchangetarget.style.color="blue";
}'✍ 따뜻한 개발 공부' 카테고리의 다른 글
| [JavaScript] JavaScript를 통해 오디오 제어기 만들어보기 (0) | 2022.08.29 |
|---|---|
| [canvas] canvas가 뭐야~? / canvas를 이용하여 사각형 그림 그리기 😊 (0) | 2022.08.28 |
| [이클립스] 이클립스 Project Explorer 좌측에 고정시키기 / 이클립스 작업창 구조 초기화시키기 (0) | 2022.08.26 |
| [Spring] 스프링 프로젝트 web.xml 에서 한글깨짐 방지 위하여 한글처리 해주기 (0) | 2022.08.24 |
| [Spring] 스프링 MVC 게시판 만들기 / 프로젝트 설계도 (0) | 2022.08.23 |
댓글