HTML_JS(Sol)
210510_1~4(javascript)
너굴셉
2021. 5. 10. 12:37
이클립스 js자동완성
참고
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>javaScript study 1</title>
</head>
<body>
Hello HTML<br>
<script type="text/javascript">
//자바스크립트 코딩영역 / 한줄주석
/*여러줄주석
*자바스크립트는 자바가 아니다.
자바스크립트는 객체 기반언어라고 한다. 객체기반언어는 객체를
생성하는것이 아니라, 이미 만들어진 객체를 활용하는 것임.
20여가지 정도의 객체가 이미 만들어져있고, 단순히 호출해서
사용하면 된다.
*/
//출력문
document.write("HelloJavaScript"); // 명령이 끝나면 ; 종료 표시.
document.write("하나");
document.write("둘<br>"); //자바스크립트 출력문 안에서는 태그도 문자열처럼 취급
document.write("<font size=\"5\" color='red'>HelloJavaScript</font>");
//탈출문자사용예
</script>
</body>
</html>
js 출력문
<script>
document.write("문자열(이안에태그가능)")
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>경고창띄우기</title>
</head>
<body>
경고창
<br>
<script type="text/javascript">
//경고창 띄우기 : 확인 버튼 하나만 있음
alert("경고합니다. 자바스크립트 공부하시오!!!");
</script>
확인창
<br>
<script type="text/javascript">
//확인창 : 확인/취소 버튼이 두개있다.
var kk; // 자바스크립트에서 변수를 명시적으로 선언
kk = confirm("확인상자 입니다. 확인하시오 Yes or No");
if (kk == true) {
document.write("확인하셨습니다. ");
} else {
document.write("취소하셨습니다.");
}
</script>
<script type="text/javascript">
var name; // 자바스크립트는 입력값에 따라서 데이타형이 결정된다.
var addr;
var tel;
name = prompt("이름을 입력하시오.","홍길동");
addr = prompt("주소를 입력하시오.","종로구 관철동 ..");
tel = prompt("연락처를 입력하시오.","010-1111-2222");
alert("환영합니다. \n"+
name+"님\n"+
"주소는"+addr+"\n"
+"연락처는"+tel+"입니다.\n")
</script>
</body>
</html><script>
alert("경고문");
confirm("확인상자문 Y/N");
prompt("대화상자","디폴트값"); //외부에서값을 입력받을때
</script>
함수 function
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script>
//자바스크립트는 대소문자를 구별한다.
// 함수 정의 하기
function add(a, b) { //반환형 기술하지 않는다.
return a + b; //리턴이 있는 경우
}
function addwrite(a, b) {
document.write(eval(a + b))
//return a+b; //리턴이 없는 경우
//eval()함수 연산이 가능하도록 자동형변환시켜줌
}
</script>
<script>
a = 100;
b = 200;
c = add(a, b);
document.write(c);//결과를 화면에
alert(c); //결과를 경고창으로
document.write("<br>")
addwrite(a, b); //함수안에 출력문
</script>
</body>
</html>function 함수명(인자,인자,,,,){
return 인자?인자;
}
반환형 기술하지않아도 된다. 리턴이있는경우 작성
eval(a+b); 연산이 가능하도록 자동 현변환시켜주는 함수
전역변수문자열 테스트
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//변수 테스트
//var name = "홍길동"; //전역변수가된다. 함수밖에서선언된변수
name = "홍길동"; // 변수선언var을 안해도 된다?
function addstr() {
name = name + "킹";
}
function addstr2() {
name = name + "왕";
}
function addstr3() {
name = name + "짱";
}
document.write(name+"<br>");
addstr();
document.write(name+"<br>");
addstr2();
document.write(name+"<br>");
addstr3();
document.write(name+"<br>");
</script>
</body>
</html>결과 :
홍길동
홍길동킹
홍길동킹왕
홍길동킹왕짱
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var i;
i = prompt("1~100수치를 입력하세요");
num = parseInt(eval(i / 10)); //몫만 반환
//<P> 줄바꾸고 한줄 건너뜀
// <br> 줄만 바꿈
switch (num) {
case 10://10이거나 9이면
case 9:
document.write("A <p> 수고했어요.");
break;
case 8:
document.write("B <p> 분발합시다.");
break;
case 7:
document.write("B <p> 더 분발합시다.");
break;
case 6:
document.write("C <p> 다음기회에");
break;
case 5:
document.write("C<p>");
break;
case 4:
document.write("D+<p>");
break;
case 3:
document.write("D<p>");
break;
case 2:
document.write("F+<p>");
break;
case 1:
document.write("F<p>");
break;
default:
document.write("낙제<p>");
break;
}
</script>
</body>
</html>switch문도 가능