[6/10 일반] JavaScript 기초/ 실습 - 모듈과 라이브러리

박재준·2022년 6월 10일
0

1. 학습한 내용

1) 필기 내용

  • while문 : 반복횟수를 알 수 없을 때, 조건충족시 종료(조건 충족까지 무한반복)
    for문 : 조건보단 횟수가 정해져 있을 때
    for (let i = 0 ; i < 10 ; i++)

  • continue : 밑의 내용을 skip하고 위의 내용으로 다시 올라가게 함
    대부분은 break씀

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

12_fun.html

  • function : 프로세스를 블록으로 만들고 필요할 때 호출해서 사용
    1) 익명함수
    2) 선언적 함수
    3) 프로시저함수
    4) 수학적 함수
  • <함수의 형태>
    const 함수명 = function(){
    실행문
    실행문
    }
    함수명()

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<익명 함수>

const 함수명 = function(name){
	let fullname=“”
	fullname=name+“님 반갑습니다.”
	return fullname
}
console.log(함수명(“홍길동”))

또는

<선언적 함수>

function 함수명(name){
	실행문
	실행문
}
console.log(함수명(“홍길동”))

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

0610 / 10_while.html

let i = 0
        while(confirm("계속 진행을 원하시면 확인을 누르세요")){
            alert(`${i}번째 반복문입니다.`)
            i=i+1
        }

→ 아래 그림

→ 확인을 누르면 0번째 ~ 무한대 번째 반복문입니다. 라는 창이 뜸
→ 취소를 누르면 끝

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
        }

→ 아래 그림

→ array의 length인 7만큼 0부터 6까지 반복문입니다. 라는 창이 뜸
→ 취소를 누르면 끝

let i = 0
        while(true){
            alert(`${i}번째 반복문입니다.`)
            break
        }

→ 아래 그림

→ i = 0 인데, 0번쨰 반복문입니다를 alert 한다음, break하면서 끝

for(let j = 0; j < 10; j++){
            alert(`${j}번째 반복문`)
            break
        }

→ 위와 마찬가지로 j = 0 인데, 0번쨰 반복문입니다를 alert 한다음, break하면서 끝

for(let j = 0; j < 10; j++){
            alert(`${j}번째 반복문`)
            const tf = confirm("계속하겠습니까?")
            if(!tf){
                break
            }
        }

→ 아래 그림


→ n번째 반목문 창에서 확인 버튼 → 계속하겠습니까? alert 뜸 → 확인누르면 n+1번째 반복문 창이 뜸
→ 마찬가지로 !tf(tf의 부정)으로 계속하겠습니까의 취소 버튼을 누르게되면 break

for(let j = 0; j < 10; j++){
            alert(`${j}번째 반복문`)
            continue // 밑의 내용을 skip하고 바로 위로 점프
            const tf = confirm("계속하겠습니까?")
            if(!tf){
                break
            }
            
        }

→ 아래 그림

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

0610 / 11_for_for.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=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let result=""
        for(let i=1; i<10; i++){
            for(let j=0; j<i; j++){
                result += "*"
            }
            result += "\n"
        }
        console.log(result)
    </script>
</body>
</html>

→ 아래 그림

→ let result = ""를 통해서 문자열 객체 만들어놓기
→ i로 밑으로 나열
→ j로
옆으로 i 증감한 만큼나열
→ "\n"을 통해 줄바꿈

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

12_fun.html

<프로시저 함수 형태>

  • const f = function(){
    console.log("실행문1")
    console.log("실행문2")
    console.log("실행문3")
    }
    f()
    console.log(f)
for(i=0; i<10; i++){
            i=i+1}
        console.log(i)

→ 아래 그림

→ i가 i < 10까지 증가하다가, 조건을 만족했을 때, i = i + 1를 실행하고, console.log(i)를 실행

let limit= 0
const f = function(){
			let result = 0
			for(let i = 1 ; i < limit; i++){

			result = result + i
			}
			console.log(f)
            }
limit = 20
f()
limit = 100
f()
limit = 1000
f()
console.log(f)

→ 아래 그림

→ 위에서 limit를 설정한대로 f()를 호출해서 함수식 실행

const fk = function(x){
            let result = 0
            for(let i = 1 ; i < x; i++){
            result = result + i
            }
            return result
        }
console.log(fk(5))

→ 아래 그림

→ x에 5를 대입한 fk(5)를 console.log에 실행하게 됨
→ 위의 function(x)는 function(5)가 되고, 밑의 for문으로 result를 돌리면서
→ 1 + 2 + 3 + 4 = 10이 출력

// 전달하는 값이 있어서 그 값을 받는 것 : 매개변수
// 저장된 함수로 부르는 것 : 호출
// 수학적 함수
// const fk = function(x){
//     return x + 5
// }
// console.log(fk(5))

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

0610 / 12_fun01.html

function ftest(){
            console.log("선언함수 테스트")
}
ftest()

→ 아래 그림

→ 이렇게도 가능하답니다^~^

2. 학습한 내용 중 어려웠던 점 또는 해결못한 것들

1) 함수식이 어떻게 작동하는지에 대해 중간에 헷갈리는 것들...
2) 매개변수를 이용해서 함수를 호출하고, 그런 것들이 좀... 그랬다.

3. 해결방법 작성

1, 2) 구체적인 코드 작성법 보다, 어떤 식으로 flow가 생기는지 확인해보기

4. 학습 소감

1) 이전 강사님과 마찬가지로, 가르치는 순간의 강의 속도는 빨랐으며, 타이핑하다가 설명을 못 듣는 순간이 많아서... 다시보기로 또 봐야하는... 고생을...

profile
초급 개발자

0개의 댓글