🤯TIL/Javascript & jQuery

[생활코딩] 문서의 기하학적 특성(엘리먼트 위치 크기 알아내기 / Viewport / 스크롤 / 스크린의 크기)

엘리먼트의 위치 및 크기 알아내기 API 이용 : console.log(t.getBoundingClientRect()); 테두리를 제외한 엘리먼트의 크기 : ClientWidth, ClientHeight 사용 Viewport 스크롤에 따라 위치의 값이 달라질 때 이해하기 스크롤 할 때 바뀌는 화면영역 = viewport Viewport의 좌표 : getBoundingClientRect - 문서의 내용 중 사용자에게 보여주는 영역 - getBoundingClientRect의 값이 스크롤에 따라 달라지는 뷰포트의 좌표를 사용 - 스크롤의 정도를 알고 싶을 때 pageYOffset 사용하기 문서의 좌표 - 뷰포트 + 스크롤된 정도 스크롤 scrollLeft, scrollTop 프로퍼티 이용 ➡ 문서의 스크롤 ..

[생활코딩] 이벤트(등록방법 / 전파 / 기본동작의 취소 / 문서로딩 / 마우스 / jQuery 이벤트)

이벤트란? 사용자가 클릭했을 때, 스크롤을 했을 때, 텍스트 필드의 내용을 바꾸었을 '때' - event target : 이벤트가 발생하는 대상 ex) 버튼 - event type : 이벤트가 발생하는 행위 ex) 클릭, 변경 - event handler : 어떠한 이벤트가 발생했을 때, 실행할 코드들 등록방법 & inline 이벤트의 대상에 이벤트 핸들러를 등록해줘야 한다. (1) inline : 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것 (this : 이 이벤트가 동작하고 있는 element를 가르킨다. document.getElementById('target') 대신 사용가능) (2) 프로퍼티 리스너 : 이벤트 대상이 되는 객체의 프로퍼티로 이벤트를 등록하는 방식 : 인라인 방식에 비해 HT..

[생활코딩] Text 객체(값 API, 조작 API)

dorothy , : Element dorothy : Text 객체 Text 객체 텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. DOM에서는 공백이나 줄바꿈도 텍스트 노드! 값 API nodeValue = " " 선언시 값 변경됨 data 조작 API call + [append / delete / insert / replace / subString] + Data() 출처 Text 객체 - 웹브라우저 JavaScript (opentutorials.org) Text 객체 - 웹브라우저 JavaScript 소개 텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. 아래는 텍스트 노드를 찾는 예제다. 주목할 것은 DOM에서는 공백이나 줄..

[생활코딩] Document 객체

Document 객체 문서 전체를 대표하는 객체 - Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. - HTMLDocument 객체는 문서 전체를 대표하는 객체 document.childNodes[0] : document.childNodes[1] : ~ 주요 임무 : 새로운 노드 생성 : 문서 정보에 대한 API 제공 (title, URL, referrer, lastModified 등의 정보를 프로그래밍 적으로 제공) 출처 Document 객체 - 웹브라우저 JavaScript (opentutorials.org) Document 객체 - 웹브라우저 JavaScript 소개 Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDo..

[생활코딩] Node 객체(관계 API, 노드 종류 API, 변경 API)

Node 객체 DOM에서 시조와 같은 역할 관계 : 각각의 구성요소들의 프로그래밍적으로 어떻게 연결되어 있는지 알 수 있다. Node 관계 API .firstChild.nextSibling.previousSibling 활용 노드 종류 API .nodeType : 해당되는 노드의 정보가 element, 속성, comment, text인지 알 수 있다. .nodeName : 태그의 이름, 텍스트 등 노드타입보다 조금 더 디테일한 정보를 알 수 있다. 재귀함수 : 어떠한 함수가 실행될 때 자기 자신을 호출하는 것 (traverse: 하나씩 조회한다.) 노드 변경 API 노드 추가 : appendChild(child) : 제일 끝에 추가 : insertBefore(new Element, reference Ele..

[생활코딩] Element 객체(식별자 API, 조회 API, 속성 API, jQuery 속성 제어 API)

Element 객체 element를 추상화한 객체 DOM의 계층구조에서 Element 객체의 위치 Node Document CharacterData Element Attr HTML Document Text | Comment(주석) HTML Element | - HTMLHeadElement - HTMLLIElement var t = document.getElementById('active'); .style : inline 수식 식별자 API 자신을 찾을 수 있도록 이름을 갖는 것 Element.tagName : ONLY 읽어오기 Element.id : id 값 읽고 변경가능 Element.className : 까다로움. / 클래스 네임 지정, 변경 추가 가능 Element.classList : 훨씬 사용이..

DOM : Document Object Model

문서 객체 모델(Document Object Model, DOM)? ➡ 웹 페이지를 자바 스크립트로 제어하기 위한 객체 모델 (웹 페이지 내의 모든 콘텐츠를 객체로 나타내준다.) 제어 대상 찾기 1) document.getElementsByTagName('li'); - document 객체는 페이지의 기본 ‘진입점’ 역할 - document 객체를 이용해 페이지 내 그 무엇이든 변경할 수 있고, 원하는 것을 만들 수도 있음. 2) jQuery 라이브러리 사용 - 기본문법 $('li').css('color', 'red'); - chaining이 가능하여 연속적으로 효과 및 기능 적용이 가능하다. 출처 https://ko.javascript.info/browser-environment 브라우저 환경과 다양한..

BOM : Browser Object Model

브라우저 객체 모델(Browser Object Model, BOM)? ➡ 웹 브라우저 제어를 위한 브라우저가 제공해주는 객체들 (문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체) location 객체 : 현재 URL을 읽을 수 있게 해주고 새로운 URL로 변경(redirect)할 수 있게 해준다. : 식별자 알아내기 https://dorothy-yang.tistory.com/ protocol : // host : port / pathname ? search # hash navigator 객체 : 브라우저와 운영체제에 대한 정보를 제공해주는 객체 - 크로스 브라우징 : 브라우저 상관 없이 동일하게 보여지는 기능 - navigator.userAgent : 브라우저에서 서버에..

[제이쿼리] 제이쿼리 문서 객체 선택자와 조작법

Do it! 자바스크립트 + 제이쿼리 입문 4년 연속 베스트셀러! 전면 개정판으로 출간! 자바스크립트, 제이쿼리의 기본부터 실전에 필요한 핵심까지 모두 담았다! ‘두잇 시리즈 최고 작품’이라 평가받은 책! 전면 개정판으로 더욱 알차게 만들었습니다! 이제는 웹 개발자뿐만 아니라 웹 퍼블리셔와 디자이너에게도 코딩 능력이 필요한 시대! 자바스크립트를 1도 모르겠다면? 프런트엔드 실무 교육 경력 10년 강사가 엄선한 155개의 예제로 기본부터 실무 활용까지 완벽하게 대비하세요. 실제 사이트에 적용하는 ‘반응형 웹 UI 만들기’까지 실습하고 나면 실무가 두렵지 않은 자신을 발견할 수 있을 것입니다! 저자 정인용 출판 이지스퍼블리싱 출판일 2018.04.06 목 차 1. 제이쿼리 기본 다지기 2. 선택자 3. 제이..

[제이쿼리] spring으로 게시판 만들때 나오는 제이쿼리

[ 목 차 ] - 제이쿼리 - 선택자 및 메서드 기본형 - 이벤트 등록 메서드 - 효과 메서드 제이쿼리란? ➡ 자바스크립트를 이용해 만든 라이브러리 언어 라이브러리 언어? ➡ 자바스크립트로 만들어진 다양한 함수들의 집합 제이쿼리에서 개선된 사항들 1) 호환성 문제 해결 2) 쉽고 편리한 애니메이션 효과 기능 구현 제이쿼리 선택자로 스타일이나 속성을 적용하는 기본형 $ = getElementByID와 같다. // 1. 선택한 요소에 지정한 스타일을 적용 $("CSS 선택자").css("스타일 속성명", "값"); // 2. 선택한 요고에 지정한 속성을 적용 $("CSS 선택자").attr("속성명", "값"); script 내 적용 방법 // 방법 1 // ..

[연습문제] 적정 체중을 구하는 테스트기 만들기

문제: 적정 체중을 구하는 테스트기 만들기 적정 체중 =(본인 신장 - 100) * 0.9 풀이 결과

[연습문제] 세개의 숫자를 입력받아 가장 큰 수 찾기(If, else 사용)

문제 : 세 개의 숫자를 입력받아가장 큰 수 찾기 풀이 : 1. 입력 (1) 세 개의 숫자를 입력받을 수 있는 입력창(prompt)을 3개 생성한다. (2) 입력창에서 받는 값을 숫자형(Number)으로 확정한다. (3) 가장 큰 수를 MAX 값으로 정한다. //세개의 숫자를 입력받아 가장 큰 수를 찾는 코드 // 1) 입력 const input1 = prompt('첫번째 숫자를 입력하세요',''); const input2 = prompt('두번째 숫자를 입력하세요',''); const input3 = prompt('세번째 숫자를 입력하세요',''); const num1 = Number(input1); const num2 = Number(input2); const num3 = Number(input3);..

[연습문제] JS로 환율계산 창 만들기

Script 1. 환율 설정 2. prompt 입력창 생성 3. 계산식 설정 4. 결괏값 출력 완성