I'm sw engineer!

사용자가 브라우저를 통해 웹사이트를 접속하면, 서버로부터 HTML, CSS등 웹사이트에 필요한 리소스를 다운 받는다. 브라우저가 페이지를 렌더링하려면 먼저 HTML코드는 DOM, CSS는 CSSOM트리를 생성해야 한다. 1-1. DOM 트리 생성 - 변환 : 브라우저가 HTML의 원시 Byte를 읽어와서, HTML에 정의된 인코딩( UTF-8 )에 따라 개별 문자로 변환 - 토큰화 : 브라우저가 문자열을 W3C표준에 지정된 고유 토큰으로 변환 - 렉싱 : 방출된 토큰은 해당 속성 및 규칙을 정의하는 "객체"로 변환 - DOM 생성 : 마지막으로 HTML 마크업에 정의된 여러 태그 간의 관계를 해석해서 트리구조로 연결 브라우저는 HTML 마크업 처리를 할 때마다 위의 모든 단계 수행 1-2. CSSOM 트..

== ➡️ Equal Operator ( 동등 연산자 ) a==b 라고 할 때, a와 b의 값이 같은지를 비교해서 같으면 true, 다르면 false를 반환한다. 값만 같으면 된다. === ➡️ Strict Equal Operator ( 엄격한 동등 연산자 ) a===b 라고 할 때, a와 b의 값과 Data Type이 모두 같은지를 비교해서 같으면 true, 다르면 false를 반환한다. 값과 Data Type까지 같아야 한다. 1️⃣기본 자료형 javascript는 기본자료형인 숫자, 문자 모두 ==, ===를 이용하여 동등 비교 연산이 가능하다. 2️⃣null / undefined 둘다 값이 없음을 뜻하기 때문에 null == undefined 는 true 이지만 Data Type은 달라서 null..

e. 은 이벤트 객체를 말한다. preventDefault()를 사용하면 태그가 가지고 있는 고유의 동작들을 중단시킨다. 예를 들어 a 태그는 href 로 설정된 주소로 이동을하게되고, submit 태그는 form안에 input 을 전송하고 페이지를 reload한다. $("a").click(function(e){ e.preventDefault(); alert("e.preventDefault()"); }); 이렇게 코드를 작성하면 href 주소로 이동하지 않고 경고창에 e.preventDefault() 이 뜬다.

태그는 인라인 요소이기 때문에 줄바꿈 되지 않고 가로로 나열된다. 태그는 블록요소이기 때문에 자동으로 한줄을 차지한다. 그러나 태그는 안에 문자만 들어가게 작성하는 것이 좋다. 그래서 태그를 가로로 정렬하기 위해서 css속성 중에 float 을 사용하여 준다. float : left ➡️ 왼쪽으로 가로정렬 float : right ➡️ 오른쪽으로 가로정렬

일회성 이벤트 one( 'event' , data, 동작함수) ➡️ bind()와 동일하지만 이벤트가 한번 실행된후 unbind()된다 마우스 이벤트 - click : 마우스를 클릭할 때 발생 - dbclick : 마우스를 더블클릭할 때 발생 - mousedown : 마우스 버튼을 누를 때 발생 - mouseup : 마우스 버튼을 뗄 때 발생 - mouseenter : 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생 - mouseleave : 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생 -mouseout : 마우스가 요소를 벗어날 때 발생 - mouseover : 마우스 요소 안에 들어올 때 발생 키보드 이벤트 - keydown : 키보드가 눌러질 때 발생 - keypress : 글자가 입..

clear( ) : 모든 행을 제거하여 데이터 길이 집합이 0이된다. : 각종 저장값 초기화 🌏https://datatables.net/reference/api/clear() destroy() : 데이터를 다시 받아와서 DataTable을 다시 그려야할 경우 테이블 제거할 때 사용 🌏https://datatables.net/reference/api/destroy() empty() : 선택한 요소의 내용을 지운다. ( 내용만 지우고 태그는 남아있다. )

attr( attributeName ) : 해당 attribute의 값을 가져오기 ex ) $("div").text($("img").attr("alt")); ➡️ div 태그의 img속성의 설명을 출력. attr( attributeName, value ) : 해당 attribute에 값을 설정하기 ex ) $("img").attr("src", "../images/im0.jpg") .attr("title", "똘이군") .attr("alt", "puppy picture"); ➡️ img 태그의 src 속성에 값을 "../images/im0.jpg"로, title 속성에 값을 "똘이군"으로 alt 속성에 값을 "puppy picture"로 설정한다. attr( attributeName, function() ..

jQuery 입력 양식 필터 선택자 - 태그 중에 type 속성에 따른 태그선택자 E: button E : checkbox E: file E:image E:password E:radio E:reset E:submit E:text E:checked - check 된 입력양식 선택 E:disabled - 비활성화된 입력양식 선택 E:enabled - 활성화된 입력양식 선택 E:focus - 초점이 맞춰져 있는 입력양식 선택 E:input - 모든 입력양식 선택 E:selected - option 객체 중에 선택된 태그 선택

E : element : 요소 A : attribute : 속성 V : value : 값 attribute를 조건으로 원하는 element 찾기 1️⃣E[A] - 해당 속성을 가지는 요소 선택 -ex : $('span') 2️⃣E[A=V] / E[A!=V] - 해당속성의 값이 일치/ 불일치하는 요소 선택 -ex : $('span[id="text1"]') /$('span[id!="text1"]') 3️⃣E[A*=V] - 해당 속성의 값이 포함되는 요소 선택 -ex : $('span[id*="text1"]') 4️⃣E[A^=V] - 해당 속성의 값으로 시작되는 요소 선택 -ex : $('span[id^="text1"]') 5️⃣E[A$=V] - 해당 속성의 값으로 끝나는 요소 선택 -ex : $('span[..

jQuery( element object | 'css stye selector' ) = $ ( element object | 'css stye selector' ) 래퍼( wrapper )란, jQuery 또는 $로 시작되는 함수이고, 인자로 전달된 요소들에 제이쿼리의 기능성을 부가해서 반환한다는 의미이다. 셀렉터 종류 종류 표현 Ex All $('*') $('*') ID 선택자 $('#id') $('#data') Class 선택자 $('.className') $('.data') Element ( tag ) $('elementName') $('p') 다중 선택자 $('tag, tag1, tag2') $('span, th, td') 속성 $('[속성이름]') $('[value]') // value라는 속성..