자바스크립트 기초 문법 - 함수, 조건문, 반복문

<목차>

1. 자바스크립트 - 함수
2. 자바스크립트 - 조건문
3. 자바스크립트 - 반복문

1. 자바스크립트 - 함수

• 자바스크립트 기본함수 (나눗셈의 나머지를 구할 때, 특정 문자열 기준으로 문자열을 나누고 싶을 때)

<script>
    // 나눗셈의 나머지를 구하고 싶을 때
    let a = 35
    let b = 6

    a % b = 5

    // 특정 문자열 기준으로 문자열을 나누고 싶을 때
    let myemail = 'sparta@gmail.com'

    let result = myemail.split('@') // ['sparta','gmail.com'] @를 기준으로 문자열이 나뉘어진다.

    result[0] // sparta
    result[1] // gmail.com

    let result2 = result[1].split('.') // ['gmail','com'] .을 기준으로 또 한번 나뉘어진다.

    result2[0] // gmail -> 우리가 알고 싶었던 것!
    result2[1] // com

    myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!
</script>

 

• 함수의 기본 생김새

<script>
	// 만들기
	function 함수이름(필요한 변수들) {
	내릴 명령들을 순차적으로 작성
	}
	// 사용하기
	함수이름(필요한 변수들);
</script>

 

• 함수 사용의 예시(두 숫자를 입력 받아 곱한 값을 알려주는 함수)

<script>
    // 두 숫자를 입력받으면 곱한 값을 돌려주는 함수
    function hello(num1, num2) {
        console.log(`곱한 값은 ${num1*num2}입니다.`);
        return num1 * num2;
    }

    hello(3, 5); // 15
    hello(4, -1); // -4
</script>

---

2. 자바스크립트 - 조건문

 

• 20보다 작으면 작다고, 크면 크다고 알려주는 함수

<script>
    function is_adult(age){
        if(age > 20){
            alert('성인입니다.')
        } else {
            alert('청소년입니다.')
        }
    }

    is_adult(25) // 성인입니다.
</script>

 

• if, else if, else

<script>
    function is_adult(age){
        if(age > 20){
            alert('성인입니다.')
        } else if ( age > 10 ) {
            alert('청소년입니다.')
        } else {
            alert('어린이입니다.')
        }
    }

    is_adult(8) // 어린이입니다.
</script>

---

3. 자바스크립트 - 반복문

<script>
    // i가 0번째부터 50 미만까지 증가한다.
    for (let i = 0; i < 50; i++) {
        console.log(i)
    }
</script>

 

반복문은 주로 리스트와 함께 쓰이는데 let fruits = ['사과', '바나나', '수박', '딸기', '참외']와 함께 쓰이는 경우는 이렇게 표현할 수 있다.

<script>
    let fruits = ['사과', '바나나', '수박', '딸기', '참외']
    
    // i가 0부터 fruits의 길이만큼 증가하면서 fruits의 원소를 차례대로 불러온다.
    for (let i = 0; i < fruits.length; i++) {
        console.log(fruits[i])
    }
</script>

 

또한 딕셔너리가 들어간 리스트와 반복문, 조건문을 함께 사용할 경우, 이렇게 표현할 수 있다.

<script>
    let scores = [
        {'name':'철수', 'score':90},
        {'name':'영희', 'score':85},
        {'name':'민수', 'score':70},
      {'name':'형준', 'score':50},
      {'name':'기남', 'score':68},
      {'name':'동희', 'score':30},
    ]
    
    // 이렇게 하면 점수가 60점 미만인 사람들의 이름을 출력하게 된다.
    
    for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 60) {
		console.log(scores[i]['name']);
        }
    }
</script>

 

자바스크립트 기초문법 - 변수, 리스트, 딕셔너리

 

CSS 선택자 종류와 사용법 공부하기

 

Html의 기본 구성과 태그 종류 모음