일주일 동안 복습하다가 겨우 수업 시작 전날 과제를 제출했었다.
뼛속까지 문과사람이라 함수 이런 거 듣기만 해도 닭살이 돋는다. 코드컴뱃 게임을 해보면서 느낀게 용어에 대한 적응도 적응이지만 수학적인? 사고도 어느정도는 필요한 것 같다. ( 나는 아니.. 😂)
그래도 어떻게 하나 ㅋㅋㅋ 이걸 배워야 동적인 다이나믹한 웹 사이트를 만들 수 있다는 데 뭐..
코딩 실습을 위해 진도를 스피디 하게 나갔기 때문에, 이렇게 복습해 보면서 모르는 부분이 듬성듬성 더 생겨나 버렸다. 일단 욕심을 버리고 연습 문제를 혼자 풀어냈다는 것에 만족한다.
1. Javascript
- 자바스크립트란? 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어.
- 버튼을 클릭했을 때 경고창을 띄워 보기. 1)과 2)는 서로 연결된다.
: 1) 함수를 만들어 두기 - < script > < /script > 안에!
: 2) 버튼에 함수를 연결하기. 연결하고자 하는 데는 버튼 쪽이니까 그 쪽에다가 자바스크립트 언어를 넣는 것이다. 버튼을 누르면 함수가 호출된다.function hey(){
alert('안녕!');
}'안녕!' 이라는 알람을 띄우는 기능의 함수.
hey는 함수의 이름이며 기능이나 역할을 짐작케 한다.
alert 는 어떤 기능을 하는지 알 수 있고 '안녕!'은 기능이 표시하는 것을 가리킨다.
<button onclick="hey()" type="button" class="btn btn-primary">기사저장</button>2. 크롬 개발자도구 Console 을 이용한 문법 배우기.
2-1. 변수 대입( a = 2 )의 의미:
- "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
2-2. let 으로 변수를 선언한다.
- 자매품 var 도 있는데 일단 그냥 let을 사용하자.
let num = 20
num = 'Bob'
// 변수는 값을 저장하는 박스이다.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣는다.
2-3. 사칙연산, 문자열 더하기
- 문자열의 경우는 ' ' 따옴표를 붙이는구나~
let a = 1
let b = 2
a+b // 3
a/b // 0.5
let first = 'Bob'
let last = 'Lee'
first+last // 'BobLee'
first+' '+last // 'Bob Lee'
first+a // Bob1 (문자와 숫자가 합쳐지는 경우, 문자열로 변환)
3. 변수명을 짓는 법
- 자바스크립트에서는 카멜 케이스를 사용한다.
let first_name = 'bob' // snake case ( python 방식 )
let firstName = 'bob' // camel case ( javascript 방식 )
4. 변수의 자료형
4-1. 리스트 : 순서를 지켜서 가지고 있는 형태. [ ] 사용. 숫자, 문자열, 딕셔너리 들어간다. 배열 (array).
-
나는 이것들을 순서가 중요하게 묶어 놓겠다 할 때 사용한다.
let aList = ['수박','딸기','참외']
여기서 나는 수박의 값을 불러오고 싶다면, aList[1];
어 이렇게 하니까 '딸기' 가 나온다. aList[1] = '딸기'
컴퓨터는 순서를 셀 때, 0 부터 센다!
그럼 다시 수박의 값을 불러오려면?aList[0] = '수박'
그런데 갑자기 나는 '포도' 를 저 aList 에 넣고 싶어!! 구글에 '자바스크립트 배열 추가' 를 검색해 보니까 push 라는 단어가 나온다.
aList.push('포도') ------> 오, 들어갔다! aList = ['수박','딸기','참외','포도']
aList.length 를 하면 결과값 4를 낸다.let bList = ['철수','영희'] 를 갑자기 만들었고 이 bList를 aList 에 넣어주고 싶다면?
aList.push(bList)------> 결과값 6이 아닌 5를 낸다. bList 자체를 하나로 본다.
aList = ['수박','딸기','참외','포도',['철수','영희']];
aList[4] = ['철수','영희'];저기서 난 철수만 꺼내서 값을 보고 싶은데? 할 땐..
aList[4][0] = ['철수'];
결론 : 리스트 안에 리스트를 넣을 때는 '리스트'가 들어감. 즉 묶음으로써 들어간다는 의미!
4-2. 딕셔너리: 키(key)-밸류(value) 값의 묶음
-
아래 예시를 보도록 하자.
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력키와 밸류가 쌍으로 되어 있고, 왼쪽을 호출 했을 때 오른쪽을 돌려주는 것 (반대로는 불가)
중괄호와 키, 밸류 사이의 : 틀리지 않게 주의!!
4-3. 리스트와 딕셔너리의 조합
-
aList 에 b_dict를 넣어보자
aList = ['수박','딸기','참외','포도',['철수','영희']];
aList.push(b_dict);
aList = ['수박','딸기','참외','포도',['철수','영희'],{'name':'Bob','age':21}];
여기서 bob의 값을 꺼내려면??
aList = [5]['name'];
'Bob'
5. Boolean(참거짓) 자료형
- 참과 거짓, 주로 조건문과 같이 쓰인다.
- 0을 boolean으로 형변환하면 false가 되고 1을 형변환하면 true가 되기 때문에 조건문 내부에 0이나 1을 넣어도 정상적으로 동작한다.
- false 가 되는 특정한 값 : 0, ""(빈 문자열), undefined, null, NaN
let age = 17; ( age 를 17 로 선언, 17을 age 에 넣어주었다 )
let is_adult = age > 18; ( 두번째 선언, is_adult 를 18 보다 높은 age 로 넣음 )
is_adult ------> enter ------> 값은 false 가 나온다.
6. 그 외 제공되는 기본 함수들
6-1. 예를 들면, '나눗셈의 나머지'를 구하고 싶은 경우
- 나눗셈의 나머지
let a = 20
let b = 7
a % b = 6
6-2. 또, 모든 알파벳을 대문자로 바꾸고 싶은 경우
- toUpperCase() 소문자는 ? 찾아봐~
let myname = 'spartacodingclub'
myname.toUpperCase() // SPARTACODINGCLUB
6-3. 또, 특정 문자로 문자열을 나누고 싶은 경우
- 문자열 나눌 때는 .split
let myemail = 'sparta@gmail.com'
let result = myemail.split('@') // ['sparta','gmail.com']
result[0] // sparta
result[1] // gmail.com
let result2 = result[1].split('.') // ['gmail','com']
result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com
myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!
6-4. 특정 문자로 합치고 싶은 경우
- 문자열 합칠 때는 .join
let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
7. 함수 (function)
7-1. 함수란?
-
함수의 정의
: 어떤 기능을 정의해서 반복적으로 사용하기 위한 것.
고려할 것은 항상 입력값을 넣고 그에 대한 출력값을 어떤 형식으로 할지 정하면 된다고 함. -
함수의 기본 형태
function name(입력값) {
return 입력값 + 10 ;
}
name(10) // 결과 20
// 입력값에 대한 출력값은 return으로 받아준다. -
함수의 다른 예시
function f(x) {
return 3*x+2;
}
y = f(5)
console.log(y) ------> 콘솔에 괄호 안의 값, y 를 출력해라 라는 뜻.function sum(a, b) {
return a + b; -------------> 뭔가 실행하라는 것, 둘을 더한 값을 돌려줘라 라는 뜻.
}
let result = sum(1,2);------>함수식에 의해서 결과값이 달라짐에 따라 다양한 값을 낼 수 있다.
result = 3 -
연습
function sum(a,b) {
alert('더하기를 시작하지:' + a + ' + ' + b);
return a + b;
}
console.log(sum(x, y)); --------> 값이 콘솔창에 표시되면서 경고 창이 나온다.
7-2. 리턴이 있는 함수 vs 없는 함수
- 잘 이해가 되지 않는 부분이다. 하지만 걱정하지 않는다. 어디서 또 튀어나오겠지.
참고 블로그
8. 조건문 (if)
8-1. 일반적인 조건문의 형태
-
기본
if ( 조건식 ) {
명령문 e.g) console.log(' ');
} -
여기서 조건식이 true이면 if문 안의 명령문을 실행하고 false이면 if문 안의 명령문을 무시한다.
조건이 여러개인 상황이 있을 수 있으므로 그러한 경우에는 else if와 else를 사용하면 된다.if( 조건식 ) {
명령문
} else if( 조건식 ){
명령문
} else{
명령문
} -
각각 if와 else if의 조건을 따져보고 해당하는 것이 없다면 else에 있는 명령문을 실행하게 된다. else if는 갯수 제한이 없다.
8-2. 함수와 함께 사용
- 함수의 기능 생각 및 응용해보기
// 함수를 정의하기
function check_adult(person) {
if (person['age'] > 20){
return true;
} else {
return false;
}
}
// 함수를 사용하기
let person = {'name':'bob','age':24}
let result = check_adult(person);
result // true8-3. AND 조건과 OR 조건
- 심플 설명 (캬아.. 명료하다..)
: 자바스크립트 논리 연산자는 값을 True, False로 반환한다. || 연산자는 둘 중 하나만 True여도 전체를 True 반환한다.(OR조건) && 연산자는 둘 다 True이면, 전체를 True로 반환한다.(AND조건)
: ! X 연산자는 수학의 ~(NOT)과 같다. X값이 true이면 false를 반환하고, X값이 false이면 true를 반환한다.
// 나이가 20보다 크고 30보다 작은 경우 true
function check_adult(person) {
if (person['age'] > 20 && person['age'] < 30){
return true;
} else {
return false;
}
}
// 나이가 20보다 작거나, 30보다 크면 true
function check_adult(person) {
if (person['age'] < 20 || person['age'] > 30){
return true;
} else {
return false;
}
}9. 반복문 (for)
9-1. 반복문의 기본 형태
-
콘솔창에 일일이 0부터 99까지 console.log(0)...(99); 까지 찍을 수 없는 법이다. 반복문을 왜 쓰는가? 수많은 반복적인 기능을 자동화 하는데 있지 않을까?
for (시작 ; 끝 ; 실행내용) {
실행에 따른 출력값
} -
그럼 반복문으로 0부터 99까지 콘솔에 출력하게끔 해보자. 단 세줄로 끝난다.
for (let i = 0; i < 100; i++) {
console.log(i)
} -
기본 공식이라 생각하면 된다.
i = 0 이 가지는 의미는 i가 0 부터 출발할 거다 라는 의미이고, i < 100 은 i가 어디까지 가나?? i가 100보다 작은데 까지만 (99까지) 갈거다.
그리고 i++ 이것은 i를 1씩 증가시켜준다는 것을 의미한다. 만약 2씩 증가 시키고 싶다면, i = i + 2 (아직 줄여서 표시하는게 낯설다) 이렇게 하면 짝수를 찍게 될 것이다.
9-2. 반복문의 메커니즘
-
for 문에서
for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}
1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3와 같은 순서로 실행된다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나온다.
9-3. 반복문의 주요 예제
-
반복문은 단순히 숫자를 찍어내는 형식보다도 배열(리스트)이나 딕셔너리와 결합된 형태로 쓰인다.
배열 내의 사람들을 하나씩 출력하기.
let people = ['철수','영희','민수','형준','기남','동희']
for (let i = 0 ; i < people.length ; i++) {
console.log(people[i])
}리스트 내의 딕셔너리['name'],['score']를 하나씩 출력하기
let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]
for (let i = 0 ; i < scores.length ; i++) {
console.log(scores[i]);
}만약 영희를 출력하고 싶다면, console.log(scores[1]['name']) 이 되겠지!
점수가 70점 미만인 사람들의 이름만 출력하기
for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}
10. Javascript 연습문제 풀어보기
10-1. 1,2,3,4 .. 높여가며 숫자를 보여주는 onclick 함수 만들어보기 (clear)
10-2. 배열에서 원소의 갯수를 세기 (clear)
10-3. 0부터 n-1 까지 더하는 함수를 만들기
- 오류를 일으킨 부분
1) 전체 합계의 기본값을 0으로 선언하는 부분을 반복되는 for 문 안에 집어넣고 돌렸다.
2) 더해서 반복만 하면 되는데 여기에서 if문을 넣고 () 안에 뭘 넣어야 되나 고민했다.
3) totalSum 의 n 값은 함수에서 임의의 n 이다.
10-4. 미세먼지의 값이 50미만인 서울 구 이름과 값을 출력하기
- 오류를 일으킨 부분
1) for 문 작성에서 괄호를 빼먹었다.
2) console.log(guName, guMise); 를 for 문 바깥에 두었다.
3) 인간은 같은 실수를 반복한다.
10-5. 자전거(parkingBikeTotCnt)가 5개 이하인 정류장의 이름을 출력하기 (clear)
반복문과 if 문으로 특정 원소를 출력하게 할 수 있으며, 어떤 값을 넣더라도 원하는 결과값을 얻기 위해 함수로 만들어 볼 수 있어야 한다.
