While문
<!-- 반복문-> while/for -->
<!-- while
1) 반복횟수를 알 수 없을 때, 조건에 더 가깝다.
2) while문에서도 배열이 가능하다. 다만, 배열은 for문에 더 자주 활용된다.
while문 기본구조
while(표현식){표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;} -->
<!-- ex)
var i = 1;
while( i < 10 ){
document.write( i + "<br>");
i++; }
변수 i가 10보다 작을 때만 while문을 반복한다.
반복할 때마다 변수 i를 1씩 증가시켜 변수 i가 10보다 커지면 반복문을 종료한다. -->
<!-- for
1) for문은 횟수가 정해져 있다.
2) for(let i = 0; ; i++) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 0번째 부터 무한반복된다.
// let i = 0
// while(true){
// alert(`${i}번째 반복문입니다.`)
// i =i+1
// }
let i = 0
while(confirm("계속 진행을 원하시면 확인을 누르세요")){
alert(`${i}번째 반복문입니다.`)
i = i + 1
// i++ (i = i + 1과 동일한 결과. i + 1 만 사용할 경우 무한으로 빠지게 된다.)
}
// 먼저 창에서 확인을 누르세요.라는 창이 나타난 후, 확인을 누르면 true가 나온다.
// 만약 누르지 않으면 false 값이 return되어 반복문(while문)이 종료된다.
</script>
</body>
</html>
<!-- for (let i = 0 ; i < 10 ; i++)
for문의 조건은 i < 10 횟수 부분인데, while의 조건은 조금 다르다
while(true){
for()
}
무한루프에 break;를 일반적으로 쓰지만
while( i < 10){
}
처럼 조건을 쓸 수도 있다. -->
<!-- i = i + 1 = 로 값을 대입시켜주지 않으면 구문 등 여러 오류가 날 수도 있으며,
대입 연산자를 써야 i에 값을 저장시켜줘서 반영이 된다. -->
// while문 써보기
// let i = 0
// while(confirm("계속 진행을 원하시면 확인을 누르세요")) {
// alert(`${i}번째 반복문입니다.`)
// i = i + 1
// }
// ----------------------------------------------------------
// array에 있는 속성들을 꺼내서 보기
// let i = 0
// const array = [1,2,3,4,5,6,7]
// while(i < array.length) {
// alert(`${i}번째 반복문입니다.`)
// console.log(array[i])
// i = i + 1
// }
// ----------------------------------------------------------
// 무한 반복문 멈춰 보기 1
// let i = 0
// while(true) {
// alert(`${i}번째 반복문입니다.`)
// break
// }
// ----------------------------------------------------------
// 무한 반복문 멈춰 보기 2
for(let j = 0 ; j < 10 ; j++) {
alert(`${j}번째 반복문`)
break
}
결과물
While_array문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// let i= 0
// const array =[1, 2, 3, 4, 5, 6, 7]
// while(i < array.length){
// alert(`${i}번째 반복입니다.`)
// console.log(array[i])
// i = i + 1
// }
// 무한 루프에서 빠져나오는 것은 break
// contiue문은 프로그램에서 거의 사용할 일이 없다.
// true는 무한 반복
let i= 0
const array =[1, 2, 3, 4, 5, 6, 7]
while(i < array.length){
alert(`${i}번째 반복입니다.`)
break;
}
</script>
</body>
</html>결과물
for문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<Script>
// for(let j =0; j<10; j++){
// alert(`${j}번째 반복문`)
// break;
// }
// while에 true를 이용하여 무한반복을 하되, for를 이용하여 조건을 만들어 줄 수 있다.
for(let j =0; j<10; j++){
alert(`${j}번째 반복문`)
const tf =confirm("계속하시겠습니까?")
if(!tf){
break
} j = j + 1
}
// 10번을 반복하되, 0이 첫번째가 될 것이고 tf(조건)이 true일 경우 break가 되며, 만약 tf가 false일 경우는 j = j+1이 된다.
// 결과: 0 번째 반복문 -> 확인 -> 계속하시겠습니까? -> 확인 -> 2번째 반복문
</Script>
</body>
</html>결과물
continue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<Script>
for(let j =0; j<10; j++){
alert(`${j}번째 반복문`)
continue
const tf =confirm("계속하시겠습니까?")
if(!tf){
break
} j = j + 1
}
// continue가 있으면 아래를 작동하지않고 바로 alert로 시작하게 된다.
// confirm창이 나타나지 않는다.
// continue를 사용할때는 많지는 않다.
</Script>
</body>
</html>결과물
for-중첩반복문
<!-- for문을 여러개 사용하여
출력 결과물 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<Script>
// let k= "*"
// for(i=0; i<=9 ; i++){
// document.write(`${k}<br>`)
// k = k+"*"
// }
let result="" //변수 선언
for(let i=1; i<10; i++){
for(let j=0; j<i; j++){
result += "*" //첫 번째 시행
}
result += "\n" //두 번째 시행
}
console.log(result)
// \n이면 다음줄로 넘어갈 수 있다.
</Script>
</body>
</html>
<!-- 중첩반복문 -->
<!-- for(초기조건1; 종결조건1; 증감식1) //외부 반복문
{ for(초기조건2; 종결조건2; 증감식2) //내부 반복문
{
반복할 명령문;
}
}
내부 반복문의 루프가 끝나고 나면 외부 반복문이 '한 번 증가' 또는 '감소'한다. -->
<!-- += 넣는이유
result가 문자열 자료형 변수
원래 문자열은
name = "벽" + " " + "이죵"
결과값: 벽 이죵
name = "벽"+""+"이죵"
결과값: 벽이죵
result += "*"
의미는 아래와 같다.
result = result + * (1) (3,4) (6,7,8)
result = result + \n (2) (5) (9)
(1) 에서는 *
(2) 에서는 \n
(3) 에서는 *
(4) 에서는 *
(5) 에서는 \n
결과값: *\n**\n*** -->결과물
function
<!-- 함수 (function)
익명함수, 선언적 함수, 프로시저함수, 수학적함수
크게는 익명함수, 선언적 함수
형태에 따라 프로시저 함수, 수학적 함수.-->
<!--
수학적함수: 매개변수가 있어서 연산하는 것. -->
<!--
1) 과거 함수 기본구조(선언적 함수- 선언적 함수도 매개변수를 받을 수 있음)
function 함수명(){
실행문
실행문
}
ex) function f(){
}
함수명()
2) 현재 함수 기본구조 (익명함수)
함수 기본구조
const 함수명 = function(){
실행문
실행문
}
함수명() //호출 -->
<!-- y = x + 5
x = 5 y = 10
이것을 프로그래밍적으로 바꾸면
const f = function(){
y =x +5
}
f(5) -->
<!-- 1~10까지 더하는 것을 for문 말고도 1~100자리, 1~1000자리를 for문 만으로 할려고 하면 지저분해지기 때문에
function 이용. 함수를 이용하면 가독성이 좋아진다.
const f = function(){
for(){
i = i+1
}
}
f(5) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1) 프로시저 함수
const f =function(){ //함수 선언, 익명 함수라고 한다.
console.log("실행문1")
console.log("실행문2")
console.log("실행문3")
}
f() //함수 호출
// console.log(f) //console.log로도 함수를 호출 할 수 있다. 다만, 함수 내용을 보여준다.
// 2) 수학적 함수
// const fk =function(x){
// return x +5
// }
// console.log(fk(5))
// 5라는 매개변수가 있으며 const fk에 5가 전달되고 5+5=10 으로 되고, console.log가 10으로 나타나게 된다.
</script>
</body>
</html>결과물
for문과 function 비교
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<Script>
//일반적인 for문 0~9까지 더해서 console.log로 나타나게 된다.
// let limit = 10
// for(i=0; i<10; i++){
// i=i+1
// }console.log(1)
// 함수 사용
//1) 프로시저함수
let limit = 0
const f =function(){
let result = 0
for(let f = 1 ; f<limit; f++){
result= result+j
}
console.log(f)
}
f()
// limit=20 //20까지 필요한 경우
// limit = 100 //100까지 필요한 경우
// 2) 수학적 함수
// 수학적 함수 기본구조 예시
// const 함수명 = function(name){
// let fullname=""
// fullname = name + "님 반갑습니다."
// return fullname
// }
// console.log(함수명("홍길동"))
// const fk = function(x) {
// let result
// for(let i=1; i<x; i++){
// result=result + i
// }
// return result
// } console.log(fk(5))
</Script>
</body>
</html>결과물
function2(선언함수)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<Script>
function ftest(){
console.log("선언함수 테스트")
}
ftest()
</Script>
</body>
</html>결과물
느낀점
JAVA는 배울수록 새로운게 생겨나는거 같다. 용어나 단어의 사용에 늘 고민된다.
코딩 신생아