본문 바로가기
기초공부/WEB

[JavaScript]생활코딩 클라이언트 - 웹브라우저 자바스크립트 정리

dndkdkdk 2019. 3. 31. 05:32

클라이언트 웹브라우저 자바스크립트

1

목표 : 웹브라우저를 자바스크립트를 이용해서 제어하는 방법 익히기
브라우저간의 호환성 문제, DOM을 사용하기 위한 간결한 방법을 라이브러리가 제공하기 때문에 오늘날에는 DOM 대신에 JQUERY, YUI 같은 라이브러리를 이용한다.
그렇지만 라이브러리를 잘 사용하기 위해서는 DOM과 같은 브라우저에서 기본적으로 제공하는 인터페이스를 사용하는 방법 등을 알고 있어야지만 라이브러리가 제공하는 사용성 안에 갇히지 않게 된다.
또한 라이브러리를 더 효율적이고 더 좋은 성능으로 사용할 수 있다.

2

웹브라우저 위에서 동작하는 기술 3가지 : HTML + CSS + JavaScript

  1. HTML : 정보를 표현하는 언어
  2. CSS : 정보를 꾸며주는 언어
  3. JavaScript : html, 웹브라우저를 프로그래밍적으로 제어하는 언어

3

실습준비물

  1. 크롬
  2. 에디터

4

HTML에서 JavaScript 로드하기
1. inline
ex) <input type="button" onclick="alert('hello world')" value="hello world">
사용자가 onclick이라는 속성이 소지하고 있는 태그 즉, button을 클릭했을 때 이 속성의 값으로 들어가 있는 자바스크립트 코드를 실행 한다
- 장점 : 동작하는 대상이 분명하다
- 단점 : HTML안에 존재하므로 자바스크립트만을 관리하기가 쉽지 않음 / 정보로서의 가치가 떨어짐

5

2. <script>
예시

<body>
	<input type="button" id="hw" value="hello world">
	<script>
		var hw = document.getElementById('hw');
		hw.addEventListener('click', function(){
			alert('hello world');
		})
	</script>
</body>

script 태그 안에 자바스크립트 코드가 위치한다. 브라우저는 위에서부터 html코드를 읽다가 script 태그를 만나면 그 밑의 코드를 자바스크립트 문법으로 이해한다. 닫히는 script 태그를 만나면 이후에는 html 문법으로 해석한다.
- 장점 : HTML 코드 안에 자바스크립트 코드가 없어진다 / 자바스크립트 코드를 관리하기 쉬워진다.

6

3. 외부파일

<input type="button" id="hw" value="hello world">
	<script src="./script.js"></script>

//script.js
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
	alert('hello world');
})

개발자 도구, Network에서 html파일을 다운 받은 후, script.js를 다운받았음을 확인할 수 있다.

장점

  1. html 문서에서 자바스크립트 코드를 제거할 수 있다
  2. 웹페이지가 정보로서의 가치가 높아진다
  3. 여러 html 파일에서 하나의 자바스크립트 파일을 공유하여 사용할 수 있다. → 유지보수가 편리하다.
  4. 자바스크립트 파일이 캐시가 되기 쉽다(한 번 다운로드 받은 파일은 더 이상 다운로드 받지 않는다) → 브라우저와 서버가 주고 받는 데이터의 양을 줄여준다.

7

head 태그에 자바스크립트를 위치시키기 보다는 body 태그 끝에 위치시키는 것이 바람직하다.

  1. 오류가 발생할 수 있는 경우의 수가 줄어든다
  2. 사용자 입장에서는 웹페이지가 빨리 로드되는 것처럼 보인다

예시 : 3번째 문장까지 읽었을 때 hw라는 id를 가진 태그는 없기 때문에 오류가 발생한다

<head>
	<script>
		var hw = document.getElementById('hw');
		hw.addEventListener('click', function(){
			alert('hello world');
		})
	</script>
</head>
<body>
	<input type="button" id="hw" value="hello world">
</body>

예시 수정 : 현재 웹페이지가 완성이 되었을 때 웹브라우저는 window 객체의 onload라는 것을 호출하기로 약속되어 있어 웹페이지가 로드가 끝나고 함수가 실행되므로 id가 hw인 태그가 존재하여 오류가 발생하지 않는다

<head>
	<script>
		window.onload = function(){
			var hw = document.getElementById('hw');
			hw.addEventListener('click', function(){
				alert('hello world');
			})
		}
	</script>
</head>
<body>
	<input type="button" id="hw" value="hello world">
</body>

만약 script 태그를 body 끝에 위치시켰다면 window.onload는 필요하지 않다

8

Broswer Object Model : 웹브라우저를 제어하기 위하여 브라우저가 제공해주는 객체들

9

전역객체 window
DOM에 소속되어 있던, BOM에 소속되어 있던, JavaScript에 소속되어 있던 간에 상관없이 전부 window 객체에 소속되어 있다

  1. window 객체의 document 객체에 접근할 경우
    window.document
  2. window 객체의 navigator 객체에 접근할 경우
    window.navigator
  3. window객체의 array 객체에 접근할 경우
    window.array

window 객체는 모든 객체들이 소속되어 있는 객체이면서 동시에 전역 객체이다
ex) alert('hello'); === window.alert('hello');


  1. 만든 함수이던 브라우저가 제공하는 함수인 내장함수이건 모두 윈도우 객체의 method
  2. 함수에 소속되어 있지 않은 변수인 전역변수는 결국에는 윈도우 객체의 property를 만드는 것
  3. 결국 전역함수, 전역변수를 만드는 것은 window라는 객체의 method, property를 만드는 것
  4. 그래서 window를 전역객체라고 한다

10

BOM 예제1 - 사용자와 커뮤니케이션 하기
alert

11

confirm : 사용자의 의도를 입력 받음
확인 : true, 취소 : false

12

prompt : 사용자가 입력한 값을 받음

13

자바스크립트가 브라우저를 제어하기 위해서는 모든 것이 다 객체화 되어 있어야 된다(url처럼 보이지 않는 정보도 객체화가 가능하다)

location 객체 : 현재 브라우저의 창에 열려 있는 문서의 url을 알려주는 객체
윈도우의 url을 알아내는 방법

  1. console.log(location.toString())
  2. console.log(location.href) // 좀 더 선호되는 방식

객체에 대한 정보를 출력하는 방법 2가지

  1. console.log(location) : location 객체에 대한 자세한 정보를 보여준다
  2. alert(location) : 현재 url이 출력된다

1의 경우 그 객체가 갖고 있는 property들을 console log가 내부적으로 분석하여 보여주기 때문에 객체에 대한 정보를 출력한다.
2의 경우 입력 값이 문자열이어야 하기 때문에 자바스크립트가 location라는 객체를 문자화시켜서 보여줬기 때문에 문자화된 결과인 현재 웹페이지의 url(=location.toString())을 보여준다

또한 식별자를 구간별로 쪼개서 자신이 원하는 정보를 정확하게 얻어낼 수 있는 기능도 제공한다

  1. console.log(location.protocol) : 현재 문서의 프로토콜console.log(location.host) : 호스트 : 컴퓨터를 식별하는 주소
  2. console.log(location.port) : 포트 : 컴퓨터에서 돌아가는 여러가지 서버 소프트웨어 식별하는 것 ex) opentutorials.org:8080
    +) 만약 아무것도 출력되지 않는다면 80 포트
  3. console.log(location.pathname) : 웹서버가 가지고 있는 정보 중에 어떤 구체적인 정보를 요청하는 정보
    ex) opentutorials.org/module/904/6634
  4. console.log(location.search) : 물음표 뒤에 따라오는 정보
    ex) opentutorials.org/module/904/6634?id=10 > 이 서비스로 전달된 id값이 10
  5. console.log(location.hash) : 문서 안에 특정한 위치에 북마크함
    ex) opentutorials.org/module/904/6634#bookmark >#bookmark 출력

13

  1. location.href
    1. 현재 웹페이지의 url을 알려줌
    2. 값을 입력하면 그 값에 해당되는 url로 이동
  2. location.href = '주소';
    사용자가 다른 url로 이동을 시켜야 할 때(리다이렉션), 저 property를 자바스크립트로 다른 값으로 바꿔주게 되면 현재 페이지가 다른 url로 이동
    = location = '주소'; (위의 방법이 더 명시적)
  3. 웹페이지 리로드
    location.href = location.href;
    현재 문서의 url을 현재 문서의 url로 변경
    = location.reload()

14

cross browsing : 브라우저마다 같은 코드가 다르게 동작한다
예전에 최초의 상용화된 브라우저를 만든 netscape사와 ms사가 브라우저 경쟁을 벌였다
→ 협의 없는 무질서한 기능 경쟁이 벌어졌고 이에 따라 개발자는 브라우저마다 다른 method를 사용해야 했다
ex) addEventListener vs attachEvent
→ 개발자들 사이에서 불만이 터져나왔고 → 웹표준 정의하고 브라우저 벤더들이 표준을 준수하는 운동을 펼쳤다. → 그 결과 웹표준이 정착할 수 있었다.

각각의 브라우저의 동작 방법은 w3c라는 국제표준기구에서 정의한 스펙에 따라서 브라우저를 만든다
→ 스펙이 정의하지 않는 아주 디테일한 부분은 각자의 상황/전략에 맞게 구현함
→ 이에 따라브라우저마다 다른 결과가 도출될 수 있었고, navigator 객체로 브라우저 특성에 맞는 코딩을 하게 되었다
navigator객체 : 자바스크립트가 실행되고 있는 그 브라우저의 브라우저 제품명, 버전을 알 수 있는 기능

15

console.dir(navigator); : navigator 객체가 갖고 있는 property들의 리스트 출력

  1. navigator.appName : 파이어폭스나 크롬은 Netscape라고 출력되기 때문에 변별력 없음
  2. navigator.appVersion : 운영체제+레이아웃엔진(ex 애플 웹킷)+브라우저+버전
  3. navigator.userAgent : 브라우저가 서버에 네트워크로 접속할 때 서버쪽으로 알려주는 User-Agent 내용 확인
    브라우저가 서버에게 정보를 요청할 때 웹브라우저에 대한 정보도 전달한다
    개발자도구에서 network 탭을 보면 브라우저와 서버가 통신하는 내용을 볼 수 있다 → 아무거나(?) 클릭하고 header라는 정보를 보면 User-Agent의 내용을 확인할 수 있다
    - 보통은 appVersion과 userAgent 정보가 같지만 브라우저에마다 정보가 다를 수 있다
    navigator.platform : 운영체제에 대한 정보

16

기능 테스트 : 작성한 코드가 실행될 브라우저에 사용하고자 하는 api가 있는지 파악하는 기능
브라우저의 종류에 따라서 다르게 동작하는 것은 한계가 있다. 기능테스트와 navigator를 조화롭게 사용하자

기능테스트 만약 기능을 갖고 있지 않다면 잘 작동하도록 하는 로직을 추가한다
기능테스트는 브라우저마다 다르게 동작하는 부분을 보정할 수는 없다. 그 때는 navigator 객체를 사용해야 한다

17

window 객체의 method는 window를 제어하는 것과 관련된 기능이 많다

창제어

  1. window.open('url'); : 새 창에 url을 연다
  2. window.open('url', '_self'); : 현재 창에 url을 연다
  3. window.open('url', '_blank'); : 새 창에 url을 연다
  4. window.open('url', 'ot'); : 새 창에 url을 연다. open을 재실행하면 동일한 이름의 창이 존재한다면 그곳으로 문서가 로드된다
  5. window.oepn('url', '_blank', width=200, height=200, resizable); : 크기 지정// resizable은 최근에는 지원하지 않기도 한다
    자세한 옵션은 사용설명서 참조

18

(이번 예제는 서버를 설치하고 같은 도메인을 가지고 있는 서버의 문서를 열었을때만 동작한다)



  1. open 버튼을 누르면 onclick이벤트에 따라 winopen() 함수가 실행된다
  2. window.open은 연 파일을 담고 있는 새로운 창의 window객체가 리턴되므로 열린 window객체의 리턴 값을 전역변수 win에 담는다
  3. 텍스트 필드의 onkeypress 이벤트를 이용하여 사용자가 글자를 완성할 때마다 onkeypreess의 자바스크립트 호출한다
    (winmessage('this.value') : 텍스트 필드에 입력된 값이 this.value이다)
    (원리는 이벤트 배울 때 배움)
  4. 사용자가 어떤 값을 입력할 때마다 winmessage 함수의 입력 값으로 전달
  5. 새 창의 message라는 값을 가진 id의 element 의 텍스트를 winwinmessage의 입력값으로 들어온 값으로 변경
  6. close버튼을 누르면 win.close 함수가 실행되어 새 창이 닫힌다

window.close는 창을 닫는다

20

브라우저는 사용자의 컴퓨터에 접근할 수 있는 권한을 갖고 있다. 어떤 웹사이트에 들어갔을 때 그 사이트가 가지고 있는 기능 중에 사용자 브라우저의 특정 파일을 읽어서 자신의 사이트로 전송한다거나 하는 것이 바로 보안의 취약점이 될 수 있다.
그러한 일의 일종으로 윈도우, 팝업을 열고 닫는 것도 보안적으로 접근해야 한다.
같은 도메인의 사이트라면 자바스크립트를 통해서 원격으로 다른 사이트를 제어할 수 있지만 다른 도메인이라면 불가능하다.

팝업이 인터넷의 사용성을 저해하는 측면이 있어서 최근에는 팝업을 잘 사용하지 않는다.
> 이것도 일종의 보안적인 접근이다.
(예제추가?)

사이트에 접속 할 때 팝업이 실행되는 것은 기본적으로는 차단되고 사용자가 팝업 허용했을 때만 팝업이 실행된다.
그러나 사용자가 명시적으로 버튼을 클릭하는 것과 같은 행위를 했을 때는 자동으로 팝업이 실행된다.

21

문서를 제어하기 위해서는 우선 제어 대상을 찾고, 대상에 대해서 작업을 해야한다.

html문서를 만들면 각각의 태그들을 바탕으로 브라우저가 웹페이지를 만든다.
그 과정에서 각각의 태그에 해당되는 객체를 만들고 사용자는 그 객체를 이용하여 문서를 제어한다.

getElementsByTagName('tag') : 인자 값에 해당되는 태그의 객체를 찾아서 그 리스트를 유사배열에 담아서 반환한다
(유사배열 : 배열은 아니지만 배열과 유사하게 작동한다는 의미에서 표현)
예제 : li 각각의 element에 style='color:red' 속성을 주고자 한다

  1. document 객체가 가지고 있는 getElementsByTagName을 호출하여 li에 해당되는 각각의 태그들의 객체를 담은 유사배열을 리턴한다
  2. for문을 이용하여 style='color:red' 속성을 준다

예제2 : ul 태그 하위의 li 각각의 element에 style='color:red' 속성을 주고자 한다

  1. ul 태그의 객체를 반환받고 document 객체 대신 getElementsByTagName을 호출한다
  2. 이하 동일

22

getElementsByClassName('class') : 인자 값에 해당되는 클래스 네임을 갖고 있는 element들을 조회하여 유사배열에 담아서 반환한다

23

getElementById('id') : id 값을 기준으로 객체를 조회한다
- 가장 성능이 좋으므로 가능한 이 method를 조회한다

24

querySelector : 선택자를 인자로 받아서 그 선택자에 해당되는 element들의 객체의 리턴
querySelectorAll : querySelector가 조건에 해당되는 element 하나만을 리턴하는 반면에 이것은 선택자에 해당되는 모든 element를 유사배열에 담아서 리턴

25

jQuery : 쉽게 element를 조회하고 제어하는 방법을 제공하는 라이브러리
- 자바스크립트가 하지 못하는 것을 할 수 있는 것이 아니라 자주 사용하는 작업을 효율적으로 진행할 수 있는 것이기 때문에 라이브러리 안쪽에 있는 기능에 갇힐 수 있다. 그렇지만 라이브러리를 사용하지 않을 수 없다.

26

JQuery파일을 자신의 웹페이지에 로드해야한다
방법

  1. CDN
  2. 다운로드
(나중에 실행 추가)

27

$('li').css('color, 'red') $ : JQuery function

  • 인자 : 보통 CSS 선택자
    - JQuery 객체 : JQuery 함수가 리턴한 객체
  • . : JQuery function을 통해서 리턴된 값이 객체라는 뜻
  • css : JQuery객체의 method - JQuery 함수의 인자에 해당되는 element들 전체에 대해서 method 실행

    • 28

    DOM vs JQuery : 비교
    - JQuery는 빠르게 작업을 처리할 수 있고 코드가 짧아진다

    30

    $('#active').css('color', 'red').css('textDecoration', 'underline');
    id값이 active인 element를 제어할 수 있는 JQuery 객체를 리턴하면 css method를 실행한다. 이 css는 그 JQuery 객체를 리턴하므로 다시금 css method를 호출할 수 있다.
    - chaining : 선택한 element에 대하여 연속적으로 method를 호출하여 사용할 수 있다

    31

    객체에 대하여 작업을 할 때 그 객체가 어떤 객체이고 어떤 역할을 하는지 이해가 필요하다
    console.log(변수.constructor.name); : 객체의 이름을 알아내는 코드
    (객체의 constructor 생성자 함수를 알아낸 다음 그 함수의 이름을 알아내는 방법)


    HTMLLIElement : 조회한 객체가 하나 리턴되었을 경우 리턴되는 값
    = HTML/조회한 객체/단수/element
    HTMLCollection : 조회한 객체가 둘 이상의 element를 리턴할 경우 리턴되는 값
    HTML/Collection - 유사배열 : 여러 개의 element 담음
    (나중에 결과 출력)


    저작자표시 비영리

    '기초공부 > WEB' 카테고리의 다른 글

    [CSS]font 속성  (0) 2019.04.01
    stackoverflow april fools day cursor-effects  (0) 2019.03.31
    [JavaScript]생활코딩 언어 - 자바스크립트 정리  (0) 2019.03.25
    [CSS]생활코딩 WEB2-CSS 정리  (0) 2019.03.24
    [HTML5]이미지 태그, 오디오 태그, 비디오 태그  (0) 2019.03.20

    '기초공부/WEB' Related Articles

    티스토리툴바