JavaScript
조건문
•
switch ~ case
◦
case 조건 값 1:
처리구문
break
switch (값) {
case 조건 값 1:
처리구문
break
case 조건 값 2:
처리구문
break
default:
처리구문
}
JavaScript
복사
◦
학점 계산
let score = prompt('학점을 입력하세요')
switch (Math.floor(score / 10)) {
case 10:
case 9:
alert("A");
break;
case 8:
alert("B");
break;
case 7:
alert("C");
break;
default:
alert("F");
}
JavaScript
복사
◦
삼항 연산자
let chk = num_1 % 2 == 0 ? '짝수' : '홀수'
JavaScript
복사
배열
•
배열: 변수들의 묶음 ⇒ 의미가 유사한 데이터의 묶음
◦
예시: arr 배열
0x111 | 0x112 | 0x113 | 0x114 | 0x115 | 0x11n | |
요소 | 1번째 요소 | 2번째 요소 | 3번째 요소 | 4번째 요소 | 5번째 요소 | ……. n번째 요소 |
인덱스 | arr[0] | arr[1] | arr[2] | arr[3] | arr[4] | …arr[n] |
•
example code
let arr1 = [1, 2, 3]
console.log('arr1 => ', arr1, typeof(arr1))
JavaScript
복사
•
배열 컨트롤 : 참조(접근), 개수, 요소 추가, 요소 삭제
let arr3 = [1, 2, 3, 4, 5]
console.log('arr3 배열의 첫번째 요소값 => ', arr3[0])
console.log('arr3 배열의 마지막 요소값 => ', arr3[4])
console.log('arr3 배열의 마지막 요소값 => ', arr3[arr3.length - 1])
console.log('arr3 배열의 요소의 개수 => ', arr3.length)
JavaScript
복사
•
배열의 요소를 추가 : 배열.push() → 마지막 index 다음에 추가
// 배열의 요소를 추가 : 배열.push() -> 마지막 index 다음에 추가
arr3.push(10)
console.log(arr3)
console.log(arr3.length)
JavaScript
복사
•
배열의 특징 index에 위치한 값을 제거(삭제) + 배열.splice(index, 제거하고자 하는 요소의 개수)
// 배열의 특징 index에 위치한 값을 제거(삭제)
// 배열.splice(index, 제거하고자 하는 요소의 개수)
arr3.splice(2, 1)
console.log(arr3)
console.log(arr3.length)
JavaScript
복사
반복문
•
for 반복문
for (let i = 0; i < 5; i++) {
console.log(i)
}
JavaScript
복사
•
모든 요소를 처리해야 하는 경우
for (const item in arr3) {
console.log(arr3[item])
}
console.log('=================================')
for (let item of arr3) {
console.log(item)
}
JavaScript
복사
•
while 문
// while (반복의 조건 bool) {}
console.log("while")
let num = 0
while (num < 5) {
console.log(num)
num++;
}
JavaScript
복사
•
1부터 더해나가면서 합이 100이 최초로 넘어갈 때 마지막 입력값 찾기
// 1부터 더해나가면서 합이 100이 최초로 넘어갈 때 마지막 입력값을 찾아보자
let sum = 0
let n = 1
while (true) {
sum += n
if (sum >= 100) {
console.log(n, '을 더했을 때 최초 100이 넘어갑니다. 합은', sum)
break
}
// console.log(n)
n++
}
JavaScript
복사
•
하이 로우 게임
const rand_num = Math.random()
const real_num = Math.floor(rand_num * 100) + 1
let cnt = 0;
while (true) {
cnt++
if (cnt > 10) {
alert('Game Over!!!')
break
}
// 숫자를 입력 받고 hi/row 체크
let num = Number(prompt('숫자를 입력하세요'))
if (isNaN(num)) {
alert('올바른 숫자를 입력하세요.')
} else {
if (num > real_num) {
alert('row')
} else if (num < real_num) {
alert('high')
} else {
alert('정답입니다.')
break
}
}
}
JavaScript
복사
함수
•
함수
◦
특정 목적을 수행하기 위한 코드들의 집합
◦
필요에 따라 값을 받아서 처리 (매개변수 정의)
◦
필요에 따라 처리된 결과를 반환 (return 값)
•
함수 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js_function1</title>
<script>
// fn1()
// 함수 : 특정 목적을 수행하기 위한 코드들의 집합
// 필요에 따라 값을 받아서 처리 ( 매개변수 정의 )
// 필요에 따라 처리된 결과를 반환 ( return 값 )
// function 식별자() {} => 선언적 함수 정의
// fn1 함수 => 안녕하세요 alert 을 출력하는 함수
function fn1() {
alert('안녕하세요')
}
// fn2 실습
function fn2(age) {
array.forEach('안녕하세요! ' + uname + '입니다.')
}
// 나이를 입력 받아서 성인 여부를 출력하는 ㅎ마수
function chk_age(age) {
if (age >= 19) {
alert('성인 입니다,. 입장이 가능합니다')
} else {
alert('미성년자는 출입이 불가합니다.')
}
}
// 출생연도를 입력받아서 성인 여부를 판단하고
// 성인일 때 true, 미성년일 때 false 함수
function chk_age(age) {
let result = false
// if (age >= 19) {
// resule = true
// }
// return result
return age >= 19
}
let chk = chk_age(30)
// fn2('손흥민')
// check_age(25)
// 함수 => 1급 객체
const fn3 = function () {
alert('HI~!!!')
}
// fn3()
// fn1()
// 숫자 두 개를 전달 받아서 사칙 연산의 결과를 출력하는 함수
function calc (num1, num2) {
console.log('더하기 결과', num1 + num2)
console.log('빼기 결과', num1 - num2)
console.log('곱하기 결과', num1 * num2)
console.log('나누기 결과', num1 / num2)
console.log('나머지 결과', num1 % num2)
}
calc(12, 6)
</script>
</head>
<body>
</body>
</html>
JavaScript
복사
•
매개변수 : 함수가 호출될 때 받는 값을 저장하는 변수
•
가변 매개변수: 호출할 때 매개변수의 개수가 고정이 아닌 가변일 때 사용
•
전달되는 값들 중 가장 큰수를 반환하는 함수 만들기
// 전달되는 값들 중 가장 큰수를 반환하는 함수를 만들어보기
function getMaxNumbers(...nums) {
let maxNum = nums[0]
for (num of nums) {
if (maxNum < num) {
maxNum = num
}
}
return maxNum
}
console.log(getMaxNumbers(1, 12, 5, 9))
JavaScript
복사
•
기본 매개변수
function test3(name, age = 19, gender = 'M') {
// age = age || 30
// gender = gender || 'M'
console.log(name)
console.log(age)
console.log(gender)
}
console.log('=====================')
test3('king')
console.log('=====================')
test3('king', 20)
console.log('=====================')
test3('king', 20, 'F')
JavaScript
복사
•
매개변수로 시급과 시간을 입력받아 급여를 계산하는 함수 만들기
function earnings(name, wage = 20000, hours = 40) {
console.log("============")
console.log(`이름: ${name}`)
console.log(`시급: ${wage}`)
console.log(`근로시간: ${hours}`)
console.log(`급여액: ${wage * hours}`)
}
earnings('손흥민', 12000, 30)
earnings('김민재', 15000)
JavaScript
복사
•
콜백 함수
◦
함수의 매개변수로 전달되는 함수 ⇒ 콜백 함수
◦
동기화 ⇒ 함수 호출 함수 모든 기능을 수행할 때까지 대기 후 실행
◦
비동기 ⇒ 웹 기반 통신 (Rest API), promise
•
콜백 함수 예제
function callTenTimes(callback){
// callback = function(i){
// console.log(`${i} 번째 함수 호출`)
// }
for(let i = 0; i < 10 ; i++){
callback(i)
}
}
callTenTimes(
function(i){
console.log(`${i} 번째 함수 호출`)
}
)
const callBackFn = function(val, index){
console.log(index, val)
}
const cfn1 = function(val, index, temp){
return val % 10 * 100
}
const cfn2 = function (num) {
return num % 2 == 0
}
let arr = [11, 12, 13, 14, 15, 16, 17, 18, 19]
arr.forEach(callBackFn)
let arr1 = arr.map(cfn1)
console.log('arr1 >>> ', arr1)
let arr2 = arr.filter(cfn2)
console.log('arr2', arr2)
JavaScript
복사