티스토리 뷰

반응형

자바 스크립트를 사용하는 이유????

body안의 어떠한 태그들을 사용자의 이벤트에 반응할 수 있도록 제어하기 위해 사용합니다.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1 id="title"></h1>
        <h1 id="timer"></h1>
	<script>
		/*
		 스크립트 변수 선언
		 자바처럼 숫자는 int, double등 문자는 String으로 선언하지만
		 스크립트에서는 문자,숫자,boolen, 모두 var을 사용합니다.
                 new String("아무개"); 처럼 String 객체가 내장되어있지만
                 var str = new String("");
                 var str = "";
                 두가지 다 동일합니다. 보통 생략된 두번째껄 많이사용합니다.
		 값이 없을경우 null을 반환하지 않고 undefined를 반환합니다.
		 */
		var num = 111;
		var str = "문자입니다.";
		var n = null;
		var isCheck = true;
		var noDate;

		//스크립트의 결과를 웹브라우저에서 표시할 경우 사용
		//html 태그도 사용가능합니다.
		document.write("웹브라우저에 표현해보세요.");
		document.write("<br>");
		document.write(num);
		document.write("<br>");
		document.write(str);
		document.write("<br>");
		document.write(n);
		document.write("<br>");
		document.write(isCheck);
		document.write("<br>");
		document.write(noDate);
		document.write("<br>");

		var btnYN = confirm("Yes or No"); //확인/취소 팝업창
		if (btnYN) {
			//긍정일경우
			alert("네"); //팝업창
		} else {
			//부정일경우
			alert("아니요"); //팝업창
		}

		var pwd = prompt("비밀번호를 입력하세요.", "여기에 입력하세요."); //값을 입력받는 팝업창
		document.write(pwd); //입력한 비밀번호 출력
		console.log("테스트 통과"); //코드상 오류를 찾을때 사용 F12개발자모드 Console확인가능

		/*자바 메소드처럼 함수 정의하기
		 함수 정의 function 함수이름();
		 함수 호출 함수이름();
		 */
		sum();
		function sum() {
			/*문자와 숫자를 더하면 숫자는 문자로 인식하기 때문에
				eval,Number,parseInt를 사용하여 문자를 숫자로인식하게 한다.
				eval은 수식으로도 인식가능
				Number은 실수 형태로 표현가능
				parseInt는 실수 형태로 표현 불가능 무조건 소수점을 내림합니다.
				
				isNaN(문자열)은 숫자형식이면 false 문자형식이면 true를 리턴함
			 */
			document.write("<br>" + eval("1.1+2"));
			document.write("<br>" + Number("1.8"));
			document.write("<br>" + parseInt("1.8"));
			document.write("<br>" + isNaN("1.8"));
			document.write("<br>" + isNaN("hello"));
		}

		/*
			자바스크립트 구문과 HTML 태그의 id값을 서로 연결하여 제어가 가능하다.
		 */
		var title = document.getElementById("title");
		title.innerHTML = "자바스크립트 기초";

               /*
                        setInterval 함수는 일정시간 간격으로 반복해서 자동으로 호출합니다.
                        1000은 1초를 의미합니다. 단위는 ms입니다.
               /*
                function test(){
		var date = new Date(); //날짜관련 객체
		document.getElementById("timer").innerHTML = date;
	         }
	         setInterval(test, 1000); //1초간격으로 test()함수를 반복호출
	</script>
</body>
</html>



스크립트 이벤트 사용 방법 

<html태그 이벤트이름="함수" />

이벤트 이름 종류에는 https://www.w3schools.com/jsref/dom_obj_event.asp 참조하세요.


반응형
댓글
최근에 올라온 글
최근에 달린 댓글