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

1. 산술연산자 +, -, * , / , % 2. 문자 결합 연산자 문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터 문자형 데이터 + 숫자형 데이터 = 하나의 문자형 데이터 3. 대입 연산자 =, +=, -=, *= , /= , %= 4. 증감 연산자 ++, -- 1️⃣ num1--; 10 document.write(num1, " "); 9 2️⃣ num1++; 9 document.write(num1, " "); 10 3️⃣ result = num2++; 20 document.write(result, " "); result 20 num2 21 4️⃣ result = ++num2; 22 document.write(result, " "); 22 5. 비교연산자 > , = ,

1. 변수 Variables 변수란 변하는 데이터(값)을 저장할 수 있는 메모리 공간이다. 변수에 저장할 수 있는 데이터 종류에는 문자형(String), 숫자형(Number), 논리형(Boolean), 빈(null) 데이터가 있다. 2. 변수 선언 변수를 선언할 때는 var 키워드를 변수명 앞에 붙인다. var 변수명; 만약 var box; box = 100; box = 30; 이라면 var box; 처음에는 등록되지 않은 상태 undefined 상태이다. 3. 변수에 저장할 수 있는 자료형 1️⃣ 문자형 String 문자형 데이터는 다음과 같이 문자나 숫자를 " " 또는 ' ' 로 감싸고 있다. var 변수 = "사용할 문자나 숫자"; 2️⃣ 숫자형 Number 숫자형 데이터는 숫자를 의미한다. 하지만..

1. 자바스크립트 선언문은 자바스크립트 코드를 작성할 영역을 선언하는 것이다. 을 스크립트 영역이라고 한다. 선언문은 태그 영역이나 태그 영역에 선언하면 되는데 대부분의 개발자들이 태그 영역에서 선언하고 있다고 한다. 2. 자바스크립트 주석 처리 // : 한줄 /* */ : 여러줄 3. 내부 스크립트를 외부로 분리하는 방법 외부로 분리하는 이유는 프로젝트 관리를 원활하게 하기 위해서이다. 4. 코드 입력시 주의사항 1️⃣ 자바스크립트는 대, 소문자를 구분하여 작성한다. 2️⃣ 코드 한 줄을 작성한 후에는 세미콜론을 작성하는 것이 좋다. 3️⃣ 코드를 작성할 때는 한 줄에 한 문장만 작성하는 것이 좋다. 4️⃣ 문자형 데이터 작성할 때 ""와 '' 조심하기 5️⃣ 코드를 작성할 때 중괄호 또는 소괄호 짝이..

1. 프론트엔드 개발 Front-End HTML, CSS, 자바스크립트, 제이쿼리 등을 이용해 사용자의 눈에 보이는 부분까지 개발하는 것을 프론트엔드 개발이라고 한다. 그렇다면 백엔드 개발은 ASP, PHP, JSP 등 서버 언어를 사용하여 주로 화면에서 보이지 않는 부분을 개발한다. 즉, 백엔드 개발은 사용자가 입력한 데이터를 데이터베이스에 저장하거나 검사하는 등 눈에 보이지 않는 영역을 개발하는 것을 백엔드 개발이라고 한다. https://hyejin.tistory.com/79?category=1016456 1-2. 백엔드와 프론트엔드란? 예전에는 백엔드와 프론트엔드에 대한 단어 개념을 대충 백은 뒤에서 처리 프론트는 앞에서 보여지는 것. 이라고 생각만 하고 넘겼는데 기초부터 그냥 빠르게 알고 넘어가..

* 연습문제 1 할 일 목록 ✓할 일 1 ✓할 일 2 ✓할 일 3 ✓할 일 4 ✓할 일 5 * 연습문제 2 행과 열을 입력하면 테이블이 추가되도록 행 열 작성

1. 노드 리스트 node list DOM 에서 새로운 노드를 만들어 추가하거나 삭제하려면 노드 리스트를 사용해야한다. DOM에서 접근할 때 querySelectorAll() 메서드를 사용하면 노드를 한꺼번에 여러개 가져올 수 있다. 이때 노드 정보를 여러개 저장한 것이 노드리스트이다. 새로운 노드를 추가할 때에는 1️⃣ 모둔 HTML 태그는 요소(element) 노드이다. 2️⃣ HTML 태그에서 사용하는 텍스트 내용은 나식 노드인 텍스트(text) 노드이다. 3️⃣ HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드이다. 4️⃣ 주석은 주석(comment) 노드이다. 이 네가지 원칙을 기억해야한다. 예를 들어 img 노드를 추가한다고 생각하면 그 노드의 속성에 해당하는 src와 a..

1. DOM 요소에 함수 직접 연결하기 2. 함수 이름을 사용해 연결하기 3. DOM의 event 객체 알아보기 DOM에는 이벤트 정보를 저장하는 event 객체가 있다. 이 객체에는 웹 문서에서 이벤트가 발생하는 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보를 가지고 있다. event 객체 프로퍼티와 메서드 1️⃣ 프로퍼티 altKey : 이벤트가 발생할 때 alt 키를 눌렀는 지 여부를 boolean 값으로 반환한다. button : 마우스에서 누른 버튼의 키 값을 반환한다. charCode : keypress 이벤트가 발생할 때 어떤 키를 눌렀는지 유니코드 값으로 반환한다. clientX : 이벤트가 발생한 가로 위치를 반환한다. clientY : 이벤트가 발생한 세로 위치를 반환한다. ct..

1. 문서객체모델 DOM 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법이다. 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의한다. 웹 문서 전체는 document객체이고, 삽입한 이미지는 image 객체가 된다. DOM은 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리한다. 2. DOM 트리 이런 웹 문서가 존재한다고 했을 때 DOM 트리는 HTML -> HEAD -> META, -> TITLE -> BODY -> H1 -> IMG 라고 할 수 있다. 부모와 자식 구조로 표시하면 트리형태가 되는데 이를 DOM 트리라고한다. DOM 트리에서 가지가 갈라져 나간 항목을 노드라고 하고, DOM 트리의 시작부분인..

* 연습문제 1 현재 시각 * 연습문제 2 현재 시각을 알려주는 팝업을 가운데에 띄우기 현재 시간 보기

1. 브라우저 관련 객체 웹 브라우저가 열리면 가장 먼저 window라는 객체가 만들어지고, 밑으로 하위 요소에 해다하는 객체들이 나타난다. window의 하위 객체로는 document, history 등이 있고, document의 하위 객체로는 area, image 등이 있다. window : 브라우저 창이 열릴 때 마다 하나씩 만들어지는 것으로 , 브라우저 창 안의 요소 중에서 최상위에 있다. document : 웹 문서마다 하나씩 있으며, body 태그를 만나면 만들어진다. navigator : 현재 사용하는 브라우저의 정보를 담고 있다. history : 현재 창에서 사용자의 방문 기록을 저장한다. location : 현재 페이지의 url 정보가 담겨있다. screen : 현재 사용하는 화면 정보..

1.자바스크립트 객체 1️⃣ DOM (문서 객체 모델) : 웹 문서 자체가 객체이기도 하고, 웹 문서에 포함된 이미지나 링크 , 텍스트 필드 모두 객체에 해당한다, 2️⃣ 브라우저 관련 모델 : 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있다. (history, location, link...) 3️⃣ 내장 객체 : 웹 프로그래밍 할 때 자주 사용하는 요소로 자바 스크립트 안에 미리 객체로 정의 되어 있는 것을 내장객체라고 한다. 2. 객체의 인스턴스 만들기 자바스크립트에서 객체는 참조 형식으로 만들어서 사용해야한다. 즉 객체 자체가 아닌 인스턴스의 형태로 만들어서 사용해야한다. 자바스크립트의 객체가 틀이라면 그 틀을 기본으로 해서 계속 같은 모양으로 찍어 내는 것이 인스턴스이다. 객체의 인스턴스..