JavaScript (16) 썸네일형 리스트형 [JS/HTML] DOM이란? (DOM 트리) DOM (Document Object Model) HTML내 원하는 위치에 접근하기 위한 하나의 방식, W3C의 표준 문서 객체 모델(DOM)은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 돔트리:브라우저가 HTML 웹 페이지를 인식하는 방식을 계층화시켜 트리구조로 만든 객체(Object) 모델 노드 node 란? tree구조에서 root노드(가장 위에서 시작되는 node)를 포함한 모든 개개의 객체 ex)head, body, title, script, h1 등의 태그 뿐만 아니라 태그 안의 텍스트나 속성도 해당 노드의 종류 노드간의 관계 노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있다. - 노드 트리의 가장 상위에는 단 하나의 루트 노드(root node)가 존재함.. [JS] <script> 태그의 defer, async 속성 HTML 이런 식으로 html의 안에 파일을 첨부하고 뒤에 defer라고 적어주는 형식이다. 태그나 를 만나면 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춘다. 외부에서 스크립트를 다운받고 실행한 후에야 남은 페이지를 처리할 수 있다. 이런 브라우저의 동작 방식은 두 가지 이슈를 만든다. 스크립트에서는 스크립트 아래에 있는 DOM 요소에 접근할 수 없다. 따라서 DOM 요소에 핸들러를 추가하는 것과 같은 여러 행위가 불가능해진다. 페이지 위쪽에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 ‘막아버린다’. 페이지에 접속하는 사용자들은 스크립트를 다운받고 실행할 때까지 스크립트 아래쪽 페이지를 볼 수 없게 된다. →그러면 태그 아래에 작성하면 되지 않나? →페이지 맨 아래에 놓을 시 스크립트 위.. [JS] document.addEventListener 와 window.addEventListener의 차이 빨간box=window 파란box=document (html) 영역을 나누면 아래 사진과 같지만 아래와 같은 창의 의미보다는 그냥 window를 document보다 더 큰 범위로 생각하면 된다. 이 둘 사용의 차이점은 window= (전체적용) 키다운이나 스크롤에 대부분 사용 브라우저를 켜면 가장 먼저 로딩되는 전역객체 / 자바스크립트의 최상위객체 / document를 포함 ex) window.addEventListener('onload') → onload는 window에 사용 document= (지정요소에 적용할때) 마우스에 대부분 사용 구분돼서 사용되긴 하지만, 이벤트 타겟 버블링,캡처링 때문에 겹쳐서 써도 적용됨 [JS] 윈도우 창크기 (window size), 브라우저 좌표 구하기 window.screen.width , window.screen.height, window.outerWidth, window.outerHeight, window.innerWidth, window.innerHeight window.screen.width , window.screen.height 사용자 모니터의 사이즈 window.outerwidth , window.outerheight 브라우저의 URL과 Tab을 포함한 전체적인 브라우저의 사이즈 window.innerWidth, window.innerHeight 브라우저의 URL과 Tab을 제외한 브라우저의 사이즈. 스크롤이 있는 경우 스크롤에 해당하는 부분도 포함 파란색BOX :가로 (window.outerWidth) /세로(window.outerHei.. [JS] 템플릿 리터럴: 백틱(``) 템플릿 리터럴 (Template Literal) : 백틱 (``) - 내장된 표현식을 허용하는 문자열 리터럴(소스코드의 고정된 값)이다. → ES6 부터 도입 - 이중 따옴표 나 작은 따옴표 대신 백틱(` `)을 이용 기능 1. 줄바꿈 가능 - 줄바꿈 그대로 표현됨 var say = ` Hi my name is nana! Bye~`; console.log(say); ▼ 실행결과 2. 표현식 삽입 - $와 중괄호( $ {expression} ) 로 표기 var name = `망고`; var price = 1000; var num = 2; console.log(`${name}의 가격은 ${price * num}원`); //${}안에 변수나 연산 등 삽입 ▼ 기존 방식 console.log(name + '가격.. JavaScript 기본 용어 생성자 constructor 비슷한 객체들을 여러개 생성하기 위해 키밸류 값을 일일이 입력해서 만드는 것이 아니라, 하나의 생성자를 만들어놓으면 그 생성자를 이용해 간편하게 해당 객체(인스턴스)를 생성할 수 있게 해준다. -이름 처음은 대문자로 시작해야 한다. -this. 으로 접근하여 키값을 할당해줌. function Student(name, age) { this.name = name; this.age = age; this.say = function () { console.log( `안녕하세요 제 이름은 ${name}이고 나이는 ${age}입니다.` ); }; }//Student 생성자 인스턴스 : inheritance(상속) ex) var user1 = new user('kim'); ->user1이라.. javascript의 기본 문법 document.getElementById('hi').innerHTML = 'hello; 해석 =>웹문서의 hi라는 아이디의 내부html에 'hello'문자를 넣어라 document → 문서(html) . → ~의 getElementById('~') → 아이디가 '~'인 html요소를 찾아라 innerHTML → HTML 내부 = → 등호: 오른쪽에 있는 것을 왼쪽에 대입하라는 것 'hello' → hello문자(' ', " "안에 있는 것은 문자라는 뜻) getElementById('hi') → 셀렉터 / html요소 찾기 위해 사용 .innerHTML → 메소드(함수) / html요소의 어떤 속성을 변경할지 결정하는데 사용 nodemon설치하기 *자바스크립트를 실행하기위해 node.js를 깔아놓았음 *vs코드 console값을 찍기 위해 터미널에서 node js2.js를 계속 사용시 치기엔 불편해서 나온 플러그인이 "nodemon" 1. vs코드 아래 터미널에 npm install -g nodemon 를 작성하면 설치됨(띄어쓰기 주의) -npm패키지를 통해서 nodmon을 설치하겠다는 뜻인데 g를 붙이면 해당 폴더 뿐만아니라 다른 곳도 다 사용가능 (g안쓰면 해당 폴더에만 사용가능) 2. 터미널에 다시 nodemon js2.js치면 값이 아래에 뜬다. 3. ctrl+s 누를때마다 자동으로 콘솔값이 터미널에 뜬다. 4. 다음번 사용시, 폴더 선택 후 터미널에 nodemon js1.js 라고 쳐주면 사용 가능하다. ▼ 노드몬 설치된 화면 ▼ 노드몬.. 이전 1 2 다음
