2주차에 배운 내용을 정리해 봅시다.
(완성되지 않은 부분이 많습니다.)
- 기능
- 조건문
- 리본
기능
함수를 선언하는 세 가지 방법
하나) 함수 선언
2) 기능적 표현
삼) 화살표 기능
하나) 함수 선언
기본 구조
function 식별자 (매개변수) {
내용 ;
}js스토리지를 자동으로 관리합니다. 그리고 ‘승강기‘~라고 불리는 js전면 할당 메모리가 있다고 말합니다..
함수 선언문으로 선언된 함수는 거기에 저장되며 시작 시 즉시 생성됩니다..
따라서 함수 선언 전에 호출할 수 있습니다..
2) 기능적 표현
기본 구조
let helloWorld = function (매개변수) {
함수 내용
};식별자가 없는 익명 함수를 선언하고 변수에 저장. 번호 호출시 변수명()전화로. 함수이므로 변수명 뒤에 ()추가. 위 예시의 경우 헬로 월드(매개변수)호출 할 수 있습니다.
함수 선언과 달리 풀업되지 않습니다..
따라서 함수가 선언된 후에만 호출할 수 있습니다..
삼) 화살표 기능
기본 구조
let helloWorld = (매개변수) => {
함수 내용
};이번에는 전혀 기능대신 화살표를 추가하고 함수 표현식과 같은 익명 함수를 만들어 변수에 저장합니다..
함수 표현식처럼 헬로 월드(매개변수)의 형태로 호출
풀업되지 않으므로 함수 선언 이후에 호출할 수 있습니다..
+ 온클릭: html요소의 속성. 속성 값으로 자바스크립트의 기능 설정. 요소를 클릭하면 속성 값이라는 함수가 호출됩니다..
예)
+ 함수 외부의 변수를 함수 내부에서 사용할 수 있습니다..
매개변수로 보낼 필요가 없습니다.
helloWorld1();
function helloWorld1() {
console.log("helloworld1");
}
helloWorld1();
function helloWorld2() {
return "helloworld2";
}
console.log(helloWorld2());
function add(num1, num2) {
console.log("안뇽");
return num1 + num2;
}
console.log(add(1, 2));
let result = add(5, 5);
console.log(result);
function add2(num1, num2) {
console.log(num1 + num2);
}
let result_2 = add2(1, 2);
console.log(result_2);
// 함수표현식으로 한 함수는 꼭 선언문 이후에 호출
let helloWorld3 = function () {
console.log("helloworld3");
};
helloWorld3();
// 화살표 함수도 선언 이후에만 호출가능.
let helloWorld4 = () => {
console.log("helloWorld4");
};
helloWorld4();
// 매개변수있는 버전
function sayHello1(text) {
return "Hello " + text;
}
console.log(sayHello1("할로"));
function sayHello2(text, name) {
return `${text} ${name}`;
}
console.log(sayHello2("반가워", "지수"));
let sayHello3 = function (text) {
return "Hello " + text;
};
console.log(sayHello3("가현"));
let sayHello4 = (text, name) => {
return `${text} ${name}`;
};
console.log(sayHello4("반가워", "지수"));
let sayHello5 = () => {
console.log("Hello!");
};
sayHello5();
function multifly(num1, num2) {
return num1 * num2;
}
let multifly2 = function (num1, num2) {
return num1 * num2;
};
let multifly3 = (num1, num2) => {
return num1 * num2;
};
console.log(multifly(1, 2));
console.log(multifly2(2, 3));
console.log(multifly3(2, 4));
// 별표 두개 하면 제곱임
// ex) num ** 2 => 2제곱 num ** 3 => 세제곱
const SQUARE = (num) => {
console.log(num ** 2);
};
SQUARE(3);
조건문
조건문 2가지
하나) 만약에 문
2) 스위치 문
하나) 만약에문
기본 구조
if (조건식) {
// 조건식이 참이면 실행
} else {
// 조건식이 거짓이면 실행
}
if (조건1) {
// 조건1이 참이면 실행
} else if (조건2) {
// 조건1이 거짓이면 조건2가 참이면 실행
} else {
//조건이 모두 거짓일 때 실행
}
삼용어 연산자
(조건문이 아니라 연산자입니다. 만약에요청의 특성상 함께 작성합니다.)
A ? B : C
A가 참이면 B실행, 거짓이면 C실행
+ js하다 0 <= 나이 <= 8 그렇지 않아.
0 <= 연령 && 연령 <=8 이것을해야합니다.
+ js정수 나눗셈은 없으며 항상 실제 나눗셈이 있습니다..
12미만 0, 12~보다 큰 1 (24보다 적게 예상)당신이 얻을 필요가 있다면
12값을 로 나눈 값 파싱인트()정수로 변환할 수 있습니다..
2) 스위치문
기본 구조
switch (변수) {
case 값1:
//변수와 값1이 일치하면 실행
break;
case 값2:
//변수와 값2가 일치하면 실행
break;
default:
//일치하는 값이 없을 때 실행
break;
스위치문은 자동으로 하나의 사건만 읽고 탈출하지 않습니다. 해당 사례로 이동하여 끝까지 읽으십시오..
이로써 사건 종결 부서지다우리 !
스위치() 변수를 괄호로 묶는 표현식을 묶을 수도 있습니다..
예) 스위치 (구문 분석(숫자 / 10))
// if 문
if (5 > 3) {
console.log("얍");
}
// prompt로 입력받은 수가 10보다 큰지 작은지 알려주기
// prompt로 입력받는 값은 문자임.
// 알림창을 띄워 데이터를 입력받음.
let number = Number(prompt("숫자를 입력해주세요."));
console.log(typeof number);
if (number > 10) {
console.log("이 수는 10보다 큽니다.");
} else {
console.log("이 수는 10보다 작습니다.");
}
if (number > 10) {
console.log("이 수는 10보다 큽니다.");
} else if (number === 10) {
console.log("입력한 수는 10이네요!");
} else {
console.log("입력한 수가 10보다 작습니다.");
}
// 프롬프트로 입력받은 점수의 등급 매기기
number = Number(prompt("점수를 입력해주세요."));
if (number > 100 || number < 0) {
console.log("입력값이 잘 못 됐습니다.");
} else if (number >= 90) {
console.log("A");-3-2
} else if (number >= 80) {
console.log("B");
} else if (number >= 70) {
console.log("C");
} else if (number >= 60) {
console.log("D");
} else {
console.log("F");
}
// 프롬프트로 나이를 입력받아 세대를 알려주기
let age = Number(prompt("나이를 입력하세요"));
if (age >= 20) {
console.log("성인입니다.");
} else if (age >= 17) {
console.log("고등학생입니다.");
} else if (age >= 14) {
console.log("중학생입니다.");
} else if (age >= 8) {
console.log("초등학생입니다.");
} else if (age >= 0) {
console.log("유아입니다.");
} else {
console.log("입력값이 잘 못 됐습니다.");
}
// 중첩 if 실습
let userId = "user01";
let userPw = "1234qwer";
function loginUser() {
let inputId = prompt("아이디를 입력해주세요.");
let inputPw = prompt("비밀번호를 입력해주세요.");
if (userId === inputId) {
if (userPw === inputPw) {
alert("로그인 성공");
} else {
alert("비밀번호가 틀렸습니다.");
}
} else if (inputId === "") {
alert("아이디를 입력하지 않았습니다.");
} else {
alert("아이디가 틀렸습니다.");
}
}
// 함수에서 사용하는 데이터를 매개변수로 보내주지 않아도 됨.
// 함수 안에서 함수 밖의 변수도 사용가능.
// switch문
// switch문은 자동으로 한 케이스만 읽고 빠져나오는 게 아니라 해당하는 케이스로 이동해서 끝까지 읽는다.
// 그러므로 케이스 끝에 break를 꼭 넣자 !
let a = 4;
switch (a) {
case 3:
console.log("a가 3이군요!");
break;
case 4:
console.log("a가 4이군요!");
break;
case 5:
console.log("a가 5이군요!");
break;
default:
console.log("a가 무슨 값인지 모르겠습니다.");
break;
}
number = Number(prompt("점수를 입력해주세요."));
switch (parseInt(number / 10)) {
case 10:
case 9:
console.log("A입니다.");
break;
case 8:
console.log("B입니다.");
break;
case 7:
console.log("C입니다.");
break;
case 6:
console.log("D입니다.");
break;
default:
console.log("F입니다.");
break;
}
number % 2 === 0 ? console.log("짝수입니다.") : console.log("홀수입니다.");
let now = new Date().getHours();
console.log(now);
// js는 정수나누기 없음. 무조건 실수로 나눠짐.
// 그러니까 12보다 작으면 0, 12보다 크면 1로 값을 얻어야 할 땐,
// 나누기를 하고 정수로 변환하면 됨.
parseInt(now / 12) === 0 ? console.log("오전입니다.") : console.log("오후입니다.");
리본
하나) ~을 위한문
2) ~하는 동안문
삼) 루프 제어 쉬다, 계속하다
하나) ~을 위한문
기본 구조
for (초기화식; 조건식; 증감식) {
실행문장
}
원래 자바같은.
초기화 표현식은 js의 변수 선언 방식에 따라 내가 = 0하자;
실행 순서 : 초기화 -> 조건식(틀리면 아웃) -> 실행문
-> 증가 감소 -> 조건식(틀리면 아웃) -> 실행문…
명령문이 실행된 후 조건을 증가 및 감소.
+ 백틱으로 서식을 지정하는 경우${}수식이나 함수를 삽입할 수도 있습니다..
예) ${a*b} ${helloWorld()}
+ 보다 효율적인 코드를 위해 &&은 잘못된발생할 때 종료되기 때문에 실제 사례가 적은 조건을 조건 앞에 추가하십시오..
||이 경우 많은 일이 진행됩니다. !
// 1부터 n까지의 합
let sum = 0;
let n = 11;
for (let i = 0; i < n; i++) {
sum += i + 1;
}
console.log(sum);
// 배열의 요소를 모두 출력해보기
let fruits = ("사과", "배", "포도", "망고");
for (let i = 0; i < fruits.length; i++) {
console.log(fruits(i));
}
// 배열의 요소의 합 더하기
let numsArr = (90, 50, 30, 20, 11);
let numsSum = 0;
for (let i = 0; i < numsArr.length; i++) {
numsSum += numsArr(i);
}
console.log(numsSum);
// 1~20 짝수일 때의 합 구하기
sum = 0;
for (let i = 1; i <= 20; i++) {
if (i % 2 === 0) sum += i;
}
console.log(sum);
// 10000까지의 숫자 중 13의 배수이면서 홀수인 숫자를 찾자.
// for문과 if문의 중첩 사용
for (let i = 0; i <= 10000; i++) {
if (i % 13 === 0 && i % 2 === 1) console.log(i);
}
// prompt로 입력받은 수까지 13의 배수이면서 홀수인 숫자를 찾자.
number = Number(prompt("숫자를 입력하세요."));
for (let i = 0; i <= number; i++) {
// &&은 false가 나타나는 순간 끝내므로 참인 경우가 더 적을 조건을 앞으로 쓰자.
if (i % 13 === 0 && i % 2 === 1) console.log(i);
}
// 구구단 출력
for (let i = 2; i < 10; i++) {
console.log(`---${i}단---`);
for (let j = 1; j < 10; j++) {
console.log(`${i} * ${j} = ${i * j}`);
}
}
// 0~100 중에서 2 또는 5의 배수 총합 구하기
sum = 0;
for (let i = 0; i < 101; i++) {
if (i % 2 === 0 || i % 5 === 0) sum += i;
}
console.log(sum);
2) ~하는 동안문
기본 구조
while(조건문) {
실행문장
}조건문의 변수를 변경하는 문장은 실행문에 포함되어야 합니다..
하는 동안
기본 구조
do {
실행할 문장
} while (조건식)하는 동안문은 먼저 문을 실행한 다음 조건을 확인하여 문을 적어도 한 번 실행합니다..
삼) 루프 제어 쉬다, 계속하다
부서지다루프를 떠난다
계속해현재 반복을 종료하고(계속 가그녀를 만난 순간 난 한가운데서 멈췄어) 다음 반복으로 이동.
+ 확인하다()기능은 경보어떻게 ()텍스트가 있는 창을 엽니다..
확인 시 true를 반환하고 취소 시 false를 반환합니다.
// while
let n2 = 1;
while (n2 < 5) {
console.log(n2);
n2++;
}
n2 = 10;
while (n2 >= 1) {
if (n2 % 2 === 0) console.log(n2);
n2--;
}
n2 = 1;
while (true) {
console.log("안녕");
if (n2 === 10) break;
n2++;
}
// confirm()함수는 alert처럼 ()안의 문구가 씌인 창을 띄운다.
// 확인을 누르면 true, 취소를 누르면 false를 반환한다.
n2 = 0;
while (confirm("계속 진행")) {
n2++;
alert(`${n2}번째 alert창`);
}
// continue
let sum3 = 0;
for (let i = 0; i < 10; i++) {
if (i % 2 === 0) {
continue;
}
sum3 += i;
}
console.log(sum3);