[JavaScript] TIL 1(211129)ㅣ아무것도 모르지만 일단 입문

Choi Song Yi·2021년 11월 29일
0

Javascript

목록 보기
1/8

실습 사이트: w3schools.com
한 줄 설명과 함께 즉각적으로 실습해볼 수 있는 위 사이트를 통해 학습을 진행하려한다.

JavaScript Introduction

아주 간단한 기능을 구현해보면서 JavaScript 입문 시간을 가져보자.

1. HTML 컨텐츠를 수정해보자.

document.getElementById("demo").innerHTML = "Hello JavaScript";

  • document.getElementById("demo"): id값이 demo인 HTML 요소를 가져오라는 메서드
  • innerHTML: 가져온 id값의 내용을 변경해주는 속성. (위 메서드와 함께 사용한다.)

    [Click Me!] 오른쪽 버튼을 누르면 아래와 같이 바뀐다.

* 추가 TIL

  • '/' 유무로 시작점과 끝나는점을 나타낸다.
  • p : 하나의 문단
  • 위 그림을 보면 버튼 타입 표시, onclick하면 나타날 변화, 버튼 이름 순서로 코드 구성
  • "와 ' 모두 사용 가능.
  • ID는 겹치지 않는 고유한 값만 가능.

2. HTML 이미지의 속성 값(내용)을 변경해보자.

img src="이미지가 저장되어있는 경로"


[Turn on the light] 왼쪽 아래 버튼을 누르면 아래와 같이 바뀐다.

* 추가 TIL

  • 위 style에서 "width:요소너비", fontSize = "글자크기"

3. HTML 요소를 숨기거나 표시해보자.

- 요소 숨기기

document.getElementById("demo").style.display = "none";

[Click Me!] 오른쪽 버튼을 누르면 'p'의 내용이 숨겨진다.

  • style.display = 'none': display 스타일을 이용해 숨김으로 바꿔준다.

- 요소 표시하기

document.getElementById("demo").style.display = "block";


[Click Me!] 오른쪽 버튼을 누르면 숨겨져있던 "demo"의 내용이 표시된다.

  • style.display='block': 숨겨있던 style="display:none:"으로 숨겨져있던 문단을 해제한다.
profile
2021.11.22 ~ 국비지원과정 수강ing

0개의 댓글