Style을 css로

이것은 상당히 기본적인 것인데 기존의 html의

<style></style>

요소를 css파일로 묶어서 링크를 거는 것만으로 재현할 수 있다는 것을 배웠다.

<link rel="stylesheet" href="style.css">

로 연결이 가능하다.

조건문

개념

조건문을 간단하게 설명하자면 조건이 충족 될 경우(true, 명제의 값이 참일 때) 해당 작업을 수행하는 것이다.

 console.log(true);
 console.log(false); // Boolean은 참과 거짓을 구분한다

조건문을 수행할 때에는 비교 연산자(Comparison Operator)를 사용하게 되는데

console.log(1>1);
console.log(1===1); // 비교 연산자
console.log(1==1); // 비슷하게 같음
console.log(1!===1); // !는 부정           

앞과 뒤의 값을 비교해 주는 것이 바로 비교 연산자이다.

조건문의 사용

이를 통하여 장치를 실행시켜주는데에 있어

console.log(1);
if(true){
	console.log(2);
} 
console.log(3); // 1실행 후 조건값이 참이면 2실행 다음 3실행

console.log(4);
if(false){
	console.log(5);
} 
console.log(6); // 4실행 조건 값이 거짓이면 5실행안함 다음 6실행

이외에도 else를 사용하면 참일때와 거짓일 때의 동작을 구분 시킬 수 있다.

console.log(7);
if(true){
	console.log('8 - true');
} else {
	console.log('8 - false');
}  // 명제가 참이면 8-true 거짓이면 8-false가 실행

이 조건문을 사용하여 화면의 블랙모드 버튼을 만들게 되면

<input type="button" id="dnbtn" value="Black" onclick="
let button = document.querySelector('#dnbtn');
if(button.value === 'Black'){
    alert('Black mode'); 
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    value = 'White';
} else {
    alert('White mode'); 
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    value = 'Black';
}
">

라는 식이 탄생하는데 여기서 id값을 설정해주는 것 또한 중요하다.

배열과 반복문(Array, Loop)

배열(Array)

배열은 서로 연관된 데이터를 그룹핑해서 묶는 것으로 굳이 따지자면 분류에 가깝다고 할 수 있다.

 var topic1 = 'html';
 var member1 = 'egoing';
 var topic2 = 'css';
 var member2 = 'leezche';
 var topic3 = 'js';
 var member3 = 'duru';

 var topics = ['html', 'css', 'js'];
 var members = ['egoing', 'leezche', 'duru'];
 console.log(topics.length);
 console.log(topics[0]); // 맨처음 topics의 원소가 나옴

배열에서 각 개체를 element 원소라고 부르며 그 순서를 색인 index라고 한다. 즉 topics에서 원소는 html, css, js 이며 각각 색인 index는 0,1,2이고 0부터 시작하니 잊지말자.

반복문(Loop)

반복문은 말그대로 동작을 반복시키는 명령문이라 보면 된다.

console.log(1);
for(let i=0; true ;i=i+1){
	console.log(2);
	console.log(3);
}

중간값에 true가 오게 되면 1이 실행 된 다음 2와3이 영원히 반복되는데 컴퓨터 고장나니까 하지말자

console.log(1);
for(let i=0; i<3 ;i=i+1){
	console.log(2);
	console.log(3);
}
console.log(4);

1이 실행 된다음 i=0부터 시작되서 유효한 i=2까지 총 3번 반복 후 4가 실행된다.

배열과 반복문 혼용

배열과 반복문은 흔히 혼용하는데

topics = ['html','css','js'];
for(let i=0; i<3; i=i+1){
	console.log('i=>',i);
} // 색인 index의 0, 1, 2 가 i의 값으로 나옴

topics = ['html','css','js'];
for(let i=0; i<topics.length; i=i+1){
	console.log('i=>',topics[i]);
} // topics의 내용을 자동 추출

topics = ['html','css','js'];
for(let i=0; i<topics.length; i=i+1){
	document.write('<li>'+topics[i]+'</li>');
} // 화면에 topics에 원소들을 표시한다.(순서대로)

사실 이는 지극히 관용적인 표현이라 실질적으로 써보지 않는 이상 완벽히 이해하기는 힘들 것이라고 생각된다.

오늘의 감상

솔직히 관용적인 표현이 매우 많았다. 동작이라고 해봤자 값이 추출되는 것 뿐이기에 이것을 실제로 어떻게 적용해야하는 가는 실전에 가봐야 알게 될 것이라 생각되니 상당히 막막하긴 하나 배운 것이라도 머릿속에 잘 보관해둬야할 거 같은 느낌을 받았다.