윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 36강 - 객체 기본 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 36강 - 객체 기본

페이지 정보

조회: 593

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

윤인성님의 javascript강의 청각장애인을 위한 자막

드디어 모던 웹을 위한 자바스크립트 제이쿼리 입만 36강 되있구요 이번

강의 부터는 6장에 있는 개체에 대해서 살펴보도록 하겠습니다
일단 지금까지 자바스크립트의 는 6가지 자룡 있다고 배웠어요 물론
기억하지 못하실 수도 있지만 기억하지 못해도 큰 문제는 없습니다
어쨌거나 기본자료 용으로 문자열 숫자 2 3개가 있구요
이어 성 객체 함수 그리고 언 디파인 드가 있습니다
그럼 지금까지 살펴보았던 배열 같은 경우에는 어디에 속한 약 5 궁금
하실 수 있는데요
간단하게 타입 5부 를 사용해서
배열이 어떠한 자룡 에 속하는지 출력해 보도록 하겠습니다
저장을 하고 실행을 하게 되면
오브젝트 라고 나오는 것을 볼 수 있는데요 이 오브젝트가 바로 객체를
의미를 하게 됩니다
어쨌거나 배열이 오브젝트 라는 것은 배열이 오브젝트의 속성을 굉장히
비슷하게 갖고 있다는 뜻입니다 따라서 배열에 대해서 한번 다시 간단하게
살펴보고 그를 제체 로 변환해서 살펴보도록 하겠습니다
그럼 일단 배열에 를 한번 만들어 보도록 하겠는데요
배 11 요론 대괄호 로 만들고 내부의 뭐 바나나 라던지
사과 라던지 규리 라던지
달 게 라던지 의 요소를 넣을 수 있습니다 요게
배열을 생성하는 방법 되겠구요 이어서 이렇게 생성된 베어 렌
대괄호 안에 다가 숫자를 넣어서
바나나의 접근을 하거나
아니면 사과의 접근을 하거나
귤의 접근을 할 수 있었습니다 마지막으로 무엇보 반복문 남을 사용해서
어레이 에 랭스 를 잡아서 활용할 수도 있었고요
포인 반복문을 사용해서
어레이를 넣어서 어레이의 i 번째 도
접근을 할 수 있었습니다
어쨌거나 객체도 굉장히 비슷하기 때문에 비슷한 방법으로 사용하게 되는데요
간단하게 뭐 자바스크립트 파일을 하나 더 만들고 살펴보도록 하겠습니다
일단 배열을 생성할 때는
요렇게 꿈으로만 괄호 를 사용하게 됩니다 뭐 영어로는 컬리 브릭스 키스
라고 하고 우리가 수학시간에 배운 걸로는 중괄호 라고 하게 되겠죠
어쨌거나 이렇게 만들게 되면 내부의 다 값을 넣게 되는데요
7 을 입력을 하고 이 옆에다가 값을 입력하는 형태로 사용하라 드립니다
배열과 마찬가지로 여러 개를 넣을 수 있구요
ca 키 비키 c 칫 이를 입력을 하고 카 페 이
카피 갑씩 앞지를 입력을 하게 됩니다
이때 키는 문자열로 드 입력을 할 수 있고 식별자로 사용할 수 있는
형태라면 그냥 식별자 형태로 바로 넣어주셔도 됩니다
어쨌거나 이렇게 만들어진
잭 첸 위에 배열이 라고 썼는데
배열과 비슷한 방법으로 요소의 접근을 하게 됩니다
우리가 배열에 접근할 때는 어레이 뒤에다가 인덱스 라는걸 입력을
했었는데요
오브젝트에 접근을 할 때는 오브젝트를 입력을 해 주시고
마찬가지로 대괄호 를 사용한 뒤에 내부의 다가
키에 이라든지
키비 라던지 7시 라던지 치질을 입력을 하게 됩니다
참고적으로 몸 키를 생성을 할 때는 식별자 를 사용할 수 있지만 우리가
교체 요소의 접근을 할때 키에 이라고 사용을 하게 되면 이 녀석을 변수로
인식을 합니다
현재 화면에 보시면 은 키에 이라는 이름의 변수가 없죠 그래서 이렇게
입력을 하게 되면
오브젝트에 언 디파인 드가 들어가게 됩니다
따라서 예상하지 못한 값을 출력하게 되는 거죠
어쨌건 암 객체 같은 경우에는 요소의 접근하는 방법을 한가지 더 제공을
해 주게 되는데요
오브젝트를 입력을 하고 점 을 찍어 주시게 되면 기의 익히 비키 cg
라는 것이 자동완성 기능으로 나오게 됩니다
그래서 요 녀석을 활용을 해서 지금 화면과 같은 방법으로도
접근을 할 수 있다는 것을 기억을 해 주시면 되겠습니다
참고적으로 위의 것과 아래꺼 중에 어떤게 더 많이 사용된 야 그러면 아래
것이 훨씬 더 많이 사용이 됩니다
입력을 할때 그냥 오브젝트 입력을 하고
자동완성 기능으로 찍고 넘어갈 수 있기 때문에 훨씬 더 타이핑 속도도
빠르고 코드를 입력할 양도 적고 뭐 깔끔하기 때문에 요 위에 형태보다는
아래 형태를 더 많이 사용을 한다.고 생각을 해 주시면 되겠는데요 위의
형태를 사용할 때는 이 키 값을 변수로 활용할 경우 입니다
예를 들어서
변수로 칠하는 게 있고 여기에 키에 이라는 것이 들어 있게 되면 위의
방법을 사용할 때는 오브젝트에 c 를 넣어서 요키 에 접근 할 수
있습니다
따라서 이 녀석은 오브젝트에
키 a 가 돼 성
가 베일을 나타내게 됩니다 어쨌거나 간단하게 다시 정리를 해 보게 되면
배열은 되 가로로 생성을 하고 객체는 꽃 부러워한 괄호를 생성을 한다.고
기억을 해 주시면 되겠구요
배열의 요소의 접근을 할 때는 대괄호 안에 다가 숫자 요 숫자로 우리가
인덱스 라고 부르죠
이 인덱스를 사용해서 접근을 한다. 객체 같은 경우에는 이렇게 돼 바로 를
사용하고 과로 내부의 t 를 넣어서 접근을 하거나
아니면 객체 뒤에 점을 찍고 식별자를 입력을 해서 사용을 한다.고 기억을
해 주시면 좋겠습니다
그리고 이때 요녀석은 인덱스 라고 부르지 않고 키라고 모르게 됩니다
한마디로 우리가요 대괄호 안에 넣는 녀석이 숫자 라면 배열을 사용하는
것이고
요 숫자는 인덱스를 의미를 하게 되고요 문자열 이라던지 다른 것을
활용하게 된다면 일반적으로 99% 문자열입니다
이 문자열은 치라고 부르고 이 키를 사용하는 것은 바로 객체라는 것을 알
수 있습니다
그럼 마지막으로 반복문을 사용하는 경우 인데요
배열 같은 경우에는 단순한 꼬 반복문을 사용해서 는 모수 짜이 의미가
없기 때문에 의미가 없고요
후 태신 포인 반복문 의 의미를 가지게 됩니다
이전에 꼬인 반복문 할 때 이 뒤에 원래 넣는 것은 객체 라고 설명을
했었는데요
소인 반복문을 사용하게 되면 요 뒤쪽에 오브젝트를 넣을 수 있고 이
앞쪽에는 씨가 들어가게 됩니다
따라서
지금 화면과 같은 형태 0 지금요 형태를 사용한 과점 배 책 체 내부에
있는 모든 요소를 출력할 수 있습니다
어쨌거나 책의 코드 6 다시 3월 보시게 되면 간단한 상품을 배열로
나타낸 것이 나오는데요
이거를 사용을 해서 오른쪽에 있는 객체 생성 요소 접근 등에 대해서
살펴보도록 하겠습니다
책에서는 지금 화면과 같이 나오는데요 제가 7기 건조 망고 라는 요
제품을 먹다 감 600원 조망 공과 어쨌거나 크 제품을 먹다가 예제를
작성을 해서 요런 제제가 나왔는데
객체를 생성할 때는 요런 꼬 부러운 가로 컬리 브래킷을 사용한다.고 기억을
해 주시면 되겠구요
왼쪽에는 키를 입력을 하고 오른쪽에는
값을 입력을 한다. 라고 기억을 해 주시면 되겠습니다
이어서 2녀 속에 접근을 할 때는
프로덕트 점 뭐 제품명을 사용을 하거나 아니면 프로덕트 에
제품명과 같은 형식을 사용한다. 고 기억을 해 주시면 되겠습니다 실행했을
때 결과가 나오게 한 번 출력을 해 보도록 하겠 고요
마지막으로 반복문을 적용할 때는 호인 단봉 문을 적용을 한다.
뒤쪽에는 프로덕트 를 넣고 사실 요 객체를 다룰 때는 앞을 아이 라고
입력을 하는 것보다는 칠하고 입력하는 게 약간 더 명확하기 때문에 요러한
형태를 많이 사용합니다
이 상태에서 얼얼 툴을 사용해 프로덕트 에
모든 녀석을 출력해 보도록 하겠습니다 그리고 이전에 언급을 했지만
프로덕트 점 키 라고 입력을 하시면 안되요 프로덕트 점 키 라고 입력을
하시면 이 내부의 치가 있어야지
그 녀석을 출력을 하게 됩니다
지금 요키 가 없기 때문에 만약에 요러한 형태로 녀석을 출력을 하게
된다면 언 디파인 드가 나오게 됩니다
어쨌거나 요거 추가적으로 자바스크립트 같은 경우에 객체를 만들 때 약간
유연하게 임 요 뒤에 쉼표 가 붙어 있고 이 다음번에 아무것도 없어도
오류를 내뱉지 않습니다
그래서 뭐 뒤에 혹 그 쉼표가 있다고 큰 문제가 되지는 안하니까 기억을
해 주시면 좋겠고요
뭐 강의에서는 조금 더 정갈하게 쓰기 위해 쉼표 는 제거하도록 하겠습니다
어쨌거나 요정도 를 작성하실 수 있게 되시면 이번 강의의 내용은 확실하게
이해한 것이라고 기억을 해 주시면 좋겠습니다
저장을 하고 실행을 해 보게 되면 프로덕트 에 제품명을 출력을 했기
때문에 7기 건조 망고가 한번 나오고 한번 더 출력을 했죠 그래서 7d
건조 망고 가 나오게 되고 이 다음부터는 이제 보인 반복문을 들어가게
되는데 처음에 제품명을 출력하고 그 다음 당 절임 망고 설 탄 메타 중
아산 악 두려움 시장 색소 그리고 필리핀 이라는 내용을 출력하는 것을
보실 수 있습니다
조금 더 확실하게 이해할 수 있게 씨를 함께 출력을 해서
요러한 식으로 코드를 작성해 보게 되면 유아 100권 주석 처리 할 계엄
실행을 했을 때 왼쪽에 치가 뜨고 이 키에 해당하는 값을 오른쪽에서
확인할 수 있게 됩니다
어쨌거나 요러한 형태로 사용한다. 라고 기억을 해 주시면 되겠구요
오늘 강의는 일단 여기까지 되겠습니다 그럼 다음 간 이어서 뵙도록
하겠습니다 감사합니다.