[공부 필기] 생활코딩 웹브라우저 자바스크립트 강의 필기 (1)

Notice

Recent Posts

Recent Comments

Link

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

회고록 블로그

[공부 필기] 생활코딩 웹브라우저 자바스크립트 강의 필기 (1) 본문

2. 프로그래밍 언어 공부/JavaScript

[공부 필기] 생활코딩 웹브라우저 자바스크립트 강의 필기 (1)

김간장 2021. 5. 6. 22:29

1. 웹브라우저에서의 자바스크립트

* 프로그래밍의 본질적인 요소인 조건문, 함수 등을 배우고

* 자바스크립트의 고유 요소인 DOM에 대해서 학습함

* [참고] 자바스크립트가 HTML, CSS를 어떻게 제어하는지 유의해서 학습할 것

2. 오리엔테이션

* 본 수업은 웹브라우저, 웹브라우저에서 표시되는 문서 등을 제어하는 방법에 집중하고 있음

(자바스크립트 라는 언어 자체에 대해서는 얘기하지 않음)

* 오늘날에는 DOM을 잘 사용하지 않음

(DOM을 직접 사용하기 보다는 더 적은 코드로 강력한 효과를 주는 jQuery와 같은 라이브러리를 사용함)

* 라이브러리에만 의존하지 않도록, 라이브러리의 사용성에 갇히지 않도록 브라우저에서 기본 제공하는 DOM 등을 이해하여야 함

* 자바스크립트라는 언어 자체의 대한 지식을 갖고 있다면, 호스트환경을 제어하기 위한 능력을 50%는 이미 만든 것

나머지 50%는 호스트환경(웹브라우저, Node.js 등)에 대하여 공부를 하면 "호스트환경을 자바스크립트로 제어"할 수 있음

3. JavaScript?

* 웹브라우저에서 동작하는 기술은 3가지뿐 (HTML, CSS, JavaScript)

* 자바스크립트는 웹브라우저(or HTML)을 프로그래밍 적으로 제어함

(HTML은 '정보'를 표현하고, CSS는 정보를 '꾸미는(디자인)' 역할을 한다고 볼 수 있음)

* 예제

- onclick 속성은 클릭했을 때 따옴표 사이의 자바스크립트 문법?을 실행시킴

4. HTML에서 JavaScript 로드하기

* HTML 문서에서 JavaScript를 로드하는 방법은 inline 방식, script 태그 삽입 방식 등이 있음

* 첫번째 예제 : inline 방식

- 버튼을 사용자가 클릭했을 때 onclick에 적힌 자바스크립트 코드가 브라우저에 의해서 실행됨 (= 이벤트 라고함)

- onclick은 HTML의 문법이지만, alert('Hello world')는 자바스크립트의 문법임

<input type="button" value="click" onclick="alert('Hello world');">

- 장점: JavaScript 코드가 누구를 대상으로 실행되는 코드인지 분명하게 코드상에 들어남

- 단점: 정보(HTML코드)와 제어(JavaScript 코드)가 한 문장(?) 안에 공존함

=> HTML 코드만 필요할 때 HTML 코드만 찾아가고, JavaScript 코드만 필요할 때 JavaScript 코드만 찾아가는게 어려움

* 두번째 예제 : script 태그 방식

- <script> 태그 안에 자바스크립트 코드가 삽입되며, 웹브라우저는 <script> 안의 코드부터 자바스크립트로 해석함

- <script> 태그는 HTML 문법이고 <script> 태그 안에 있는 코드들이 JavaScript 문법임

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

- 장점: JavaScript 코드들이 <script> 태그 안에 집중되어 있기 때문에 필요할 때 찾기 용이함

=> 그러나, 완전하게 HTML 코드와 분리한 것은 아님

- <script>의 태그는 <body>의 가장 최하단에 추가하기를 권장함

=> <head> 태그 안에 존재해도 되지만 권장하지 않음 (아래와 같은 이유도 있지만 웹페이지 렌더링이 늦어지기도 함)

=> 아래 '더보기' 참고

그 이유에 대하여.

두번째, 세번째 예제 코드와 같이 JavaScript 코드가 HTML 문서의 <input type="button">을 제어한다고 가정함.
이때 <script> 태그를 <head> 안에 포함시키면 기대한 결과값이 나오지 않을 수 있음.

웹브라우저는 HTML 문서를 위에서부터 아래로 해석하는데
<head> 태그 안에 있는 <script> 태그를 먼저 해석하게 되고,
<script> 안의 JavaScript 코드를 해석하는 순간에는 아직 <input type="button">이 해석되지 않은 상태이기 때문.

따라서, 이를 해결하려면 문서의 모든 요소(image, css, js 등)가 준비된 이후 실행되도록 해주어야 하므로
(1) windows.onload 이벤트를 JavaScript 코드에 추가해주거나(2) <script> 태그를 <body>의 최하단에 두어야 함.

<html>
<head>
    <script>
      windows.onload = function(){
          var buttonId = document.getElementById('button-id');
          buttonId.addEventListener('click', function(){
              alert('Hello world');
          });
      }
    </script>
</head>
<body>
    <input type="button" value="click" id="button-id">
</body>
</html>

* 세번째 예제: 외부 파일로 분리

- script 태그의 src 속성을 이용해서 자바스크립트를 불러옴

- 웹브라우저는 HTML 문서를 열어서 해석하고 <script src="./script1.js">를 만나면 script1.js 파일을 웹서버로 부터 응답받아서 열어서 해석함

<!-- HTML 파일 -->
<html>
<head>
</head>
<body>
    <input type="button" value="click" id="button-id">
    <script src="./script1.js"></script>
</body>
</html>

// JavaScript 파일 
var buttonId = document.getElementById('button-id');
buttonId.addEventListener('click', function () {
    alert('Hello world');
});

- 장점: 완전히 JavaScript와 분리할 수 있고 HTML 문서는 오직 '정보'로서의 역할만 할 수 있음.

또한 분리된 JS 파일은 다른 HTML 문서에서 재사용할 수 있음 (유지보수의 편의성)

- 브라우저에는 Cache 기능이 있기 때문에 이미 서버로 부터 전달받은 파일은 계속 다운로드 받을 필요가 없음

=> latency 최소화, 서버 부담 축소, 전송 비용 절감 등 가능

5. Object Model

* JavaScript를 이용해서 브라우저를 제어하고 싶다면, 그 '제어할 수 있는/제어할 무엇'이 필요함

- 그 '무엇'이 바로 '오브젝트(객체, Object)

* 브라우저의 여러 구성요소를 객체로 만들어서 제공해주는 것 = 오브젝트 모델(Object Model)

* 강의에서 살펴볼 오브젝트 모델(Object Model)은 마치 "테두리"와 같은 역할을 함

- 그 "테두리"로는 JavaScript Core(JSC), Browser Object Model(BOM), DOM 등이 있음

- 자바스크립트를 이용해서 브라우저를 제어할 때 '가장 큰 틀'의 역할을 하는 것이 "Object Model"

* 객체(Object)를 만드는 것 = 객체화

* 객체화 예제

- img 태그를 이용해서 이미지를 로드하면 그에 해당하는 이미지를 가져와서 화면에 보여줌

- 자바스크립트를 이용해서 이 img 태그를 제어하고 싶다면, img 태그를 객체로 만들어야 함

(remind: 객체는 자바스크립트로 제어할 수 있는 그 무언가를 의미함)

- 객체는 웹브라우저가 미리 만들어 놓은 상태 -> 개발자는 그 객체를 찾아서 제어하기만 하면 됨(어떤 동작을 시킬 것인지 등)

- 한 줄로 정리해보면 개발자 입장에서는 객체를 이용해서 객체가 가리키고 있는 태그(HTML 태그)를 제어하는 것

<html>
<head>
</head>
<body>
    <img src="sample.jpg" alt="샘플이미지">
</body>
</html>

* 웹브라우저는 img 태그에 대한 객체를 미리 만들어 놓았음 -> 그 객체를 찾는 방법으로 우리는 getElementsByTagName를 이용함
* getElementsByTagName('img') : img라는 태그의 요소들(Elements)을 모두 찾아서 리턴해줌
* imgs라는 객체에 리턴값을 지정하고
* imgs[0]과 같이 배열 접근방법으로 첫번째 데이터에 접근함
* imgs 객체의 style이라는 속성(property)의 width 값을 300px로 변경해봄
- 이때, style이라는 프로퍼티는 img의 CSS를 의미함

- 이미 렌더링을 마치고 사용자에게 출력한 이미지 파일의 width 값을 변경하고 싶을 때 등에서 사용함

* 브라우저가 가지고 있는 객체들의 관계를 구조화할 수 있음 (= 그림은 opentutorials.org/course/1375/6622 참고)

- window 객체 : 전역객체이며, 또 다른 정의로는 window 혹은 frame을 제어하기 위한 객체이기도 함

- DOM

(0) Document Object Model

(1) window가 가지고 있는 많은 프로퍼티 중에서 가장 중요한 프로퍼티(property)

('document.write'는 사실 'window.document.write'이었지만 window가 전역객체이고 + 암묵적인 약속으로 생략 가능)

(2) 웹페이지의 문서(body, img 태그 등)를 제어하는 역할을 함

=> 웹페이지의 내용을 제어

(3) 예시: getElementById, getElementByTagName 등

(4) 호스트 환경이 웹브라우저이기 때문에 존재하는 객체 (다른 호스트 환경에는 없음)

- BOM

(0) Browser Object Model

(1) BOM이라는 객체모델(Object Model) 안에 있는 navigator, screen, location 등도 window 객체의 프로퍼티(property)임

(2) 현재의 웹페이지가 가리키는 URL을 알아내거나, 현재의 웹페이지가 표시하는 페이지 reload, 경고창 띄우기 등을 담당함

=> 웹페이지의 내용을 제외한 브라우저의 각종 요소를 제어

(3) 예시: navigator, screen, location, frames, history, XMLHttpRequest

(4) 호스트 환경이 웹브라우저이기 때문에 존재하는 객체 (다른 호스트 환경에는 없음)

- JavaScript

(0) 좀 더 명확하게는 JavaScript Core

(1) JavaScript라는 언어는 웹브라우저를 제어하거나, Node.js를 이용하면 서버를 제어 할 수도 있음

이 JavaScript는 그 언어 자체가 가지고 있는 객체들이 있는데 그것이 Object, Array, Function 등임

(2) 호스트 환경에 관계없이 JavaScript라는 언어 자체가 가지고 있는 객체임

( 참고: cinnamonc.tistory.com/162 )

6. BOM

오리엔테이션

* Browser Object Model

* 웹브라우저를 제어함

(현재의 웹페이지가 가리키는 URL을 알아내거나, 현재의 웹페이지가 표시하는 페이지 reload, 경고창 띄우기 등)

전역객체 window

* 가장 상위에 존재하는 객체로, DOM이나 BOM 안에 소속되어 있는 객체들(document. screen 등)이 모두 window의 하위 객체임

* alert, document.write 등은 모두 window에 소속된 함수 및 객체들

- 전역함수, 전역변수(e.g. 아래 코드의 변수 a)는 사실 모두 window의 프로퍼티(property)이었던 것

alert('Hello world');
window.alert('Hello world');
// 둘은 동일한 코드임

var a = 1;

a; // 결과 1
window.a; // 결과 1
// 둘은 동일한 코드임

사용자와 커뮤니케이션 하기

* 사용자에게 정보를 제공하거나, 사용자가 정보를 입력할 수 있도록 하거나 등을 함

* 첫번째. alert

- 일명 '경고창'

- 사용자에게 정보 제공, 디버깅 등의 용도로 사용함

(최근에는 console.log를 이용하여 디버깅을 함)

- 확인을 클릭하기 전까지는 어떠한 클릭도 할 수 없으며, 경고창이 실행되어 있는 동안 그 다음 코드가 실행되지 않음

<html>
<head>
    <script src="./script2.js"></script>
</head>
<body>
    <input type="button" value="script" onclick="alertFn();">
    <!-- 버튼 클릭시 alertFn() 함수 실행 -->
</body>
</html>

function alertFn(){
    alert('1');
    alert('2');
    alert('3');
}

* 두번째. confirm

- 일명 '확인창'

- 경고창과 다르게 '확인'과 '취소' 버튼이 있음

('확인'을 클릭하면 'true'를 리턴하고 '취소'를 클릭하면 'false'를 리턴함)

...
    <input type="button" value="confirm" onclick="confirmFn();">
</body>
</html>

function confirmFn(){
    if(confirm('ok?')){
        alert('ok');
    }
    else {
        alert('cancel');
    }
}

* 세번째. prompt

- 사용자로부터 값을 입력 받을 수 있음

- 사용자가 입력한 값을 리턴함

...
    <input type="button" value="prompt" onclick="promptFn();">
</body>
</html>

function promptFn(){
    if(prompt('job') === 'student'){
        alert('student, welcome');
    }
    else {
        alert('not registered');
    }
}

Location 객체

* 현재 페이지의 URL을 알아내기 위해서는 '객체'가 필요함

* 첫번째. 현재 윈도우의 URL 알아내기

- location.toString()과 location.href는 동일한 결과를 출력함

- location.href를 사용하는 것이 더 선호됨

- location.protocol, location.host, location.search, location.hash 등으로 URL의 필요한 정보만 알아낼 수 있음

※ alert(location)과 console.log(location)의 차이
- console.log(location) : location 객체가 갖고 있는 프로퍼티를 분석해서 보여줌
- alert(location) : 인자값이 문자열(String)이어야 하기 때문에 location 객체를 문자화하여 보여줌 (= 현재 페이지 URL 보여줌)

* 두번째. 문서의 주소를 변경하기

- 현재 웹페이지 reload 등 가능

- location.href 속성에 값(새로운 URL)을 대입하면, 해당 URL로 이동시킬 수 있음

- 현재 페이지를 reload 하고 싶은 경우, 위의 코드를 응용하여 아래와 같이 입력하면 reload 시킬 수 있음

=> location.href = location.href

- location 프로퍼티의 메소드인 reload를 사용하는 것도 가능함

=> location.reload()

Navigator 객체

* 브라우저의 제품명, 버전 등 정보를 제공하는 객체임

* Navigator 객체를 이해하려면 cross borwsing을 먼저 알아야 함

- IE, 파이어폭스, 크롬, Safari, 오페라 등등 브라우저의 동작 방법은 W3C와 ECMA를 표준 스펙으로 만들어짐

- 스펙이 정의하지 않은 부분은 각자 제조사(?)가 알아서 만듦

- 브라우저마다 다르게 동작하는 이슈를 모든 브라우저에서 이상없이 동작시킬 수 있도록 하는 기법 = cross browsing

- Navigator는 브라우저마다 다르게 동작하는 부분을 각각 브라우저의 특성에 맞게 동작시키고 싶을 때 사용함

=> "브라우저 정보"를 알아낼 때 사용함

- console.dir(Navigator) : Navigator 객체의 프로퍼티를 열람할 수 있음

* 윈도우의 정보 알아내기

- navigator.appName : 웹브라우저 이름 (크롬, 파이어폭스 등 브라우저를 모두 Netscape로 출력하기 때문에 크게 도움은 안됨)

- navigator.appVersion : 브라우저 버전

- 그 외 navigator.userAgent, navigator.platform 등이 있음

* 기능테스트

- 임의의 브라우저에서 자바스크립트가 실행될 때, 우리가 사용하고자 하는 API가 있는지 없는지 체크하는 방법

- Navigator 객체와 기능테스트를 잘 사용해야 크로스 브라우징 이슈로부터 자유로워짐

- 예를 들어 Object.keys 내장 프로퍼티가 있으며, 오래된 브라우저에는 해당 프로퍼티가 없다고 가정

=> if(!Object.keys) { (Object.keys에 대하여 정의한 구문) } 와 같이 Object.keys 프로퍼티를 정의하여 오래된 브라우저를 지원함

- 브라우저마다 다르게 동작하는 기능이 있다고 한다면, Navigator 객체를 이용해서 브라우저 종류를 알아내고, 기능테스트를 통해서 기능을 정의해주어야 함

창 제어

* window.open 함수 : 옵션들은 필요할 때 찾아서 쓸 것

* 새로운 창을 띄우고 새로운 창과 커뮤니케이션(?)을 할 수도 있음

- 마치 같은 페이지에 있는 것처럼 상호작용 가능

=> open 버튼 클릭 시 window.open('demo3.html', 'ot')이 실행되고 새로 만들어진 창(demo3.html)이 리턴됨

=> 그 리턴된 값을 win 이라는 변수(이자 객체)에 저장하고

=> demo2.html의 <script> 안에서 win 변수를 제어하면 demo3.html에 영향(?)을 끼칠 수 있음

# 보안

* 브라우저에서 보안은 상당히 중요한 부분임

- 사용자가 브라우저를 설치하면? -> 그 브라우저는 사용자의 컴퓨터에 접근할 수 있는 권한을 갖게 됨

- 임의의 웹사이트에 접속했는데 그 웹사이트의 자바스크립트가 브라우저의 제어 권한을 요청하기도 함

- 이를 악용하면 자바스크립트를 통해서 브라우저의 특정 정보를 읽어내고 악용자의 웹 서버로 전송할 수 있음

- 그러므로 브라우저는 이렇게 위험하게(?) 정보에 접근하는 것을 최대한 차단함

- 지금 배우려는 부분도 그런 부분의 일환임

* 같은 도메인에 있는 사이트(html 문서)라면 자바스크립트를 통해서 다른 페이지도 제어할 수 있음

- 위의 '참고 자료1'이 이에 해당함

- 두 페이지(demo2.html과 demo3.html)은 동일한 localhost 도메인 안에 있음

* 하지만 다른 도메인이라면 서로의 페이지를 제어할 수 없음

- 오픈(다른 페이지 열기)은 할 수 있지만, '참고 자료1'과 같이 서로의 페이지 내용을 수정하거나 할 수 없음

* 최근에는 '팝업' 사용을 지양하는 분위기인 듯함

- window.open으로 다른 페이지를 오픈하려고 하면 브라우저가 "팝업 차단됨"을 띄워줌

※ 그렇다면 window.open은 언제 자동 차단되고 언제 허용되는가?

=> 사용자가 명시적으로 버튼을 클릭해서 팝업이 발생하는 경우 = 허용

=> 자바스크립트를 통해서 자동으로 팝업이 발생하는 경우(페이지 접속하자마자 새 창 오픈 등) = 차단

=> 사이트를 접속한 사용자의 의지에 따라 팝업이 발생하는 것이 아니기 때문에

브라우저가 '팝업 차단됨'을 띄우고 사용자에게 의사를 물음

7. DOM (Document Object Model)

* 웹페이지를 자바스크립트로 제어하기 위한 객체 모델

* 가장 먼저 할 일은 "제어의 대상을 찾는 일" -> 그 다음에 "그 대상에 대하여 작업을 수행"하여야 함

제어 대상을 찾기

* 개발자가 웹페이지(HTML 문서)를 만들면 브라우저가 각각의 태그를 바탕으로 객체를 만듦

* 개발자는 브라우저가 만든 객체를 찾아서 작업을 수행하면 됨

* 그 객체를 찾는 방법이 이번 수업의 목적

* document.getElementsByTagName : get(가져온다), Elements(여러개의 요소를), By(-에 의해), TagName(태그명)

- 여러 요소를 태그명을 이용해서 가져옴

- list 객체는 유사배열(배열은 아니지만 배열과 유사함)

<html>
<head>
    <script src="./script3.js"></script>
</head>
<body>
    <ul>
        <!-- <li style="color: red">와 같이 코드를 작성한 것처럼 만들고 싶다. 단, 자바스크립트를 이용해서. -->
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

// script3.js 

window.onload = function() {
    var lis = document.getElementsByTagName('li');
    for(var i=0; i<lis.length; i++){
        lis[i].style.color = 'red';
    }
}

※ 예제를 시도하는 중 <li>의 style.color = 'red'가 먹히지 않는 문제가 있었음.

원인 파악을 위해서 외부로 분리한 JS파일을 내부 inline 방식으로 (body 태그 마지막 줄에) 넣었는데 문제 없이 해결이 되었음.

=> 외부 파일로 분리한 script3.js가 문제임을 파악함

본 글의 "4번 항목 > 두번째 예제"의 경우에 해당하는 것이 원인이었고 window.onload를 추가해줌으로써 해결!

* getElementsByClassName : get(가져온다), Elements(여러 요소를), By(-에 의한), ClassName(클래스명)

- 클래스명을 이용해서 여러 요소를 가져옴

window.onload = function() {
    var activeclass = document.getElementsByClassName('active');
    for(var i=0; i<activeclass.length; i++){
        activeclass[i].style.color = 'red';
    }
}

* getElementById : get(가져온다), Element(단 하나의 요소를), By(-에 의한), Id(ID값)

- 단 하나의 요소를 ID값을 이용해서 가져옴

- ID값은 한 페이지 안에 유일하게 하나 존재하기 때문에 Elements가 아님

- 가장 성능이 좋기 때문에, 이걸 사용할 수 있다면 꼭 사용하여야 함

* querySelector : CSS의 선택자를 인자(argument)로 받아서 선택자에 해당하는 요소들(Elements)을 리턴해줌

- 조건에 해당하는 요소 1개(Element)만 리턴해줌

window.onload = function() {
    var activeclass = document.querySelector('.active');
    activeclass.style.color = 'red';
}

class명이 'active'인 요소가 두개 있지만 가장 앞에 있는 요소만 컬러가 변경되었다.

* querySelectorAll : querySelector와 동일하게 동작하지만 여러개의 요소(Elements)를 리턴해줌

window.onload = function() {
    var activeclass = document.querySelectorAll('.active');
    for(var i=0; i<activeclass.length; i++){
        activeclass[i].style.color = 'red';
    }
}

// CSS로 보면, 아래와 같은 상황임
/* 
.active {
    color: 'red';
} 
*/

jQuery

* 자바스크립트 라이브러리 중 하나

* 라이브러리가 하는 일?

- DOM을 이용해서 문서를 조회하는 방법도 사용할 수 있지만,

라이브러리를 이용하면 훨씬 더 쉽고 짧은 코드로 원하는 요소를 조회하고 제어할 수 있음

* 라이브러리는 DOM, BOM, JavaScrip Core 등을 이용해서 만들어졌음

- 때문에 DOM, BOM, JavaScript Core 등이 "할 수 없는 일"을 '라이브러리가 할 수 있는 것은 아님'

- 다만 자주 사용할 수 있는 패턴, 도구 등을 모아둔 것이기 때문에 편리성이 증대되고 효율적임

- (그러나 라이브러리만 배우면 라이브러리에 의존하게 될 수 있음)

* jQuery 다운로드 : https://jquery.com/download/

- 이왕이면 안정적인 버전이 좋을테니(?) 3.6.0 버전으로 결정함

- jQuery Core, jQuery UI, jQuery Mobile 등 여러가지 있는데 구글링해보니 jQuery Core는 '핵심이 되는 것들'이 들어있고, jQuery UI는 'UI에 특화된 것들(위젯 등)'이 들어있는 등 용도에 따라 사용하라고 나눠놓은 것 같음

- uncompressed는 '압축되지 않은 버전'이고 minified는 '압축된 버전'으로 추측됨

<html>
    <head>
    </head>
    <body>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script>
            jQuery(document).ready(function($){
                // 코드를 작성하는 곳
                $('body').prepend('<h1>Hello world</h1>');
            });
        </script>
    </body>
</html>

* 코드를 이해하려면 선행되는 지식이 있기 때문에 코드 설명 스킵

* 다만 코드를 작성하는 공간과 코드의 앞에 '$'가 있는 것을 유의할 것

제어 대상을 찾기(jQuery)

* jQuery를 구체적으로 사용해보기

* jQuery 기본 문법

$('li').css('color', 'red');

- 항상 '$'로 시작함

- '$'를 jQuery 함수라고 함 (함수이기 때문에 리턴값이 있음)

=> jQuery 함수를 통해서 리턴된 값은 "jQuery 객체"임

- 위의 코드에서 'css'는 ("jQuery 함수"가 리턴한) "jQuery 객체"의 프로퍼티임 (jQuery 객체의 소속임)

- '$' 뒤의 인자로는 여러 값이 들어올 수 있는데, CSS 선택자가 들어올 수 있기 때문에 CSS 선택자를 잘 이해해야함

=> CSS 선택자가 인자(argument)로 들어올 수 있기 때문에 아래와 같은 것도 가능함

...
        <script>
            jQuery(document).ready(function($){
                $('ul > li:first-of-type').css('color', 'red');
                // ul 태그 아래의 자식 태그 중 li의 첫번째 타입만 선택
            });
        </script>
...

* jQuery 사용 예제

- DOM을 통해서 '제어대상 찾기'를 했던 것을 jQuery에서는 아래와 같이 할 수 있음

=> 더 짧은 코드 + 빠르게 컬러를 변경할 수 있음

※ 지금까지 나온 예제들은 CSS를 이용하는 것이 아닌,

HTML의 태그 속성 중 'style'을 이용해서 컬러를 변경하는 것임을 기억해둬야 할 것 같음

* jQuery 제어 대상 조회

- jQuery는 연결해서 css 프로퍼티를 설정할 수 있음 (신기하다)

=> 이를 chaining 이라고 함

jQuery(document).ready(function ($) {
    $('#active').css('color', 'red').css('textDecoration', 'underline');
    // id가 active인 요소의 color='red' + 밑줄 적용시키기
});

- 순수한 자바스크립트(DOM)만을 이용하면 아래와 같이 코드를 작성하여야 함

var activeid = document.getElementById('active');
activeid.style.color = 'red';
activeid.style.textDecoration = 'underline';

스크롤 압박이 심해져서 한번 끊고 가야겠다.

처음 자바스크립트 문법(for문, if문 등을 배우는 그 문법)을 배울 때에는

'이 문법을 HTML 문서에 어떻게 적용한다는거야' 싶었는데 확실히 이 수업을 듣고 나니까 어떻게 쓰는지 감이 잡히고 있다.

(input type="button" onclick="[JS 코드]"와 같이 사용하는 점, getElementsByTagName 등으로 HTML 요소를 불러와서 작업을 하는 점 등등)

라이브러리는 한 평생 만나본 적도 없는데(?) 강의를 들으면서 신기함을 느끼고 있다.

더 짧은 코드로 강력한 힘을 낼 수 있는게 매력적이지만.. 개인적으로 '순정이 진리'(?)라고 생각한다.

뭔 소리인지 모르겠지만 어쨌든...

라이브러리의 문법을 사용한다 하더라도 그 코드를 순수한 자바스크립트(?)로 어떻게 구현할 수 있을지 생각하며 사용해야할 것 같다.

'2. 프로그래밍 언어 공부 > JavaScript' 카테고리의 다른 글

[공부 필기] 재귀함수를 사용하는 이유 (1)	2021.06.01
[공부 필기] 생활코딩 웹브라우저 자바스크립트 강의 필기 (2) (0)	2021.05.24
[공부 필기] 생활코딩 JavaScript 입문 강의 필기 (3) (0)	2021.04.18
[공부 복습] 생활코딩 JavaScript 입문 강의 복습 (3) (0)	2021.04.17
[공부 복습] 생활코딩 JavaScript 입문 강의 복습 (2) (0)	2021.04.12