본문 바로가기

공부기록/JavaScript22

3월 17일 (1) JavaScript - Screen BOM(Browser Object Model) - window 객체 Screen 관련 1. 화면크기 구하기 [window.]screen.width/height : 화면의 너비/높이 디스플레이 해상도를 의미(픽셀) window.screen.availWidth/avilHeight : 유효 화면 너비/높이(작업표시줄 제외) window.innerWidth/Height : 창 내부 너비/ 높이 화면의 변경에 따라서 자바스크립트로 처리할 수도 있도록 생각해 보는 것도 필요! 대부분 'window.' 키워드는 생략한다. + 네비게이션 브라우저에 따라서 개발자 소스에 따라 앞부분에 처리할 수 있는 것들이 붙기도 한다. 페이지(문서)의 크기 페이지의 너비 : docment.body.clientWidth 페이지의 높이 .. 2023. 3. 17.
3월 16일 (2) JavaScript - 브라우저 객체 모델 p576 BOM(Browse Object Model) 브라우저 객체 모델 window를 기반으로 함 브라우저 프로그램에서 제공하는 기능을 자바스크립트로 제어할 때 사용하는 객체 묶음 동일하게 제공하는 기능들이 있다, 이런 객체를 모아서 만든 모델, 브라우저 window command 입력 방식 CUI - 직접 명령어를 입력해서 사용사용자 인터페이스 GUI - 그림을 띄워서 명령어를 사용하게 하는 스크린 - 화면 효과로케이션 - a link와 같음히스토리 - 경로 이동, 방문기록내비게이터 - 브라우저의 정보, 브라우저에 따라서 제어하는 기능이 다르다.다큐멘트 body 1. window alert 등의 대화창, 화면의 크기, 스크롤 등을 처리 화면의 크기는 3가지로 모니터 크기, 유효영역(실제 프로그램 크기.. 2023. 3. 16.
3월 16일 (1) JavaScript - node 활용 제어 노드 관계를 통한 요소 제어 HTML 요소 간의 관계를 활용(계층) 노드(Node) = HTML 요소 부모요소 > 자식요소 부모요소에서 자식요소 찾기 : 요소.childNodes; 자식요소는 반드시 복수(배열)이다. const subnodes = htmlnodes.childNodes; //부모입장에서 자식 노드 찾아가기 console.log(subnodes); 자식요소에서 부모요소 찾기 : 요소.parentElement; 부모요소는 반드시 하나다. const elem_b = document.querySelector("#bo"); console.log(elem_b.parentElement); // 자식 입장에서 부모 노드 찾아가기 elem_b.parentElement.style.backgroundColor.. 2023. 3. 16.
3월 15일 JavaScript - 객체(Object) 객체 Object 객체 = 변수 + 메소드(함수) 객체 자체로의 완성품이기도 하면서 프로그램의 안의 구성물이 되기도 한다. 구조체 다음이 객체, 자바스크립트에서는 구조체가 없다. 객체는 한 가지 목적을 가지고 모아놓은 정보! 배열로 처리하기 어려움. 객체의 정보는 다양하다. 정보객체(정보를 저정하는 것을 목적으로 하는 객체) 변수만 묶어서, 메소드만 묶어서 객체를 표현할 수 있다. 메소드만 묶어서 객체를 표현하는 방법은 많이 없지만 변수만 묶어서 객체로 표현하는 경우는 많음. JSON(JavaScript Object Notation) 자바스크립트 객체 표기 형식을 빌어 데이터의 전송에 사용하는 문자열 작성 방식 {name: "홍길동", age: 20, adress: "인천시 미추홀구"} 객체를 직접 만들.. 2023. 3. 15.
3월 14일 (2) JavaScript - 객체 date, DOM 유용한 내장 객체 : 라이브러리에 포함되어 기본적으로 제공되는 객체, Math, Data, String 등 Date 객체 날짜와 시간 정보 및 활용 방안을 제공하는 객체 Date 객체의 주요 메소드 1) 연도 : getFullYear(); 2) 월 : getMonth(); - 1년 중 몇 번째 월 0 ~ 11 -1을 해주어야 내가 원하는 달이 나온다. 사용 시 +1을 해야 함. 3) 일 : getDate(); - 1달 중 몇 번째 일(날짜) getDay(); - 1주 중 몇번째 일(요일) 일요일 0부터 시작 4) 시 : getHours(); - 0~23(24시간 주기) 5) 분 : getMinutes(); - 0 ~ 59분 5) 초 : getSeconds(); - 0 ~ 59초 6) 밀리초 : getMi.. 2023. 3. 14.
3월 14일 (1) JavaScript - 함수 파라미터, 객체 함수 function 하나의 기능을 처리하기 위한 명령문들의 묶음 전체 코드를 분할하여 개발과 이후 유지보수를 수월하게 할 수 있다. 연습법) 함수 없이 그냥 코드를 짜본다 -> 반복된 코드를 찾아서 함수로 묶는다. -> 기능적으로 코드를 묶는다. 함수의 파라미터(parametre - 인자, 인수 등) 함수의 코드가 처리될 때 필요한 값 함수에서 파라미터를 저장하기 위해 사용하는 변수를 매개변수라고 한다. 파라미터의 개수는 제한 없음(반면에 return은 하나밖에 없다. only one) 컴퓨터의 입장에서는 함수 원본을 가지고 와서 사본을 복사해서 처리함. 값을 반영할 수 있도록 하는 것이 필요하다, 그 값을 인수, 인자라고 함. 변수는 공간이기 때문에 이동을 할 수 없다. 함수는 다른 공간에 저장이 되.. 2023. 3. 14.