본문 바로가기
공부일지

231006 (HTML)

CD가참둥그렇다 2023. 10. 6. 12:24

테스트 23. eval(), parseInt(), isNaN()

  • 자바스크립트의 기본 함수가 있다.
  • eval() : 문자열로 작성된 수식을 연산한다.
  • parseInt : 문자열을 숫자로 변환한다. 10진수 형태로 저장하게 된다.
  • parseInt에 주어진 문자열이 숫자가 아닌 경우 NaN으로 값이 저장된다.(오류코드)
  • isNaN() : NaN 값을 가진 변수 적용시 true를 리턴하게 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script>
function evalParseIntIsNaN() {
	let res = eval("2*3+4*6");
	document.write("eval(\\"2*3+4*6\\")는 "+res+"<br>")
	let m = parseInt("32");
	document.write("parseInt(\\"32\\")는 "+m+"<br>")
	let n = parseInt("0X32");
	document.write("parseInt(\\"0X32\\")는 "+m+"<br><br>")
	
	n = parseInt("hello");
	if (isNaN(n)) {
		document.write("hello는 숫자가 아닙니다.");
	}
}
</script>
</head>
<body>
	<h3>eval(), parseInt(), isNaN()</h3>
	<hr>
	<script>
		evalParseIntIsNaN()
	</script>
</body>
</html>

 

 

테스트 24. 구구단 출력 함수 만들기

  • 자바와 같은 방식으로 작동하게 된다.
  • return만 따로 적는다면 void 형태로 리턴되고 함수가 종료된다.
  • 자바에서 numberformat오류에 해당하는 경우 NaN 으로 저장되는 점을 이용하여 오류를 체크할 수 있다.(isNaN())
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script>
function gugudan(n) {
	let m = parseInt(n);
	if (isNaN(m)||m<1||m>9) {
		alert("잘못 입력하셨습니다.");
		return;
	}
	for (let i=1; i<=9; i++) {
		document.write(m+"x"+i+"="+(m*i)+"<br>");
	}
}
</script>
</head>
<body>
	<h3>구구단 출력 함수 만들기</h3>
	<hr>
	<script>
		let n =prompt("구구단 몇 단을 원하세요","");
		gugudan(n);
	</script>
</body>
</html>

 

 

7장

 

테스트 1. 자바스크립트 객체 생성 및 활용

  • 참조 타입은 new 코드로 객체를 생성하고 변수 타입()으로 변수 내용을 채울 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체 생성 및 활용</title>
</head>
<body>
	<h3>객체 생성 및 활용</h3>
	<hr>
	<script>
		let today = new Date();
		document.write("현재 시간 : " + today.toLocaleString() + "<br>");

		let mystr = new String("자바스크립트 공부하기");
		document.write("mystr의 내용 : " + mystr + "<br>");
		document.write("mystr의 길이 : " + mystr.length + "<br>");
	</script>
</body>
</html>

 

 

테스트 2. []로 배열 만들기

  • 배열은 []로 만들 수 있다. 자바와 다르게 변수에 [] 표시를 해서 만드는 것이 아니고, []에 직접 내용물을 채워 넣는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[]로 배열 만들기</title>
</head>
<body>
	<h3>객체 생성 및 활용</h3>
	<hr>
	<script>
		let plots = [20,5,8,15,20];
		document.write("var plots = [20,5,8,15,20]<br>")
		
		for(let i=0;i<5;i++) {
			let size = plots[i];
			while(size>0) {
				document.write("*");
				size--;
			}
			document.write(plots[i] + "<br>")
		}
	</script>
</body>
</html>

 

 

테스트 3. Array 객체로 배열 만들기

  • Array()를 사용하면 길이가 늘어날 수 있는 빈 배열이 생성된다.
  • 배열의 길이를 측정하면 배열에서 값이 있는 양 만큼을 출력한다.
  • 배열을 건너뛰어 값을 넣더라도 하위 배열을 생성은 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array 객체로 배열 만들기</title>
</head>
<body>
	<h3>Array 객체로 배열 만들기</h3>
	<hr>
	<script>
		let degrees = new Array();
		degrees[0] = 15.1;
		degrees[1] = 15.4;
		degrees[2] = 16.1;
		degrees[3] = 17.5;
		degrees[4] = 19.2;
		degrees[5] = 21.4;
		
		let sum = 0;
		for (let i=0; i<degrees.length; i++) 
			sum+=degrees[i];
		
		document.write("평균 온도는 "+sum/degrees.length+"<br>")
	</script>
</body>
</html>

 

 

테스트 4. Array 객체로 배열 만들기

  • concat = 배열을 연결한다. 원래 배열은 유지한다.
  • join = 배열의 값을 ()내부의 값으로 구분하여 저장한다. 원래 배열은 유지한다.
  • reverse = 배열의 순서를 반대로 한다. 원래 배열도 반대로 된다.
  • slice = 배열을 ()내부의 위치에 따라서 분리한다. 원래 배열은 유지한다.
  • sort = 배열을 정렬한다. 원래 배열도 정렬한다.
  • toString = 배열 값을 , 구분으로 정렬하여 문자열로 저장한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array 객체의 메소드 활용</title>
<script>
	function pr(msg, arr) {
		document.write(msg + arr.toString() + "<br>")
	}
</script>
</head>
<body>
	<h3>Array 객체의 메소드 활용</h3>
	<hr>
	<script>
		let a = new Array("황", "김", "이");
		let b = new Array("박");
		let c;

		pr("배열 a = ", a);
		pr("배열 b = ", b);
		document.write("<hr>")

		c = a.concat(b);
		pr("c = a.concat(b) 후 c = ", c);
		pr("c = a.concat(b) 후 a = ", a);

		c = a.join("##");
		pr("c = a.join() 후 c = ", c);
		pr("c = a.join() 후 a = ", a);

		c = a.reverse();
		pr("c = a.reverse() 후 c = ", c);
		pr("c = a.reverse() 후 a = ", a);

		c = a.slice(1, 2);
		pr("c = a.slice(1, 2) 후 c = ", c);
		pr("c = a.slice(1, 2) 후 a = ", a);

		c = a.sort();
		pr("c = a.sort() 후 c = ", c);
		pr("c = a.sort() 후 a = ", a);

		c = a.toString();
		document.write("a.toString() : " + c)
	</script>
</body>
</html>

 

 

테스트 5. Array 객체로 배열 만들기

  • Date를 사용하여 현재 시간을 저장할 수 있다. get을 이용하여 각 요소를 불러올 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date 객체로 현재 시간 알아내기</title>
</head>
<body>
	<h3>Date 객체로 현재 시간 알아내기</h3>
	<hr>
	<script>
		let now = new Date();
		document.write("현재 시간 : " + now.toUTCString() + "<br><br>");
		document.write(now.getFullYear() + "년도<br>");
		document.write(now.getMonth() + "월<br>");
		document.write(now.getDate() + "일<br>");
		document.write(now.getHours() + "시<br>");
		document.write(now.getMinutes() + "분<br>");
		document.write(now.getSeconds() + "초<br>");
		document.write(now.getMilliseconds() + "밀리초<br><hr>");

		let next = new Date(2023, 7, 15, 12, 12, 12);
		document.write("next.toLocaleString() : " + next.toLocaleString() + "<br>");
	</script>
</body>
</html>

 

 

테스트 6. 방문 시간에 따라 변하는 배경색 만들기

  • document.write처럼 특정 태그의 속성을 변경할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>방문 시간에 따라 변하는 배경색</title>
</head>
<body>
	<h3>페이지 방문 초시간이 짝수이면 violet, 홀수이면 lightskyblue 배경</h3>
	<hr>
	<script>
		let current = new Date();
		if(current.getSeconds()%2==0) 
			document.body.style.backgroundColor = "violet";
		else
			document.body.style.backgroundColor = "lightskyblue";
			
		document.write("현재 시간 : ");
		document.write(current.getHours(),"시,");
		document.write(current.getMinutes(),"분,");
		document.write(current.getSeconds(),"초<br>");
	</script>
</body>
</html>

 

 

테스트 7. String 객체의 메소드 활용

  • charAt = ()위치의 문자
  • concat = 내부의 값을 연결
  • indexOf = ()내부의 값의 가장 빠른 위치, 없다면 -1
  • slice와 substr = slice는 두 좌표 사이를 지정, substr은 한 좌표에서 길이 만큼을 자른다.
  • toUpperCase = 대문자로 작성
  • replace = 특정 문자를 찾아서 다른 문자로 교체 후 출력
  • trim = 빈칸을 제거한다.
  • split = ()내부의 값을 기준으로 문자열을 잘라서 문자열 배열로 표현
  • 모든 String메소드는 실행 후 원래 값을 바꾸지 않는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>String 객체의 메소드 활용</title>
</head>
<body>
	<h3>String 객체의 메소드 활용</h3>
	<hr>
	<script>
		let a = new String("Boys and Girls");
		let b = "!!";
		document.write("a : " + a + "<br>");
		document.write("b : " + b + "<br><hr>");

		document.write(a.charAt(0) + "<br>");
		document.write(a.concat(b, "입니다.") + "<br>");
		document.write(a.indexOf("s") + "<br>");
		document.write(a.indexOf("And") + "<br>");
		document.write(a.slice(5, 8) + "<br>");
		document.write(a.substr(5, 3) + "<br>");
		document.write(a.toUpperCase() + "<br>");
		document.write(a.replace("and", "or") + "<br>");
		document.write("  CD  ".trim() + "<br><hr>");

		let sub = a.split(" ");
		document.write("a를 빈칸으로 분리<br>");
		for (let i = 0; i < sub.length; i++)
			document.write("sub" + i + "=" + sub[i] + "<br>");

		document.write("<hr>String 메소드를 실행 후 a와 b 변함 없음<br>");
		document.write("a : " + a + "<br>");
		document.write("b : " + b + "<br>");
	</script>
</body>
</html>

 

 

테스트 8. Math를 이용한 구구단 연습

  • Math.floor = 내부의 값 중 소수점을 버린 값
  • Math.random = 0.0~1.0(미만)의 랜덤 숫자를 생성한다.*9일시 0~9(미만)의 값 중 하나로 생성된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Math를 활용한 구구단 연습</title>
<script>
	function randomInt() {
		return Math.floor(Math.random() * 9) + 1;
	}
</script>
</head>
<body>
	<h3>Math를 활용한 구구단 연습</h3>
	<hr>
	<script>
		let ques = randomInt() + "*" + randomInt();

		let user = prompt(ques + "값은 얼마입니까?", 0);
		if (user == null) {
			document.write("구구단 연습을 종료합니다.")
		} else {
			let ans = eval(ques);
			if (ans == user)
				document.write("정답! ")
			else
				document.write("아니오! ")
			document.write(ques + "=" + "<strong>"+ans+"</strong>입니다<br>")
		}
	</script>
</body>
</html>

'공부일지' 카테고리의 다른 글

231010 (HTML)  (0) 2023.10.10
231006 (Java)  (1) 2023.10.06
231005 (Java)  (0) 2023.10.05
231005 (HTML)  (1) 2023.10.05
231004 (Java)  (1) 2023.10.04

'공부일지' Related Articles

티스토리툴바