Javascript 와 인사하기!
처음 배우는 프로그래밍 언어(컴퓨터에게 명령을 내리고 소통할 수 있는 언어)이자, 브라우저가 알아들을 수 있는 유일한 언어이다. (여담으로 java와 javascript는 관련이 없다고 한다.ㅋㅋ)
<style>을 만들고 CSS를 적었던 것처럼, <script> 를 새롭게 만들어서 자바스크립트를 집어넣는다.
버튼을 onclick 했을때, "hey()" 라는 함수를 지정하고, 스크립트에서
function hey(){alert('안녕!!')}![] 을 적어서 hey라는 함수가 불렸을 때, '안녕!!'이라는 경고창을 뜨게 해봤다.
<script>
function hey(){
alert('안녕!!')
}
</script>
<div class="jumbotron">
<p class="lead">
<a onclick="hey()"class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
</p>
</div>
이때 사용하기 편리한 것이 크롬의 '개발자 도구'이다!
개발자도구는 우클릭 > 검사를 누르면 실행시킬 수 있는데, 여기서 console 창은 자바스크립트의 동작을 바로바로 실행해볼 수 있는 창이다. 그리고 이것은 우리가 script에서 썼던 코드와 맞닿아 있다고 생각하면 된다.
개발자도구를 통해 자바스크립트 기초문법 연습해보기
let : 변수와 기본 연산 (변수의 이름은 알아보기 쉽게 정의하도록 하자!)
let a = 2 는, a를 2로 정의하자는 의미이다. 그렇다면 밑쪽에 반복되는 기본 연산은 당연한 값이 나온다. 이제 문자열(작은따옴표)을 사용해서 내 이름을 간단히 써보자.
let first_name = 'dasom', let last_name = 'lee' 는, 나의 이름을 '다솜'으로, 성을 '이'로 하자는 의미이다. 이렇게 변수값을 지정해놓고, first_name + last_name + 5를 한다면? 당연히 dasomlee5가 나온다! 쏘 심플 !
list : 순서를 지켜서 가지고 있는 형태 (list는 꺽쇠를 [...] 사용한다!) 또, 컴퓨터는 숫자를 0부터 센다 0,1,2,3,4,5 ... 따라서 [3]번째는 2 가 된다.
이어서 let a_list = ['수박', '참외', '배'] 는 a_list가 '수박','참외', '배' 순서로 변수로 정의한다는 의미이다. 따라서 a_list의 [0]번째는 수박, [1]번째는 참외, [2]번째는 배가 되고, [3]번째는 undefined 없다.
이때, list 함수에 변수를 추가하고 싶다면, .push('...')를 추가하면 된다.
이미 정의된 a_list 함수에 .pust('감')이라는 변수를 추가했더니, 최종적으로 a_list는 (4) '수박', '참외', '배', '감'순서의 리스트인 것이다.
dic(dictionary): 키(key)-밸류(value) 값의 묶음. (dic은 중괄호를 {...} 사용한다!)사전으로 뜻을 정의하듯이, 키-밸류 값을 묶어서 정의해준다고 생각하면 된다. 또, a_dict 함수와 a_list 함수는 서로의 요소가 될 수 있다. 이것은 순서를 표시하고 정보를 묶을 수 있어서 아주 유용하다!
let a_dict = {'name': 'bob', 'age': 27} 은, '이름'이 '밥'이고 '나이'가 '27살'인 사람을 묶어서 정의한 것이다. 그렇다면, a_dict['name']은 당연하게, 'bob'이고 a_dict['age'] 는 27일 것이다. 여기서 밥의 키 '185'를 추가하고 싶다면, a_dict['height'] = 185를 적어주면 된다!
자, 이제 위에서 만들어 놨던 과일 리스트를 'fruits' 라는 묶음으로 정의하고 더해보자. a_dict['fruits'] = a_list
최종적으로 a_dict은 {name: 'bob', age: 27, height: 185, fruits: Array(4)} 인 묶음이 되는 것이다! 따라서 우리가 위에서 a_dict ['name'] 이름과 a_dict ['age'] 나이를 불러왔듯이, a_dict ['fruits']를 호출한다면, a_list가 불리게 된다.
그 외의 기본함수들
'나눗셈의나머지'를 구하고 싶은 경우
split: 특정 문자로 문자열을 나누고 싶은 경우
함수 function 알아보기
프로그래밍 상에서의 함수 function는 정해진 동작을 할 수 있게 하는 것이다. function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성한다
}
또, 함수 return 은 정해진 동작을 끝내고, 그 결과값을 기존 함수로 돌려주는 것이다. (정확하지 않음)
sum이라는 이름의 함수에게 필요한 변수를 num1, num2로 지정하고, return 이라는 함수를 추가하여 num1+ num2의 동작을 한 후 결과를 돌려주게 한다. 그런 다음, sum함수에 대한 변수를 2,3 으로 대입하면, result 값은 5가 된다.
이제 변수 num1,num2를 가진 mysum 이라는 함수를 정의하고,
alert '오늘도 안녕!' 이라는 경고 동작을 실행하게 한다. 그런 다음 return 으로 num1+ num2 의 결과를 돌려주게 한다. 그 결과는 작업하고 있는 페이지에 오늘도 안녕! 이라는 경고창이 뜨고, 확인 버튼을 누르면, 콘솔창에 result2로 지정된 mysum(2,3)의 값 5가 나오게 된다.
함수 if/else, AND/OR 알아보기
if문은 말그대로 만약~ 한다면의 조건문이다. else문은 그렇지않으면 ~ 이것이다.
age를 25로 정의한다. 만약 age가 20보다 크면 console.log 에 '성인 남성입니다' 라고 뜨게 하고, 만약 그렇지 않으면, console.log에 '청소년입니다'라고 뜨게 하자.
성별을 '남성'으로 정의한다. 만약 age가 20보다 크고 그리고(&&) 성별이 '남성'이면 console.log 에 '성인 남성입니다' 라고 뜨게 하고, 만약 그렇지 않으면, console.log에 '청소년입니다'라고 뜨게 하자.
만약 age가 20보다 크고 혹은(||) 성별이 '남성'이면 console.log 에 '성인 남성입니다' 라고 뜨게 하고, 만약 그렇지 않으면, console.log에 '청소년입니다'라고 뜨게 하자.
if와 else if문을 응용해서 쓴다면, 이렇게도 쓸 수 있다. 만약 우리가 let age = 10으로 정의한다면, if문의 결과값은 '청소년입니다'가 나올 것이다.
반복문 알아보기
for (let i = 0; i < 100; i++) {
console.log(i);
}
for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나온다.
i를 0부터 시작해서; 10이 되기 전까지; i를 더해나간다, 그리고 이 것을 매번 실행한다.
people 변수를 [철수,영희,민수,형준,기남,동희]라는 list라고 할때,
people의 길이는 6이다.
i를 0부터 시작해서; people.length가 되기 전까지; 콘솔창에 people[i]를 입력해나간다, 그리고 이 것을 매번 실행한다.
딕셔너리들을 모아둔 리스트를 돌면서, 필요에 맞는 딕셔너리를 If문으로 해당 값들을 찍어주는 것이 유용하다!
scores 라는 함수 이름을 지정하고, 'name'과 'score'이 묶여있는 딕셔너리를 리스트로 정했다. scores 에서 [0]번째는 {name: '철수', score:90}인 딕셔너리이고, scores에서 [1]번째의['score']은 85이다.
scores는 6개의 딕셔너리가 묶인 리스트이다.
i를 0부터 시작해서; scores.length가 되기 전까지; 콘솔창에 scores[i]를 입력해나간다, 그리고 이 것을 매번 실행한다.
그렇다면, scores리스트 안에 있는 6개 딕셔너리가 차례로 입력된다.
i를 0부터 시작해서; scores.length가 되기 전까지; 콘솔창에 scores[i]['name']를 입력해나간다, 그리고 이 것을 매번 실행한다.
그렇다면, scores리스트 안에 있는 6개 딕셔너리안의 ['name']이 차례로 입력된다.
i를 0부터 시작해서; scores.length가 되기 전까지; 콘솔창에 (name,score)을 입력해나간다, 그리고 이 것을 매번 실행한다.
이때 name 변수는 scores [i]번째의 ['name']문자열이고, score 변수는 scores [i]번째의 ['score']문자열이다.
그렇다면, scores 리스트 안에 있는 딕셔너리안의 ['name'],['score']문자열이 차례로 입력된다.
i를 0부터 시작해서; scores.length가 되기 전까지; , 그리고 이 것을 매번 실행한다.이때 name 변수는 scores [i]번째의 ['name']문자열이고, score 변수는 scores [i]번째의 ['score']문자열이다. 만약 score가 70보다 작다면, 콘솔창에 (name,score)을 입력해나간다 그렇다면, scores 리스트 안에 있는 딕셔너리안의 ['name'],['score']문자열이 차례로 입력된다.
