html과 css라는 거대한 풍파를 맞은 지 한 달도 채 되지 않은 지금
또 새로운 녀석을 맞딱뜨리게되었다
이름하야
JavaScript(자바스크립트)
이름부터 복잡하게생겼다.
자바스크립트는 html에 삽입, 사용자와 상호작용해서 웹페이지를 프로그래밍적으로 제어할 수 있는 객체 기반의 스크립트 언어다. 요즘에는 더 나아가 웹서버를 동작시킬때도 사용된다고한다.
자바스크립트를 동적인 요소를 만들어내는데에 사용해 웹페이지를 좀 더 생동감있게 만들어 줄 수가 있다! 자바스크립트를 사용하면 HTML요소의 내용, 속성값, 스타일을 손쉽게 변경할 수 있다.
자바스크립트 조건문(If)
조건문은 순서에 따라서 다른 기능들이 실행되도록 하는것이다.
주어진 조건이 참인지 거짓인지 판별하여 일을 처리한다.
슬래시(//)를 주석으로 사용하여 설명하는 기본적인 구조를 보시라
if(something_is_true){ // 만약에 괄호 안의 조건이 true면
do_something; // 이 코드를 수행해!
}else{ // 그렇지않다면(false면)
do_something_different; // 이 코드를 수행해!
}또 실제로 조건문을 사용해 화면에 글을 출력하는 방식은 이러하다
var aa = 10;
var bb = 20;
if(aa < bb){
document.write('aa가 bb보다 작다');
}
else{
document.write('aa가 bb보다 크다');
}위 코드를 작성시 화면에는 aa가 bb보다 작다 라는 글이 출력된다 라는것!
이제
페이지에 다크모드 버튼을 만들고..
라이트모드 버튼도 만들고..
그 두가지를 번갈아 실행시킬 수 있는 하나의 버튼까지 만들어보겠다!
세번째 버튼이야말로 자바스크립트 조건문을 실용적으로 쓸 수 있는 예라고 할 수 있다!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 테스트 페이지</title>
</head>
<body>
<h1>JavaScript</h1>
<input type="button" value="dark" onclick="
// onclick이라는 속성에 아래의 자바스크립트를 넣어줘야한다.
해당 버튼을 클릭했을때 아래의 자바스크립트 코드를 실행시키겠다는 말이다.
document.querySelector('body').style.backgroundColor = 'black';
// 이 문서 내 body태그의 style속성의 배경색을 black으로 바꿀게!
document.querySelector('body').style.color= 'white';
// 이 문서 내 body태그의 style속성의 글씨색을 white으로 바꿀게!
">
<input type="button" value="light" onclick="
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color= 'black';
">이렇게 조건문 없이 다크모드 버튼과 라이트모드 버튼을 각각 만들 수 있었다.
이제 조건문을 이용해 하나의 버튼으로 다크모드와 라이트모드를 번갈아 실행시킬 수 있는 코드를 짜야한다.
<input id="dark_light" type="button" value="dark" onclick="
if(document.querySelector('#dark_light').value === 'dark'){
// 만약 이 문서 내 dark_light 아이디의 값이 dark이면(true라면) 아래 코드를 실행해!
document.querySelector('body').style.backgroundColor = 'black';
// 이 문서 내 body태그의 style속성의 배경색을 black으로 바꿀게!
document.querySelector('body').style.color = 'white';
// 이 문서 내 body태그의 style속성의 글씨색을 white으로 바꿀게!
document.querySelector('#dark_light').value = 'light';
// 그리고 이 문서 내 dark_light 아이디의 값을 light로 바꿔적을거야!
} else { // if문의 조건이 false라면 아래 코드를 실행해!
document.querySelector('body').style.backgroundColor = 'white';
// 이 문서 내 body태그의 style속성의 배경색을 white으로 바꿀게!
document.querySelector('body').style.color = 'black';
// 이 문서 내 body태그의 style속성의 글씨색을 black으로 바꿀게!
document.querySelector(#dark_light').value = 'dark';
}
">
// 이 문서 내 dark_light 아이디의 값을 dark로 바꿔적을거야!그런데 우리는 이렇게 지저분하고 긴 코드를 정리하는 리팩토링이라는 일을 해야한다.
깔끔하고 가시성 좋은 코드를 위해 리팩토링 시작
우선 document.querySelector('#dark_light') 이라는 중복되는 코드를
자기자신을 가리키는 this로 모두 바꿔주고
this의 등장으로 참조할 필요가 없어진 input태그의 id="dark_light" 라는 코드를 삭제한다.
그리고 계속 중복되고있는 코드 document.querySelector('body')를 간소화시켜주기위해서 var target = document.querySelector('body');라는 내용을 onclick속성의 첫부분에 선언해준다
<input type="button" value="dark" onclick="
var target = document.querySelector('body');
if(this.value === 'dark'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'light';
} else {
target.style.backgroundColor = 'white';
target.style.color= 'black';
this.value = 'dark';
}
">
</body>
</html>그렇게 리팩토링까지 거쳐 완성된 코드.
이렇게 하면 화면을 어둡게해주는 dark버튼 한 개,
화면을 밝게해주는light버튼 한 개 그리고 누를때마다 dark와 light로 번갈아 전환되는 버튼 한 개 구현하기 끝!
야호
위에서 작성한 코드로 출력된 페이지의 모습!
연산자와 블리언(Boolean)
연산자를 사이에 두고
좌항과 우항의 값을 비교해 각각 True, False를 출력한다
바로 우리는 이 true와 false 두 가지를 묶어 블리언(Boolean) 이라고 부른다는것을 알아두자!
반복문(Loop)과 배열(Array)
반복문이란 순서대로 실행되는 프로그램의 실행 순서와 흐름을 조건문과 함께 제어하는것이다. 또 데이터를 서랍속에 순서대로 정리해놓은것을 바로 배열이라고한다. 배열은 대괄호로 생성할 수 있으며 자료는 대괄호 속에서 쉼표로 구분하여 입력한다.
반복문과 배열은 함께 사용할때 가치가 발휘되는 요소이다.
과일 이름을 나열하고
과일 각각의 이름이 적힌 페이지 링크 걸기를 통해 반복문과 배열을 이해할 수 있다.
<body>
<script>
var fruits = ["apple", "banana"];
</script>
<script>
document.write(fruits[0]);
document.write(fruits[1]);
</script>
<script>
document.write(fruits.length);
</script>
</body>이런 코드를 입력하면 페이지에
applebanana
2라고 출력이되는것을 볼 수 있다!
fruit이라는 서랍속에 있는 데이터를 읽을때는 맨 처음자리가 0번째 자리이지만
데이터의 갯수를 셀 때는 1부터 세기때문에 0번째 자리의 fruits는 apple이고
서랍속 데이터의 총 갯수는 2개인것이다.
데이터를 뒤쪽에 추가하고싶다면
<script>
fruits.push('kiwi')
</script>이렇게 적으면 된다
데이터를 앞쪽에 추가하거나, 중간에 추가하거나, 지우는 등의 작업을 원한다면 해당 명령어를 찾아 작성해야한다.
일단 이런식으로 배열이라는 서랍속의 데이터를 관리할 수 있는것이다!
반복문과 배열을 함께 활용한 예
<body>
<h1>Loop & Array</h1>
<script>
var fruits = ['apple','banana','pair','kiwi'];
// fruits이라는 서랍 속에는 이 네 가지 데이터들이 들어있다!
</script>
<h2>Fruits</h2>
<ul>
<script>
var i = 0;
// 변수값 i는 0으로 시작!
while(i < fruits.length){
// 변수 i 가 fruits 갯수보다 작을때,
document.write('<li><a href="http://a.com/'+fruits[i]+'">'+fruits[i]+'</a></li>');
// 'http://a.com/i번째데이터이름'이라는 페이지 링크가 걸려있는 i번째 데이터를 출력해라.
i = i + 1;
// 그렇게 해당 변수에 1을 더한것이 최종 변수가 되며
// 그 최종변수는 다시 맨 처음으로 올라가 코드에 몸을 맡긴다..
// false가 나올때까지 반복!
}
</script>
</ul>
</body>위 코드의 결과물은
짜잔 ^____^
함수의 리턴(Return)
함수의 리턴이란 함수가 어떠한 기능을 수행한다음 그 결과를 호출한 곳으로 돌려주는 것을 말한다. 한번 실행 된 함수는 제 명을 다하고 죽어버리기(?)때문에 지속적으로 함수를 사용하길 원한다면 원하는 만큼 매번 호출해줘야하는 번거로움이 있는데, 이 return문을 이용하면 데이터를 반환해주는것은 물론이고 변수를 선언해 저장할 수도 있다. 그렇기 때문에 아주 다양한 맥락에서 활용이 가능하다는 말씀.
리턴을 이용하기 전
function sum(num1, num2){
console.log(num1 + num2);
}
sum(10, 20); 위 코드를 실행하면
30 이라는 값을 출력하고 함수는 아예 종료됨. 꽥
리턴을 이용한 후
function sum(num1, num2){
return num1 + num2;
}
const sum_result_1 = sum(10, 20);
console.log(sum_result_1); 
return문을 사용해 코드를 실행한뒤 sum이라는 함수의 값을 sum_result_1이라는 변수에 저장까지 했기때문에
sum_result_1을 달랑 입력해도 30이라는 값을 얼른 꺼내서 보여준다.
리턴을 이용한 또 다른 예시
function sum(num1, num2){
return num1 + num2;
// 어이! sum안에 있는 두 값을 더한 다음 잘 운반하라고~
}
const sum_result_1 = sum(10, 20); // 넹. 두 값을 더한 30이라는 값을 sum_result_1에 저장할게요!
const sum_result_2 = sum(20, 30); // 넹. 두 값을 더한 50이라는 값을 sum_result_2에 저장할게요!
const sum_result = sum_result_1 + sum_result_2;
// sum_result는 sum_result_1과 sum_result_2를 더한 값이야!
// 30이랑 50 아직 잘 보관중이지. 그러니 최종값은 80이겠네~
colsole.log("총 합은" + sum_result + "입니다.");
// 그래 그럼 이 형식으로 출력해봐.
삐빅- 잘 운반된 후 출력도 완료
휴
정리하는데 꼬박 10시간정도가 걸렸는데 다들 이렇게 쓰는걸까?
아님 내 글의 내용이 너무 길었나?
다른사람들은 더 긴 것 같던데..
하긴 나도 하루만에 배우고 이해한 내용은 아니니까..
으음 남들 하는거 쳐다보지 말고 비교하지 말라지만
어찌 그럴래야 그럴수가 있겠나 눈이 달려있고 귀가 뚫려있는걸ㅎㅎ;
쩝 매일 매일 좌절의 연속이다.
그래도 이렇게나마 정리하면서 80퍼센트에 가깝게 이해를 해냈다는점에 대해서는
뿌듯해하기 충분하다고 생각 된다.
불온전한 소프트웨어를 가지고 아주 피나는 노력을 하고 있구나, 나야
그것도 완벽에 가까운 소프트웨어들 사이에서 말이야...............
프로그래밍 공부하면서 모르는 것 검색해보면 '기초' '왕초보'등의 단어를 보고 들어간건데도
전문용어가 남발하고 길고 복잡한 설명이 줄줄 흘러내려서 매번 절망한다.
그래서 부디 부디 부디
내가 이렇게 유치한 수준의 언어로 정리한 글을 보고
누군가는 조금이라도 도움을 받았으면 좋겠다.
코딩을 하면서 '미쳤다ㅋㅋ 이걸 자유자재로 다룰 수 있게된다면 진짜 얼마나 재밌을까' 하는 생각을 백번쯤 한것같다
이전에 3d모델링 프로그램을 처음 배울 때도 딱 이 생각 했었는데
어느정도 다루게 된 후 얼마나 짜릿했는지 모른다 희희
손이 머뭇거리지않고 거침없이 날아다닐때의 그 기분은.. 정말 설명할 형용사를 찾기 어려울 정도의 희열과 쾌감이었는데.
근데 사람들은 여기에다 이모티콘도 넣고 하던데 그건 어떻게하는거지?
공부할 게 투성이다
위코드 본 과정 시작이 2주 남았다
개강 전에 우리 팀의 두번째 오프라인 모임을 할 것 같은데
나는 하필 발목을 크게 다쳐버려서 걱정이다. 갈 수 있을까.. 못 갈 것 같다.......
병원에서 최대한 걷는 일을 삼가라고 했다. 앉아만 있어도 아래로 피가 쏠려서 아프다.. 이걸 핑계로 누워만있고싶지만 포스트를 작성해야했고 자기소개페이지를 다듬어야했다 자바스크립트 진도도 나가야한다.
아무튼 그래도 첫번째 오프라인 모임에 참석했어서 참 다행이다
사이버친구같던 팀원들이 내 옆에 실재한다는 것을 보여준 매우 역사적인 날이였는데 겔겔겔
좌우지간
할일도 걱정도 태산이다
근데왜지금 새벽두시냐
로운님 잘봤어요👍