목록전체 글 (352)
개발자입니다
[비트캠프] 31일차(7주차1일) - jQuery(자바스크립트 라이브러리 만들기)
jQuery 자바스크립트 라이브러리 만들기 vanilla JS vs jQuery jQuery는 라이브러리이다. vanilla JS는 직접 call 방식으로 App에서 Javascript를 call 한다. jQuery는 간접 call 방식으로 App에서 jQuery를 call 하고 다시 Javascript를 call 한다. jQuery 사용시 코드가 간결하다. cross-browser 문제 해결 → 브라우저 간의 차이점을 없앤다 → 웹 브라우저에 따라 명령을 달리 수행 jQuery 만들기 - 1. 태그 찾기 querySelectorAll을 jQuery로 구현한다. $는 특수 문법이 아니라 단지 함수 이름이다. // ex07\exam05-1.html // 아래부터 생략. 이름만 변경됨 "use strict"..
[비트캠프] 30일차(6주차5일) - AJAX(제약, CORS, 프록시 기법, 동기/비동기 요청, 기상청 API 가져오기)
태그와 UI Component 웹 페이지에서 제목, 버튼, textarea 등을 UI Componenet(부품) 라고 한다. UI Component 생성 명령 코드 (HTML)는 , , 등이다. 전송 데이터에서 HTML 부분을 Payload라 한다. (Payload : 실제 돈을 지불하는 수화물) HTTP 에서는 message-body라 한다. AJAX - AJAX의 제약 AJAX 요청의 제약 => HTML을 다운로드 받은 서버로만 AJAX로 HTTP 요청을 할 수 있다. => 이유? 보안 때문이다. - 웹브라우저는 서버로부터 HTML을 다운로드 받으면 HTML에 들어있는 JavaScript를 자동으로 실행한다. - HTML페이지는 반드시 신뢰할 수 있는 것은 아니다. 페이지의 링크를 이리저리 따라가다 ..
[Javascript] getElement 메서드 비교
DOM API 에서 HTML 은 다음과 생성자를 call 한다. 각 생성자별로 사용할 수 있는 메서드가 다르다. Node() 의 인스턴스는 메서드 중 .textContent 사용 가능하지만 .innerHTML 사용 불가하다. Element() 의 인스턴스는 메서드 중 .innerHTML 사용 가능하지만 .style 사용 불가하다. HTMLElement() 의 인스턴스는 메서드 중 .style 사용 가능하며 call 하는 상위 생성자의 메서드 모두 사용 가능하다. javascript에서 querySelector, getElementById, getElementsByTagName 별로 데이터 타입이 달라 사용 가능한 메서드가 다르다. 이게 너무 헷갈려 정리한다. Javascript에서 사용할 수 있는 get..
[비트캠프] 29일차(6주차4일) - AJAX 개요
15puzzle 발표 유용한 기능 정리 // 배열을 fill(값) 의 값으로 채운다. 값이 없으면 undefined로 채운다. Array(cnt).fill() // 특정 태그 앞에 태그를 붙인다. parent.insertBefore(moveElement, standardElement) // puzzleList를 배열로 복사해서 랜덤하게 섞는다. newList = Array.from(puzzleList).sort(() => Math.random() - 0.5) // 배열 내부 item을 하나씩 가져와 함수를 실행한 결과의 배열 다시 저장한다. newList.map((li) => puzzle.append(li)); // string type 변수 앞에 + 붙이면 number type으로 변한다. +str /..
[비트캠프] 28일차(6주차3일) - Javascript(이벤트: 등록, 정보 다루기, 전파, 기본 동작 중지)
이벤트 - 리스너 등록하기 이벤트(event) => 사용자나 시스템에 의해 태그의 상태가 바뀌는 것을 가리킨다. => 각 태그 별로 발생하는 이벤트가 정해져 있다. => 물론 개발자가 임의의 이벤트를 발생시킬 수 있다. 리스너(listener) = 이벤트 핸들러(event handler) => 이벤트가 발생할 때 호출되는 메서드이다. => HTML 태그나 자바스크립트 코드에서 이벤트에 대해 함수를 등록해야 한다. click 이벤트 => 사용자가 태그를 클릭할 때 발생한다. click 이벤트에 대해 리스너를 등록하는 방법 1) HTML 태그의 onclick 속성에 자바스크립트 코드를 넣는다. => 사용자가 태그를 클릭하면 이 속성에 등록된 자바스크립트 코드가 실행된다. => 이 방식은 태그 안에 자바스크립..
[비트캠프] 27일차(6주차2일) - Javascript(캡슐화, DOM API: 태그 찾기, 알아내기, 속성 변경, 추가, 변경, 삭제)
객체 - constructor와 생성자 자바스크립트 객체는 자신을 초기화시킨 생성자 정보를 갖고 있다. // ex04\exam12.html function Score(name, kor, eng, math) { this.name = name; this.kor = kor; this.eng = eng; this.math = math; } function Member(id, pwd) { this.id = id; this.pwd = pwd; } function Board(title, content) { this.title = title; this.content = content; } var obj1 = new Score("홍길동", 100, 100, 100); var obj2 = new Member("hong",..