본문 바로가기
WEB/이론 정리

[6주차] 이론

by 단월໒꒱ 2021. 8. 14.

[생활코딩] Javascript

1. 비교 연산자

좌항과 우항의 관계에 따라서 true, false 둘 중 하나의 값을 출력하는 연산자

 

1) ===  (동등 비교 연산자)

2) <

3) >

 

>나 <의 경우 꺽쇠 문법이 적용될 수 있기 때문에 문자 그대로 전달하는 코드가 존재한다.

&lt; : <

&gt; : >

 

2. 불리언 (Boolean)

true, false 두 개의 값을 가리키는 데이터 타입이다.

 

3. 조건문

if (Boolean값) {

    코드1

}  else {

    코드2

}

 

if 다음에 있는 ( ) 안에는 true나 false 같은 Boolean 값이 들어오는데, ( ) 안의 값이 true면 코드1을, false면 코드2를 실행한다.

보통 ( ) 안에는 조건을 써서 조건에 따라 ture나 false가 오도록 한다.

 

4. 기타 제어 방법

1) night_day라는 id 값을 가진 버튼의 value 값이 무엇인지 알아보는 코드

document.querySelector('#night_day').value

 

2) 자기 자신을 가리키는 코드

this

 

3) 특정 코드가 중복될 때

var 변수이름 = document.querySelector('selector'); 로 선언을 해준 후 변수이름.style.color 처럼 활용해주면 된다.

 

5. 리팩토링

코딩을 하고 나면 코드가 비효율적인 면들이 생기는데, 그러면 동작하는 건 그대로 두고 코드 자체를 효율적으로 만들어서 코드의 가독성을 높이고 유지보수를 하기 편하게 만들고, 중복된 코드를 줄이고 이런 방향으로 코드를 다시 개선하는 작업을 말한다.

 

소프트웨어가 커지고 복잡해지는 과정에서 틈틈이 리팩토링을 해야 좋은 프로그램을 만들 수 있음.

 

중복을 끝까지 쫓아가서 다 없애버리자.

 

6. 배열

서로 연관된 데이터를 잘 정리해서 담아두는 일종의 수납상자이다.

배열 내용은 [ ] 안에 적는다.

 

1) 변수 선언

var 변수이름 = [ 배열 내용 ]

 

2) 배열 안에 들어있는 값이 몇개인가 알아내는 함수

변수이름.length; 

 

3) 데이터 추가

변수이름.push(추가내용);

 

등등 이외의 기능들은 검색을 통해 알아볼 수 있다.

 

7. 반복문

순서대로 실행되는 프로그램의 실행 순서의 흐름을 제어하는 제어문이라 할 수 있다.

반복문에는 while문, for문이 있다.

 

while (Boolean값) {

    코드1

}

    코드2

}

 

while 뒤의 ( )에 들어가는 내용은 보통 while문이 실행되는 조건이 들어간다. 그래서 조건을 만족하는 동안은 코드1을 실행하고 조건을 만족하지 못하고 false 값을 갖게 되면 반복문이 종료되며 코드2를 실행하게 된다.

 

배열과 결합해서 사용시, 배열의 원소 개수만큼 반복하고 싶으면 배열이름.length를 이용할 수 있다.

 

8. 태그 선택 - 배열, 반복문 이용

1) querySelector( ) : 선택한 태그에 해당되는 태그 중 첫번째로 등장하는 것 하나만 가져옴

 

2) querySelectorAll( ) : 선택한 태그 전체를 배열의 형태로 가져옴

var 변수이름 = document.querySelectorAll('selector'); 로 변수를 설정한 뒤

반복문을 사용해서 변수에 담겨있는 태그들을 하나하나 꺼내서 활용할 수 있다.

 

cf) console.log( ); : ( ) 안에 있는 결과가 Console 창에 출력된다.

 

9. 함수

반복되는 내용이 많아지고 길어지면 웹페이지의 크기가 커지고 인터넷으로 전송할 때 비용, 시간, 노력이 많이 든다.

이런 상황에서 함수를 사용하면 코드가 길고 복잡해지는 상황을 방지할 수 있다.

리팩토링을 할 때 아주 중요한 역할을 한다.

 

function 함수이름(매개변수) {

     코드

}

 

위의 형식으로 함수를 정의해준 뒤, 이렇게 정의한 함수를 아래의 형식으로 호출해서 사용한다.

 

함수이름(인자);

 

10. 함수 - 매개변수, 인자, 리턴

입력 : 매개변수 (Parameter), 인자 (Argument)

출력 : 리턴 (Return)

 

1) 매개변수

함수를 정의할 때 함수이름 옆의 ( ) 안에 넣어주는 변수이다.

 

2) 인자

함수를 호출할 때 함수이름 옆의 ( ) 안에 넣어주는 값으로, 전달되는 실제 값을 말한다.

 

3) 리턴

return을 통해 값을 출력함으로써 함수를 다양한 맥락에서 활용할 수 있는 자유도를 준다.

 

 

 

 

'WEB > 이론 정리' 카테고리의 다른 글

[7주차] 이론  (0) 2021.08.22
[6주차] 실습  (0) 2021.08.14
[5주차] 이론  (0) 2021.08.07
[4주차] 실습  (0) 2021.07.31
[4주차] 이론  (0) 2021.07.31

댓글