HTML5 Multimedia - Audio Elements

1. Audio Elements - video elements와 비슷하다. - 별도의 플러그인 설치를 필요로 하지 않는 오디오 자료를 표시 - Control API 제공 src 오디오 자원의 경로 지정 사용시 생략 width 표시되는 요소의 넓이 height 표시되는 요소의 높이 controls 컨트롤 패널을 표시함 autoplay 로드되면 자동 재생함 loop 반복 재생함 / loop="3" type 오디오 코덱 정보를 지정 /* 크로스 브라우징을 위한 문법 */ Download bass.mp3 * 웹접근성 위배 - 소리가 있는 컨텐츠에 대한 autoplay - 소리가 있는 컨텐츠에 대한 loop 대표 브라우저 별 사용 가능 확장자 크롬 mp3 / ogg / wav 사파리 mp3 / ogg / wav ..

2021.11.11

HTML5 Multimedia - Video Elements

1. Video Elements - 별도의 플러그인 설치를 필요로 하지 않는 동영상 자료를 표시 - Control API 제공 src 비디오 자원의 경로지정 사용 시 생략 width 표시되는 요소의 넓이 height 표시되는 요소의 높이 poster 포스터 이미지를 지정함 (영상이 없을 때, 시작 전에 보여지는 이미지) 영상의 크기와 동일한 크기의 이미지를 준비한다. controls 컨트롤 패널을 표시함 autoplay 로드되면 자동 재생함 loop 반복 재생함 / loop="3" type 비디오 코덱 정보를 지정 muted 비디오 사운드 제거 preload 영상을 로딩하면서 재생이 동시에 이루어짐 (필수) /* 크로스 브라우징을 위한 문법 */ Your browser is old. Download th..

2021.11.11

객체 Object

객체 세상에 존재하는 모든 것 자동차 객체의 모델링 객체 속성 메소드 car car.nave="Sonata" car.start(){} car.speed=100 car.accel(){} car.color="White" car.break(){} car.door=4 car.transe(){} 자바스크립트 객체 사용자 정의 객체 사용자가 직접 객체의 속성과 메소드를 정의하여 사용하는 객체 car(), house(), hotel() 내장 객체 자바스크립트 프로그램 자체에서 정의하여 사용자에게 제공하는 객체 object(), array(), date() 날짜를 지정하는 Date 객체 웹 페이지에 오늘의 날짜와 시간 및 요일 등을 표시 get메소드 : 시스템에 설정된 날짜 중에서 월과 일만 개별적으로 추출 getYe..

2021.11.02

함수 Function

함수 선언과 호출 형식 function 함수명(매개변수1, 매개변수2, ···){ //함수선언 실행 문장; return 반환값; } 함수명(인자1, 인자2, ···); //함수 호출 함수명 함수이름 인자 함수를 호출할 때 전달하는 입력값 매개변수 함수 호출문에서 전달한 인자를 받기 위해 선언된 변수 function 함수를 선언할 때 사용하는 키워드 return 함수에서 수행한 결과값을 반환할 때 사용하는 키워드 함수 선언 - 일반적인 방법(기본 함수) 기본 함수 호출하기 var text1="함수 선언 전 호출"; var text2="함수 선언 후 호출"; printMsg(text1); //함수 선언 전 호출 function printMsg(msg){ //함수 선언 document.write("함수 호출 ..

2021.11.02

제어문

제어문 프로그램의 실행 과정을 제어하기 위해 사용하는 구문 자바스크립트 제어문 유형 설명 구조 조건문 조건에 따라 다음 문장을 선택적으로 실행 if문 if~else문 다중 if~else문 switch~case문 반복분 동일한 명령을 여러 번 처리하거나 특정 연산을 반복적으로 처리 for문 while문 do~while문 보조 제어문 조건문을 만나면 건너가거나 반복 수행을 종료, 반복문 내에서 사용 continue문 break문 if문 조건식이 참(true)이면 블록 내의 문장을 처리하고, 거짓이면 블록을 빠져나감 if (조건식) { 실행 문장; } if (조건식A) { 실행 문장; if (조건식B) { 실행 문장; } } if~else문 조건식이 참(true)인 경우와 거짓(false)인 경우 처리할 문장..

2021.11.01

자바스크립트 개요

자바스크립트 웹 문서를 동적으로 제어하기 위해 고안된 프로그래밍 언어 * 웹 삼총사 - HTML : 모델 담당 - CSS : 뷰 담당 - Javascript : 제어 담당 자바스크립트의 역할 1. 요소의 추가 및 삭제 2. CSS 및 HTML 요소의 스타일 변경 3. 사용자와의 상호작용 4. 폼의 유효성 검증 5. 마우스와 키보드 이벤트에 대한 스크립트 실행 6. 웹 브라우저 제어 및 쿠키 등의 설정과 조회 7. AJAX 기술을 이용한 웹 서버와 통신 자바스크립트 작성 방법 01. 대소문자를 구분하여 작성 02. 문장은 세미콜론 (;) 으로 구분 // 바른 예 var age=25 document.write("당신의 나이는"+ age +"입니다.") var age=25; document.write("당신의..

2021.10.29