Programming Tips
HTML5
웹 프로그래밍 입문프로그램 잘 하는 법
■ 프로그래밍 잘하려면
열심히 공부한다 .
성실히 과제를 한다 .
프로그램 많이 짜본다 .과연 ?
■ 비법 ?
프로그램 설계를 잘한다 .
차근 차근 ( 차분히 ) 한다 .
에러를 줄인다 .매직 비법
1.
문제를 구체적으로 분석한다.
=>
키보드보다 펜을 먼저 잡는다!
2.
문제를 잘게 쪼갠다. =>
원샷 금지!!
3.
에러 메시지 잘 읽는다.
=>
어디까지 잘 돌아가는지 확인!!!
문제 분석하기 & 잘게 자르기
■ 연습문제 9-19
오늘의 날짜와 요일을 출력하는 자바스크립트 코드를 작성하시오 .■ 문제 분석 => 해결 방법 적기
오늘 날짜와 요일을 구하려면// Date 객체를 생성하고 // getDate() 로 날짜 받기 // getDay() 로 요일 받기
일단 요기까지만 작성해 보자 . 설명 지우지 말고 => 코멘트로 사용
요일이 숫자로 ?? => 일단 성공 !<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var today = new Date(); // Date 객체를 생성하고 date = today.getDate(); // getDate()로 날짜 받기 week = today.getDay(); // getDay()로 요일 받기
document.write("날짜 : "+ date + ", 요일 : " + week);
</script>
</body>
</html>
■ 요일 처리하기
0~6 => ‘ 일 ~ ‘’
토 로 변경’
// 요일명을 배열 [0~6] 로 저장 // 요일 = 요일명 [ 요일번호 ]
이것만 확인하기 alert() 이용하면 아주 편리
■ 합치기 ( 완성하기 )
<script type="text/javascript">
var weekname = ['일', '월', '화', '수', '목', '금', '토']
// 요일명을 배열[0~6]로 저장 // 요일 = 요일명[요일번호]
test1 = weekname[1]; test2 = weekname[6];
alert(test1,test2); // 확인용
var today = new Date(); // Date 객체를 생성하고 date = today.getDate(); // getDate()로 날짜 받기 week = today.getDay(); // getDay()로 요일 받기
document.write("날짜 : "+ date + ", 요일 : " + week);
</script>
<script type="text/javascript">
var weekname = ['일', '월', '화', '수', '목', '금', '토']
// 요일명을 배열[0~6]로 저장
// test1 = weekname[1]; test2 = weekname[6];
// alert(test1,test2); // 확인용
var today = new Date(); // Date 객체를 생성하고 date = today.getDate(); // getDate()로 날짜 받기 w_num = today.getDay(); // getDay()로 요일 받기
week = weekname[w_num]; // 요일 = 요일명[요일번호] document.write("날짜 : "+ date + ", 요일 : " + week);
</script>
문제 분석하기 & 잘게 자르기
■ 연습문제 10-19 [ 보충설명 ]
화면의 버튼을 누르면 사용자로부터 prompt 를 이용하여 문자열을 입력받고 , 입력받은 문자열을 버튼 아래 화면에 표시하는 웹문서를 작성하라 . 이 때 출력할 자리에 <div>요소를 미리 설정해 놓고 in nerHTML 속성을 이용해서 <p> 혹은 <h> 요소를 추가하라 .
화면의 버튼을 누르면Prompt 로 문자열을 입력받고 , 문자열을 버튼 아래 화면에 표시
…
일단 요기까지 작성해보자// input button onclick // text = prompt( … ) //
어뜨케??
<input type="button" onclick="myText();" value="연습문제“/>
<script type="text/javascript">
function myText() {
var text = prompt("텍스트를 입력하세요","");
alert("입력텍스트 : "+text);
}
</script>
■ 나머지 부분
출력할 자리에 <div> 요소를 미리 설정해 놓고
innerHTML 속성을 이용해서 <p> 혹은 <h> 요소를 추가하라 .=> 각각 실행
//
출력할 자리<div id=“show”>
//
출력할 때“ show”
를 찾아서// DOM(“show”).innerHTML = “
텍스트”
<input type="button" onclick="myText();" value="연습문제“/>
<div id="show">출력할 자리</div>
<script type="text/javascript">
function myText() {
var text = prompt("텍스트를 입력하세요","");
alert("입력텍스트 : "+text);
// 출력할 때 “show”를 찾아서
document.getElementById("show").innerHTML = "텍스트";
}
</script>
■ 마무리 ( 완성 )
입력받은 문자열을 innerHTML 에서 <h> 요소로 추가
<h> 혹은 <p> 요소로 추가var text = prompt("
텍스트를 입력하세요","");
…(“show").innerHTML = text;
…(“show").innerHTML = “<h2>”+text+“</h2>”;
<input type="button" onclick="myText();" value=" 연습문제“/>
<div id="show">출력할 자리</div>
<script type="text/javascript">
function myText() {
var text = prompt("텍스트를 입력하세요","");
// alert("입력텍스트 : "+text);
// 출력할 때 “show”를 찾아서
document.getElementById("show").innerHTML = “<h2>”+text+“</h2>”;
}
</script>
에러 잘 찾기
■ 일단 어디까지 제대로 실행되었는지 파악한다 !
에러 메시지 정독
디버깅 도구 사용
Alert() 기능 이용 // 인터프리터의 경우■ 그리고 나서 그 근처를 다음과 같이 살핀다 .
타이핑 에러 확률 1 등
변수명 , 함수명 틀릴 확률 2 등
닫는 괄호 / 태그 빼먹을 확률 3 등
그렇지 않은 경우 프로그램 논리 오류 ( 시키는 것을 못했다 )같이 찾아보자
■ 예제
<!DOCTYPE HTML>
<BODY>
<input id="dept" type="text" name="department" value="IT
공학">
<input type="button" value="name
찾기" onclick="my_test()">
<script type="text/javascript" >
function my_test {
var dom = document.getElementsById("dept");
document.write("<p>name : "+dom.name);
document.write("<p>value : "+dom.value);
}
</script>
</BODY>
</HTML>
■ alert 함수 이용하여 에러 위치 찾기
<input id="dept" type="text" name="department" value="IT공학">
<input type="button" value="name 찾기" onclick="my_test()">
<script type="text/javascript" >
function my_test { alert(“1”);
var dom = document.getElementsById("dept"); alert(“2”);
document.write("<p>name : "+dom.name); alert(“3”);
document.write("<p>value : "+dom.value);
}
</script>
<input id="dept" type="text" name="department" value="IT공학">
<input type="button" value="name 찾기" onclick=“alert(‘0’); my_test()">
<script type="text/javascript" >
function my_test { alert(“1”);
var dom = document.getElementsById("dept"); alert(“2”);
document.write("<p>name : "+dom.name); alert(“3”);
document.write("<p>value : “+dom.value);
}
</script>
완성 !!
<input id="dept" type="text" name="department" value="IT공학">
<input type="button" value="name 찾기" onclick=“alert(‘0’); my_test()">
<script type="text/javascript" >
function my_test() { alert(“1”);
var dom = document.getElementsById("dept"); alert(“2”);
document.write("<p>name : "+dom.name); alert(“3”);
document.write("<p>value : “+dom.value);
}
</script>
<input id="dept" type="text" name="department" value="IT공학">
<input type="button" value="name 찾기" onclick=“alert(‘0’); my_test()">
<script type="text/javascript" >
function my_test() { alert(“1”);
var dom = document.getElementById("dept"); alert(“2”);
document.write("<p>name : "+dom.name); alert(“3”);
document.write("<p>value : “+dom.value);
}
</script>
■ 서버 / 브라우저 환경 주의사항
파일 위치 확인하기
파일 이름 대소문자 확인하기 . 특히 확장자 (GIF, JPG 등 )
PHP 파일은 서버에서 작동된다 .
편집도구에서 실행되는 것은 믿지 말아라매직 비법
