'HTML.CSS.JavaScript/수업'에 해당되는 글 30건

  1. 2017.07.04 32. 자바스크립트의 반복문(11-2)
  2. 2017.07.04 31. 자바스크립트 선택문(11-1)
  3. 2017.06.26 30. 자바스크립트 실행 방법(10-3)
  4. 2017.06.26 29. 자바스크립트(10-2)
  5. 2017.06.26 28. CSS(10-1)
  6. 2017.06.15 27. CSS(9-3)
  7. 2017.06.14 26. CSS(9-2)
  8. 2017.06.14 25. 웹페이지 작성(9-1)
  9. 2017.05.31 24. 입력 양식 태그(8-3)
  10. 2017.05.31 23. 입력양식(8-2)
HTML.CSS.JavaScript/수업2017. 7. 4. 21:26

32. 자바스크립트의 반복문(11-2)

문장을 기능적으로 나누어 정의하는 함수 

for 문 

============

for(초기식; 조건식; 증감식){  

      반복 처리할 문장  

}  

=========================

while 문 

==========================

while( 조건식 ){  

        반복 처리할 문장  

}  

=============================

do while 문 

=========================

do {  

      반복 처리할 문장  

}while( 조건식 );  

======================

continue 문-제어문을 보조하는 명령문 

break 문  


문자열을 정수로 변환하는 parseInt함수 

– 매개 변수로 지정한 문자열을 10진수로 인식하여 정수값 변환 

– 문자 형태의 자료를 계산 가능한 정수로 변경 

– prompt() 입력 함수는 문자 형태로 값을 입력 

– 더하기 연산을 하면 문자열 더하기로 인식 문자열을 연결 

– 입력 받은 값을 정수형으로 변환 후 수식 계산 


parseInt(문자열, [진수]) 


 사용자 정의 함수 


• 사용자가 함수를 직접 정의 

• 내장 함수와 동일한 방법으로 호출 


fuction 함수이름(매개변수1, 매개변수2 ...매개변수n)  

{  

      함수에서 처리할 문장  

      [return 반환값]  

}  



'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

31. 자바스크립트 선택문(11-1)  (0) 2017.07.04
30. 자바스크립트 실행 방법(10-3)  (0) 2017.06.26
29. 자바스크립트(10-2)  (0) 2017.06.26
28. CSS(10-1)  (0) 2017.06.26
27. CSS(9-3)  (0) 2017.06.15
Posted by 멜데스
HTML.CSS.JavaScript/수업2017. 7. 4. 21:24

31. 자바스크립트 선택문(11-1)

여러 조건 중 한 문장만 선택하여 실행하는 선택문  

1. if 문 

  단일 조건 처리문  

-------------------------

if(조건식){  

        결과가 참일 때 수행할 문장  

}  

else {  

        결과가 거짓일 때 수행할 문장  

}  

--------------------------
2. Switch문 

-----------------------------

switch(수식){         //switch 시작을 알리는 중괄호(반드시 적어주어야 한다.  

    case value1 : 처리할 문장1; [break;]  

    case value2 : 처리할 문장2; [break;]  

    case value3 : 처리할 문장3; [break;]  

    :  

    :  

    default  : 처리할 문장n;  

}   //switch 끝을 알리는 중괄호(생략 불가능)  

다음 문장;  

-------------------------------

'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

32. 자바스크립트의 반복문(11-2)  (0) 2017.07.04
30. 자바스크립트 실행 방법(10-3)  (0) 2017.06.26
29. 자바스크립트(10-2)  (0) 2017.06.26
28. CSS(10-1)  (0) 2017.06.26
27. CSS(9-3)  (0) 2017.06.15
Posted by 멜데스
HTML.CSS.JavaScript/수업2017. 6. 26. 20:31

30. 자바스크립트 실행 방법(10-3)

웹 브라우저에서 자바 스크립트 프로그램 실행하기 


[따라하기 :자바 스크립트를 웹브라우저로 실행하기]  

 

① [시작] 단추를 누른 후 [프로그램]->[Internet Explorer]를 선택합니다. 잠시 기다리면 익스플로러가 실행됩니다.  

② [파일]메뉴의 [열기]를 선택합니다.  

③ [열기] 대화 상자가 나타나면 [찾아보기] 단추를 클릭합니다.  

④ 자바스크립트 문서가 저장되어 있는 폴더를 지정합니다. js01-01.html 파일을 선택한 다음 [열기] 단추를 클릭합니다. [확인] 단추를 클릭합니다.  

⑤ 웹 브라우저에 자바스크립터 문서의 실행 결과가 나타납니다.  



자료형의 종류와 변수 

1. 자료형의 종류  

-정수형, 실수형, 논리형 그리고 문자형  

2. 변수 만드는 방법  

 변수의 시작은 반드시 영문자나 UnderBar( _ )를 사용하고 숫자는 절대 사용할 수 없다.  

 두 번째 문자부터는 영문자(A～Z, a～z), 숫자(0～9) UnderBar( _ )를 모두 사용합니다.  

 대소문자를 구분합니다.  

 변수 명을 구성하는 문자들 사이에 공백이 와서는 안 되고 반드시 문자가 모두 연결되어야 한다. 두 단어가 합쳐서 만들어진 변수 명인 경우 UnderBar( _ )를 사용하여 표현합니다.  

 미리 정해진 예약어(KeyWord)는 변수로 사용할 수 없습니다.   

3. 변수 사용하기  

 var TEST 


자바스크립트에 내장된 대화 상자를 이용한 인터페이스 

웹 브라우저 상에서 사용자들과의 원활한 인터페이스를 위해서 자바 스크립트에서는 대화 상자를 제공합니다.  

 

제공되는 대화 상자는 함수들을 사용하여 출력할 수 있습니다.  

 

대화상자는 기능별로 나뉘어 있으면 용도에 따라 알맞은 함수를 호출하여야 합니다.  





'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

32. 자바스크립트의 반복문(11-2)  (0) 2017.07.04
31. 자바스크립트 선택문(11-1)  (0) 2017.07.04
29. 자바스크립트(10-2)  (0) 2017.06.26
28. CSS(10-1)  (0) 2017.06.26
27. CSS(9-3)  (0) 2017.06.15
Posted by 멜데스
HTML.CSS.JavaScript/수업2017. 6. 26. 20:28

29. 자바스크립트(10-2)

자바스크립트란? 


개요 

자바스크립트는 선 마이크로시스템사(Sun MicroSystems)와 넷스케이프사가 공동으로 제작하여 만들어 낸 스크립트입니다.  

 

▪ 자바 스크립트로 무엇을 할 수 있을까?  

스크립트언어는 원래의 언어에서 지원하지 못하는 일을 대신 처리해 주기 위해서 사용됩니다. 자바스크립트가 하는 대표적인 작업들도 HTML이 지원하지 못하는 다양한 기능들을 제공합니다.  

 

웹 페이지에 작은 꽃(눈)들이 흩날리는 효과를 만들 수 있고, 마우스를 따라 다니는 글자 효과를 만들 수 있습니다.  

  

HTML에서 작성한 입력 상자에 입력받은 사용자의 정보를 서버 측으로 넘겨주기 위해 [보내기] 버튼을 누릅니다. 이때 버튼을 누르는 사건을 사용자가 브라우저에 발생시킨 이벤트로 보고 이를 처리합니다. 이벤트의 발생이 일어났을 때 이를 알아내어 처리할 수 있도록 하는 활동들이 자바스크립트를 통하여 가능합니다.  


자바스크립트의 기본 구조? 


기본 구조 


<SCRIPT LANGUAGE="JavaScript">  

        자바스크립트 코드  

</SCRIPT>  


자바 스크립트는 기본적인 HTML 문서에 <SCRIPT>...</SCRIPT> 구문을 삽입합니다. 

자바 스크립트를 기술하는 방법을 3가지로 구분합니다.  

 

 

1. HTML의 <HEAD> . . . </HEAD> 사이에 작성합니다.  

2. HTML의 <BODY> . . . </BODY> 사이에 작성합니다.  

3. 외부 파일(js 형식)로 작성하여 SOURCE 속성을 이용하여 삽입합니다.


HEAD 부분과 BODY부분에 자바 스크립트 포함하기 

• HEAD 부분에 삽입 

– 가장 안전하고 일반적인 형태 

– 다른 문장에 비해 먼저 해석되어 처리된다는 장점 


• BODY 부분에 삽입 

– 일반적이지 않은 방법 

– body 부분의 문장이 수행되는 도중에 자바스크립트 문장들이 반드시 기술되어야 하는 경우 사용 


자바 스크립트 외부에서 불러들이기 & 주석문 

• 자바스크립트 외부에서 불러오기 

– 완전히 독립된 다른 파일로 작성 

– 파일 확장자는 “js”로 지정, 순수 자바스크립트로만 구성 

– <script>태그의 src 속성에 해당 자바스크립트 파일 지정 

– <script>태그는 자바스크립트에서 제외 

• 주석문 

– 자바스크립트는 지원되지 않는 브라우저에서는 자바스크립트 소스가 그대로 노출 

– 이를 방지하기 위해 주석처리,<!--와 //-->기호 



'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

31. 자바스크립트 선택문(11-1)  (0) 2017.07.04
30. 자바스크립트 실행 방법(10-3)  (0) 2017.06.26
28. CSS(10-1)  (0) 2017.06.26
27. CSS(9-3)  (0) 2017.06.15
26. CSS(9-2)  (0) 2017.06.14
Posted by 멜데스
HTML.CSS.JavaScript/수업2017. 6. 26. 18:14

28. CSS(10-1)

배경에 이미지에 관련된 속성 

배경 지정 

– 배경에 색상을 지정할 뿐만 아니라 이미지 삽입 가능 

– 배경 이미지 설정 

• “background-image” 속성 

• 삽입할 이미지의 파일명을 기술하려면 “url”을 기술하여 지정 

selector { 

background-image:url(“경로명+파일명”) 

} 

– 타일 효과 

• “background-repeat” 속성 

• 기본값 repeat 설정 바둑판모양으로 출력 

• no-repeat : 배경 이미지 반복하지 않고 한번만 출력 


배경 이미지의 위치 조정 속성 

배경 이미지 위치 조정 

– background-position 속성 

• 비율로 위치를 지정 또는 키워드로 설정 

• 특정 위치를 지정하지 않으면 기본적으로 왼쪽 상단에 위치 

 

selector{ 

  Background-position:속성값 

} 

 

• 왼쪽 상단을 [0%, 0%]=left top 

• 오른쪽 하단[100%, 100%]=right bottom 

• 중앙[50%, 50%]=center center 


배경 이미지 고정하는 속성 

• 배경 이미지 고정 

– background-attachment 속성 

• 속성값을 “fixed”로 지정 

• 배경 이미지 고정, 내용만 스크롤 

selector{ 

Background-attachment:속성값 

} 

– 배경 스타일 한번에 설정 

• 배경에 관련된 속성 한번에 지정 

• background 속성 다음에 적용하고자 하는 속성들에 대한 값들 나열 

 

selector{ 

color:white; 

background:black url(“image\image01.jpg”) center no-repeat 

fixed; 

} 



'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

30. 자바스크립트 실행 방법(10-3)  (0) 2017.06.26
29. 자바스크립트(10-2)  (0) 2017.06.26
27. CSS(9-3)  (0) 2017.06.15
26. CSS(9-2)  (0) 2017.06.14
25. 웹페이지 작성(9-1)  (0) 2017.06.14
Posted by 멜데스
HTML.CSS.JavaScript/수업2017. 6. 15. 23:01

27. CSS(9-3)

CSS 파일 HTML에 삽입 

Link 스타일 시트 

– 여러 문서에 동일한 스타일을 적용할 경우에 매번 동일한 스타일을 문서마다 설정해야 한다는 번거로움 

– 스타일 시트의 일반적인 형태 

• 스타일 시트를 설정하는 부분만 따로 파일로 작성하여 이를 HTML 문서에서 불러와 사용 

• 스타일 시트 저장 시 “파일명.css”로 지정 

• 따로 존재하는 스타일 시트를 HTML문서에서 가져다 쓰기 

– <link>태그를 사용 

– <link rel=“stylesheet” type=“text/css” href=“경로명+파일명.css”> 



Inline 스타일 

– <head>태그에 <style>태그를 삽입하는 형태 

– 한 문서의 여러 곳에서 반복적으로 사용 가능 

– HTML 문서 내의 태그에 직접 스타일 지정 가능 

– 직접 HTML 문서에 스타일을 적용하는 것을 인라인 방식 

– ex 

• 스타일 설정하는 내용 전체를 이중 따옴표로 둘러쌓아서 기술 

• <body style=“text-decoration:underline”> 


색상과 배경 관련 속성 

• 색에 관한 속성 

– 글자색과 배경 색을 설정할 때 사용되는 속성 

• 배경에 이미지 

– 스타일 스트를 사용하여 다양한 효과를 연출 

• 글자색과 배경색 설정하는 스타일 

– color와 background 속성 

• 글자의 속성을 지정하기 위해서는 color 속성 사용 

• 바탕색을 지정하기 위해서는 background-color 사용 



 


'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

29. 자바스크립트(10-2)  (0) 2017.06.26
28. CSS(10-1)  (0) 2017.06.26
26. CSS(9-2)  (0) 2017.06.14
25. 웹페이지 작성(9-1)  (0) 2017.06.14
24. 입력 양식 태그(8-3)  (0) 2017.05.31
Posted by 멜데스
HTML.CSS.JavaScript/수업2017. 6. 14. 20:03

26. CSS(9-2)

스타일 시트(CSS)란?  

1. 스타일  시트는  태그  속성들을  하나의  스타일로  설정하는  용도로 사용합니다. 

2. 뿐만 아니라.  레이어에 적용하여 웹 페이지를 동적으로 다이나믹하게 구성할 수 있도록 합니다.  


스타일 시트로 가능한 작업  

1. HTML 문서 내에 글자의 글꼴 종류, 크기, 색, 여백 등을 지정합니다.  

2. 글자의 정렬 방식을 결정하거나 글자에 그림자를 지정하는 등 다양한 효과를 줄 수 있습니다.  

3. 박스에 다양한 효과를 줄 수 있습니다.  

4. 사용자의 web browser환경에 상관없이 일정한 화면을 보여줄 수 있습니다.  


Selector {속성 : 값} 

∙ selector : 스타일 적용 대상입니다.  

∙ 속성 : 기본(디폴트)으로 설정된 스타일 중 변경하고자 하는 속성입니다.  


H1 { color : red } 

• H1 태그의 글자 색상을 빨간색으로 지정합니다.  


여러가지 속성 설정하기 





'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

28. CSS(10-1)  (0) 2017.06.26
27. CSS(9-3)  (0) 2017.06.15
25. 웹페이지 작성(9-1)  (0) 2017.06.14
24. 입력 양식 태그(8-3)  (0) 2017.05.31
23. 입력양식(8-2)  (0) 2017.05.31
Posted by 멜데스
HTML.CSS.JavaScript/수업2017. 6. 14. 18:36

25. 웹페이지 작성(9-1)

1. 회원 가입 문서 만들기 

회원 가입 문서 만들기 

– 테이블이나 프레임을 이용한 페이지 레이아웃 설정 

– 회원 가입 페이지에 들어갈 정보 확인 

– 회원 가입에 필요한 입력 양식 

– 초기 사용자의 이름을 입력 받을 수 있는 양식 작성 

• 일반 텍스트 입력 <input type=“text”> 

– 주민등록번호&전화번호 입력 양식 

• 주민등록번호 자릿수 제한하기 

• 잘못된 전화번호 자릿수 제한하기 


2. 주민등록번호, 전화번호, 휴대폰, 주소 입력 받기 

 아이디 및 패스워드 

• 아이디 

– 일반적인 텍스트 입력 양식 

– <input type=“text”> 

– 관리자 의도에 따라 자릿수 제한 가능 

• 패스워드 

– 입력한 내용 대신 “*”로 표시되는 입력 양식 

– <input type=“password”> 

– 관리자 의도에 따라 자릿수 제한 가능 


 기타 정보 입력받기 

• 이메일 주소, 홈페이지 주소 

– 일반적인 텍스트를 입력할 수 있는 텍스트 박스 

– 초기값으로 “value”속성을 이용하여 표시 가능 

• 개인 프로필 

– 여러 줄의 문장 입력 가능 

– <textarea>~</textarea> 

– 입력 가능한 줄 “rows”로 지정 

– 한 줄에 입력 가능한 글자 수 “cols”로 지정 







'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

27. CSS(9-3)  (0) 2017.06.15
26. CSS(9-2)  (0) 2017.06.14
24. 입력 양식 태그(8-3)  (0) 2017.05.31
23. 입력양식(8-2)  (0) 2017.05.31
22. 프레임 작성하기(8-1)  (0) 2017.05.31
Posted by 멜데스
HTML.CSS.JavaScript/수업2017. 5. 31. 18:52

24. 입력 양식 태그(8-3)

1. Submit 버튼 양식 

Submit 버튼 양식 

• 버튼 양식 

– <input type=“button”> 

– 가장 보편적인 버튼 생성 

• submit 버튼 양식 

– <input type=“submit”> 

• 입력한 데이터를 모두 다른 URL로 전송하기 위해 사용 

• 다른 URL은 <form>태그의 “action”속성에 저정한 URL로 전송 

• reset 버튼 양식 

– <input type=“reset”> 

• 이전에 입력된 데이터를 모두 초기화 


기타 입력양식  

• <textarea>~</textarea> 

– 텍스트를 여러 줄의 문장을 입력할 수 있는 입력 양식 

– “rows”에 입력하고자 하는 행수를 설정 

– “cols”에 한줄에 입력할 수 있는 글자 수 지정 



2. 리스트 박스 

콤보박스 & 리스트 박스 작성 

• 콤보 박스 

– <select>~</select> 

– 여러 가지 항목 중 하나를 선택하기 위한 콤보 박스 

– <option> 속성에 항목 기술 

– 공간 절약 

• 리스트 박스 

– <select size=“n”>~</select> 

–  여러 가지 항목 중 하나를 선택하기 위한 리스트 박스 

– “size” 속성을 추가, 크기를 지정 

– 콤보 박스에 비해 공간 낭비 



'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

26. CSS(9-2)  (0) 2017.06.14
25. 웹페이지 작성(9-1)  (0) 2017.06.14
23. 입력양식(8-2)  (0) 2017.05.31
22. 프레임 작성하기(8-1)  (0) 2017.05.31
18. 프레임 작성하기(6-3)  (0) 2017.05.24
Posted by 멜데스
HTML.CSS.JavaScript/수업2017. 5. 31. 18:48

23. 입력양식(8-2)

1. 간단한 폼 양식 작성하기 

간단한 폼 양식 작성하기 

– <form>~</form> 

• 입력 양식 폼을 구성하는 기본 골격 

• 폼 태그 텍스트 입력 양식, 암호 입력 양식 등을 기술 

     <form action=“이동위치” method=방식 enctype=형식> 

다양한 폼 

</form>


– 텍스트&암호 입력 양식 

• 글자를 입력 받거나 출력하는 용도 

– <input type=“text> 

• 입력한 문자 대신 “*” 문자가 출력되도록 하는 입력 상자 

– <input type=“password”> 


2. 데이터를 입력 받는 양식 작성하기 

여러 가지 목록 중에서 선택하는 양식 작성 

– <input>태그의 type 속성에 “check” or “radio” 지정  

 • 체크 박스 양식 <input type=“checkbox”> 

– 여러 개의 항목을 나열하여 원하는 항목을 선택 

– 한번에 여러 개를 동시에 선택 가능 

– “checked” 속성 “on”을 지정 초기화면에 체크된 상태로 표시 


라디오 버튼 양식 

– <input type=“radio”> 

– 여러 개의 항목 중에서 하나만 배타적으로 선택할 경우 

– 하나를 선택하면 그 전에 선택된 내용은 “off” 

– 체크 박스와 달리 한번에 하나의 항목만 선택 가능 





 

'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

25. 웹페이지 작성(9-1)  (0) 2017.06.14
24. 입력 양식 태그(8-3)  (0) 2017.05.31
22. 프레임 작성하기(8-1)  (0) 2017.05.31
18. 프레임 작성하기(6-3)  (0) 2017.05.24
17. 프레임 작성하기(6-2)  (0) 2017.05.24
Posted by 멜데스

티스토리툴바