프로그래밍/JavaScript
-
JavaScript 노드 연결 & 노드 생성프로그래밍/JavaScript 2022. 10. 8. 09:48
노드 연결 종류 설명 appendChild() 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가 insertBefore() 새로운노드를 특정 자식 노드 바로 앞에 추가 insertData() 새로운 노드를 텍스트 데이터에 새로운 텍스트로 추가 JavaScript TypeScript node.js HTML CSS 지금 시간은 오전 9시40분입니다. 노드추가1 노드추가2 텍스트 추가 노드 생성 종류 설명 createElement() 새로운 요소 노드를 생성 createAttribute() 새로운 속성 노드를 생성 createTextNode() 새로운 텍스트 노드를 생성 새로운 문장이 이 문장 앞에 추가됨 이 단락에 새로운 속성이 추가됨 요소 노드 생성 속성 노드 생성 텍스트 노드 생성
-
JavaScript 문서 모델 객체(Document Object Model)프로그래밍/JavaScript 2022. 10. 7. 07:29
자바스크립트를 이용하여 웹 문서(HTML, XML 등)에 접근하고 제어할 수 있도록 객체를 이용해 웹 문서를 체계적으로 정리하는 방법으로, 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. DOM 트리 간단 문서 document 객체 웹페이지 자체를 의미하는 객체로 웹페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document 객체로 부터 시작한다. 종류 설명 getElementsByTagName() 해당 태그 이름의 요소를 모두 선택 getElementById() 해당 Id의 요소를 선택 getElementsByClassName() 해당 클래스에 속한 요소를 모두 선택 getElementsByName() 해당 name 속성값을 가지는 요소를 모두 선택 queryS..
-
JavaScript BOM(Brower Object Model)_2프로그래밍/JavaScript 2022. 10. 6. 07:20
location 객체 location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러 올 때 사용한다. window 객체의 location 프로퍼트와 documant 객체의 location 프로퍼티에 같이 연결한다. href : 전체 URL를 리턴 hostname : 호스트(ip, 도메인) pathname : 파일명 port : 포트명 네이버로 이동 history 객체 history 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체로서 사용자의 개인정보를 보호하기 위해 객체의 접근하는 방법을 일부 제한하고 있다. back() : 브라우저에서 뒤로 버튼을 누른 효과 go() : 매개변수로 전달된 숫자만큼 히스토리에 적용된 페이지로 이동 go..
-
JavaScript BOM(Brower Object Model)_1프로그래밍/JavaScript 2022. 10. 5. 07:41
BOM는 브라우저 관련 객체로 자바스크립트을 활용하여 웹 브라우저를 객체로 관리하기 위해 등장한 개념이다. 브라우저에 관련한 여러가지 효과를 만들 수 있다. window 객체 브라우저 창이 열릴때 마다 하나씩 만들어진다. 브라우저 창 안의 요소 중에서 최상위에 위치한다. window 객체의 프로퍼티 종류 설명 console 브라우저의 콘솔에 정보를 기록하는 메소드를 제공하는 Console 객체에 대한 참조 반환 status 브라우저의 상태바에 문자열을 출력 defaultStatus 창의 상태표시줄에 있는 기본 텍스트를 설정하거나 반환 window 현재 창 자신, self와 같음 document 윈도우의 Document 객체 반환 (Document 객체 참조). top 최상위 브라우저 창을 반환. name..
-
JavaScript Date 객체프로그래밍/JavaScript 2022. 10. 4. 11:33
Date 객체는 자바스크립스의 내장객체 중 날짜와 시간 정보를 나타내고 쉽게 다룰 수 있는 객체이다. const date = new Date(); console.log(date); // 2022년 10월 04일 10:30:00 const date = new Date(22, 9, 04); // 1922년 10월 04일 const date = new Date(2022, 9, 04); // 2022년 10월 04일 Date 객체 생성 방법 const date = new Date(); // 현재 날짜 시간 const date = new Date(2022, 09, 04); // 2022년 10월 04일 10:30:00 const date = new Date("2022-10-04"); // 2022년 10월 04일..
-
JavaScript 내장객체프로그래밍/JavaScript 2022. 10. 3. 12:42
자바스크립트의 내장객체는 객체 생성없이 사용 가능한 객체를 의미한다. 대표적인 내장객체로 Math 객체와 String 객체를 알아보자. Math 객체는 수학에서 자주 사용하는 상수와 함수들을 다룰 때 사용한다. 구분 설명 min() - 최소값을 반환 - 매개변수가 전달되지 않으면 Infitiy를 반환 - 비교할 수 없는 값이 포함되어 있으면 NaN을 반환 max() - 최대값을 반환 - 매개변수가 전달되지 않으면 -Infitiy를 반환 - 비교할 수 없는 값이 포함되어 있으면 NaN을 반환 round() - 소수점 첫번째 자리에서 반올림하여 반환 floor() - 소수점 첫번째 자리에서 내림 ceil() - 소수점 첫번째 자리에서 올림 random() - 0보다 크거나 같고 1보다 작은 무작위 소수를 반..
-
JavaScript 객체 생성 방법프로그래밍/JavaScript 2022. 10. 2. 13:57
객체란 연관서이 있는 데이터들의 정의 할 수 있는 변수와 메소드들의 집합으로 자바스크립트의 객체는 데이터를 저장하고 처리하는 기본단위이다. 객체의 구성으로는 프로퍼티와 메서드라는 개념이 있는데 쉽게 말해 프로퍼티는 객체의 특징이나 속성을 나타내고, 메서드는 객체에서 할 수 있는 동작을 표현한다. 객체 내의 변수를 프로퍼티라고 부르고 함수를 프로퍼티 메소드라 부른다. 객체를 만드는 방법 const 객체명 = {}; // 빈 객체 생성 const 객체명 = { 프로퍼티명1 : 값1, 프로퍼티명2 : 값2, ... 프로퍼티메소드명1:function(){ ... } } const dog = { name : '퍼그', age : 7, color : 'white', weight : 3.5 } console.log(..
-
JavaScript 호이스팅프로그래밍/JavaScript 2022. 10. 1. 09:06
호이스팅은 코드가 실행되기 전 변수 선언/함수선언을 최상단으로 끌러올려지는 것 같은 현상을 얘기하며 var타입 사용, 함수 선언식이 호이스팅이 일어난다. 1. var타입 사용에 따른 호이스팅 var x = 10; function number(){ console.log("x =" + x); // x = 10 console.log("y =" + y); // y = undefined var y = 20; } number(); 이처럼 이미 y의 값을 출력하기전에 프로그램은 y가 선언된 것과 같은 값(할당은 되지않은 자료형, undefiend)을 출력한다. 이러한 현상을 호이스팅이라한다. var타입을 사용해서 작용하는 현상으로 let 타입을 사용하게 된다면 호이스팅의 영향을 받지않는다. let x = 10; fu..