Develop/JavaScript JQuery JSP

0630 JavaScript Start!

포페PostFace 2022. 7. 4. 18:32

HTML 파일에 작성하며 바디/헤드 태그 안쪽에 
<script type="text/javascript"> </script> 사이에 작성한다.
모든 데이터 값의 변수 선언은 var로 통일된다.(자바의 int,String 등등)
System.out.println의 기능은 document.write로 구현되며
웹사이트에 나온다.
주로 html 태그 내의 유효성 검사시에 사용한다.(로그인 등)

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01_Basic\Ex01.html</title>
</head>
<body>
	<script type="text/javascript">
		var a,b,c;
		a=10;
		b=0.123;
		c="banana";
		document.write("a: "+a+"<br>");
		document.write("b: "+b+"<br>");
		document.write("c: "+c+"<br>");
	
	</script>
</body>
</html>


프롬프트
자바 스크립트 내에 있는 메소드로 입력을 받을 수 있다.
확인 클릭 : 입력한 값이 변수에 들어온다.
취소 클릭 : null이 변수에 들어온다.

<script type="text/javascript">
	var myName = prompt("이름을 입력하세요");
	document.write("나의 이름은 " +myName+"입니다. <br>");
</script>



자바 주석 : // 또는 /* */
오라클 주석 : --
HTML 주석 : <!-- -->
CSS 주석 :  /* */
JavaScript 주석 : // 또는 /* */

confirm()
확인/취소만 선택 가능하고 불리언 타입으로 리턴한다.

<script type="text/javascript">
	var result= confirm("게임 한판 할까요?");
	document.write("result :" + result+"<br>");
	var answer =result ? "좋아요" : "다음에 합시다."; //삼항 연산자
	document.write("answer :"+answer+"<br>");
</script>




대화상자 : alert(),confirm(),prompt()

alert()
경고창의 형태로 띄워지며 어떠한 입력도 받을 수 없고 확인만 클릭가능하다.

Function :함수 자바의 메소드와 같은 역할을 한다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		
		alert("자바스크립스 너무 재미있음");
		function summer(check){ //summer 함수 정의 check=true or false
			if(check==true){
				alert("여름은 더운 계절입니다.");
			}
			else {
				alert("여름은 시원한 계절입니다.")
			}
		}
	</script>
</head>
<body>
	<h2>여름은 더운 계절입니까?</h2>
	
	<form>
		<input type="button" value="예" onClick="summer(true)">
		<input type="button" value="아니오" onClick="summer(false)">
	</form>
</body>
</html>


여기서 예를 클릭하면 true를 입력해서 여름은 더운 계절입니다. 라는 문장을 alret로 리턴한다.


전역 변수와 지역 변수
전역 변수는 굳이 var를 안붙여줘도 된다.
지역 변수를 새로 만들고 싶다면 꼭 var를 써줘야한다.

<script type="text/javascript">
	var age=30; //전역 변수
	document.write("나이1:" +age+"<br>");
	
	function test() { //정의
		var age=50; //지역 변수
		document.write("나이2:" +age+"<br>");
	}
		
	test(); //호출
	document.write("나이10:" +age+"<br>");
</script>





 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		var su= prompt("정수를 입력하세요.",10);
		document.write(su+3+"<br>");
		document.write(Number(su)+3+"<br>");
		document.write(parseInt(su)+3+"<br>");
		document.write(eval(su)+3+"<br>");
		document.write(+su+3+"<br>");
		
		document.write(Number("15+3*4")+"<br>"); //NaN: Not a Number
		document.write(parseInt("15+3*4")+"<br>"); //기호가 나오기 전 숫자까지
		document.write(eval("15+3*4")+"<br>");
		
	</script>
</head>
<body>

</body>
</html>




ImplicitOBj :내장 객체

'Develop > JavaScript JQuery JSP' 카테고리의 다른 글

0704 이중배열  (0) 2022.07.04
0630 배열  (0) 2022.07.04
0630 for문을 통해 구구단 테이블 만들기  (0) 2022.07.04
0630 프롬프트로 입력받아 성적 구하기  (0) 2022.07.04
0704 JavaScript 정리  (0) 2022.07.04