2019. 11. 12. 13:05ㆍEngineer/HTML, CSS, JavaScript
HTML과 CSS를 공부(개념정도?)했으니 이제 javascript를 알아볼 차례. 역시나 Do it 시리즈로 선택했다. 그런데 이책은 오타가 너무 많아서 좀 실망함. 저자는 정인용님인데...이분의 실수인지 편집자의 실수인지....암튼 오타 많아서 많이 아쉬움.
HTML과 CSS의 최신판에 대한 공부를 하고나서 2014년도에 나온 자바스크립트와 제이쿼리 공부를하니...뭔가 뒷북치는 느낌이다. 지금의 HTML5와 CSS3로 쉽게 구현할수 있는 것을 옛날 자바스크립트와 제이쿼리로 어렵게 구현하고 있는 느낌. ㅎㅎ 이래서 기술 서적은 최신 것을 봐야하나보다. 따라서 책을 대충대충 보면서 기본적인 문법이나 이해정도를 목표로 봤다. 풍부한 오타도 내가 대충 보도록 한술 거들었고. 570페이지 정도의 책인데 4일정도 걸린듯. 실습은 전혀 안함.
개정판으로 다시 한번 봐야할 듯.
내가 본 것은 2018년 개정판이 아니라 2014년 판이다. 누가 빌려갔는지 도서관에 2018년 개정판이 없어서.... .
내용 정리
자바스크립트는 개발자가 만든 문서에 방문자가 방문하여 어떤 동작을 취했을 때, 그 동작에 대응하여 반응이 일어날 수 있도록 해주는 언어.
- 인터프린터 언어 : 코드 작성 순서대로 윗줄부터 순차적으로 구문 수행
- 크라인언트 스크립트 언어 : 사용자 컴퓨터에서 실행됨. (서버 스크립트 언어로는 JSP, ASP, PHP 등)
- 객체 기반 언어 : 다양한 객체가 존재, 그리고 그에 해당하는 메서스들이 존재
- 공개된 언어 : 웹문서에서 완성된 자바스크립트를 외부로 분리할 수 있으나, 완벽히 숨길 수 없음. 즉 다른 개발자들이 복사&붙여넣기로 카피가 가능
- 라이브러리가 다양함 : 제이쿼리, node js, 등 많은 라이브러리들이 개발되어 있음
- 서버의 부하를 줄일 수 있음 : 클라이언트 컴퓨터에서 실행되는 클라이언트 스크립트 언어이므로.
- 동적인 사이트로 만들 수 있음 : 자동 슬라이드 배너, 퀵 메뉴 등을 만들 수 있다.
- 인터렉티브한 사이트를 만들 수 있음 : 반응형 웹을 만들 수있다. 마우스 호버링, 마우스 클릭시와 같은 이벤트에 대해 반응하는.
- 다양한 라이브러리: 특정 기능을 수행하도록 함수를 제작할 필요 없이 이미 만들어진 라이브러리를 이용하면 인력과 시간을 아낄 수 있다
- HTML5 API기반의 언어 : HTML5는 자바스크립트를 기반으로 만들어 졌다. 따라서 HTML5를 이해하려면 자바스크립트를 알아야함
이 책에서는 웹브라우저로 파이어폭스를 추천하며, 에디터로는 에디터 플러스를 추천.
JavaScript
주석은 C언어처럼 //와 /* */를 사용
주로 HTML의 <head> 태그에 선언하여 사용하나, 해외에서는 <body>에 선언하여 사용하는 개발자도 많다고함. js파일로 따로 파일을 분리하여 사용가능
변수형이 따로 없음. 자동으로 변수형(문자형, 숫자형, 논리형, Null)이 지정되나봄. 그냥 변수만들어서 입력하고 싶은거 넣으면됨
HTML 내부에 자바스크립트를 작성할 때 태그를 사용하려면 CDATA 선언문을 작성해야 문법 오류가 안남(지금 버전에도 그럴까?)
비교연산자에서 처음 보는 것 있음 !==와 ===. 데이터형과 값에 대한 비교를 수행.
자바스크립트의 객체는 내장객체, 브라우저 객체모델(BOM), 문서객체 모델(DOM)로 나눌 수 있음
- 내장객체 : 문자, 날짜, 배열, 수학 객체 등
- 브라우저 객체 모델: window, screen, location, history, navigator 등
- 문서 객체 모델: HTML 문서 구조를 나타내는 객체
이벤트 객체는 사이트에서 방문자가 이벤트(마우스 이동, 클릭, 드래그, 키보드 클릭, 웹페이지 로딩, 포커스 등등)를 발생시킬 때마다 생성. 이 객체를 통하여 다양한 이벤트 정보를 가져올 수 있음
그 외에 제어문, 함수, 이벤트 등에 대한 설명이 있는데, 다른 언어에서도 많이 쓰이는 것이라 생략.
제이쿼리 (JQuery)
자바스크립트를 이용해 만든 라이브러리 언어. 라이브러리 언어란 자바스크립트로 만들어진 다양한 함수들의 집합
- 호환성 문제점 해결 : 자바스크립트의 크로스 브라우징 호환성 문제를 해결
- 쉽고 편한 애니메이션 효과 구현
- 직접 선택자: 전체(*) 클래스(.) 아이디(#) 그룹(,)
- 인접 관계 선택자 : .parent() .prev() .children() 등등
- 탐색 선택자: .first() .last() .slice(n), 등등
- 선택자 관련 유용한 메서드 : is(), noConflict(), get(), each() 등
- 속성 조작 메서드 : html(). text(), css(). addClass(), prop(), val() 등
- 수치 조작 메서드 : height(), width(), innerHeight(), offset() 등
- 객체 편집 메서드 : before(), after(), append(), clone() 등
- 이벤트 등록 메서드 : load(), ready(), click(), hover(), focus() 등
- 효과 및 에니메이션 메서드 : hide(), show(), toggle(), animate() 등
화면 전환 없이 클라이언트측과 서버 측간의 XML, JSON, 텍스트, HTML 등의 정보를 교환하기 위해서 사용. 비동기 방식이므로 방문자는 자료 요청 후 전송 완료시까지 대기할 필요 없이 다른 작업을 수행 가능
메서드
- load(), .ajax(), .post(), .get(), getJSON() 등등
개발자가 드래그&드롭, 슬라이드배너, 툴 팁 기능 등을 구현해 놓은 프로그래밍을 자바스크립트 파일로 제공하는 제이쿼리 라이브러리. 웹 문서에 가져다 연동시키기만 하면 바로 사용가능
bxSlider 플러그인(슬라이드 배너나 자동으로 재생되는 슬라이드 배너), UI 플러그인, Accodion Image 플러그인, swipejs 등 다양함.
아래에 사이트에서 다양한 플러그인을 미리보기와 함께 다운 로드 가능
제이쿼리 UI : http://jqueryui.com/
jQuery Rain : http://www.jqueryrain.com/
HTML DRIVE : http://www.htemldrive.net/
아코디언 이미지 플러그인 : https://github.com/webargument/jquery-accodion-image-menu/
swipejs : https://github.com/bradbirdsall/Swipe
어도비 플래시 대신하여 밀고 있는 거라고함. 지금은 어떤지 모르겠네..책의 시점은 2014년이라. GUI 환경에서 인터랙티브한 HTML 웹 컨텐츠를 쉽게 만들 수 있음 ...책 마지막부분에 간단한 실습 내용 정도 다루고 있어서 생략.
'Engineer > HTML, CSS, JavaScript' 카테고리의 다른 글
| 노마드 코더, 니콜라스의 Javascript 강의 (0) | 2019.11.20 |
|---|---|
| Do it! HTML5 + CSS3 웹 표준의 정석 (0) | 2019.10.26 |