본문 바로가기
💚 UIUX 웹퍼블리셔 과정(6개월)

2021-05-31 (49일차) html의 button, 자바스크립트 기호, if문, else if문, onclick, function, 버튼 누를 때마다 색 변경

by widely design 2021. 6. 1.

10강~15강

 

 

<자바스크립트 소스코드의 구성요소 2가지>

1) 변수

2) 데이터

  - 실행 가능 : 함수

  - 실행 불가능 : 숫자, 문장, 참or거짓, 객체

 

<소스코드의 2대 제어요소>

1) 조건문

2) 반복문


< if문 >

※ True = 조건이 맞는다

※ False = 조건이 맞지 않는다

※ (조건)이 Truse라면 {실행값}을 실행한다.

 

- if (조건) {실행값}

  if (조건)이 True라면 { }이 실행된다.

  if (조건)이 False라면 { }이 실행되지 않는다.  

 

- else if (조건) {실행값}

  위의 if문이 False라면, 그 다음으로 바로 실행되는 if문이다.

  if문과 똑같이 true라면 실행되고, false라면 실행되지 않고 그 다음 else if문으로 간다.

 

- else {실행값}

  위의 if문과 else if문 모두 False라면, 마지막으로 실행되는 if문이다.

  마지막 if문이다. 그러므로 (조건) 생략이 가능하다.

 

※ 만약 출력할 내용이 오직 두 개 뿐이라면 else if를 생략하고 if와 else만 넣으면 된다.

    ex) 성년 or 미성년, 여자 or 남자, 동물 or 식물

예시


<자바스크립트 기호>

- a >= b

  : b 이상 a

 

- a > b

  : b 초과 a

 

- a == b

  : a와 b는 같다

 

- a != b

  : a와 b는 같지 않다

 

- !

  : 반전

 

- a && b

  : a 그리고 b

 

- a || b

  : a 아니면 b

 

- a / b

  : a에서 b를 나눈 몫

  ex) 10 / 5 = 2

 

- a % b

  : a에서 b를 나눈 나머지

  ex) 10 % 5 = 0

 

예시


<function>

 

 

 

- function 함수이름 (조건) {실행값 n개}

  : 함수 이름 지정 가능

  : 실행값을 모아놓는 역할을 할 수 있음

  : 함수를 만드는 것일 뿐, 실행이 되진 않음

 

- 함수이름( );

  : function 함수이름을 실행함

 

 

 

 

<html>

- <button></button>

  : 버튼 생성

 

- <태그 onclick=""></태그>

  : 태그를 클릭하면 "" 도출

  : " "의 안에는 "console.log('출력할 내용');"와 "함수"가 들어갈 수 있음

    ㄴ 뭔가 더 들어갈 수 있을 것 같기도 하지만, 아직까지 배우기론 이정도만 들어감

 

버튼을 각각 한 번씩만 눌렀을 때의 console
 button 누르면 배경색 변경,  버튼 누를 때마다 색 변경

 

댓글