개발자입니다

UI 다루는 방법 비교(Bootstrap vs jQuery) UI 컴포넌트를 다루는 방법 - 버튼 UI HTML에 버튼 UI 컴포넌트를 다루는 방법 - CSS로 설정하기 CSS 파일 별도로 분리해서 link를 건다. 버튼 // exam06.css .btn { border: 1px solid gray; display: inline-block; padding: 5px 10px; border-radius: 3px; background-color: #0000ff; color: white; box-shadow: 1px 1px 2px 0px gray; } .btn:active { background-color: #0000c9; box-shadow: 0px 0px 0px 0px gray; } .btn:hover { ..

메서드와 파라미터 그림 왼쪽 : hello() 함수 정의 = 연산자 정의 그림 오른쪽 : hello는 메서드(함수) = operator(연산자) 이다. ++a 에서 ++과 같이 작업수행 부분이다. ("홍길동")은 파라미터이다. ++a 에서 a와 같이 작업을 수행할 때 사용할 데이터이다. ++a에서 ++는 연산자(operator)이고 a는 피연산자(operand)이다. 메서드와 객체 -우측 상단 그림 : let obj = new Greeting("홍길동"); 하면 new로 ① 빈 객체 생성해서 Greeting() 에 주소 200 넘겨주고, 주소 200을 obj에 저장한다. ② object() 가 초기화, ③ Greeting() 이 초기화 시킨다. new로 인스턴스를 생성하면 그 주소가 리턴된다. -좌측 상..

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"..

태그와 UI Component 웹 페이지에서 제목, 버튼, textarea 등을 UI Componenet(부품) 라고 한다. UI Component 생성 명령 코드 (HTML)는 , , 등이다. 전송 데이터에서 HTML 부분을 Payload라 한다. (Payload : 실제 돈을 지불하는 수화물) HTTP 에서는 message-body라 한다. AJAX - AJAX의 제약 AJAX 요청의 제약 => HTML을 다운로드 받은 서버로만 AJAX로 HTTP 요청을 할 수 있다. => 이유? 보안 때문이다. - 웹브라우저는 서버로부터 HTML을 다운로드 받으면 HTML에 들어있는 JavaScript를 자동으로 실행한다. - HTML페이지는 반드시 신뢰할 수 있는 것은 아니다. 페이지의 링크를 이리저리 따라가다 ..

DOM API 에서 HTML 은 다음과 생성자를 call 한다. 각 생성자별로 사용할 수 있는 메서드가 다르다. Node() 의 인스턴스는 메서드 중 .textContent 사용 가능하지만 .innerHTML 사용 불가하다. Element() 의 인스턴스는 메서드 중 .innerHTML 사용 가능하지만 .style 사용 불가하다. HTMLElement() 의 인스턴스는 메서드 중 .style 사용 가능하며 call 하는 상위 생성자의 메서드 모두 사용 가능하다. javascript에서 querySelector, getElementById, getElementsByTagName 별로 데이터 타입이 달라 사용 가능한 메서드가 다르다. 이게 너무 헷갈려 정리한다. Javascript에서 사용할 수 있는 get..

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 /..