Javascript 기초 문법

heyryu·2023년 2월 9일
JavaScript
0

스파르타코딩클럽 웹개발종합반

목록 보기
8/15

자바스크립트: 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어입니다.

Q. 왜 브라우저는 Javascript만 알아들어요? HTML안에다 파이썬, Java 같은 언어를 써서 주면 안되나요?

A. 불가능한 이야기는 아닙니다. 다만, 이 "역사적인 이유 & 이미 만들어진 표준"이기 때문에, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있죠.

Java와 Javascript는 어떤 차이가 있나요?
인도와 인도네시아..
바다와 바다코끼리..

아무 관련 없습니다.

변수 & 기본연산

  • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!"
    (2를 a라는 변수에 넣는다)

  • let으로 변수를 선언합니다.

    let num = 20
num = 'Bob'

// 변수는 값을 저장하는 박스예요.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.

  • 사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다.

    let a = 1
let b = 2

a+b // 3
a/b // 0.5

let first = 'Bob'
let last = 'Lee'

first+last // 'BobLee'

first+' '+last // 'Bob Lee'

first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.

  • 변수명은 아무렇게나?

    let first_name = 'bob' // snake case라고 합니다.

또는,

let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠.

과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
다른 특수문자 또는 띄워쓰기는 불가능합니다!

리스트 & 딕셔너리

  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.

    let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_list = [1,2,'hey',3] // 로 선언 가능

b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력

// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력

// 리스트의 길이 구하기
b_list.length // 5를 출력

  • 딕셔너리: 키(key)-밸류(value) 값의 묶음

    let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력

b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력

  • 리스트와 딕셔너리의 조합

    names = [{'name':'bob','age':20},{'name':'carry','age':38}]

// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'

new_name = {'name':'john','age':7}
names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'

  • 왜 필요할까요?

    순서를 표시할 수 있고, 정보를 묶을 수 있습니다.

    앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.

    let customer_1_name = '김스파';
let customer_1_phone = '010-1234-1234';
let customer_2_name = '박르탄';
let customer_2_phone = '010-4321-4321';
...(알아보기 힘듭니다.)

    👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다.

    let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};

    👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다.

    let customer = [
    {'name': '김스파', 'phone': '010-1234-1234'},
    {'name': '박르탄', 'phone': '010-4321-4321'}
]

    ✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.

기본함수들

예를 들면, '나눗셈의나머지'를 구하고 싶은 경우

let a = 20
let b = 7

a % b = 6
또, 모든 알파벳을 대문자로 바꾸고 싶은 경우

let myname = 'spartacodingclub'

myname.toUpperCase() // SPARTACODINGCLUB
또, 특정 문자로 문자열을 나누고 싶은 경우

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 -> 간단하게 쓸 수도 있다!
특정 문자로 나누고 싶은 경우 2

let txt = '서울시-마포구-망원동'

let names = txt.split('-'); // ['서울시','마포구','망원동']

특정 문자로 합치고 싶은 경우

let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)

함수

  • 기본 생김새

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

  • 예시

    // 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
    console.log('num1: ', num1, ', num2: ', num2);
    return num1 + num2;
}

sum(3, 5); // 8
sum(4, -1); // 3

조건문

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

    function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	}
}

is_adult(25)

  • if, else if, else if, else if else

    function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else if (age > 10) {
		alert('청소년이에요')
	} else {
		alert('10살 이하!')
	}
}

is_adult(12)

  • AND 조건과 OR 조건!

    // AND 조건은 이렇게
function is_adult(age, sex){
    if(age > 20 && sex == '여'){
        alert('성인 여성')
    } else if (age > 20 && sex == '남') {
        alert('성인 남성')
    } else {
        alert('청소년이에요')
    }
}

// 참고: OR 조건은 이렇게
function is_adult(age, sex){
    if (age > 65 || age < 10) {
        alert('탑승하실 수 없습니다')
    } else if(age > 20 && sex == '여'){
        alert('성인 여성')
    } else if (age > 20 && sex == '남') {
        alert('성인 남성')
    } else {
        alert('청소년이에요')
    }
}

is_adult(25,'남')

반복문

  • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
    console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
...
console.log(99)

// 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.
    for (let i = 0; i < 100; i++) {
	console.log(i);
}
    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
	4. 매번실행
}

1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3

와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
  • 그러나 위처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트와 함께 쓰입니다.
    아래 예시를 볼까요? 일단 아래를 복사 붙여넣기 하고, 함께 코딩해볼게요
  • [코드스니펫] 반복문 예제1
    let people = ['철수','영희','민수','형준','기남','동희']
let people = ['철수','영희','민수','형준','기남','동희']

// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
	console.log(people[i])
}
  • 리스트도 그냥 리스트가 아닙니다! 딕셔너리가 들어간 리스트와 찰떡이죠
    다시 아래를 복사 붙여넣기 해볼까요?
  • [코드스니펫] 반복문 예제2
      let scores = [
  	{'name':'철수', 'score':90},
  	{'name':'영희', 'score':85},
  	{'name':'민수', 'score':70},
    {'name':'형준', 'score':50},
    {'name':'기남', 'score':68},
    {'name':'동희', 'score':30},
  ]
    let scores = [
	{'name':'철수', 'score':90},
	{'name':'영희', 'score':85},
	{'name':'민수', 'score':70},
  {'name':'형준', 'score':50},
  {'name':'기남', 'score':68},
  {'name':'동희', 'score':30},
]

for (let i = 0 ; i < scores.length ; i++) {
	console.log(scores[i]);
}

// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,
    for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 70) {
		console.log(scores[i]['name']);
	}
}

// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
  • 함수
    • 기본 생김새
      // 만들기
function 함수이름(필요한 변수들) {
	내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
    • 예시
      // 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
	console.log('num1: ', num1, ', num2: ', num2);
	return num1 + num2;
}

sum(3, 5); // 8
sum(4, -1); // 3
  • 조건문
    • 20 보다 작으면 작다고, 크면 크다고 알려주는 함수
      function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	}
}

is_adult(25)
    • if, else if, else if, else if else
      function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else if (age > 10) {
		alert('청소년이에요')
	} else {
		alert('10살 이하!')
	}
}

is_adult(12)
    • AND 조건과 OR 조건!
      // AND 조건은 이렇게
function is_adult(age, sex){
	if(age > 20 && sex == '여'){
		alert('성인 여성')
	} else if (age > 20 && sex == '남') {
		alert('성인 남성')
	} else {
		alert('청소년이에요')
	}
}

// 참고: OR 조건은 이렇게
function is_adult(age, sex){
	if (age > 65 || age < 10) {
		alert('탑승하실 수 없습니다')
	} else if(age > 20 && sex == '여'){
		alert('성인 여성')
	} else if (age > 20 && sex == '남') {
		alert('성인 남성')
	} else {
		alert('청소년이에요')
	}
}

is_adult(25,'남')
  • 반복문
    • 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
      console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
...
console.log(99)

// 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
    • 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.
      for (let i = 0; i < 100; i++) {
	console.log(i);
}
      for (1. 시작조건; 2. 반복조건; 3. 더하기) {
	4. 매번실행
}

1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3

와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
  • 그러나 위처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트와 함께 쓰입니다.
    아래 예시를 볼까요? 일단 아래를 복사 붙여넣기 하고, 함께 코딩해볼게요
    - [코드스니펫] 반복문 예제1
         let people = ['철수','영희','민수','형준','기남','동희']
       let people = ['철수','영희','민수','형준','기남','동희']
   
   // 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
   // i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
   for (let i = 0 ; i < people.length ; i++) {
   	console.log(people[i])
   }
  • 리스트도 그냥 리스트가 아닙니다! 딕셔너리가 들어간 리스트와 찰떡이죠
    다시 아래를 복사 붙여넣기 해볼까요?
    - [코드스니펫] 반복문 예제2
         let scores = [
     	{'name':'철수', 'score':90},
     	{'name':'영희', 'score':85},
     	{'name':'민수', 'score':70},
       {'name':'형준', 'score':50},
       {'name':'기남', 'score':68},
       {'name':'동희', 'score':30},
     ]
      let scores = [
  	{'name':'철수', 'score':90},
  	{'name':'영희', 'score':85},
  	{'name':'민수', 'score':70},
    {'name':'형준', 'score':50},
    {'name':'기남', 'score':68},
    {'name':'동희', 'score':30},
  ]
  
  for (let i = 0 ; i < scores.length ; i++) {
  	console.log(scores[i]);
  }
  
  // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,
     for (let i = 0 ; i < scores.length ; i++) {
 	if (scores[i]['score'] < 70) {
 		console.log(scores[i]['name']);
 	}
 }
 
 // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.

    숙제 코드

<!doctype html>
<html lang="en">

    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
            crossorigin="anonymous">

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
        <script
            src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link
            rel="preconnect"
            href="https://fonts.gstatic.com"
            crossorigin="crossorigin">
        <link
            href="https://fonts.googleapis.com/css2?family=Jua&display=swap"
            rel="stylesheet">
        <style>
            * {

                font-family: 'Jua', sans-serif;
            }
        </style>

        <style>
            .wrap {
                /* background-color:; */
                width: 500px;
                margin: auto;
            }
        </style>

        <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

        <style>
            .item-img {
                width: 500px;
                height: 300px;

                /*세줄 같이 다님*/
                background-image: url("https://cdnweb01.wikitree.co.kr/webdata/editor/202005/19/img_20200519101058_995318a8.webp");
                background-position: center;
                background-size: cover;

                /* background-color: green; */
            }

            .price {
                font-size: 20px;
            }

            .item-desc {
                width: 500px;
                margin-top: 20px;
                margin-bottom: 20px;
            }

            .item-order {
                width: 500px;
                margin-top: 20px;
                margin-bottom: 20px;
            }

            .btn-order {
                margin: auto;
                width: 100px;

                display: block;
                /*margin:auto 안 먹을 때 이거 넣어주기*/
            }
        </style>

        <script>
          function order() {
            alert('주문이 완료되었습니다!');
          }
        </script>
    </head>

    <body>
        <div class="wrap">
            <div class="item-img"></div>
            <div class="item-desc">
                <h1>샐리를 팝니다
                    <span class="price">가격: 18,000원/개</span></h1>
                <p>샐리 인형들입니다. 넘넘 귀엽죠. 사실 제가 사고싶었는데 기본 샐리도 없어서 고민했던 녀석들이에요. 하지만 아직도 아른거리네요. 샐리는 다
                    귀여워.</p>
            </div>
            <div class="item-order">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroup-sizing-default">주문자 이름</span>
                    </div>
                    <input
                        type="text"
                        class="form-control"
                        aria-label="Default"
                        aria-describedby="inputGroup-sizing-default">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="inputGroupSelect01">수량</label>
                    </div>
                    <select class="custom-select" id="inputGroupSelect01">
                        <option selected="selected">수량을 선택하세요</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroup-sizing-default">주소</span>
                    </div>
                    <input
                        type="text"
                        class="form-control"
                        aria-label="Default"
                        aria-describedby="inputGroup-sizing-default">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroup-sizing-default">전화번호</span>
                    </div>
                    <input
                        type="text"
                        class="form-control"
                        aria-label="Default"
                        aria-describedby="inputGroup-sizing-default">
                </div>
                <button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
            </div>
        </div>
    </body>
</html>
profile
heyryu
못하면 열심히 하는 게 당연하니까💪 [Frontend/서비스기획]
이전 포스트

[1-9]Bootstrap(부트스트랩)을 써보자!

다음 포스트

JQuery

1개의 댓글

comment-user-thumbnail
Gyubin
2023년 2월 14일

좋은글이 많네요! 멋져요!!👍👍😀😀

답글 달기