BOM 브라우저 객체 모델(Browser Object Model) = 내장객체 window, location, history, document 등 포함 2022.12.29 - [클라이언트/JavaScript] - [JavaScript] 이벤트 핸들러, this, BOM, DOM [JavaScript] 이벤트 핸들러, this, BOM, DOM 이벤트 핸들러 화면에서 클릭이나, 동작시 발생하는 동적인 기능 이벤트: 사용자의 동작 / 핸들러: 함수 이벤트 앞에 on 붙음 태그 - 스크립트의 이벤트 연결 방식: 인라인 이벤트 모델 / 기본 이 j-won950101.tistory.com window 객체 웹브라우저에 대한 전반적인 정보 취득이나 제어에 관련된 객체 window.open() - 새 창을 띄워주는 ..

form 객체 document 객체의 하위 객체 중 하나이므로 유일하게 name 속성으로 선택 가능 document.폼name.요소명 document.body; = document.querySelector("body"); 속성값 설명 value input, textarea 요소의 value값 반환 checked checkbox, radio 체크되어 있으면 true, 아니면 false disabled 요소가 활성화 상태이면 false, 비활성화 상태이면 true length 요소의 개수 focus() 요소의 포커스 맞춤 blur() 요소의 포커스 없애줌 submit() form의 값을 전송 javascript로 form 전송 가능 reset() form의 값을 초기화 "input[ type='submit'..

이벤트 객체 모든 이벤트에서 이벤트 객체 사용 가능 (꼭 다중 이벤트 상황이 아니어도 가능) 이벤트 발생시 실행되는 함수의 (인자값, 첫번째 매개변수)로 현재 실행되는 event 객체를 넣어줌 이벤트 객체의 기능 stopPropagation() 이벤트 전파를 막음 (버블링 중단하기) 굳이 사용x target 이벤트를 적용한 타겟 속성 클릭한 대상, 선택한 것 currentTarget 실제 이벤트가 걸려있는 타겟 속성 부모의 위치 preventDefault() 태그의 고유 이벤트 제거 a, submit 태그 같은 경우 모달창 띄우고 싶을 때 새로운 페이지로 안 넘어가게끔 이벤트 전파 (a.k.a 상속) 부모에 하나의 이벤트만 걸어 놓으면, 모든 이벤트가 동일하게 자식으로 위임 li에 일일히 이..

Node element = node = tag(태그) console.dir(태그); ▶ 어떤 것을 사용할 수 있는지 나타냄 Element 들어간 키워드가 text제외 순수한 태그만 선택해줌 node(tag) 삭제 remove() removeChild(삭제할 자식 노드 선택) 자식 태그의 인덱스 번호를 지울 때 사용 더보기 step 1. 사용자 이름과 할일 목록 만들기 step1 input은 지우는게 아니라 display를 제어하세요 할일 목록 만들기 확인 확인 step 2. 할일 목록 삭제/전체삭제 및 위, 아래 이동 인라인 이벤트 - remove, up, down 함수를 만듦(매개변수 this 사용) 전체삭제시 ul을 지워버리면 다시 목록을 쓸 수 없으므로 .list li를 삭제해야 함 step1 in..

Node element = node = tag(태그) console.dir(태그); ▶ 어떤 것을 사용할 수 있는지 나타냄 node css 변경 style 속성 이용 (속성은 점(.)으로 가져옴/ 쿼리셀렉터로 가져오는 것은 태그) 카멜표기법 따름 (text-align ▶ textAlign) style에 전달되는 값을 문자열로 작성 노드.style.css속성 = 값 node 생성, 추가 createElement() 태그(요소)를 생성 ()안에 문자열 들어감 appendChild() 요소를 부모 자식 관계로 넣어줌, 어떤 태그의 자식요소를 마지막에 추가 태그 요소를 생성해서 넣어줌 append 마지막에 추가하겠다 추가 innerHTML = 문자열 요소를 HTML의 방식으로 생성 직접 문자열로 집어 넣음 버튼..

이벤트 핸들러 화면에서 클릭이나, 동작시 발생하는 동적인 기능 이벤트: 사용자의 동작 / 핸들러: 함수 이벤트 앞에 on 붙음 태그 - 스크립트의 이벤트 연결 방식: 인라인 이벤트 모델 / 기본 이벤트 모델 / 표준 이벤트 모델 인라인 이벤트 모델 가장 많이 사용 태그에 이벤트를 직접 적음 장점: 동일한 함수에 여러 이벤트를 걸어줄 수 있음 ex) 여러 버튼에 check() 함수을 걸어줄 수 있음 단점: 너무 길어지고, 재활용 불가능 어떤 이벤트에 대한 동작인지 확인: this this 키워드 더보기 함수, 아무것도 없는 상태에서의 this ▶ window라는 최상위 객체 이벤트에서의 this ▶ 태그 자신 같은 행동을 하는 이벤트를 실행하는 경우 하나의 함수로 작동할 때 this를 매개변수에 넣어서 현..

함수 java script에서 함수는 1급 최상위 함수 객체지향 프로그래밍 언어에서 훨씬 더 많은 기능을 함 사용자 정의 함수 - 선언적 함수 & 익명 함수 선언적 함수 이름 有 접근제어자 X return 값이 없을 수도 있음 return 있으면 return 값 반환 return 없으면 자동으로 undefined 반환 (자바의 void 개념) 매개변수 없을수도 있음 hoisting(호이스팅): 함수 선언 이전에 호출해도 에러 발생 X (선언 이전 호출 해도 가능) 함수를 변수에 저장 가능 함수를 a에 저장할 때, 변수 선언 이후 호출 가능 - a에 저장하면서 호출X 익명 함수 이름 無 변수에 함수 데이터를 저장하여 변수를 함수처럼 사용 하도록 만들어 줌 hoisting(호이스팅) 사용 불가: 변수 선언 ..

JavaScript 자바 프로토타입(기준이 되는 객체) 기반 객체지향 언어 + 함수형 언어 데이터 통신, 외부 데이터(카카오 지도 등) 가져올 때 사용 플랫폼에 독립적이고, 코드가 직접 html 문서에 삽입되어 브라우저에서 html 파일을 읽을 때 같이 해석되고 실행됨 클라이언트에서만 실행되기 때문에 정보를 서버에 보낼 필요 없이 처리 가능 바로 화면에 나타나는 것을 볼 수 있음 변수들의 타입에 있어 차이 x 순수 스크립트의 사용을 선호 → java보다 확장성이 뛰어남 (유연함) 사용방법이 다양 인터프리터 언어: 어플리케이션이 실행되는 동안 라인 단위로 해석되어 실행되는 언어 한 줄씩 치면 바로 결과가 들어옴 ( ↔ java는 컴파일 언어) // script 언어는 ..

Flex 문법 관련 참고 블로그 https://heropy.blog/2018/11/24/css-flexible-box/ CSS Flex(Flexible Box) 완벽 가이드 많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F heropy.blog layout 구성 1. display 2. float 3. position 4. flex (신규문법) Flex 부모 box(container)에 flex 선언하고, 안에 있는 박스(item) 요소를 유연하게 배치하는 속성 flex는 flex만 이용 (부분 부분 잡아서 처리 가..

Float 레이아웃을 구성할 때 반드시 사용하는 속성 left / right 뿐 float 의 법칙 (암기) 부모의 높이값이 지정되지 않은 상태에서 문제가 발생 () 부모요소에 적용 가상요소: after { content: " " ; display: block; clear: both; } overflow: hidden; float 해제 - clear: both; 탑쌓기해제 실습 박스1 박스2 박스3 박스4 박스5 왼쪽 왼쪽 왼쪽 오른쪽 탑쌓기해제 플롯의 영향을 받지 않음 왼쪽 왼쪽 왼쪽 오른쪽 탑쌓기해제 플롯의 영향을 받지 않음 왼쪽 왼쪽 왼쪽 오른쪽 탑쌓기해제 플롯의 영향을 받지 않음 왼쪽 왼쪽 왼쪽 오른쪽 탑쌓기해제 플롯의 영향을 받지 않음 초보자가 많이 하는 실수! padding-bottom 으로 ..

box 크기 = border(윤곽) + 컨텐츠크기 + padding padding(패딩) [매우 중요] 박스 속성은 웹 페이지의 레이아웃을 구성할 때 가장 중요한 속성 border(윤곽)을 기준으로 안쪽으로 들어오는 여백 width 속성과 height 속성과 별도로 적용 margin(마진) [매우 중요] 윤곽을 기준으로 바깥쪽 여백 상자와 상자간의 거리를 벌릴 때 사용 width 속성과 height 속성과 별도로 적용 box-sizing width 속성과 height 속성을 변경할 수 있는 CSS3 속성 float 쌓아올릴 때 사용 (넘어가는 것을 방지) 1. 기본 너비 공식 content-box = width + border + padding 2. 기본 너비 공식 - padding, border box..

CSS 문법 각각의 스타일 속성에 다양한 값을 입력 동일한 속성 중첩가능 ▶ 마지막 속성만 적용 css 적용방법 = 순서는 가장 가까운 순서부터 1. 인라인 시트 태그 style 속성 { } 중괄호 빼고 style만 적기, color:green; 따로 특별히 주고 싶을 때 사용 2. 내부 스타일 시트 3. 외부 스타일 시트 .css 가장 많이 사용 /* css를 하기 전 꼭 들어갈 기본 값 */ * {margin: 0; padding: 0; list-style: none;} a {text-decoration: none;} img {max-width: 100%; height: auto;} 가장 기본 속성 더보기 실습 외부스타일시트 외부스타일시트 외부스타일시트 css 단위..