식초의 지식보관소

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 //1.Use strict //added in ES 5..

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

폼 요소에 접근하는 여러 방법 -웹 사이트의 폼 요소에는 텍스트 필드, 라디오 버튼, 체크 상자 (누를 수 있는 요소), 선택 목록(여러 항목 중 원하는 것을 선택) 등이 있다. -자바스크립트로 제어하려면 먼저 요소에 접근해야 함 = 폼 요소에 접근 id값이나 class값 사용해 폼 요소 접근 -querySelector()함수, querySelectorAll()함수 사용해서 id값이나 class값 접근 -id값은 폼 요소 1개에 접근, class값은 폼 요소 여러개에 접근 > 배열로 저장 -텍스트 필드의 값 가져오려면 .value 붙인다 document.querySelector("#billingName").value "한라산" name값 사용해 폼 요소 접근 -name 속성 : 자바스크립트에서 폼 요소를..

문서 객체 모델(DOM)이란? -Document Object Model -웹 문서의 모든 요소를 자바스크립트를 이용하여 조작 -DOM은 객체를 사용해 문서를 해석한다 -텍스트, 이미지, 표 등 모든 요소가 모두 객체이다 DOM 사용하지 않고 상세설명 가리기 -상세 설명이 가려지도록 CSS 작성 상세 설명 내용내용 -매번 비쥬얼 스튜디오로 코드 편집은 번거로움 > 좀더 편하게 기능 추가할 방법 필요 DOM 사용하고 상세설명 가리기 -자바스크립트로 DOM 제어 -콘솔창에 입력> 상세 설명 사라진다 document.querySelector('#detail h3').style.visibility = 'hidden' document.querySelector('#detail p').style.visibility =..

Array 객체란? -여러 개의 항목을 하나의 변수에 저장해야 할 때 사용 -내장객체 Array 객체로 배열 만들기 -인스턴스 만들기 var myArray = new Array(); -Array 객체의 인스턴스 만든 후 > myArray 변수에 저장 -( ) 빈 괄호를 사용 > 개수가 고정X > 많은 자료 저장 가능 -초깃값이 있는 배열 : 리터럴 사용해서 배열 | Array객체 사용해서 만들기 배열에서 for문 사용하기 -여행 준비물 점검 목록 프로그램 -여러 준비물을 배열 유형으로 저장 후 > 준비물확인하기 위해서 - 배열 값을 전부 확인 > for문 처음부터 끝요소까지 반복 -배열에 몇 개의 요소가 있는지 확인 : Array 객체에 length 속성 사용 -배열의 인덱스 : 0 ~ Array객체.l..

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

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

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

변수 -변하는 값을 저장할 때 사용한다 -상황에 따라 다른 값을 입력받아야 할 때 사용한다 ex. 나이=올해 연도 - 태어난 연도 +1 -변수(Constant) : 나이, 올해 연도, 태어난 연도 -상수(Variable): 1 변수를 선언하는 규칙 3가지 -변수에 이름을 붙이는것 = 변수를 선언한다 -var 키워드 뒤 + 변수 이름 적기 ex. var apple; 규칙 1. 이름은 의미 있게 짓는다 ex. 올해 연도 currentYear 규칙 2. 여러 단어 연결한 이름 : 낙타 표기법(Camel Case) : 두 번째 단어부터는 대문자로 시작 규칙 3. 선언 불가한 이름 있음 = 변수의 첫글자 : 문자, 밑줄(_), 달러($)로 시작해야한다 변수에 값 | 식 지정하기 -변수를 선언하면서 저장 var a..

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