프로그래밍

[Web] day34 : 자바스크립트 본문

Web/Web

[Web] day34 : 자바스크립트

시케 2023. 7. 4. 17:26
728x90
반응형

2023.06.22.목

자바스크립트

자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어이다

자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다

현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다

 

CSS 애니메이션은 시간에 따라 바뀌지만

사용자의 커뮤니케이션으로 변화시 자바스크립트로 구현한다

 

※자바스크립트는 동적 타이핑언어

자료형

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자료형</title>
</head>
<body>

<script type="text/javascript">
	var str = "문자열";
	var num = 15; // 가변길이
	var flag = true;
	var arr = [1,2,3];
	
	console.log('str: '+str);
	console.log('num: '+num);
	console.log('flag: '+flag);
	console.log('arr: '+arr);
	
	
	console.log('');
	
	// 오류가 나지 않으며 1100으로 출력
	var x = 1+'100';
	console.log(x);
	
	// 오류가 나지 않으며 12로 출력
	var y = true+11;
	console.log(y);
	
	var a = null;
	var b;
	//var c;
	console.log('a: ' +a); // null
	console.log('b: ' +b); // undefined ---> 값이 지정되지 않음
	//console.log('c: ' +c); // Uncaught ReferenceError: c is not defined ---> ???몰루 선언ㄴㄴ
	
	console.log(10/0); 			//Infinity
	console.log(2*'apple'); 	//NaN
	console.log(isNaN(113)); 	//false
	console.log(isNaN('113')); 	//false ---> 숫자로 인식
	console.log(isNaN(banana)); //true
</script>

</body>
</html>

 

특이하게 자바스크립트에서는 자료형이 달라고 값이 같으면 같다고 생각한다

타입까지 비교하고 싶다면 '===' 연산자를 활용해야 한다

<script type="text/javascript">
	var a = 10;
	console.log('a==\'10\' : ' + (a == '10'));	// true
	console.log('a=== \'10\' : '+ (a === '10'));// false ---> 타입까지 비교
</script>

객체

<script type="text/javascript">
	function Car(name){
		this.name = name;
		this.printInfo = function(){
			console.log('차의 주인은 '+this.name+'님입니다.')
		}
	}
	
	var car1 = new Car('홍길동');
	var car2 = new Car('티모');
	
	console.log(car1);
	console.log(car2.name);
	car2.printInfo();
</script>

배열

<script type="text/javascript">
	var arr = new Array(1,2,3,0.14,-2.22,'apple','홍길동');
	var arr2 =['apple', 'banana', 'kiwi']
	
	console.log(arr);
	console.log(arr2[0]);
</script>

 

자바스크립트 활용

<script type="text/javascript">

function printInfo(str){
	if(str == 'apple'){
		console.log('사과')
	}
	else if(str == 'banana'){
		console.log('바나나')
	}
	else {
		console.log('등록되지 않은 단어입니다')
	}	
}


for(var i=0; i<3; i++){
	var input = prompt('단어를 입력해주세요.')
	printInfo(input);
}
</script>

 

배열 활용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열의 활용</title>

<style type="text/css">
	div {
		width: 200px;
		height: 50px;
		text-align: center;
		line-height: 50px;
	}
</style>

</head>
<body>

<script type="text/javascript">

	var colorList = ['coral', 'skyblue', 'MediumSeaGreen', 'DodgerBlue', 'BlueViolet']
	
	for(var i=0; i<colorList.length; i++){
		var elem='<div style ="background-color:'+colorList[i]+'">'+colorList[i]+'</div>'
		document.write(elem);
	}
</script>

</body>
</html>

 

실습01

실습01 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습01</title>
<style type="text/css">
#box {
	width: 150px;
	height: 50px;
	background-color: lightgray;
	cursor: pointer;
	text-align: center;
	line-height: 50px;
}
</style>
<script type="text/javascript">
	var colorDatas = [ 'fuchsia', 'darkred', 'ghostwhite', 'lightgoldenrodyellow', 'oldlace' ]
	function changeColor(obj) {
		//Math.floor(Math.random() * 랜덤 숫자개수)+처음 시작하는 수;
		var randNum = Math.floor(Math.random() * colorDatas.length);
		obj.style.backgroundColor = colorDatas[randNum];
		document.querySelector('#box').innerHTML = colorDatas[randNum];
		//document.getElementByID('box').innerHTML= colorDatas[randNum];
	}
</script>
</head>
<body>

	<div id="box" onclick="changeColor(this)"></div>
</body>
</html>

실습02

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습02</title>
</head>
<body>
	<script type="text/javascript">
	
	setTimeout(function(){
		
		var Low = 1;
		var High = 100;
	
		//Math.floor(Math.random() * 랜덤 숫자개수)+처음 시작하는 수;
		var randNum = Math.floor(Math.random() * 100) + 1;
		var count = 0;

		while (true) {
			count++;
			var input = parseInt(prompt(Low +'~'+ High +'사이의 정수를 입력해주세요.'));

			if (randNum == input) {
				break;
			}
			else if(randNum > input) {
				alert("UP")
				Low = input+1;
			}
			else{
				alert("DOWN")
				High = input-1;
			}
		}
		alert(count + "번만에 맞추셨습니다\n정답: "+randNum)
		document.write('<h1>'+count+'번만에 맞추셨습니다!</h1>');
		
	},3000);
	
	</script>

</body>
</html>
728x90
반응형

'Web > Web' 카테고리의 다른 글

[Web] day35 : 자바스크립트 이벤트 연결02  (0) 2023.07.04
[Web] day34 : 자바스크립트 이벤트 연결01  (0) 2023.07.04
[Web] day33 : CSS 애니메이션  (0) 2023.07.04
[Web] day33 : CSS 활용  (0) 2023.07.04
[Web] day33 : CSS 선택자  (0) 2023.07.04
'Web/Web' Related Articles more
Comments