본문 바로가기

JS/JavaScript

 (21)
13. 최신 자바스크립트 기술: ES6 문법 객체 1. 객체 초기화 const name = "Kim"; const age = 21; const major ="Math"; const student = {name:name, age:age, major:major} console.log(student) // 결과: { name: 'Kim', age: 21, major: 'Math' } 이렇게 원래 객체를 선언할 시에는 {key:value, key:vakue} 로 선언하였다. const name = "Kim"; const age = 21; const major ="Math"; const student = {name, age, major} console.log(student) // 결과: { name: 'Kim', age: 21, major: 'Math' }..
12. 함수 기본적인 함수의 선언, 정의, 호출 function 함수명([매개변수]) { // 함수 선언 console.log("코드 == 함수정의") // 함수 정의 } 함수명([매개변수]) // 함수 호출 익명함수 - 필요 시 마음대로 호출하는 것이 불가(이름이 없기 때문) - 선언된 함수가 여러 곳에서 재사용 되는 것이 아닌, 이벤트핸들러와 같은 특정 동작이나 상황에서만 수행하는 함수가 필요한 경우 사용 - 매개변수로 전달되는 함수의 형태가 일정하지 않을 때 사용 A.addEventListener("click", function(){ // 함수 선언(함수명X) console.log("함수 정의") }) 즉시 실행 함수 - 익명 함수의 한 종류로, 함수가 정의되자마자 실행되는 함수 - 사용이유 1) 함수 선언 및..
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 요소의 자식 ..
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("정규표..

티스토리툴바