개발자 도전기

js의 window.onload (이하 onload)와 jquery의 $(document).ready (이하 ready)의 차이에 대해서 알아보겠다. 우선 나는 두 함수를 그냥 페이지가 로드될 때 실행되는 함수라고만 생각했으나, 호출 시점의 차이가 있다고 한다. 간단하게 아래 예제를 보겠다. // 호출 시점에 대한 차이 window.onload = function() { alert("a"); } $(document).ready(function() { alert("b"); }); $(document).ready(function() { alert("c"); }); 위 코드의 실행 순서는 b -> c -> a가 된다 왜 ready가 먼저 실행될까??? 우선 onload부터 알아보자 0. HTML 문서의 처리 ..

Double Ended Queue Deque : 양방향 입출력 FIFO ※ DOM - 1-1. scroll 이벤트 - 마우스를 스크롤하면 발생하는 이벤트 2. touch 이벤트 - 클릭이벤트로 대체 가능하지만 손가락을 2개이상 쓰는 이벤트는 touch이벤트를 사용해야 한다. 3. load 이벤트 - 4. unload 이벤트 - 현재 웹페이지에서 다른 페이지로 이동하거나 브라우저 창을 닫을 때 발생하는 이벤트 - * 명시적인 세션 만료 (로그아웃 / 자동로그아웃 시간) 2. DOM Style - 태그의 스타일 속성을 가져오거나 새로운 스타일 속성을 추가 할 수 있음 - 주의사항 : - (하이픈)을 camel표기법으로 바꿔야 적용이 된다, 2-1) ※ jQuery https://www.samsungsds.c..

4-4) concat - 2개이상의 배열을 하나의 배열로 결합 (자바의 addAll) 4-5) slice() - 4-6)sort() - 배열에 문자형 데이터 있는경우 오름차순 정렬 - arr = [ {name:'김', score:50}, {name:'이', score:70}, {name:'박', score:90}, {name:'최', score:30}, {name:'정', score:1}, {name:'전', score:11}, {name:'양', score:12} ] arr.sort(function(a, b){ return b.score - a.score }); arr.reverse arr=[1, 13, 10, 5, 6, 4]; // 문자타입으로 인식해 문제발생 arr.sort(function(a, b..

1. 함수 - 특정 작업을 여러번 반복해야 하는경우 해당작업을 재사용 가능한 구주로 만들게 되는데 이때 사용하는게 함수 - 특정 기능을 수행하는 일련의 코드 블록을 하나의 실행 단위로 만든것(사전적 정의) 1-1) 함수 선언식 - 함수 선언 키워드, 함수명, 파라미터(옵션), 코드블록, 반환 값(옵션) - 함수가 정의되었다고 자동으로 실행되는것이 아닌, 함수명을 사용해서 호출했을때 실행됨 - 함수명을 사용해서 입력 파라미터에 대응되는 인수(arguments)를 전달하면 함수에 작성된 코드블록이 실행되고 그 결과를 반환함 예제) function sum(p1, p2) { let sum = p1+p2; return sum; } let sum1 = sum(21, 24); let sum2 = sum(7, 16);..

※ 자바스크립트 node.js : 종합적인 프로그램 관리 도구 ※ 개발 환경 구성 1. vscode 설치 2. Node.js 설치 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. vscode에서 node.js 설치 확인 터미널 클릭 node -v npm -v 입력 후 제대로 설치됐는지 확인 3. vscode Extention 설치 ※ 자바스크립트 기본 문법 1. 자바스크립트 작성 위치 - head, body 의 마지막쪽에 작성 (효율적인 관리를 위해) - head에 작성하면 2. HTML파일 실행 2-1) 콘솔 * ..

1. position - 기본값 static - static을 제외한 속성은 위치지정값을 사용 가능 - absolute, fixed는 static보다 앞에온다 1-1) 상대 위치 지정 요소 1-2)절대 위치 지정요소 - absolute, fixed - 세로축 포지션은 top, bottom 가로축 포지션은 left, right - absolute는 스크롤바의 영향을 받음 2. transition - 전환효과가 적용되는 css속성의 이름을 지정 - 저장된 css 속성이 변경되면 전환효과가 시작됨 3. transform - scale(x, y, z), rotate(x, y, z), skew(x, y, z), translate scale translate rotate 텍스트 skew * transition과 a..