[Web 기초] Day7 Javascript2

조건문과 반복문 

Javascript는 Programming 언어 이다.

html(마크업 언어), css ( 스타일시트 언어) 와 다르게 명령어를 '시간의 순서와 조건에 따라' 수행하게 만들 수 있다.  즉, 조건문과 반복문을 사용하여 프로그램의 흐름을 제어할 수 있다.  제어문은 프로그래밍 언어에서 공통적으로 사용되는 개념이므로 다른 프로그래밍 언어에 대한 이해가 있다면 이부분은 쉽게 사용할 수 있다. 특히 C언어의 제어문을 안다면 문법도 거의 동일하다.

 

조건문

if (document.querySelector('#nightbutton').value==='NightMode') {
	document.querySelector('body').style.backgroundColor='black';
	document.querySelector('body').style.color='white';
	document.querySelector('#nightbutton').value='DayMode';
} else {
	document.querySelector('body').style.backgroundColor='white'; 
	document.querySelector('body').style.color='black';
	document.querySelector('#nightbutton').value='NightMode';
}		

document.querySelector는 html내에서 원하는 element를 가져올 수 있는 명령어이다.

조건문을 이용하여 event가 발생했을때 element의 상태에 따라 다른 동작을 수행하도록 할 수 있다.

 - if, else if, else 문

if ( condition1 ) {
  statement1
} else if ( condition2 ) {
  statement2
} else {
  statement3
}

 - switch 문

switch(session) {
  case condition1 : statement1;
  	break;
  case condition2 : statement2;
  	break;
  case condition3 : statement3;
  	break;
default: statement4;
}

조건의 종류가 많은 경우 switch 문을 이용하는게 효율적일 수 있다.

 

- 삼항연산자

삼항 연산자는 한줄로 사용할 수 있을 때 사용하면 효과적이다.

(number > 0) ? alert("양수입니다.") : alert("양수가 아닙니다")

? 앞의 내용이 참이면 :이전 내용을 / 거짓이면 : 이후 내용을 수행한다

 

 

 

반복문

 

document.querySelectorAll 은 원하는 element를 모두 가져오는 명령어이다. 문서에 있는 a tag를 모두 가져온 뒤 반복문을 통해 순차적으로 명령을 수행할 수 있다. 여러 줄을 사용하는 경우 중괄호로 묶어준다.

 

 - for 문

for ([initialization]; [condition]; [final-expression])
   statement

 - while 문

while (condition)
  statement

 - break / continue

 break 문을 만나면 현재 속해있는 반복문/switch문/label문 을 종료하고 다음 statement로 제어를 넘긴다.

 continue 문을 만나면 현재 반복문을 종료하고 다음 반복으로 연결한다.

 

함수와 객체

 

함수

Javascript 에서의 함수는 Function 객체이다. 

//함수선언
function sum(number1,number2) {
  return number1+number2;
}
//함수호출
var result =sum(1,2);

함수의 return 값이 없을 경우에는 기본 값인 undefined 가 return 된다.

기본자료형(number 등) 의 매개변수는 값으로 전달되어 함수 내에서 변경되더라도 외부의 값은 변하지 않는다. 

하지만 매개변수가 기본자료형이 아니거나 (Array , 사용자가 정의한 자료형 등), 함수 내부에서 객체의 속성을 변화시킨 경우 함수 외부의 값에도 변화가 생긴다.

 

 

함수표현식 (fuction expression)

 익명 함수 라고도 불린다.  python의 lambda 함수와 비슷하다고 생각하면 될 것 같다. 

var square = function(number) { return number * number };
var factorial = function fac(n) { return n<2 ? 1 : n*fac(n-1) };

 이름을 가질 필요는 없지만 이름이 있어도 된다.(?)

함수 표현식은 함수를 다른 함수의 매개변수로 전달 할 때 유용하게 사용된다.

위의 예시에서 함수표현식으로 정의한 함수를 square 변수에 담아서 다른 함수의 매개변수로 활용했다.

 

 

객체

Javascript는 객체지향언어이다. Javascript를 이루고 있는 거의 모든것은 객체이다.(primitive type 제외) 

객체는 관련된 데이터와 함수의 집합을 의미한다. 

var x ={};
typeof(x);
>"object"

가장 단순한 객체는 위와 같이 빈 객체이다.

 

프로그래머는 필요에 따라 객체를 정의해서 사용할 수 있다. 객체의 데이터와 함수는 Property와 Method 라는 이름으로 불린다. 객체의 프로퍼티에 접근하는 대표적인 방법은 점 표기법이다.  객체의 값으로 또다른 객체{} 가 들어올 수도 있으며 이런경우 동일하게 점 표기법으로 하위 객체에도 접근 할 수 있다.

person.name
person['name']

점 표기법 이외에 괄호로 접근도 가능하다. 점표기법의 경우 . 이후에 이어지는 property나 method 이름이 반드시 상수 여야하지만 ( 문자열 등)  대괄호를 사용하면 [ ] 사이에 상수 뿐 아니라 변수도 들어갈 수 있어서 동적으로 변경하기에 유리하다.

 

 

this

 this 키워드는 지금 동작하고 있는 코드를 가지고 있는 객체를 가리킨다. 즉, 현재 객체를 가리킨다.

 생성자를 이용해 동적으로 객체를 생성하는 경우 유용하다.

 

 

Console

 - console.log()를 구글링해보면 Console 이라는 것이 Web Api 로 구분되어 있다.

developer.mozilla.org/ko/docs/Web/API/Console_API

Console API는 코드의 특정 지점에서 값이나 변수를 기록하고, 작업의 소요 시간을 알아내는 등 개발자가 사용할 수 있는 디버깅 기능을 제공한다고 한다. console 이라는 브라우저에서 디버깅 콘솔에 접근할 수 있도록 해주는 객체를 통해 여러 디버깅 기능을 사용할 수 있다. (로깅, 스택 추적, 타이머, 카운터 등 )

 - console.log() console.info() console.warn() console.error() : 콘솔에 텍스트를 출력하는 방법들. 출력 형식이 조금씩 차이가 있다. 

 - console.time :  작업의 소요시간을 측정할 때 사용한다.

console.time("mytime")
console.timeLog("mytime")
> mytime: 24029.945068359375 ms
console.timeEnd("mytime")
> mytime: 30042.818115234375 ms

- console.trace(); : 스택을 추적

 

 

JS 파일의 분리

<script>
  .. js codes
</script>
<script src="style.js"></script>

 js 파일을 별도의 파일로 관리하여 여러 html 파일에 적용할 수 있다.