1. 문서 객체 모델 문서 객체 모델 DOM 은 HTML 문서 객체 구조를 말한다. HTML 문서의 최상위에는 이 있고, 하위 객체로 , 가 있다. 가장 상위에 위치하는 이 root 뿌리이고, 뿌리에서 가지처럼 뻗어나가는 모양의 요소를 노드 node라고 부른다. 노드의 종류에는 요소 노드 Element node, 텍스트 노드 Text node, 속성 노드 Attribute node 가 있다. 2. 선택자 선택자 사용하는 가장 기본 유형으로 스타일을 지정하는 것이다. 3. 기본 선택자 종류 - 직접 선택자 직접 선택자는 주로 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자이다. 직접 선택자 종류는 *(전체) #(아이디) .(클래스) 요소명, 그룹선택자가 있다. 1️⃣ 전체 선택자 전체요소를 선택할 때 ..

1. 제이쿼리 제이쿼리는 모질라 사의 자바스크립트 개발자가 자바스크립트를 이용해 만든 라이브러리 언어이다. 라이브러리 언어란 자바스크립트로 만들어진 다양한 함수의 집합을 의미한다. 2. 제이쿼리 라이브러리 연동하기 제이쿼리 라이브러리 연동하는데에는 두가지 방법이 있다. 1️⃣ 다운로드 방식 제이쿼리 라이브러리 제공하는 사이트에서 제이쿼리 라이브러리 파일을 직접 내려받아 HTML에서 불러오는 방식 https://cdnjs.com/libraries/jquery/1.12.4 jquery - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers JavaScript library for DOM oper..

1. 연습문제 '배경 색상 바꾸기' 버튼을 누르면 배경 색상이 바뀌는 함수 만들기 배경 색상 바꾸기 2. 연습문제 객체 생성자를 만들고 이름, 국어점수, 영어점수를 입력하면 평균을 만드는 함수 만들기

1. 함수 스코프 scope 스코프 (scope) 란 함수의 유효범위를 의미한다. 1️⃣ 전역변수와 지역변수 전역변수 : 자바스크립트 어디에서든 사용할 수 있는 변수 지역변수 : 함수 스코프에서만 사용할 수 있는 변수 2️⃣ 전역함수와 지역함수 전역함수 : 자바스크립트 어디에서든 사용할 수 있는 함수 지역함수 : 함수 스코프에서만 사용할 수 있는 함수 함수 스코프에서 선언된 함수는 지역 함수가 되어 함수 스코프에서만 호출할 수 있다. function 함수명1() { // 전역함수 자바스크립트 코드; } function 함수명2() { function 함수명3 () { // 지역함수 자바스크립트 코드; } } -> 이러한 문제를 해결하는 방법 : 즉시 실행 함수 (function() { var 변수명; f..

1. return return문은 함수에서 결과값을 반환할 때 사용한다. 그리고 함수에서 return문은 실행되면 반복문의 break문과 비슷하게 코드가 강제로 종료된다. - 연습문제 1 이전버튼, 다음 버튼을 누르면 이미지 바뀌는 함수 direct 값이 1 이면 다음 버튼을 클릭한 것으로 num ++ direct 값이 0 이면 이전 버튼을 클릭한 것으로 num -- 2. 재귀 함수 재귀 함수는 함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것이다. num이 10이면 함수 종료하도록했기 때문에 함수를 한번 더 호출해도 10 출력 후 끝이다.

1. 함수 function 함수명() { 자바스크립트 코드; } - 익명 함수 참조변수 = function() { 자바스크립트 코드; } ❗ 일반 함수와 익명 함수의 차이점 일반 함수 정의는 함수 호출 시 호이스팅(hosting) 기술을 지원하지만 익명 함수는 호이스팅을 지원하지 않는다. 위에서 보면 myFunc() 함수를 선언하기도 전에 이 함수를 실행한 것을 볼 수 있다. 일반 함수는 호이스팅을 지원하기 때문에 선언하기전에 함수를 실행해도 동작한다. - 배경색 바꾸는 연습문제 var bodyTag = document.getElementById("theBody"); bodyTag.style.backgroundColor = color[i]; 는 theBody 아이디값을 가져와서 bodyTag라는 변수에 ..

* 연습문제 1 * 연습문제 2 5가지의 메뉴 중에 랜덤으로 메뉴 골라주기

1. 브라우저 객체 브라우저 객체는 브라우저에 내장된 객체를 의미한다. window 는 브라우저 객체의 최상위 객체이며, window 객체에는 하위 객체들이 포함되어있다. window -> document, location, screen, navigator, history 1️⃣ window 객체 window 객체는 브라우저 객체의 최상위 객체이다. - window 객체의 메서드 종류 open("url", "새창 이름", "새창 옵션") : url 페이지를 새 창으로 나타낸다 . alert(data) prompt("질문", "답변") confrim("질문내용") moveTo(x,y) : 지정한 새 창의 위치를 이동한다. resizeTo(width, height) : 지정한 새 창의 크기를 변경한다. se..

1. 객체의 메서드와 속성 객체.메서드(); 객체.속성; 2. 객체의 종류 1️⃣ 내장 객체 내장 객체는 자바스크립트 엔진이 내장되어 있어 필요한 경우에 생성해서 사용할 수 있다. 내장 객체의 종류로는 Date, String, Array, Math 객체들이 있다. 2️⃣ 브라우저 객체 모델 브라우저 객체 모델 BOM 은 브라우저의 계층구조로 내장되어 있는 객체를 말한다. 브라우저 객체로는 window, screen, history, navigotor, location 등이 있다. 3️⃣ 문서 객체 모델 문서 객체 모델 DOM은 HTML 문서 구조를 말한다. 3. 내장 객체 내장 객체는 브라우저의 자바스크립트 엔진에 내장되어 있는 객체로 필요한 경우 생성해서 사용할 수 있다. 참조변수 = new 생성함수(..

1. 선택문 switch 선택문 switch는 변수에 저장된 값과 case 값을 검사하여 변수와 case값이 일치하는 값이 있을 때 그에 해당하는 코드를 실행한다. ❗ if문이 만족하는 데이터가 여러개일 경우에 주로 사용하고, switch문은 여러 경우의 값 중 일치하는 데이터를 찾아 그에 해당하는 코드를 실행시킬 때 사용한다. switch 문은 일치하는 데이터가 있으면 그에 해당하는 코드를 실행하고 break문을 만나 switch문을 빠져나온다. 그리고 만일 경우의 값 중 일치하는 데이터가 없으면 마지막 default 에 있는 코드를 실행하고 switch문을 종료한다. location.href 에 해당 url를 입력하면 그 url로 이동한다. 2. 반복문 1️⃣ while문 2️⃣ do-while문 w..

1. 제어문 제어문은 프로그램의 흐름을 제어할 수 있도록 도와주는 문장이다. 1️⃣ 조건문 조건을 만족하는지 여부에 따라 코드를 제어할 수 있다. 2️⃣ 선택문 변수에 일치하는 경우의 값을 따라 코드를 제어할 수 있다. 3️⃣ 반복문 특정 코드를 여러 번 반복해서 실행할 수 있도록 한다. 2. 조건문 조건문은 조건식의 값이 참(true) 인지, 거짓(false) 인지에 따라 자바스크립트 코드를 제어한다, 1️⃣ if문 조건식에 0, null, ""(빈문자), undefined 를 입력되면 false를 반환한다. 따라서 방문자의 이름을 입력하지 않으면 빈 문자이기 때문에 false를 반환하여 아무것도 출력되지 않는다. 2️⃣ else문 else문은 조건식을 만족할(true) 경우와 만족하지 않을 (fals..

* 연습문제 1 * 연습문제 2