자바스크립트(18)
-
6. 퀴즈 프로그램 만들기
1. 자바스크립트의 강점은 웹 페이지에서 사용자와 상호작용을 할 수 있다는 점입니다. 이번에는 사용자와 상호작용할 수 있는 여러 가지 입력폼을 만들어 보세요. 2. 다음과 같이 버튼과 함수를 이용한 간단한 경고장 띄우기를 만들어 봅니다. -1) 소스코드 버튼 -2) 실행결과 3. 간단한 퀴즈 프로그램을 만들기 위해 버튼을 활용하는 프로그램을 만듭니다. 역사 퀴즈를 만들어 봅니다. -1) 소스코드 역사 퀴즈 정답 체크 -2) 실행 결과 4. 한국사 객관식 문제를 만들어 봅니다. 아래와 같이 코드를 작성해 봅니다. -1) 소스코드 한국사 8급 문제 1. 다음 중 고려시대 왕은? 근초고왕 의자왕 충렬왕 성종 -2) 실행결과
2017.08.21 -
5. 함수 만들기
1. 지금까지 여러분이 만든 코드를 다시 사용하려면 어떻게 해야 할까요? 예를 들어, 덧셈 기능이나 검색 기능을 미리 만들어 놓고 필요할 때마다 그 기능을 사용하려면 무엇이 필요할까요? 자바스크립트에서는 다시 사용할 수 있도록 코드를 묶어 두는 방법을 "함수"라고 합니다. 함수를 사용하면 코드를 반복해서 복사하고 붙여 넣지 않아도 여러 곳에서 중복해서 사용할 수 있습니다. 2. 간단한 함수 만들기를 해 봅니다. -1) 소스코드 -2) 실행결과 3. 함수의 장점을 제대로 이용하려면 함수와 암께 인수(argument)를 사용할 수 있습니다. 인수를 사용하게 되면 함수를 호출할 때마다 함수의 동작을 바꿀 수 있습니다. 4. 함수의 인수를 사용하는 방법을 알아봅니다. 다음과 같이 코드를 작성해 봅니다. -1) ..
2017.08.11 -
4. 내가 좋아하는 동물들
1. 자바스크립트는 기본적인 프로그램을 만들 수 있으며, 사용자들과의 상호작용이 가능합니다. 반복문을 이용하여 입력한 숫자를 더하거나 총점과 평균을 출력하는 프로그램들을 만들 수 있습니다. 2. 반복문(for, while)을 이용하여 1부터 10까지 더하기 프로그램을 만들어 봅니다. -1) 소스코드 -2) 실행결과 3. 반복문을 이용하여 동물 이름을 출력하는 프로그램을 만들어 봅니다. 동물 이름을 출력하려면 초기에 동물 이름을 입력해 두어야 합니다. 변수를 여러 개 사용하면 되지만 변수가 수십 개가 되면 비효율적이므로 '배열'이라는 것을 사용해서 입력합니다. 배열은 하나의 변수에 여러 개의 값을 배정할 수 있게 해 줍니다. 일반적으로 배열을 선언하는 방법은 다음과 같이 2가지가 있습니다. var newA..
2017.08.10 -
DOM과 HTML의 관계
1. 웹 페이지를 처리하는 단계 1. 페이지 읽기 - '페이지 읽기'에서는 브라우저가 HTML 페이지를 읽습니다.2. 파싱 - '파싱'에서는 웹페이지 내용을 해석하고, 개발자가 작성한 마크업 태그와 1:1매칭이 되는 DOM 클래스의 객체를 실행하고, 생성된 객체는 저마다 고유 기능을 동작 하게 됩니다.3. 출력 - '출력'에서는 생성한 DOM객체를 가지고 웹페이지 화면을 생성하게됩니다. 2. DOM과 노드의 관계 HTML 구성 요소의 가장 작은 단위 노드라 합니다. 노드에는 , , , , 주석 등이 해당됩니다. 웹브라우저는 읽어 들일 때 노드들을 해석한 후 각 노드와 1:1로 대응하는 DOM 객체를 생성합니다. DOM객체는
2017.06.25 -
DOM(Document Object Model)이란?
1. DOM(Document Object Model)이란? 웹 화면에 보이는 요소를 조작하기 위한 기능으로 된 라이브러리 덩어리를 말하며, DOM과 자바스크립트 DOM은 같은 의미입니다. 2. DOM 객체 Document, Element, Node, Atrribute, Text, HTML Document, HTML Element, HTMLAnchol Element , HTMLDiv Element 등이 있습니다. 3. DOM 기능 큰 단위로 웹 페이지에서 홍보용 이미지를 인터넥티브하게 보여주는 이미지 슬라이더, 메뉴항목에 마우스를 올려 놓으면 부드럽게 열리는 아코디언 메뉴, 쇼핑몰 메뉴, 서버에서 데이터를 받아 화면에 멋지게 출력하는 기능을 제작할 때 활용됩니다. 작은 단위로는 스크립트를 이용한 웹 페이지..
2017.06.05 -
Jqurey란?
1. JQurey란? 자바스크립트로 만들어진 라이브러리를 말하며, 자바스크립트 DOM작업을 좀더 쉽게 할 수 있는 뛰어난 기능을 가지고 있습니다. 단, 자바스크립트는 만능이 아닙니다. 2. 요소자바스크립트Core 문법 자바스크립트Core 라이브러리 자바스크립트 BOM(Browser Object Model) 자바스크립트 DOM(Document Object Model) 기본 문법과 구조데이터 타입조건문(if, switch)반복문(for, while)함수(function)클래스(prototype): 타이머함수문자열(string)날짜 및 시간(date)수학배열(array)기타 전역함수: 브라우저와 관련된 것WindowNavigatorLocationHistoryDocumentScreen: 노드스타일속성이벤트위치 ..
2017.06.05