윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 49강 - 생성 순서 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 49강 - 생성 순서

페이지 정보

조회: 684

본문

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

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

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

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

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 뭔 3탄 49강 되겠고요

이번 장에서는 구장의 브라우저 객체 모델에서 간단하게 내용을 살펴보고
곧바로 구장을 넘어가도록 하겠습니다
백한 브라우저 대체 모텔이 란 브라우저 오브젝트 모델이라고 해서 bom
봄 이라고 부르기도 하는데요
자바스크립트를 입력을 할때 사용할 수 있는 윈도우 객체 로케이션 객체
내비게이터 객체 히스토리 객체 스크림 객체 도큐먼트 객체를 브라우저 객체
모델 이라고 부르게 됩니다
참고적으로 앞에 브라우저 라는 단어가 들어가는 것처럼 웹브라우저에서
사용하는 자바스크립트 에서만 사용할 수 있는 개체들이 라고 할 수
있습니다
어쨌거나 브라우저에서 사용할 수 있는 자바스크립트의 코드 중에 모든
객체는 윈도우 객체 라는 것에 귀 속이 되어 저번에 언급했던 것처럼
윈도우를 입력을 하고
점을 입력을 해 보시게 되면 정말 많은 속성들이 나오게 되는데요
우리가 지금까지 그냥 사용했던 얼얼 주도 윈도우 점 얼얼 주로 윈도우
라는 객체 아래의 들어 있는 녀석이 0
프롬프터 라는 녀석도 사실 윈도우 점 프롬프트 라는 녀석 아래의 들어있는
녀석이었습니다 추가적으로 자바스크립트 라는 프로그래밍 언어의 기본적으로
설정되어 있는 우리가 웹브라우저를 사용하지 않아도 자바스크립트 만으로
사용할 수 있는 모 넘버 라던지 하는 녀석들도 모두 윈도우 점 넘버로
사용할 수 있습니다
참고적으로 지금 자동완성기능 이는 안나오는데요 실제로 웹브라우저에서
실행을 해 없으시면 넘버 라는 녀석도 윈도우 라는 객체 아래의 포함이
되어 있습니다
마찬가지로 스팅이 라는 녀석도 마찬가지고 윈도우 점 분류 아니라는 녀석도
마찬가지입니다
따라서 모든 개체에 위에는 웹브라우저에서 사용하는 자바스크립트 의
경우에는 윈도우 라는 녀석이 있다라고 기억해 주시면 되겠습니다
어쨌거나 니 윈도우 객체가 가지고 있는 속성들 중에
로케이션 객체 윈도우 점 2 게이터 객체 그리고 인도 점
티스토리 객체 윈도우 점 스킹 액체 그리고 윈도우 점
도큐먼트 객체가 바로 브라우저 객체 모델 이라고 부르게 됩니다
html5 이전 시대에는 사실 이 녀석들이 가지고 있는 그런 메써드
들이나 기능들이 많지 않았어요 근데 html5 시대가 되면서 몰로 케이션
재치와 히스토리 개체 를 사용해서 페이지 1 에서 주소를 변경 한다.던지
그런 주소 이력을 관리해서 spa 를 만드는 기능들이 나왔구요
예를 들어서 뭐 내비게이터 객체를 사용해서 사용자가 키보드로 입력을 하면
그러니까 컴퓨터 키보드 말고 피아노 건반 키보드 입력을 하면 및 잉 을
읽어 들인다 던지 아니면 내부에서 사용자의 화면을 캡쳐를 한다.던지 아니면
화상 통화를 하게 한다.던지 하는 그런 다양한 기능들이 가능해졌습니다
어쨌거나 그런 기능들을 우리가 html5 api 라고 일반적으로 부르게
됐고 요 책을 보시게 되면 앞쪽엔 브라우저 객체 모델 참고 라고 되어
있는데 여기에서 모질라 웹 api 문서 등을 읽어 보시게 되면 내부에서
할 수 있는 다양한 것들을 확인할 수 있습니다
예를 들어서 내부의 문서를 살펴보게 되면 뭐 h&m dvi 디바이스
우리가요 쓰는 vr 디바이스 를 조작하는 그런 기능도 제공을 하구요
미디어 스트림을 사용을 해서 미디어를 뭐 스트림으로 만들어서 그 통신할
수 있게 하는 기능도 제공을 하고 게임 패드 같은 것도 좋지 제공을 하고
개인 노드 라고 해서 우리가 음악을 재생할 때 그 음악의 소리를 조작을
하거나 하는 이펙터 기능들도 제공을 하게 됩니다
뭐지 라고 되있어서 개인 노드 밖에 없는데요 찾아 보시게 되면 그
이외에도 리버브 를 먹인다 던 자는 그러한 기능도 모두 제공이 됩니다 *
보다 보면 뭐 블루투스 디바이스의 접속을 하는 것도 있고 뭐 스피치의
코디네이션이 라고 해가지고 음성 인식을 하는 것도 제공이 되고
벡터 그림을 그리는 것도 제공이 되고 그냥 뭐 비트맵 그림을 그리는 것도
제공이 되고 뭐 굉장히 다양한 기능들이 제공이 됩니다 이 기능들을 제가
전부 다 설명할 수 있으면 좋겠지만 사실 강의를 들으시는 분들의 따라서
자기가 나아가고자 하는 방향이 분명히 다를 것이고 추가적으로 여기에
기능들 중에 현재 실제로 사용할 수 있는 것들이 그렇게 많지 않고
추가적으로 기능들이 엄청난 속도로 빠르게 바뀌고 있어요
어제까지는 이 그렇게 사용하라고 했는데 오늘은 갑자기 이렇게 사용하면
안되고 이렇게 사용을 해 달라는 그렇게 변경이 일어나는 경우도 많기
때문에 사실 책이나 강의에서는 다루기 어려운 내용입니다
그래서 이런 녀석들을 다룰 때는 사실 그냥 구글에서 검색을 해 보시는게
훨씬 더 좋은 대용 예를 들어서 html5 에서 및 이 조작을 한다.
그러면 html5 및 이라는 식으로 검색을 해 보시면서 하나하나 살펴보면
됩니다
예를 들어서 및 이점 js 라는 녀석을 보게 되면 뭐 및 이를 다루는
녀석이 나오는데요
요런 녀석들을 브라우저 객체 모델을 활용하게 되면
요러한 피아노를 치는 예제 라던지 도 직접 만드실 수 있기 때문에 아니면
자기가 랜덤하게 음악을 만들어서 화성 학교 체계에 의해서 멜로디를 만들고
허세를 잡아주는 그런 프로그램과 만들 수 있기 때문에 자기가 만들고 싶은
것과 관련된 그러한 api 들
한번 쪽쪽 확인을 해보시면 좋을 것 같습니다 참고적으로 용어를 하나 짚고
넘어가게 되면 요
요러한 api 를 사용하는 과정에 굉장히 복잡해요 정말 어렵기 때문에 몸
및 이를 다루는 거 라던지 그런 녀석들을 우리가 쉽게 사용할 수 있는
함수로 만들어서 제공해 주는 걸 왜 판다고 표현을 하게 됩니다
뭐 한국어로는 그냥 랩 한다. 라고 표현을 하게 되는데요
그런 넵 된 라이브러리를 사용을 해주시면 요러한 기능들도 쉽게 쉽게
사용할 수 있기 때문에
뭐 많이 찾아보시고 여러개를 보시고 html 로 어떤 것까지 할 수
있는지를 직접 여러가지 보면서 공부를 해보시면 좋겠습니다
사실 프로그램을 개발을 하다 보면 어떻게 코드를 작성 하느냐보다 어떤게
있냐 를 않은게 조금 더 중요한 것 같아요
내가 html5 로 무엇을 할 수 있는지 모르면 제가 만들 수 있는 폭이
굉장히 줄어들게 되고 내 감
이걸로 무엇을 할 수 있는지 더 많이 알수록 내가 이걸로 만들 수 있는
폭이 드러나기 때문에 뭐 자주자주 자기가 원하는 부분을 검색을 해보시거나
문서를 하나하나 읽어보면서 이건 무슨 기능을 하는 걸까
한번 익혀 보시면 좋을 거라고 생각을 합니다 내가 뭘 할 수 있는지 알게
되면 그 다음부턴 사실 검색 등을 활용을 해서 코드를 어떻게 지내는지
그때부터 공부를 해도 문제가 없거든요 그리고 뭐 사실 음악 프로그램을
만든다고 해서 음악 라이브러리를 다 공부를 해 주셔도 한 6개월 이면
까먹을 거예요 그래서 어떠한 것이 있는지 만 알면 개발에 들어갈 때
관련된 걸쭉 검색을 해 가지고 개발을 할 때 활용할 수 있게 됩니다
어쨌거나 그런 부차적인 것은 뭐 소스로 해보시면 좋겠구요
우리는 앞쪽에 있는 내용을 쭉 건너뛰고 앞쪽에 있는 예제는 그냥 단순한
속성들을 확인 하는 거거든요
그래서 9.8 절에 있는 윈도우 객체의 온로드 이벤트 속성 을 배우면서
다음 장에서 필요한 중요한 개념을 1 살펴보도록 하겠습니다
그럼 책에 있는 예제 코드를 살펴보도록 할텐데요 책에 있는 예제 코드는
지금 화면에 있는 것과 같습니다
html 은 어떻게 데이터를 표시할 g 와 관련된 그 순수 와 관련된
내용이라고 할 수 있겠는데요 한번 코트를 저장을 하고 실행을 해 본
다음에 그 과정을 한번 추적해 보도록 하겠습니다
그럼 저장하고 실행해 보도록 할텐데요 결론부터 말하면 이 html 문서를
위에서 아래로 읽어 들이게 됩니다
뭐 컴퓨터공학과를 가시게 되면 뭐 여기에서 1 배우죠 트리를 순회하는
방법들 세 가지를 배우게 되는데 그중 가장 첫번째 방법이 바로 위에서
아래 드로 읽어 드리는 과정입니다
어쨌거나 요 과정을 살펴보게 되면 위에서 아래로 읽어 들이기 때문에
html 1 것도 있고 헤드 읽어 들이고 타이틀을 거지 고 스크립트
태그를 일어 읽어 들이게 되는데요 이때 프로세스의 영 이라는 글자를
출력을 하게 됩니다
이어서 아래로 내려와서 헤드 테크가 끝나고 바지 태그를 늙어 들기 시작을
하고 프로세스와 원 이라는 것을 화면에 출력을 하게 되고 그 아래의
스크립트 태그를 들 읽어서 프로세스의 투 라는 명령어를 출력을 하고
이어서 h 주 태그 프로세스의 툴을 화면에 출력을 하고 그 아래의
스크립트 태그로 경고로 프로세스를 이라는 녀석을 출력하고 끝나는 모습을
확인할 수 있습니다
이제 다음 장부터 는 우리가 이 바디 태그 안에 글자들이 란 동거를
조작하거나 아니면 움직이게 하는 걸 배우게 될 텐데요
예를 들어서 도큐먼트 점
쿼리 셀렉터 라는 녀석을 활용을 하게 되면 원하는 태그를 들고 올 수
있습니다
예를 들어서 h1 태그를 들고 와서 이 녀석의 스타일의 칼날을 붉은
색으로 변경 한다.든지 에 작업을 할 수 있는데요
아까 위에서 아래로 읽어 들인다 고 했죠 우리가 요 위에 있는 스크립트
태그를 읽어들이는 시점에 바디 태그는 읽어 들이지 도 않았기 때문에 이
코드는 거의 실행이 되지 않는다고 볼 수 있습니다 왜냐하면 h1 태그가
유주 를 실행을 할 때는 아직 없잖아요 그래서 이걸 해결하는 방법이
2가지가 있는데요 첫번째는 스크립트 테크를 아래 쪽으로 옮기는 겁니다
요렇게 옮기게 되면 은 h1 태그가 미디 생성돼 있고 그 h1 태그를
조작을 할 수 있게 됩니다
예를 들어서 저장을 하고 쓸 행을 해보게 되면 출력을 하고 프로세스 원의
색이 붉은 색으로 바뀌는 것을 확인할 수 있습니다
어쨌거나 두 번째 방법은 이 스크립트 태그를 위해 적대 일반적으로 해태가
안에 적는게 깔끔하고 뭐 표징 쪽으로도 맞으니까 요
대신 윈도 점 온 로드 라는 이벤트를 활용하라는 겁니다
2년 속한 우리가 속성을 넣게 되는데요 메소드를 넣게 되는데
썽 션을 입력을 해주시면 윈도우가 온 로드될 때 로드가 완료될 때
요녀석을 실행을 하게 됩니다
따라서 요녀석 같은 경우에는 요 아래 코드가 모두 읽어 들여 주고
html 까지 읽어 들인 상태에서 실행이 되게 됩니다
한번 저장을 하고
실행해 보도록 할게요 창을 따로 해야지 보기가 쉬울 테니까
어쨌거나 실행을 하면 프로세스와 원이 출력이 되고
얼얼 2 추출하는 요 창이 나오고 프로세스의 투가 출력이 되고 경고창이
프로세스를 이라고 나온 이후에 위쪽에 있는 온로드 가 실행이 되면서
프로세스와 원이 붉은색으로 변하는 모습을 볼 수 있습니다
어쨌거나 이렇게 온 뿅뿅 이라고 되어 있는 속성을 속성들을 우리가 고온이
띄게 많아요 온키 다운 온 키 프레스 온 기압 온로드 원 로드 온 로
디드 데이터 안면 보온 마우스 엔터 온 마우스 다운 온 마우스 리브 온
마우스 부부처럼 온 으로 시작하는 속성들을 이벤트 속성이라고 모르는데요
요녀석들 안에다가 함수를 넣어 주시게 되면 그 이벤트가 발생 될 때
거기에 넣은 함수가 실행이 되게 됩니다
그래서 온 로드 라는 이벤트를 활용을 해서 화면이 로드될 때 요 코드를
실행을 하게 된겁니다
이걸 이벤트 라고 부르는데요 이벤트와 관련된 자세한 내용은 다음의
살펴보도록 하겠습니다
어쨌거나 이번 강의에서는 html 은 코드를 위에서 아래로 읽어 들이기
때문에 내부에 있는 녀석을 조작을 하기 위해선
요러한 형태로 코드를 사용을 하거나 아니면
요러한 형태로 온 로드 라는 녀석을 활용해야 된다
요것만 기억을 해 주시면 되겠습니다 그러면 이제 다음 장부터 본격적으로
문서 기체 모델을 살펴보도록 하겠는데요
문서 개체 모델은 조금 중요하기 때문에 예제들을 몇 가지 같이 살펴
보면서 조금 자세하게 알아보도록 하겠습니다
그럼 오늘 강의는 여기까지 되겠구요 다음 강의에서 뵙도록 하겠습니다
참고적으로 책의 내용을 진행을 안 했다고 건너 뜨시면 안되요
책의 내용도 알고 계셔야 되는데 너무 단순하게 추구 확인하고 치고
확인하는 내용이라서 강의에서 다루지 않았을 뿐입니다
어쨌거나 그러면 오늘 강의는 여기에서 끝나기 고욤 다음 강의에서 뵙도록
하겠습니다 감사합니다.