본문 바로가기

js

(7)

[웹 프로젝트]_영화관 홈페이지 제작하기 - 4. 예매 기능 추가 설명 & 변경된 페이지 설명 앞 페이지들은 모두 html과 css를 사용하여 화면을 보여주는 정도까지 작성하였다. 영화 예매 부분은 javascript를 사용하여 추가적인 구현을 하였는데, 중점을 둔 부분은 js의 작동과 이벤트 핸들러 구현이므로 영화 예매 페이지에서 한 요소를 클릭했을 때 다른 요소를 나타내는 구성 흐름을 중심으로 작성하였다. 예를들면, 영화 제목을 클릭하면 그에 해당하는 시간과 날짜를 선택할 수 있다던지, 예매인 수를 정하던가 좌석을 정하면 그에 맞게 선택할 수 있다던지 하는 아주 간단하고 기초적인 구현이다. (라고 말은 하지만 왕초보 단계인 나는 처음에는 이것도 어려웠다 ㅠㅠ) 우선 js를 사용한 추가 구현을 위해 변경된 페이지가 있다. 예매하기의 상세 기능 구현을 위해 [영화 예매] 페이지 기획 및 화면 설계..

[웹 프로젝트]_영화관 홈페이지 제작하기 - 3. 구현 결과 화면 & 링크 연결 설명 홈페이지 기획과 화면 설계 스케치를 바탕으로 html과 css를 이용하여 화면을 구성하였다. js를 사용하지 않고 홈페이지 모양새만 갖춘 화면이라 섬세하지 못한 면은 감안해야 한다. 영화관 홈페이지의 메인 화면이다. 윗 부분의 이미지는 최대한 내가 기획한 영화관 이미지와 맞는 걸로 찾아와서 넣어봤는데 생각보다 할로윈 느낌이 많이 난다. 영화관 일정부분은 이미지를 가져왔고, 상영 영화의 예고편을 보여주기 위해 외부 url을 삽입하였다. 그리고 이벤트와 공지글을 보여주기 위한 게시판을 배치하였다. (아래부터는 서브 화면들을 차례로 보여줄 예정인데 편의상 공통된 header와 footer 부분은 생략하였다.) 회원가입 폼이 있는 부분으로, 메인화면 우측 상단의 '회원가입'을 누르면 이 페이지로 넘어오게 된다...

[웹 프로젝트]_영화관 홈페이지 제작하기 - 2. 화면 설계 스케치 이번 포스팅은 영화관 홈페이지 기획에 따라 필요한 모든 html 파일들을 스케치한 과정을 정리하였다. 처음에는 목업을 이용하다가 빠르게 끝내고 싶어서 아이패드를 이용하여 수작업 스케치로 진행하였다. 정말 기초적인 html과 css,js를 이용하여 view 페이지만 구현하는 프로젝트라 각 화면 간의 유기성은 떨어진다. 이번 프로젝트의 목표는 내가 공부한 html과 css, js를 어떻게 사용하는지 익히기 위한 것이므로, 눈감고 넘어가야할 부분이 상당히 많을 것이다. 화면 설계 스케치 순서는 앞 포스팅에서 엑셀로 정리했던 홈페이지 기획 구성 순서와 동일하다. , 현재 상영작과 상영 예정작 페이지는 동일하게 구성하였다. 각 영화 정보를 보여주는 페이지로 대표적으로 하나의 view만 구성하였다.

javascript를 이용한 실습 - canvas로 그림판 제작하기 이번 실습은 javascript의 canvas를 이용한 그림판 제작이다. 설정된 조건은 다음과 같다. 1. 캔버스 크기는 480 x 320 으로 지정한다. 2. 5가지 색상을 선택 가능하게 한다. 3. 색상 글자 클릭 시에도 컬러 선택이 가능하게 한다. 4. 펜 굵기를 선택할 수 있도록 하며 범위는 1~30으로 한다. 5. 선 스타일을 지정한다. 6. [캔버스 초기화]버튼을 만들어 클릭 시 캔버스를 초기화한다. 7. [캔버스 저장]버튼을 누르면 캔버스를 이미지로 변환하여 아래쪽에 보여주고, 크기는 120 x 80으로 한다. 우선 1번 조건의 '캔버스 크기는 480 x 320으로 지정하기'를 만족시키기 위해 크기를 지정한 캔버스를 만들어준다. 요소에 3개의 이벤트들이 지정되어있는데 다음과 같다...

html,Javascript를 이용한 실습 - toggle 문서 제작 이번 실습은 세 편의 시를 선택적으로 보여주는 html 문서 제작이다. 시를 선택적으로 보여주기 위해 javascript를 이용하여 toggle 기능을 사용할 것이다. toggle이란 하나의 설정 값에서 다른 설정 값으로 변경하는 것을 의미하며, 이번 실습에서 시를 선택적으로 보여주는 핵심 기능이다. 우선, 이번 실습에서의 조건은 다음과 같다. 1. 시 제목과 시인이 적힌 박스를 나타낸다. 2. 박스의 모양에 스타일을 적용한다. 3. 박스를 클릭하면 박스의 색이 바뀌면서, 제목에 해당하는 시가 박스 아래쪽에 나타난다. 4. 세 개의 박스는 각각 독립적 선택이 가능하다. 5. 선택 순서에 따라 시가 차례대로 나타난다. (밑으로 나열) 다음은 css 속성을 적용한 것이다. 우선 button 클래스의 ..

Html,Java script를 이용한 컬러 테이블 제작하기 이번에는 html과 Js를 이용하여 컬러 테이블을 제작하는 실습을 진행해볼 것이다. 컬러 테이블은 동적 웹 문서로 입력 값에 따라 테이블 셀의 색상이 바뀌게끔 할 것이다. 이번 실습의 조건은 다음과 같다. 1. 3행 5열 테이블을 제작하여 인덱스를 표시한다. 2. 세로, 가로 값을 입력받는다. (x행 x열 인덱스를 가리키기 위함이다.) 3. 컬러 값을 입력받는다. 4. 적용 버튼을 생성하여 버튼 클릭 시 입력한 인덱스 값의 위치를 원하는 색으로 바뀌게끔 한다. 우선 1번 조건의 '3행 5열 테이블을 제작하고 인덱스 표시'를 만족시키기 위해 html을 사용하여 인덱스가 표시된 테이블을 작성하였다. 1-1부터 3-5까지의 인덱스를 각 셀에 표시해주었다. table 생성에 대한 예시는 이전 포스팅에 있..

html,Js를 이용한 비만도 판정 페이지 만들기(BMI 지수) 이번에는 html과 자바 스크립트 (js)를 이용하여 이름, 키, 몸무게를 입력받아 비만도를 판정하는 페이지를 만들어보려고 한다. 이번 실습에서 만족시킬 조건은 다음과 같다. 1. 이름, 키, 몸무게를 차례대로 입력받는다. 2. BMI 지수를 계산하여 소수점 첫째 자리까지 출력하여 나타낸다. 3. 비만도를 판정하여 '저체중, 정상, 과체중, 비만'을 나타내며, 각 글씨에 효과를 준다. (ex. 색상, 굵기) 4. 표 형식으로 나타낸다. 우선 BMI 지수의 공식은 (몸무게/키*키)이며, 판정 기준은 다음과 같다. -저체중 : 18.5 미만 -정상 : 18.5 ~ 25.0 미만 -과체중 : 25.0 ~ 30.0 미만 -비만 : 30.0 이상 이를 참고하여 진행하도록 한다. 상당히 간단하고 짧..

이전 1 다음

728x90

티스토리툴바