8/30 html layout 참조 사이트, var, let, const, boolean, eval

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

개발 노트

8/30 html layout 참조 사이트, var, let, const, boolean, eval 본문

프로젝트 기반 JAVA 응용 SW개발 : 22.07.19~23.01.20/웹표준 기술

8/30 html layout 참조 사이트, var, let, const, boolean, eval

hayoung.dev 2022. 9. 5. 10:40

HTML 메뉴 > HTML Layout 참조할 것 많음.

https://www.w3schools.com/

W3Schools Free Online Web Tutorials

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

undefined : 자바스크립트는 자바보다 타입에 자유롭다.

eval, isFinite,isNaN(not a number), parseFloat 함수

boolean01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var boolean1 = true; 	//true
	var boolean2 = false;	//false
	var boolean3 = 1;		//1
	var boolean4 = 0;		//0
	var boolean5 = NaN;		//NaN
	var boolean6 = "aa";	//String
	
	//console.log는 실행했을 때 console창을 눌러서 결과를 확인할 수 있음.
	console.log(boolean1);	//true
	console.log(boolean2);	//false
	console.log(boolean3);	//1
	console.log(boolean4);	//0
	console.log(boolean5);	//NaN
	console.log(boolean6);	//aa
	console.log(!boolean5);	//true : NaN을 부정형으로 하면 true가 나옴. NaN은 아무것도 없는 것. 
	console.log(!boolean6);	//false : String을 부정형으로 하면 false가 나옴.


</script>
</head>
<body>

</body>
</html>

출력 결과

boolean02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	console.log(1+3);		//4
	console.log(1+"1");		//11
	console.log("1"+1);		//11
	console.log(false+1);	//1, boolean false는 수치 연산시 0으로 변환(중요 : 알아두기)
	console.log(true+1);	//2, boolean true는 수치 연산시 1로 변환(중요 : 알아두기)

</script>
</head>
<body>

</body>
</html>

출력 결과

primi01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var num1 = 20;
	var num2 = 20;
	var num3;
	//변수에 할당된 값 출력
	console.log(num1);
	//변수에 할당된 타입 출력
	console.log(typeof num);
	
	num1 = "이십";
	//변수에 할당된 값 출력
	console.log(num1);
	//변수에 할당된 타입 출력
	console.log(typeof num1);
	
	num3 = num1 + num2;
	//변수에 할당된 값 출력
	console.log(num3);
	//변수에 할당된 타입 출력
	console.log(typeof num3);

</script>
</head>
<body>

</body>
</html>

*html은 console창에서 오류를 확인할 수 있음.

출력 결과

math01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	console.log(Math.min(1, 10, -100, -10, 1000, 0));	//-100
	console.log(Math.min()); 	//인수 전달이 안되면 Infinity가 나옴.
	console.log(Math.min(1, 10, -100, -10, "문자열", 0)); //인수 중 비교할 수 없는 값이 있으면 NaN이 나옴.
	
	console.log(Math.max(1, 10, -100, -10, 1000, 0));	//1000
	console.log(Math.max()); 	//-Infinity가 나옴.
	console.log(Math.max(1, 10, -100, -10, "문자열", 0)); //인수 중 비교할 수 없는 값이 있으면 NaN이 나옴.
	
	//반올림
	console.log(Math.round(10.43));	//10
	console.log(Math.round(10.78));	//11
	console.log(Math.round(-10.52));//-11
	
	//내림
	console.log(Math.floor(10.43));	//10
	console.log(Math.floor(10.78));	//10
	console.log(Math.floor(-10.52));//-11
	
	//올림
	console.log(Math.ceil(10.43));	//11
	console.log(Math.ceil(10.78));	//11
	console.log(Math.ceil(-10.52));	//-10
	
	
</script>
</head>
<body>
	<h1>math</h1>
	<h4>Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체</h4>
</body>
</html>

출력 결과

date01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var date1 = new Date();		//Date 객체 생성
	document.write(date1+"<p>");
	var date2 = new Date("2022-08-14T13:30:00");
	var date3 = new Date("2022-08-14");		//시간이 생략되면 자동으로 09:00:00으로 설정됨.
	var date4 = new Date("2022-08");		//일이 생략되면 자동으로 1일로 설정됨.
	var date5 = new Date("2022");			//월이 생략되면 자동으로 1월로 설정됨.
	document.write(date2+"<p>");
	document.write(date3+"<p>");
	document.write(date4+"<p>");
	document.write(date5+"<p>");
</script>
</head>
<body>
	<h1>Date</h1>
	<p>자바스크립트에서 Date 객체를 초기화하는 방법<br>
	GMT : 협졍 세계시(UTC)의 기준시간대(Greenwich Mean Time)<br>
	new Date() <br>
	new Date(“날짜를 나타내는 문자열”) <br>
	new Date(밀리초) <br>
	new Date(년, 월, 일, 시, 분, 초, 밀리초)
	
</body>
</html>

출력 결과

date02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var date1 = new Date();
	var day;
	document.write("올해는 "+ date1.getFullYear() + "년입니다.<p>"); //getFullYear : 현재 연도를 반환
	document.write("1.오늘은 "+date1.getMonth() + "월 " + date1.getDate() + "일.<p>"); //getMonth : 월을 반환(월은 0부터 반환하므로 주의)
	document.write("2.오늘은 "+(date1.getMonth()+1) + "월 " + date1.getDate() + "일.<p>");
	//현재 요일을 반환
	switch (date1.getDay()) {
		case 0:
			day = "일";
			break
		case 1:
			day ="월";
			break
		case 2:
			day ="화";
			break
		case 3:
			day ="수";
			break
		case 4:
			day ="목";
			break
		case 5:
			day ="금";
			break
		case 6:
			day ="토";
			break
	}
	document.write("3.오늘은 " + day + "요일입니다.<p>");

</script>
</head>
<body>
	<h1>년/월/일/요일 각각 가져오기</h1>
</body>
</html>

출력 결과

date03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var date1 = new Date();
var date2 = new Date();
date1.setFullYear(2019, 1, 19); //자바스크립트에서 2월은 1
document.write("date1은 " + date1 + "<p>"); 
date2.setMonth(7);
date2.setDate(10);
document.write("date2는 " + date2 + "<p>"); 	//연도를 지정하지 않으면 현재 연도를 반환
date2.setDate(50);
document.write("날짜 초과 시 date2는 " + date2 + "<p>"); //그 달을 초과하면 그 일수만큼 다음달로 넘어가서 계산해준다.

</script>
</head>
<body>
	<h1> Date Setting</h1>
</body>
</html>

출력 결과

example.js

/**
 * 
 */
document.write("example.js 내부...");

exampleCall.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- example.js를 호출할 수 있다. -->
<script type="text/javascript" src="example.js"></script>
</head>
<body>
   <h1>example.js 호출하기</h1>
</body>
</html>

출력 결과

jsLocation.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type = "text/javascript">
	document.write("Title 바로 아래 ...<p>")
//한 줄 주석문

/*
	여러 
	줄 
	주석문
*/
	</script>
</head>
<body>
	<h1>js Location</h1>
	<script type="text/javascript">
	document.write("body 바로 아래 ...<p>")
	</script>
</body>
</html>
	<script type="text/javascript">
	document.write("/html 바로 아래 ...<p>")
	</script>

출력 결과 : 어디에 쓰던 전부 출력이 된다. 하지만 /html 아래는 사용하지 않는다. title 아래에 쓰는 것이 권장이다.

isNaN.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var num = prompt("몇 단 구구단을 원하시는지 입력하시고 확인 버튼 꼭 눌러주세요", "5");
if(isNaN(num)) //isNaN : is not a number
		document.write("바보냐 숫자 몰라");
else
	for(var i=1; i<=9; i++)
		document.write(num + " * " + i + " = " + (num*i) + "<br>");
</script>
</head>
<body>
	<h1>isNan</h1>
</body>
</html>

출력 결과

(5를 입력한 경우)

(한글 오 를 입력한 경우)

switch01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript">
var a = parseInt(prompt("1~7사이 숫자를 입력하세요", ""));
if(a<1 || a>7) 	document.write("잘못 입력하셨습니다.");
else if(isNaN(a)) document.write("숫자가 아닙니다");
else {
	switch(a) {
	case 1 : document.write("1 입력하셨습니다".fontcolor("red")); break;
	case 2 : document.write("2 입력하셨습니다".fontcolor("orange")); break;
	case 3 : document.write("3 입력하셨습니다".fontcolor("yellow")); break;
	case 4 : document.write("4 입력하셨습니다".fontcolor("green")); break;
	case 5 : document.write("5 입력하셨습니다".fontcolor("blue")); break;
	case 6 : document.write("6 입력하셨습니다".fontcolor("navy")); break;
	default : document.write("7 입력하셨습니다".fontcolor("violet")); break;
	}
}

</script></head>
<body>
	<h1>Switch</h1>
</body>
</html>

출력 결과

(4를 입력한 경우)

(9를 입력한 경우)

(한글 사 를 입력한 경우)

NanIsfinite.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//변수에 숫자 할당
var number1 = 1/0; 		//Infinity
var number2 = -1/0;		//-Infinity
var number3 = 1;
var number4 = "1";
var number5 = 0/0;

//유한수인지 검사
console.log(isFinite(number1));		//false
console.log(isFinite(number2));		//false
console.log(isFinite(number3));		//true
console.log(isFinite(number4));		//true

//NaN인지 검사
console.log(isNaN(number4));		//false
console.log(isNaN(number5));		//true
console.log(isNaN(NaN));			//true
console.log(isNaN);					//isNaN

</script>
</head>
<body>
	<h1>NAN Isfinite</h1>
</body>
</html>

출력 결과

eval.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var str = prompt("원하는 계산은?","265*654");
	document.write(str+"<br>");
	document.write(eval(str)+"<br>"); //eval을 쓰면 문자열로 써있는걸 계산해줌.
	var a = 7, b = 6;
	var k = "a+b";
	var k2 = eval(k);
	document.write(k+"<br>");
	document.write(k2);
</script></head>
<body>
	<h1>eval</h1>
</body>
</html>

eval : 문자열이어도 숫자계산이 되면 계산해줌. (중요 : 알아두기)

출력 결과

var_let.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	//var
	var varName = "varName1...";
	varName = 100;							//값 재할당 가능
	document.write(varName + "<br>");
	var varName = "varName2...";			//값 재선언 가능
	document.write(varName + "<br>");

	//let(중요 : 질문 나올 수 있음. let이 새로 나온 변수라서)
	let letName = "letName1...";
	letName = 300;							//값 재할당 가능
	document.write(letName + "<br>");
	//let letName = "letName2...";			//값 재선언 불가능
	//document.write(letName + "<br>");

	
	//const(상수)
	const constName = "constName1...";
	document.write(constName + "<br>");
	//constName = 500;						//값 재할당 불가능
	//document.write(constName + "<br>");
	//const constName = "constName2...";	//값 재선언 불가능
	//document.write(constName + "<br>");



</script>
</head>
<body>
	<h1>Var let</h1>
</body>
</html>

출력 결과

var_let2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	a=7;
	b="대박";
	var c = 1.56;
	var d = '5분';
	let e = 'eee분';
	document.write("정수 a : " + a + "<p>");
	document.write("문자 b : " + b + "<br>");
	document.write("실수 c : " + c + "<br>");
	document.write("문자 d : " + d + "<br>");
	document.write("문자 e : " + e + "<br>");
	
	function varTest() {
		alert('varTest Click');
		var x = 1;
		if (true) {
			var x = 2; //같은 변수
			alert('varTest1 x ->' + x); //2
		}
		alert('varTest2 x->'+x); //2 (이미 var x가 2로 바꼈으므로 2로 나온다.)
	}
	
	function letTest() {
		alert('letTest Click');
		let x = 1;
		if (true) {
			let x = 2; 
			alert('letTest1 x -> '+x); //2
		}
		alert('letTest2 x ->'+ x); //1 (if문 안과 밖은 다른 변수로 취급된다.)
		
	}
	

</script></head>
<body>
	<h1>Var let2</h1>
	<button onclick="varTest()">varTest</button>
	<button onclick="letTest()">letTest</button>
</body>
</html>

출력 결과

(varTest를 누른 경우)

(letTest를 누른 경우)

char.html

[2장]

anchor.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
document.write("<CENTER>");
document.write("<BR><BR>");
document.write(" * 문서의 시작 부분 *".anchor("TOP11"));
document.write("<BR><BR><img src='../images/image10.jpg'>");
document.write("<BR><BR><img src='../images/image11.jpg'>");
document.write("<BR><BR>");
document.write(" 문서의 시작 부분으로 이동합니다. ".link("#TOP11"));
document.write("</CENTER>");


</script>
</head>
<body>
	<h1>anchor</h1>
</body>
</html>

출력 결과

array01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript">
	var a = new Array(4);
	document.write("a.length 1 = " +a.length + "<br>");
	a[0] = 12;
	a[1] = 54;
	a[2] = 2;
	a[3] = 78;
	document.write("a.length 2 = " +a.length+ "<br>");
	a[4] = 8;
	a[5] = 17;
	a[6] = 60;
	
	document.write("a.length 3 = " + a.length+ "<br>");
	
	for (var i=0; i<a.length; i++) {
		document.write("<br>a["+i+"] = " + a[i]);
	}
	
</script>
</head>
<body>
	<h1>Array01</h1>
</body>
</html>

html에서는 값을 확장하거나 늘리는데에 제한이 없다.

출력 결과

array02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//자바스크립트에서는 동일한 자료형이 아니여도 같은 배열에 넣을 수 있음.
var a = [1, "<br>", 24, "허걱", 43, 49, 76, "대박"];
for (var i=0; i<a.length; i++) {
	document.write("a["+i+"] = " + a[i] + "<p>");
}
//document.write(a);
alert(a);
</script>
</head>
<body>

</body>
</html>

출력 결과

link.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
document.write("네이버".link("http://www.naver.com"));
document.write("<p>");
document.write("중앙".link("http://www.choongang.co.kr"));
document.write("<p>");
document.write("다음".link("http://www.daum.net"));


</script>
</head>
<body>
  <h1>link</h1>
</body>
</html>

출력 결과

링크를 걸면 이동할 수 있다.

해당 글자를 누르면 해당 링크로 이동함.

math02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var banner = new Array();
for(var i=0 ; i<7 ; i++){
	banner[i] = "../images/"+i +".jpg";
}
var ran = Math.floor(Math.random()*7); //0~7미만의 숫자를 랜덤하게. floor는 내림. 즉 정수 0~6.
document.write("<img src="+banner[ran]+">");


</script>
</head>
<body>
  <h1>math02</h1>
</body>
</html>

출력 결과

새로고침 할 때마다 0.jpg부터 6.jpg의 사진이 랜덤으로 출력된다.

object01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var man = {name:"홍길동", 나이:7, addr:"서울 마포"};
/* var man = {"name":"홍길동", "나이":7, "addr":"서울 마포"}; */
document.write("이름1 : " + man.name +"<br>");
document.write("이름2 : " + man["name"] +"<br>");

document.write("나이1 : " +man.나이 +"<br>");
document.write("나이2 : " + man["나이"] +"<br>");

document.write("주소 : " + man.addr + "<br>");

//[] 괄호를 쓸 때는 무조건 ""을 사용한다.
document.write("이름3 : " + man[name] +"<br>");
document.write("나이3 : " + man[나이] +"<br>");
  


</script>
</head>
<body>
   <h1>object01</h1>
</body>
</html>

출력 결과

object02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var person = {
		name    : "홍길동",     // 이름 프로퍼티를 정의함.
		birthday: "030219",   // 생년월일 프로퍼티를 정의함.
		pId     : "1234567",  // 개인 id 프로퍼티를 정의함.
		fullId: function() {  // 생년월일과 개인 id를 합쳐서 주민번호 반환. 점을 찍으면 멤버변수도 쓸 수 있다.
			    return this.birthday + this.pId;
		}
	};
	document.write("person.name-->"+person.name+"<p>");
	document.write("person.fullId()-->"+person.fullId()+"<p>");

</script>
</head>
<body>
   <h1>object02</h1>
</body>
</html>

출력 결과

object03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var man = {name:'김준수', age:38, addr:"드라큐라"};
for(var key in man) document.write("1."+key+":"+man[key]+"<br>");

//2. Append
man.phone = "01022223333";
for(var key in man) document.write("2."+key+":"+man[key]+"<br>");

//3. Delete
delete(man.addr);
for(var key in man) document.write("3."+key+":"+man[key]+"<br>");
</script>
</head>
<body>
   <h1>object03</h1>
</body>
</html>

값을 추가하고 빼는것이 자유롭다.

출력 결과

object04.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

//생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없음.
//다만 생성자 함수는 아래 두 관례를 따름. 
//함수 이름의 첫 글자는 대문자로 시작. 반드시 'new' 연산자를 붙여 실행.
//생성자 함수엔 보통 return 문이 없음. 
//반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없음. 

function Dog(color, name, age) { //생성자 함수
	this.color = color;		//this를 붙여 멤버변수를 선언
	this.name = name;
	this.age = age;
}
var myDog = new Dog("흰색", "하루", 1); //나와 같은 프로토타입을 가지는 객체를 생성할 수 있음. 함수의 첫 글자는 대문자로
myDog.family = "시베리안 허스키"; 		 //품종에 관한 프로퍼티를 추가
myDog.breed = function() {			 //털색을 포함한 품종을 반환해주는 메소드를 추가함.
	return this.color + " " + this.family;	
}
document.write("우리 집 강아지는 " + myDog.breed()+ "입니다.")

</script></head>
<body>
	<h1>object04</h1>
</body>
</html>

출력 결과

string01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var len;
	do {
		var str = prompt("6자 이하 입력하세요", "");
		len = str.length; //str.length : 글자의 길이 나타남.
		if (len == 0)
			alert("입력 안 했네");
	} while (len > 06 || len < 1);
	//문자열로 " 를 표현하고 싶을 때는 \"을 사용한다.
	document.write("입력한 글 : \"" + str + "\", 길이 : " + len + "<p>");
</script>
</head>
<body>

</body>
</html>

출력 결과

(안녕하세요 입력한 결과)

(아무것도 입력하지 않고 확인 누른 결과)

(7자리 이상 입력한 결과) : 알람 다시 뜸

string02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type ="text/javascript">
	var a = "Girl's Generation";
	var b = a.toUpperCase(); 	//대문자
	document.write(b+"<p>");
	var c = a.toLowerCase();	//소문자
	document.write(c+"<p>");
	var d = a.substring(3, 8);	//인덱스 3부터 7까지 자른다.
	document.write(d);
</script>
</head>
<body>
	<h1>string02</h1>
</body>
</html>

출력 결과

string03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var str = "처음엔 친구였어, 친구 풋풋한 동갑내기 친구";
	document.write("<center>");
	document.write("indexOf('친') : " + str.indexOf('친') + "<hr>"); 	//처음 "친"의 인덱스 위치
	document.write("lastIndexOf('친') : " + str.lastIndexOf('친') + "<hr>"); 	//마지막 "친"의 인덱스 위치
	document.write("</center>");
</script>
</head>
<body>
	<h1>string03</h1>
</body>
</html>

출력 결과

'프로젝트 기반 JAVA 응용 SW개발 : 22.07.19~23.01.20 > 웹표준 기술' 카테고리의 다른 글

8/31 Json 형태와 변환, 배열 수정, 배열 string으로 변환, init() (0)	2022.09.05
8/29 속성 선택자, 가상 클래스 (0)	2022.09.02
8/26 rgb/rgba 표기법, 블록, 인라인 레벨 요소, 박스모델, layout, float, 시맨틱 태그 (0)	2022.09.01
8/25 css, class 선택자, id 선택자, 박스모델 (0)	2022.08.31
8/24 3, 4단원 html 태그들 (0)	2022.08.28

'프로젝트 기반 JAVA 응용 SW개발 : 22.07.19~23.01.20/웹표준 기술' Related Articles

개발 노트

8/30 html layout 참조 사이트, var, let, const, boolean, eval 본문

8/30 html layout 참조 사이트, var, let, const, boolean, eval

'프로젝트 기반 JAVA 응용 SW개발 : 22.07.19~23.01.20 > 웹표준 기술' 카테고리의 다른 글

티스토리툴바