ex(54)
-
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 -
3. 음식 주문하기
1. 자바스크립트로 조건이 맞는지 틀리는지를 확인하려면 이전 언어에서 배웠던 것처럼 조건문(if, else)을 사용하면 됩니다. 2. 아래 코드를 작성해 봅니다. -1) 소스코드 -2) 실행결과 3. 사용자들이 키를 입력할 수 있도록 대화창을 띄워서 값을 입력받아 봅니다. -1) 소스코드 -2) 실행결과 4. 비교 연산자 프로그래밍에서는 일반 수학에서 사용하는 등호나 연산자와는 다른 방법을 사용합니다. 일반적으로 두 값을 비교하는 연산자를 비교 연산자라고 합니다. == 같다, = 보다 크거나 같다, != 같지 않다 5. 이제 마지막 과제인 음식 주문하기 프로그램을 만들어 봅니다. 날씨 음식 맑음 피자 흐림 자장면 비 짬뽕 눈 칼국수 6. 위의 조건에 따라 프로그램을 만들어 ..
2017.08.09 -
8. 나만의 홈페이지 만들기
1. 지금까지 배운 html의 모든 내용을 활용하여 나만의 홈페이지를 만들어 봅니다. html5 이전의 홈페이지는 다음 그림과 같이 프레임을 나누어서 사용하였습니다. 2. 최근에는 프레임을 구분하지 않고 영역을 나누어서 한 페이지로 구성하는 방법을 주로 사용합니다. html5에서는 CSS를 이용해서 각 영역을 미리 지정하여 사용할 수 있습니다. 3. 나만의 홈페이지를 만들기 위 홈페이지 레이아웃을 구성합니다. 4. 내비게이션 부분의 메뉴에 연결할 웹 페이지를 만듭니다. 메뉴 연결할 페이지 나의 소개 2-1.html(소개 페이지) 나의 앨범 4-3html(앨범 페이지) 포트폴리오 6-3.html(동영상 페이지) 최근에는 연결할 페이지도 모든 영역이 포함된 코드로 만들어져 페이지가 전체적으로 변경되는 방법을..
2017.08.07 -
7. 웹 문서의 디자인, CSS
1. 지금까지는 디자인에 상관없이 요소에서 속성을 사용하여 여러 가지 색상이나 글꼴, 크기 등을 바꾸어 보았습니다. 최종적으로html을 이용한 나만의 홈페이지를 만들려면 홈페이지 전체의 디자인을 생각해야 합니다. 따라서 여기에서는 html에서 디자인을 담당하고 있는 CSS( Cascading Style Sheets )를 사용하여 다양한 디자인을 만들어 봅니다.2. 간단한 CSS를 만들어서 사용해 봅니다. CSS를 만들어 봅시다! 3. CSS를 사용하는 3가지 방법 1. 인라인 방식 : 2. 임베디드 방식 : head 태그 안에 style 태그를 사입하는 방식입니다. ( 3과 같은 방식 ) 3. 외부 링크 방식 : css 파일을 만들어 놓고 연결하여 사용하는 방식입니다. .css파일을 미리 만들어 놓고 사용
2017.08.07 -
6. 멀티미디어를 넣어보자 - VIDEO
1. 홈페이지를 만들 때 이미지뿐만 아니라 다양한 멀티미디어를 삽입하면 어떨까요? 동영상이나 멀티미디어를 홈페이지에서 바로 보여 줄 수 있도록 만들어 봅니다. 2. 비디오를 사입하는 방법을 알아봅니다. 브라우저에서 비디오를 지원하지 않습니다. 3. html5에서 지원하는 비디오 파일의 종류와 브라우저 버전을 알아봅니다. 파일 형식 설명 OGG (.ogg, .ogv) 스트리밍 방식의 멀티미디어 표현을 위한 공개 소스 기반의 파일형식 입니다. MPEG4 (.mp4, .m4v) MPEG-4에서 규정된 비디오 파일 형식이니다. WebM (.webm) 구글이 html5의 동영상에 사용하기 위해 개발한 오픈 소스 방식의 멀티미디어 파일입니다. 브라우저 버젼 MP4 WebM Ogg 크롬 4.0 YES YES YES ..
2017.08.06