코리아 IT아카데미/Javascript·Jquery~~~
2일차 | 반복문, 함수
Sharon kim
2021. 12. 1. 21:10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>for문</title>
</head>
<body>
<!-- for 문
for 문은 while문과 달리 ㅏ자체적으로 초기값, 조건식, 증감식을 모두 포함하고 있는 반복문
while문 보다느 간결하게 반복을 표현
for(초기값;조건식;증감식){
조건식의 결과가 참인 동안 반복할 실행문;
}
-->
<script>
'use strict';
// var i;
// for(i = 0; i <= 10; i++){ //0 1 2 3 4 5 6 7 8 9 10
// document.write(i+"<br>");
// }
var i, hab = 0;
for(i = 1; i <= 10; i++){ //1~10까지 다 더하기
hab = hab + i;
}
document.write(hab + "<br>");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>for문-1</title>
</head>
<body>
<!-- for 문
for 문은 while문과 달리 ㅏ자체적으로 초기값, 조건식, 증감식을 모두 포함하고 있는 반복문
while문 보다느 간결하게 반복을 표현
for(초기값;조건식;증감식){
조건식의 결과가 참인 동안 반복할 실행문;
}
Number() : 문자를 숫자로 변환
String() : 숫자나 불린형을 문자형으로 변환
Boolean() : 문자나 숫자를 불린형으로 변환
object() : 모든 자료형을 객체형으로 변환
parseInt() : 문자를 int로 변환 (소수점이하의 숫자 버림)
parsefloat() : 문자를 float형으로 변환
for(let i=1; i<=5; i++){
document.write('Hello, JavaScript!');
}
명시적 타입 변환
자바스크립트는 자동으로 타입 변환을 사용하지만 종종 명시적으로 타입을 변환할 필요가 있습니다.
이 때 사용하는 함수는 다음과 같습니다.
Number() : 문자를 숫자로 변환
Number("10"+"5") (x)
String() : 숫자나 불린등을 문자형으로 변환
Boolean() : 문자나 숫자등을 불린형으로 변환
Object() : 모든 자료형을 객체형으로 변환
parseInt() : 문자형을 int형으로 변환(소수점이하의 숫자를 버린다)
parseFloat() : 문자형을 float형으로 변환
-->
<script>
'use strict';
// const dan = 0;
const dan = Number(prompt('원하는 단을 입력하세요'));
document.write(`<p>${dan}단</p>`);
// document.write("<p>${dan}단</p>");
for(let i = 1; i <= 9; i++){
document.write(`${dan}*${i} = ${dan * i}<br>`);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>continue문-2</title>
</head>
<body>
<!--
continue 문
반복 중인 문장 내에서 사용하며
해당 문장의 나머지 부분을 건너뛰고
다음 조건식의 판단으로 넘어가게 합니다.
-->
<script>
'use strict';
const num = 3;
for(let i = 1; i <= 100; i++){ //1 2 3 4 ... 100
if(i % num == 0){
document.write('짝!')
continue;
}
document.write(`${i}`);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>break문-3</title>
</head>
<body>
<!--
break문
반복 중인 문장 내에서 사용하여 해당 반복문을 완전히 종료시키고
반복문 다음에 위치한 실행문으로 이동합니다.
변수를 객체화
document.write(`<p>${dan}단</p>`);
변수를 객체화 ${변수명}
''
"" 문자열에 대한 우선순위
``
document.write('<img src = "이미지 경로" alt="">'); -> 요즘 많이 쓰는 방법 싱글 따옴표
document.write("<img src = '이미지 경로' alt=''>");
-->
<script>
'use strict';
for(;;){ //for 무한 루프 -> 계속 로딩됨
const sel = Number(prompt('원하는 메뉴를 선택하세요(1.김밥 2.스테이크 3. 김치볶음밥 4. 순두부 5. 라면 6. 종료)'));
switch(sel){
case 1:
alert('김밥이 나옵니다.');
break;
case 2:
alert('스테이크가 나옵니다.');
break;
case 3:
alert('김치볶음밥이 나옵니다.');
break;
case 4:
alert('순두부가 나옵니다.');
break;
case 5:
alert('라면이 나옵니다.');
break;
case 6:
alert('프로그램이 종료됩니다.')
break;
}
if(sel == 6) break;
}
</script>
</body>
</html> for 문
for문은 while문과 달리 자체적으로 초기값, 조건식, 증감식을 모두 포함하고 있는 반복문입니다.
while문 보다는 간결하게 반복을 표현할 수 있습니다.
for(초기값; 조건식; 증감식){
조건식의 결과가 참인 동안 반복할 실행문;
...
}
for(let i=1; i<=5; i++){
document.write('Hello, JavaScript!');
}
break 문
반복중인 문장 내에서 사용하여 해당 반복문을 완전히 종료시키고
반복문 다음에 위치한 실행문으로 이동합니다.
1 2 3
document.write(`<p>${dan}단</p>`);
''
""
``
document.write(dan); 화면에 변수값이 출력
document.write("<p>dan</p>"); 화면에 <p>dan</p> 그대로 출력 -> <p>변수값</p>
변수를 객체화 ${변수명}
document.write("<p>dan</p>");
document.write(`<p>${dan}</p>`); <p>변수값</p> 변수명 변수값으로 태그형식 맞추어 출력
''
"" 문자열에 대한 우선순위
document.write('<img src="이미지경로" alt="">');
<img src=
이미지경로
document.write("dan");
document.write('dan');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>while문-4</title>
</head>
<body>
<!--
while 문
조건식이 true인 동안 계속해서 주어진 실행문을 반복
while(){
}
do while 문
while 문은 실행문을 실행하기 전에 먼저 조건식 검사, do while 문은 먼저 실행문을 실행한 후 조건식 검사
do {
조건식의 결과가 참인 동안 반복될 실행문;
...
(조건식을 거짓으로 변경할 실행문)
}while(조건식);
-->
<script>
'use strict';
// var cnt = 1;
// var txt = "Nice!";
// while (cnt <= 5){
// // document.write("Nice!" + "<br>");
// cnt += 1; // cnt = cnt + 1;
// document.write(`${txt}<br>`)
// }
var cnt = 1;
// const cnt = 1; //상수
// let cnt = 1; //변수
do{
document.write("Nice!" + "<br>");
cnt += 1;
}while(cnt <= 5);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>while문-4-1</title>
</head>
<body>
<!--
while 문
조건식이 true인 동안 계속해서 주어진 실행문을 반복
while(){
}
do while 문
while 문은 실행문을 실행하기 전에 먼저 조건식 검사, do while 문은 먼저 실행문을 실행한 후 조건식 검사
do{
()
}while(조건식);
-->
<script>
'use strict';
// let i = 1, j = 1;
// while(i > 2){
// console.log(`현재 i의 값 : ${i}`);
// };
// do{
// console.log(`현재 j의 값 : ${j}`);
// }while(j > 2);
// let i = 1;
// while(i <= 10){
// console.log(`${i}번째 반복 : 안녕하세요. Javascript!`);
// ++i;
// }
let i = 1;
let sum = 0;
//1+2+3...10
while(i <= 10){
sum += i;
i++;
}
console.log(`1부터 10까지의 총합 : ${sum}`);
document.write(`1부터 10까지의 총합 : ${sum}`);
// document.write("1부터 10까지의 총합 : " + sum);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>반복문 문제-4-2</title>
</head>
<body>
<h2>1~100까지 짝수의 합</h2>
<script>
'use strict';
let i= 1;// 초기값
let sum = 0; // 합이 저장될 변수
// 1+2+3....100
while (i <=100 ) {
if(i%2 == 0){sum += i;}
i++;
}
console.log(`1부터 100까지의 짝수의합: ${sum}`);
document.write(`1부터 100까지의 짝수의합: ${sum}`);
//document.write("1부터 10까지의 총합:" + sum);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>while문-4-3</title>
</head>
<body>
<script>
'use strict';
const dan = Number(prompt('원하는 단을 입력하세요'));
document.write(`<p>${dan}단</p>`);
let i = 1;
while(i <= 9){
document.write(`<p> ${dan} * ${i} = ${dan * i}</p>`);
i++;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>함수-5</title>
</head>
<body>
<!--
함수란
미리 만들어 놓은 작은 프로그램, 단순 코드 블록
혼자서 실행되지 않고,
함수 호출에 의해서 실행되거나 특정 이벤트에 의해 실행
- 함수 선언식
function 함수명(){
함수가 호출되었을 때 실행할 문장;
}
*특정 이벤트 뒤에 붙었을 때는 함수명이 없음
*자바스크립트는 함수를 변수에 저장이 가능
*자바스크립트는 script 태그를 만나면 자바스크립트 파일을 먼저 읽고 선언된 함수를 먼저 메모리에 저장
호이스팅()
매개변수가 있는 함수 - 함수(i); -> i : 매개변수(개수만 같으면 됨)
- 함수 선언식
function 함수명(매개변수1, 매개변수2 ...){
함수가 호출되었을 때 실행할 문장;
...
}
move(매개변수1, 매개변수2);
function move(매개변수1, 매개변수2){
}
- 함수 표현식
const 함수명 = function(매개변수1, 매개변수2 ...){
함수가 호출되었을 때 실행할 문장;
...
}
const move = function move(매개변수1, 매개변수2 ...){
함수가 호출되었을 때 실행할 문장;
...
}
-->
<script>
'use strict';
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>함수-5-1</title>
</head>
<body>
<!--
함수란
미리 만들어 놓은 작은 프로그램, 단순 코드 블록
혼자서 실행되지 않고,
함수 호출에 의해서 실행되거나 특정 이벤트에 의해 실행
- 함수 선언식
function 함수명(){
함수가 호출되었을 때 실행할 문장;
}
*특정 이벤트 뒤에 붙었을 때는 함수명이 없음
*자바스크립트는 함수를 변수에 저장이 가능
*자바스크립트는 script 태그를 만나면 자바스크립트 파일을 먼저 읽고 선언된 함수를 먼저 메모리에 저장
호이스팅()
매개변수가 있는 함수 - 함수(i); -> i : 매개변수(개수만 같으면 됨)
- 함수 선언식
function 함수명(매개변수1, 매개변수2 ...){
함수가 호출되었을 때 실행할 문장;
...
}
move(매개변수1, 매개변수2);
function move(매개변수1, 매개변수2){
}
- 함수 표현식
const 함수명 = function(매개변수1, 매개변수2 ...){
함수가 호출되었을 때 실행할 문장;
...
}
const move = function move(매개변수1, 매개변수2 ...){
함수가 호출되었을 때 실행할 문장;
...
}
-->
<script>
'use strict';
function func1(){
console.log('func1이 호출되었습니다.');
}
const func2 = function(params) {
console.log('func2이 호출되었습니다.');
}
func1();
func2();
func2();
func2();
func1();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>함수-5-2</title>
</head>
<body>
<script>
'use strict';
function func1(num){
console.log(`전달받은 매개 변수의 값은 ${num}`);
}
function func2(start, end) {
let sum = 0;
for(let i = start; i <= end; i++){
sum = sum + i;
}
console.log(`${start}부터 ${end}까지의 총합은 ${sum}`);
}
function func3(num1=1, num2=1) {
console.log(`${num1} + ${num2} = ${num1 + num2}`)
console.log(`${num1} - ${num2} = ${num1 - num2}`)
console.log(`${num1} * ${num2} = ${num1 * num2}`)
console.log(`${num1} / ${num2} = ${num1 / num2}`)
}
function func4(num1, num2, ...num3){
console.log(`num1의 값 : ${num1}`);
console.log(`num2의 값 : ${num2}`);
console.log(`num3의 값 : ${num3}`);
}
function func5(...jumsu) {
for(let i of jumsu){
console.log(i);
}
}
func1(100);
func1(50);
func2(1, 100);
func3();
func4(100, 90, 40, 50, 80, 90, 30);
func5(100, 90, 40, 50, 80, 90, 30);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>함수return-5-3</title>
<script>
function getHello() {
return 'Hello:)';
}
function getSum(num1, num2) {
return num1 + num2;
}
</script>
</head>
<body>
<script>
'use strict';
console.log(getHello());
const msg = getHello();
console.log(msg);
console.log(getSum(2, 5));
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>함수-5-4</title>
<script>
function plus(num1, num2) {
return num1 + num2;
}
function minus(num1, num2) {
return num1 - num2;
}
function mul(num1, num2) {
return num1 * num2;
}
function div(num1, num2) {
return num1 / num2;
}
</script>
</head>
<body>
<script>
'use strict';
const num1 = Number(prompt('첫번째 숫자를 입력하세요'));
const num2 = Number(prompt('두번째 숫자를 입력하세요'));
let result = plus(num1, num2);
console.log(`${num1} + ${num2} = ${result}`)
result = minus(num1, num2);
console.log(`${num1} - ${num2} = ${result}`)
result = mul(num1, num2);
console.log(`${num1} * ${num2} = ${result}`)
result = div(num1, num2);
console.log(`${num1} / ${num2} = ${result}`)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>함수-5-5</title>
<script>
'use strict';
const hello1 = () => console.log('안녕하세요. JavaScript');
const hello2 = (x,y) => console.log(`안녕하세요.
매개변수로 전달 받은 x의 값은 ${x}이고 y의 값은 ${y}입니다.`);
</script>
</head>
<body>
<!-- 화살표 함수
쓰는 이유 : 간단하게 표현하려고 , 변수명이 없음. 위에서 변수 선언하고 써야함
function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현합니다.
화살표 함수는 항상 익명입니다.
const 함수명 = (매개변수1, 매개변수2 ..) => 실행문 ..
1. 매개변수가 없는 함수
const func1 = function() {
console.log('안녕하세요, JavaScript!');
}
화살표 함수로 표현
const func1 = () => console.log('안녕하세요, JavaScript!');
2. 매개변수가 있는 함수
const func2 = x => console.log(`매개변수로 전달받은 값 : ${x}`);
const func2 = (x, y) => console.log(`두수의 합 : ${x + y}`);
3. 리턴값이 있는 함수
const func3 = (x, y) => {
let sum = 0;
for(let i=x; i<=y; i++){
sum += i;
}
return sum;
}
4. 동적으로 함수 생성
const age = 20;
const adult = (age > 18) ?
() => alert('성인입니다');
() => alert('미성년입니다');
adult();
-->
<script>
'use strict';
// 함수를 선언할 때
function aaa(매개변수) {
실행문;
}
const 함수명 = (매개변수) => {
실행문;
}
hello1();
hello2(7,3);
</script>
</body>
</html>