본문 바로가기

JS

 (44)
11. DOM DOM(Document Object Model) HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것 -> HTML문서에 작성된 내용을 트리구조(계층형)로 나타냈을 때 각각의 태그, text, commet 등을 Node라 한다. * 계층형 구조 document : { DOCTYPE : html HTML : { HEAD : { TITLE : { TEXT : "문서제목"} STYLE : {...} META : {...} }, BODY : { H1 : {TEXT : "제목", ATTRIBUTE : "속성"} COMMENT : {TEXT: 주석내용} DIV : {...} } } } Node 확인하기 부모 요소.parentNode 요소의 부모 노드 탐색하여 반환 자식 요소.childNodes 요소의 자식 ..
1. jQuery 개요 jQuery 기존에 복잡했던 클라이언트 측 HTML 스크립팅을 간소화 하기 위해 고안된 JavaScript 라이브러리 적은 양의 코드로 빠르고 풍부한 기능 제공 * 라이브러리: 프로그램, 프로그래밍 언어에 없는 추가적 기능 1. jQuery 라이브러리 다운로드하여 external 방식으로 연결 2. CDN(Content Delivery Network) 이용하여 온라인 환경에서 페이지 로딩 시 다운로드 하여 연결( 자바스크립트 버튼 제이쿼리 버튼 HTML 해석 순서와 window.onload, jQuery ready()함수 HTML 문서는 위에서 아래로 항상 순서대로 해석된다. 즉, 아래쪽에서 작성되어 아직 해석이 안 된 코드는 사용할 수 없다. window.onload - HTML(현재창)이 모두 로딩이..
10. JavaScript 객체, JSON JavaScript 객체 JavaScript 객체는 {} 내에 key : Value 가 모여있는 Map형태로 작성된다. -> { K:V, K:V, K:V...} - JavaScript에서 객체를 생성하는 방법 1) {} : 객체 리터럴 표기법을 이용하여 생성 2) 생성자 + new 생성자()를 이용하여 생성 ** JS객체의 Key는 무조건 string(묵시적 string) = key 작성 시 "", '', 따옴표X 모두 string으로 인식 const brand = "Macdonald" const product = { "pName" : "Cheese Burger", "brand" : "Burger King", price : 7000, size : ["s", "M", "L"], 'info' : functi..
9. 윈도우 내장 객체 윈도우 객체 1. 브라우저 창 자체를 나타내는 객체 2. window 객체는 js에서 최상위 객체로 DOM, BOM으로 분류된다. - DOM(Document Object Model) : html 자체를 나타내는 객체 (document.get~) - BOM(Browser Object Model) : location, history, screen, navigator -> 페이지 간 이동 * window 객체는 창 자체를 나타내고 있으므로 브라우저 창 내에서 어디서든 접근 가능 즉, window 객체의 속성과 기능을 호출 시 window. 을 붙이지 않아도 호출 가능하다. ex) window. alert() == alert() window.setTimeout(함수, 지연시간ms) 지정된 지연시간 후 함수를 실..
8. 배열 배열(Array) 변수를 묶음으로 다루는 것(변수가 연속적으로 나열) * JS 변수의 특징 1. 자료형 제한이 없다. 2. 길이의 제한이 없다. (== Java Collenction List와 비슷) * JS 배열 선언 방법 1. const arr1 = new Array(); -> 0칸짜리 배열 생성 2. const arr2 = new Array(3); -> 3칸짜리 빈 배열 생성 1. const arr3 = []; -> 0칸짜리 배열 생성 1. const arr3 = ['가', '나', '다']; -> 3칸짜리 초기화된 배열 생성 const arr1 = new Array() const arr2 = new Array(3) const arr3 = [] const arr4 = ['가', '나', '다'] *..
7. 형변환, 비교연산자, 문자열/숫자 내장함수 문자열 -> 숫자 요소의 내용 또는 값을 얻어오면 기본적으로는 문자열(string)로 인식되어 덧셈을 하려고 하면 "더하기"가 아닌 "이어쓰기"가 된다. * 변환 방법 1. parseInt(문자열) : "정수" -> 정수 ex) "123" -> 123 "실수" -> 정수 ex) "3.14" -> 3 (소수점이 버려짐) 2. parseFloat(문자열) : "정수" -> 정수 ex) "123" -> 123 "실수" -> 실수 ex) "3.14" -> 3.14 3. number(문자열) : "정수" -> 정수 ex) "123" -> 123 "실수" -> 실수 ex) "3.14" -> 3.14 * 가장 많이 사용(직관적임) console.log("1. parseInt") console.log("parseInt..
6. 정규표현식 정규표현식(Regular Expression) 특정한 규칙을 가진 문자열의 집합을 표현하는 형식 언어로 정규표현식을 이용하여 입력된 문자열에 대한 특정 조건 검색, 일치여부 판단, 치환 등에 대한 조건문을 간단히 처리할 수 있다.(유효성 검사시 사용) 1. 작성한 정규표현식을 그림으로 나타내줌(사용 잘 안함) http://regexper.com 2. 정규표현식 테스트(자주 사용) http://regexr.com 3. MDN 정규표현식 안내 https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions 정규표현식 객체 생성 및 확인하기 1. 정규표현식 객체 생성 방법 //1 const regExp = new RegExp("정규표..
5. 이벤트 이벤트(Event) 1. Event: 브라우저 상에서의 동작, 행위 ex) click, keyup~press, mouseover~leave.. 2. Event Listener: 이벤트가 발생하는 것을 대기하고 있다가 발생 시 연결된 기능(함수) 수행 ex) onclick, onkeyup, onchange, onsubmit... (on이벤트) 3. Event Handeler: 이벤트와 리스너에 연결된 기능(함수), 이벤트가 발생했을 때 수행하고자 하는 함수 인라인 이벤트 모델 요소 내부에 이벤트 리스너/핸들러를 작성 (형식) on이벤트명 = "함수명()" 인라인 이벤트 function eventTest1(btn){ btn.style.backgroundColor = "pink" } 고전 이벤트 모델 요소가 ..

티스토리툴바