do it 7

Do it : JS -10. 브라우저 객체 모델 (BOM)

브라우저 객체 모델이란? -웹 브라우저 전체를 객체로 관리하는 것 -자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 > 요소를 객체화 주요 브라우저 내장 객체 Window 브라우저 창이 열릴 때마다 생기는 객체 | 최상위 객체 Document 태그 만나면 만들어지는 객체 | HTML 문서 정보 History 방문 기록 저장 객체 Location URL 정보 객체 Navigator 웹 브라우저 정보 객체 Screen 화면 정보 객체 웹 브라우저를 제어하는 Window 객체 -자바스크립트의 모든 객체는 Window객체에 포함된다 Window 객체의 속성 -접근하는 방법 : 객체 이름 뒤 마침표(.)를 찍고 속성이름 붙인다 window.innerHeight 1132 document 웹문서 접근 f..

JavaScript 2020.10.14

Do it : JS -6. 객체

객체란? -'복합' 자료형이라고 불린다 -객체 안에 여러 자료형 포함 된다 : 숫자, 문자열 등 -객체도 자료형이다 = 자료를 저장하고 처리하는 기본 단위 -하나의 변수에 다양한 정보를 담기 위해 사용 -사용 ex. 회원 정보 : 이름, 아이디, 비번, 생년월일 -객체(Object) : 자바스크립트 프로그램에서 인식할 수 있는 모든 대상 가리킴 -자바스크립트에서는 웹 문서나 웹 브라우저와 관련된 것들을 객체로 인식 객체 종류 내장 객체 -자주 사용하는 요소는 미리 객체로 정의되어 있음 ex. Date 객체, Number, Boolean, Array, Math 문서 객체 모델(DOM) -객체를 사용해 웹 문서를 관리하는 방식 -이미지, 링크, 텍스트 필드 등도 모두 각각 객체로 만들어져 있음 ex. Doc..

JavaScript 2020.10.08

Do it : JS -5. 함수와 이벤트

여러 동작을 묶은 덩어리 - 함수 함수를 사용하면 좋은점 -함수 : 명령을 한 번에 실행할 수 있게 한 덩어리로 묶는 것. -명령의 시작과 끝을 명확하게 구별 -함수에 별도의 이름 붙이면 > 같은 기능이 필요할 때마다 함수 실행 -내장함수 : 미리 만들어져 있어서 함수 가져다 사용 가능 함수 정의하고 실행 -함수 선언 : 어떤 명령을 처리해야 할지 미리 알려주는 것 ex. addNumber()함수 선언 -function 예약어, 중괄호 안에 함수에서 실행할 여러 명령 묶는다. -함수 실행 : 선언한 함수를 가져와 사용 -함수 이름을 사용한다 = 함수 호출한다 -자바스크립트 소스 안 어디에서든 함수 실행 가능 > 보통 앞부분 이나 뒷부분에 함수 선언 모아 놓는다. -함수 선언 부분을 먼저 해석 버튼 눌렀을..

JavaScript 2020.10.05

Do it : JS -4. 제어문 : if문 | if..else문 | switch문 | for문 | while문 | do..while문 | break문 | continue문

조건에 따라 흐름 조절 - if문, if...else문, 조건 연산자 -프로그램 짤 때 작성 순서대로 명령 실행X -조건에 따라 명령 실행 순서가 정해짐 = if문 자주 사용 if문 -소괄호 조건이 true이면 > 중괄호 안에 자바스크립트 실행 -소괄호 조건이 false이면 > 중괄호 안에 자바스크립트 무시 if....else문 -소괄호 조건이 true이면 > if 중괄호 안에 자바스크립트 실행 -소괄호 조건이 false이면 > else 중괄호 안에 자바스크립트 실행 조건 연산자 - ? 와 : -조건이 하나이고, true일 때와 false일 때 실행할 명령도 하나뿐일 때 사용 -(조건) ? (조건이true일때) : (조건이 false일때) -60점 이상이면 통과, 그렇지 않으면 실패 truthy값, fa..

JavaScript 2020.10.03

Do it : JS -1,2.자바스크립트란, 입력과 출력, 규칙6가지

웹 프로그래밍 이란? -웹 브라우저와 관련된 프로그램을 작성하는 것 -자바스크립트는 웹 프로그래밍에 가장 많이 쓰인다 자바스크립트로 무엇을 할 수 있을까? 1. 웹 사이트 동적으로 만든다 (ex. 화살표 버튼) 2. 웹 브라우저 프로그램 만든다 (ex. 버스정류장 어플리케이션, 그림판) 3. 서버용 프로그램 만든다 (ex. node.js) 자바스크립트의 특징은? -모든 웹 브라우저에서 작동한다 (ES5 문법 주로 사용) -별도의 프로그램 설치X -다양한 용도의 프로그램 개발 (ex. 어플, 아두이노, 드론, IoT) -공개 API 사용 가능 | API = 데이터를 다른 사람이 손쉽게 가져갈 수 있도록 미리 준비한 체계 -다양한 라이브러리(ex. jQuery), 프레임워크 (ex. 앵귤러, 뷰) 자바스크립..

JavaScript 2020.09.30

Do it : HTML, CSS - 15.미디어 쿼리

미디어 쿼리란? -사이트에 접속하는 장치에 따라 특정한 css스타일 사용하게 한다 -접속하는 기기(PC, 태블릿, 스마트폰)의 화면 크기에 따라 레이아웃이 달라진다 미디어 쿼리 구문 @media |not |only| screen |and (min-width: 200px)| { } 연산자 and : 조건을 추가한다 only : 미디어 쿼리를 지원하는 웹 브라우저에서만 조건 인식 not : 다음에 나오는 미디어 유형 제외 , : 동일한 스타일 유형을 사용할 때 쉼표 사용 미디어 유형 all : 모든 미디어 print : 인쇄 장치 screen : 컴퓨터, 스마트폰 tv aural : 화면을 읽어 소리로 출력 braille : 점자 tty embossed 미디어 쿼리 조건 1. 웹 문서의 가로 너비, 세로 높..

HTML 2020.09.19