개발 프로세스/Front-end
-
[JavaScript] 브라우저 제공 내장 객체 : DOM 객체개발 프로세스/Front-end 2021. 6. 14. 23:28
DOM (Document Object Model) 자바스크립트 입장에서 웹문서를 객체 형태로 다루는 모델 HTML DOM은 객체는 브라우저가 HTML 태그마다 하나의 객체로 만든 것이다. ... 로 구성된 요소는 p객체로, ... 로 구성된 요소는 div 객체로 생성한다. 자바스크립트를 통해 DOM의 내용을 추가/변경 → HTML 문서의 태그, 콘텐츠, 디스플레이 되는 내용 변경 DOM의 트리구조 브라우저가 HTML 페이지를 로드하면서 HTML 태그의 포함 관계에 따라 DOM 객체들을 트리(tree)구조로 만든다. 자바스크립트 코드는 이 DOM 트리를 따라 DOM 객체들을 마음대로 접근할 수 있게 한다. 노드 : HTML 태그 요소 (속성, 속성값으로 구성) DOM 트리의 루트는 document 객체이다..
-
[JavaScript] 자바스크립트 제공 코어 객체 : String, Math개발 프로세스/Front-end 2021. 6. 10. 17:57
자바스크립트 코어 객체 브라우저의 종류나 HTML 페이지의 구조에 관계없이 자바스크립트 프로그램에서 항상 활용할 수 있는 기본 객체들이다. 1. String 일단 생성되면 내부의 문자열 수정이 불가능하다. length 프로퍼티 : 문자열의 길이를 알려주는 읽기 전용(수정 불가) 프로퍼티. [ ] 연산자를 사용하여 인덱스로 각 문자에 접근할 수 있다. 1-1. String 객체 주요 메소드 charAt(index) 인덱스 idx에 있는 문자를 문자열로 만들어 리턴 charCodeAt(index) 인덱스 idx에 있는 문자의 16비트 유니코드 값 리턴 concat(s1, s2, ‥, sN) 현재 문자열 뒤에 문자열 s1, s2, ‥, sN을 연결한 새로운 문자열 리턴 indexOf(s[, idx]) 인덱스 ..
-
[JavaScript] 자바스크립트 제공 코어 객체 : Array개발 프로세스/Front-end 2021. 6. 10. 17:33
자바스크립트 코어 객체 브라우저의 종류나 HTML 페이지의 구조에 관계없이 자바스크립트 프로그램에서 항상 활용할 수 있는 기본 객체들이다. Array 객체 생성 방법 배열 크기를 언제라도 늘이거나 줄일 수 있음. (주의) 현재 원소가 7개 있는 상태에서 인덱스 10에 원소를 삽입하면 중간에 있는 plots[7], plots[8], plots[9] 원소들의 값은 undefined가 된다. 각 요소가 동일한 자료형이 아니어도 됨. length 프로퍼티(속성) : 배열의 원소 개수를 알아낼 수 있다. var week = ["월", "화", "수","목","금","토","일"]; /* 초기 값을 가진 배열 생성 */ var week = new Array("월", "화", "수","목","금","토","일"); ..
-
[JavaScript] 자바스크립트 제공 코어 객체 : Date개발 프로세스/Front-end 2021. 6. 10. 17:33
자바스크립트 코어 객체 브라우저의 종류나 HTML 페이지의 구조에 관계없이 자바스크립트 프로그램에서 항상 활용할 수 있는 기본 객체들이다. Date 객체 월(month) 값은 0부터 시작한다. 0은 1월, 11을 12월을 뜻한다. Date 객체 생성 방법 new Date() 객체가 생성되는 시점의 날짜와 시간 값으로 초기화된 객체 생성 new Date(y, m, d) y, m, d는 각각 년, 월(0~11), 일(1~31)을 나타내며, 이 시간 정보를 가진 객체 생성 new Date(y, m, d, hour, min, sec) y, m, d, hour, min, sec는 각각 년, 월, 일, 시, 분, 초의 값이며, 이 시간 정보를 가진 객체 생성 Date 객체 주요 메소드 getFullYear() 20..
-
[JavaScript] 자바 스크립트 기본 문법 : 내장함수, 사용자 정의 함수개발 프로세스/Front-end 2021. 6. 7. 17:28
1. 내장함수 eval() : 문자열 입력을 계산하여 결과를 반환 document.write(eval("1+2*3+4"));// 11 parseInt(), parseFloat() : 문자열 값을 각각 정수와 실수로 변환 setTimeout() : 지정된 시간 후에 매개변수로 지정된 함수를 호출. 지연 시간은 millisecond 단위로 지정. setTimeout(function_name, delay_time); 그 외 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects Standard built-in objects - JavaScript | MDN This chapter documents all of Java..
-
[JavaScript] 자바 스크립트 기본 문법 : 대화상자 alert(), confirm(), prompt()개발 프로세스/Front-end 2021. 6. 7. 16:18
1. alert() 단순 메세지, 경고사항 전달 '확인'을 클릭할 때까지 대기 alert("HTML5 웹사이트로 이동합니다."); 2. confirm() '확인'을 누르면 true, '취소' 또는 'X'를 누르면 false 반환 var answer = confirm("HTML5 웹사이트로 이동합니까?"); 3. prompt() '확인'을 누르면 입력된 문자열, '취소' 또는 'X'를 누르면 null 반환 var answer = prompt("제목을 입력해 주세요.", "초기값 입력");