2021. 12. 29. 04:16ㆍFront-end
태어나서 처음으로 코딩을 배운지 2~3일이 지났다.
스파르타코딩클럽에서 항해99를 하고있는데
음... 쉽지않다.
아니 처음에는 쉬운줄 알았다.
html과 css까지는 괜찮았다.
하지만
자바스크립트를 시작하자마자 갑자기 머리가 띵했다.
함수, 변수, 조건문, 반복문...
음 잘 모르겠다.
강의를 들어도 잘 모르겠다.
나... 어떡하지...?
나중에 혹시 필요할까봐 밑에 적어놓는다. 나를 힘들게 만들었떤 1주차 14강의시간...
일단! 넘어가보자~

함수
기본 생김새
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
예시
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3
조건문
20 보다 작으면 작다고, 크면 크다고 알려주는 함수
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else {
alert('청소년이에요')
}
}
is_adult(25)
if, else if, else if, else if else
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12)
AND 조건과 OR 조건!
// AND 조건은 이렇게
function is_adult(age, sex){
if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}
// 참고: OR 조건은 이렇게
function is_adult(age, sex){
if (age > 65 || age < 10) {
alert('탑승하실 수 없습니다')
} else if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}
is_adult(25,'남')
반복문
예를 들어 0부터 99까지 출력해야 하는 상황이라면!
console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
...
console.log(99)
// 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.
for (let i = 0; i < 100; i++) {
console.log(i);
}
for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}
1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
그러나 위처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트와 함께 쓰입니다.아래 예시를 볼까요? 일단 아래를 복사 붙여넣기 하고, 함께 코딩해볼게요
[코드스니펫] 반복문 예제1
let people = ['철수','영희','민수','형준','기남','동희']
let people = ['철수','영희','민수','형준','기남','동희']
// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
console.log(people[i])
}
리스트도 그냥 리스트가 아닙니다! 딕셔너리가 들어간 리스트와 찰떡이죠다시 아래를 복사 붙여넣기 해볼까요?
[코드스니펫] 반복문 예제2
let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]
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]);
}
// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,
for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
'Front-end' 카테고리의 다른 글
[Vue.js] 전역으로 선언 된 것 거꾸로 찾아가는 법...엥? (0) | 2022.07.05 |
---|---|
모달창 입력값 초기화 | vue.js (0) | 2022.06.08 |
[vue.js] v-if, v-else로 글씨바꾸기 (0) | 2022.06.03 |
JQuery+Ajax의 조합을 연습하자! 기본부터 (0) | 2021.12.30 |
html : 숙제 : 나만의쇼핑몰 메인 페이지 완성하기 (0) | 2021.12.29 |