엄준일 04일차 HTML/Javascript 교육

HTML & Java ScriptHTML & Java Script
[[ 강의 일차강의 일차 ]]
강사 : 엄준일

 HTML & Java Script 개요
 HTML 만들기
 CSS 사용하기
 Java Script 사용하기
 Java Script 문법 1 ( 조건문 / 반복문 )
 Java Script 문법 2 ( 함수 )
 중요 객체
 종합 예제
44 일차일차 교육 내용교육 내용

 HTML 이란 ?
 HTML 개요
 노트패드로 만드는 HTML 문서
 Java Script 란 ?
 Java Script 개요
 노트패드로 만드는 Java Script 프로그래밍
11 교시 커리큘럼교시 커리큘럼 

Hyper Text 란 ?
• 파생 텍스트라고 부르기도 한다
• 1960 년대 철학자 테오도르 넬슨 (Theodore
Nelson) 에 의해 ‘ Hyper’ 와 ‘ Text’ 를 합성하여 만
든 용어
• 비 순차적인 정보를 표현할 수 있다
• 하이퍼텍스트 형태의 정보를 검색하기 위한 검색 엔
진 등장

웹 브라우져란 ?
• 텍스트 , 그림 , 소리 , 동영상과 같은 콘텐츠를 사
용자에게 보여주는 프로그램
• 웹 서버와 쌍방향 통신
• 주요 기능
– HTTP (Hyper Text Transfer Protocol)
– HTTPS (Hyper Text Transfer Protocol over Secure
socket layer)
– 이미지 파일 포멧 (GIF, JPEG, BMP, PNG 등 )
– CSS (Cascading Style Sheet)
– 자바스크립트 (DHTML)

• 대표적인 웹 브라우저
– Microsoft Internet Explorer
– Mozila Firefox
– Opera
– Safari
– Google Chrome

HTML 이란 ?
• Hyper Text Markup Language 의 약자
• 인터넷에서 웹 페이지를 표시한다
• 프로그래밍 할 수 있는 각종 언어를 내장 할 수 있다
– VBScript
– Java Script
– CSS 등

HTML 이란 ? – 노트패드로 만드는
HTML

따라하기 02
• HTML 의 기본 요소
– <html> ~ </html> - 문서의 처음과 끝
– <head> ~ </head> - 문서의 정의 시작과 끝
– <body> ~ </body> - 문서의 본문의 처음과 끝

따라하기 03
• <body bgcolor=“”/> 속성
– HTML 본문의 배경색
• <center> ~ </center> - 텍스트를 중앙 정렬
• <font> ~ </font> - 텍스트의 글자 속성 정의
• <br /> - 한줄 띄움

Java Script 란 ?
- Java Script 개요

Java Script 란 ?
• 객체 (Object) 기반의 스크립트 프로그래밍 언어
(Script Programming Language)
• 인터프리터 (Interpreter) 방식
• 클라이언트 (Client) 에서 동작하므로 클라이언트
스크립트라고도 부름
– 클라이언트 스크립트 : JScript, VB Script
– 서버 스크립트 : PHP, ASP, CGI, JSP

• C 언어의 기본 구분을 바탕으로 만들어진 언어
– 최초 라이브 스크립트 (Live Script) 라는 이름으로 시작
– 자바 언어 (Java Language) 와 전혀 무관하다
• HTML 함께 웹 문서를 다이나믹하게…

따라하기 01
<html>
<body>
<script language=“javascript”>
document.write(“Hello Javascript”);
</script>
</body>
</html>

• <script> ~ </script>
– language="javascript" 로 사용할 프로그램 언어를 지정
한다
– 요소 안에 Java Script 프로그래밍을 한다

따라하기 02
<html>
<body>
<script type="text/javascript">
var a = 10;
var b = 20;
var c = a + b;
document.write(a + " + " + b + " = " + c);
</script>
</body>
</html>

• var 키워드
– 변수를 선언하고 값을 초기화 한다
var a = 10;
var b = 20;
var c = a + b;
var a = 10;
var b = 20;
var c = a + b;
var a, b, c;
var a = 10, b = 20, c = a + b;
var a, b, c;
var a = 10, b = 20, c = a + b;

 시간표 만들기
 Table 태그
 Div 태그
 명함 만들기
 style (style sheet)
 나의 홈페이지 만들기
 A 태그
 OL 태그
 UL 태그

Table 태그 사용 방법
<table> - 테이블의 시작
<tr> - 테이블의 행 (Rows)
<td> - 테이블의 열 (Columns)
</td>
<td>
</td>
</tr>
</table>

3x2 테이블 만들기 구성
<TR>
<TR>
<TD> <TD> <TD><TABLE
>

3x2 테이블 만들기 HTML
<table width="300px" border="1px">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

명함 테이블 구성
인브레인 교육센터
주소 서울특별시 … …
전화번호 02-000-0000
인브레인 교육센터 사원 홍길동

• <a> ~ </a> - 클릭 시 페이지 이동
• <ol> ~ </ol> - 순차적인 번호가 있는 목록
– Type 속성
• 1
• a
• I
• <ul> ~ </ul> - 순차적인 기호가 있는 목록
– Type 속성
• circle
• disc
• square

 CSS 개요
 CSS 개요
 CSS 사용하는 이유
 CSS 만들기
 HTML 만들기
 Style Sheet 만들기
 HTML 에 Style Sheet 적용하기
 CSS 파일로 분리하기

CSS 개요
• Cascading Style Sheet 의 약자
• 마크업 언어 (Markup Language) 가 표시되는 방법
을 기술

CSS 를 사용하는 이유
• 유연성
– 페이지의 구성 및 사소한 변경이 빠르다
– 웹 사이트의 레이어웃 (Layout) 을 한꺼번에 변경이 용이하
다
• 랜더링
– 웹 페이지의 용량이 작아진다
– 타이핑 하는 코드의 양이 줄어든다
– 좀 더 빨리 브라우져에 표시된다

Style Sheet 만들기
• 태그 이름으로 Style Sheet 만들기
– Style 요소에 HTML TAG 로 만든다
• 공통 Style Sheet 만들기
– Style 요소에 ‘ .’ 으로 공통 요소를 만든다
• 특정 html 컨트롤에 Style Sheet 지정하기
– Style 요소에 # 으로 적용될 스타일을 만든다

HTML 에 Style Sheet 적용하기

CSS 파일로 분리하기
• Head 요소에 link 태그를 추가한다
– <link rel="Stylesheet" href=“CSS 파일명 " />

실습
• CSS 를 적용한 웹 페이지 만들기

 Window 객체
 Window 객체 다루기
 Window 개체
 Alert
 Confirm
 Prompt
 Popup

Window 객체
• Java Script 의 최상위 객체
• 계층 구조로 이루어져 있음
• 브라우져를 제어할 수 있는 기능

Window 객체의 주요 함수와 속성

window.status 속성
• window.status 속성
– 브라우져의 상태 표시줄에 텍스트를 입력
• window.defaultStatus
– 브라우져의 상태 표시줄에 기본값으로 텍스트를 유지
• 예 ) window.status = ‘ 홍길동’ ;

window.alert 함수
• 대화상자에 메시지를 띄운다
• 예 ) window.alert(‘ 안녕하세요’ );

window.confirm 함수
• 대화상자로 확인 / 취소 를 입력받는다 .
• 리턴값은 true / false
• 예 ) window.confirm(‘ 동의합니까 ?’);

window.prompt 함수
• 사용자에게 임의의 값을 입력 받는다
• 예 ) window.prompt(“ 숫자를 입력하세요” ,””);
– 입력값 1 : 표시될 문자열
– 입력값 2 : 입력될 기본 문자열

window.open 함수
• 새로운 창 ( 팝업창 -popup window) 를 생성한다
• 예 ) window.open(“hello.htm”);
– 입력값 1 : 새로운 창의 URL ( 웹 경로 )
– 입력값 2 : 새로운 창의 이름
• _blank - 연결된 문서를 읽어 새로운 빈 윈도우에 표시한다 . 윈도우
이름은 없다 .
• _media - 연결된 문서를 읽어 메디아바의 HTML 내용부분에 표시한
다 . IE6 부터 적용된다 .
• _parent - 연결된 문서를 읽어 바로 상위 모체창에 표시한다 .
• _search - 연결된 문서를 읽어 브라우저의 검색창에 표시한다 . IE5 부
터 적용된다 .
• _self - 디폴트이며 , 연결된 문서를 읽어 현재창에 표시한다 .
• _top - 연결된 문서를 읽어 최상위 윈도우에 표시한다 .

window.location 객체
• href 속성
– 지정한 URL 로 이동한다
• reload 함수
– 현재 웹 페이지를 다시 로드한다

– 입력값 3 : 새로운 창의 특징 기술 ( 속성 )
• scrollbars=yes/no – 스크롤바의 표시 여부
• toolbar=yes/no – 툴바의 표시 여부
• status=yes/no – 상태바의 표시 여부
• menubar=yes/no – 메뉴를 표시할지 여부
• resizable=yes/no – 사용자가 윈도우 크기를 조절할 수 있는지 여부
• width= 가로 크기
• height= 세로 크기
• left= 좌측으로 부터 공백
• top= 상단으로 부터 공백

실습
• Windows 개체 실습

 Java Script 조건문
 조건문 기초
 HTML 에서 조건문 사용하기
 Java Script 반복문
 반복문 기초
 HTML 에서 반복문 사용하기
55 시 커리큘럼시 커리큘럼 

조건문 (if 문 )
If ( 조건문 )
{
조건이 참일 경우 처리…
}
If ( 조건문 )
{
조건이 참일 경우 처리…
}
Else
{
조건이 거짓일 경우 처리
}

조건문 (switch , case )
switch( 조건 대상 )
{
case 조건 : 처리 . break;
case 조건 : 처리 . break;
case default: 처리 . break;
}

조건문 (3 항 연산 )
• 3 항 연산자
– var 변수 = 조건 ? 참일경우 : 거짓말경우
– 예 ) var msg = age == 20 ? “true” : “false”;

반복문
• for ( 초기값 ; 조건 ; 증가값 )
{
}

• while ( 조건 )
{
}
do
{
} while( 조건 );

 Java Script 함수 (function)
 함수 만들기 기초
 Java Script 내장 함수 활용
 Java Script 이벤트 (event)
 Java Script 이벤트 기초
 Java Script 이벤트 활용

함수 (function) 란 ?
• 함수 (function) 이란 ?
– 복잡한 처리나 로직을 캡슐화
• 함수의 종류
– 내장 함수
• 언어가 기본적으로 제공하는 함수
– 사용자 정의 함수
• 사용자가 필요에 의해 직접 만드는 함수

함수 만들기
function 함수명 ( 인자값 … )
{
처리…
}

실습
• Window.open 함수를 이용하는 사용자 정의 함수
만들기

Java Script 내장 함수 종류
• parseInt( 문자열 , 진수 ) : 문자열을 진수에 맞게 계산
ex> parseInt("100",2) : 4
parseInt("200",16) : 512
• parseFloat( 문자열 ) : 문자열을 실수로 변환
ex> parseFloat("123.4E3") : 123400
parseFloat("456.78") : 456.78
• escape( 문자열 ) : 문자열을 ASCII 코드값으로 변환
escape(" 네미시스제이 ") : %uB124%uBBF8%uC2DC
%uC2A4%uC81C%uC774
escape(" 네이버 ") : %uB124%uC774%uBC84
• unescape( 아스키코드 ) : ASCII 코드값을 문자열로 변환
ex> unescape("%uBE14%uB85C%uADF8") : 블로그
unescape("%uBA54%uC77C") : 메일

Java Script 내장 함수 종류 ( 계속 )
• isFinite( 값 ) : 값이 숫자면 true 문자면 false
ex> isFinite(" 블로그 ") : false
isFinite("123456") : true
• isNaN( 값 ) : isFinite 와 반대로 숫자면 false 문자
면 true
ex> isNaN(" 블로그 ") : true
isNaN("123456") : false
• Number( 문자열 ) : 숫자로 된 문자열을 숫자로 변
환
Number(10) + Number(20) = 30
• String( 숫자 ) : 숫자를 문자열로 변환
String(30) + String(40) = 3040

이벤트 (Event)
• 어떤 특정 사건 (event) 이 일어날때 발생하는 신호
(Signal)
예 )
하이퍼링크를 마우스로 클릭하였을 때 이벤트
폼 입력값 이 바뀔 때 이벤트
페이지의 로딩이 완료되었을 때 이벤트

이벤트 종류 ( 마우스 이벤트 )
• onClick
– 마우스로 해당 엘리먼트를 클릭함
• onDblClick
– 마우스로 해당 엘리먼트를 더블클릭함
• onMouseDown
– 마우스를 누름 ( 클릭은 마우스를 눌렀다 때는 것으로 구별됨 )
• onMouseMove
– 마우스가 엘리먼트 위에서 이동함
• onMouseOut
– 마우스가 엘리먼트에서 벗어남
• onMouseUp
– 마우스를 뗌 (MouseDown 과 반대됨 버튼을 누른 상태에서 떼는 경우 )

이벤트 종류 ( 키보드 이벤트 )
• onKeyDown
– 키보드 버튼을 누르고 있는 경우 ( 어떤 키인지 읽으려면 함
수를 호출하여 event.KeyCode 를 참고해야 한다 )
• onKeyPress
– 키보드 버튼을 눌렀 땐 경우 ( 마우스의 클릭과 유사 )
• onKeyUp
– 키보드 버튼을 누르고 있다가 땐 경우 ( MouseUp 과 유사
)

이벤트 종류 (HTML 컨트롤 이벤트 )
• onBlur
– 엘리먼트가 Focus( 초점 ) 를 잃음 . 예를 들어 버튼을 클릭하면 포커스 ( 점선테두리
로 보임 ) 가 버튼에 잡혀있는데 이 때 다른 것을 클릭하거나 탭등으로 포커스를 이동
할 경우를 의미함 .
• onChange
– 엘리먼트에서 특정 내용을 선택 혹은 변경하는 경우 . 셀렉트박스 (select box) 에서
선택된 아이템을 변경하는 경우가 이에 해당됨
• onFocus
– 엘리먼트에 초점이 맞춰지는 경우
• onReset
– 리셋 이벤트가 발생하는 경우 . 대표적으로 input box 의 타입 reset 이 적용될 때이
다 .
• onSelect
– 엘리먼트내 문자열을 블럭화 할 경우 ( 즉 드래그 혹은 쉬프트 + 방향키등으로 문자열
에 블럭을 씌우는 경우이다 )
• onSubmit
– 폼 (Form) 태그내에서 전송 (Submit) 이벤트가 발생하는 경우

이벤트 종류 ( 윈도우 이벤트 )
• onLoad
– 페이지나 이미지등의 엘리먼트가 로딩이 완료되는 경우
• onResize
– 윈도우나 프레임의 사이즈가 변경되는경우
• onUnLoad
– 온로드의 반대로서 페이지를 이탈하는 경우

실습
• 이벤트를 활용한 HTML 문서 만들기

 Java Script 중요 개체
 Java Script 객체지향

Java Script 객체 지향
• Java Script 를 이용하여 객체 지향 프로그래밍
• 복잡성을 제어하기 위해 객체 지향을 흉내
• 유지 / 보수의 장점

Java Script 객체 지향 프로그래밍 종류
• Java Script 기본 방식
• JSON 방식
• new 생성자 ( 메소드를 함께 정의 )
• 프로토타입 ( 메소드를 별도로 정의 )

Java Script 객체 지향
• Java Script 의 개체는 단순히 이름 / 값 쌍의 컬렉
션
• Java Script 개체는 문제열 키가 있는 사전으로 해
석var userObject = new Object();
userObject.lastLoginTime = new Date();
alert(userObject.lastLoginTime);
var userObject = {}; // equivalent to new Object()
userObject[“lastLoginTime”] = new Date();
alert(userObject[“lastLoginTime”]);
var userObject = { “lastLoginTime”: new Date() };
alert(userObject.lastLoginTime);
모
두
동
일
한
코
드
모
두
동
일
한
코
드

Java Script 기본방식
• Java Script 에서 기본적으로 사용되는 객체 생성
방법
• 객체를 만들어서 새로운 속성이나 함수를 해당 객체
에 언제든지 추가var obj = new Object();
obj.Name = " 홍길동 ";
obj.Age = "30";

JSON 방식
• JSON 은 Java Script Object Notatin( 객체 표기법
) 의 약어
• 쉼표를 구분자로 배열 값을 한번에 설정하는 기능을
이용
• 복잡한 구조의 객체를 한번에 만들기 쉬움
var person =
{
hong: {
name: " 홍길동 ",
age: 30
},
kim: {
name: " 김철수 ",
age: 20
}
};

new 생성자 이용하기
• 객체 지향 언어의 생성자와 유사
• 생성자와 함께 사용자 정의 메소드 선언
function person(name, age) {
this.name = name;
this.age = age;
this.toString = function() {
return name + " 은 " + age + " 살 입니다 ";
};
}
var p = new person(" 홍길동 ", 30);
alert(p.toString());

프로토타입 이용하기
• new 생성 메소드 방식의 단점을 해결
• Java Script 객체를 확장
function person(name, age) {
this.name = name;
this.age = age;
}
person.prototype.sayHello = function() {
return "Hello " + this.name;
};
var p = new person(" 홍길동 ", 30);
alert(p.sayHello());

프로토타입을 이용한 상속 구현
function person() {
this.setName = function(newName) {
name = newName;
}
this.getName = function() {
return name;
}
}
function superPerson() { }
superPerson.prototype = new person();
superPerson.prototype.fireLaser = function()
{
alert(name + " 이 레이져 발사 !");
}
var sp = new superPerson();
sp.setName(" 홍길동 ");
sp.fireLaser();

프로토타입을 이용한 상속 2
// class Pet
function Pet(name) {
this.getName = function() { return name; };
this.setName = function(newName) { name =
newName; };
}
Pet.prototype.toString = function() {
return "This pet’s name is: " + this.getName();
};
// end of class Pet
var parrotty = new Pet("Parrotty the Parrot");
function Dog(name, breed) {
Pet.call(this, name);
this.getBreed = function() { return breed; };
}
Dog.prototype = new Pet();
Dog.prototype.constructor = Dog;
Dog.prototype.toString = function() {
return "This dog’s name is: " + this.getName() +
", and its breed is: " + this.getBreed();
};
var dog = new Dog("Buddy", "Great Dane");
alert(dog);

Java Script 로 네임스페이스 구현
• var 예약어를 사용하여 네임스페이스 정의
var inbrain = {};
inbrain.sample = {};
inbrain.sample.person = function(name, age) {
this.name = name;
this.age = age;
};
inbrain.sample.person.prototype.toString = function() {
return this.name + " 은 " + this.age + " 살 입니다 ";
}
var p = new inbrain.sample.person(" 홍길동 ", 30)
alert(p);

실습
• Java Script 객체지향을 이용한 모듈화 연습

 종합 예제
 Java Script 와 HTML 을 활용한 사이트 개발

Java Script 와 HTML 을 활용한 사
이트 개발

필수사항
• CSS 를 이용하여 STYLE 을 적용할 것
• 홈페이지 필수 콘텐츠
– 메인 화면 (default.htm)
• 사이트 네비게이터 ( 메뉴바 )
– 가족 소개 및 자기 소개 (hello.htm)
– 자기 명함 페이지 (companycard.htm)
• <table> 태그 이용
– 이력 카드
• 예 ) 취미 이력 , 특기 이력 , 연애 이력 등등

엄준일 04일차 HTML/Javascript 교육

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to 엄준일 04일차 HTML/Javascript 교육 (20)

More from 준일 엄 (18)

엄준일 04일차 HTML/Javascript 교육

Editor's Notes