JavaScript #7

윤동민·2024년 6월 20일

JavaScript

목록 보기
7/12

Arr

let city = ["seoul", ,"Busan", ,"Incheon"]; // , , 에 값이 들어가지않음
		function printArr() {
			let i ;
			for (i=0;i<city.length;i++){
				document.write("배열 데이터[" + i + "] = " + city[i]+ "<br>")
			}
		}
	printArr();


Arr2

<script>
	let com = [95,88,72, ,68,99,82,78,87];
	function printArr() {
		let i;
		let sum = 0;
		let count = 0;
		document.write("점수 입력 <p />");
		
		for(i=0;i<com.length;i++){
			if(com[i]===undefined){ //배열에 빈 공간있으면 건너뛰고 계산
				continue;
			}else{
			sum += com[i];
			count++;
			}
		}
		document.write("점수를 입력한 학생 : " +  count + "명 <p / >");
		document.write("총점 : " + sum + "점 p />");
			return (sum/count);
	}
		let agv = printArr();
		document.write("평균 : " + avg + "<p />");
</script>


Q&A

<script>
	let list = [
		{question:"이 중에서 제일 좋아하는 과일을 선택하세요",
		 options:["사과","복숭아","포도","바나나","딸기"]
		},
		 {question:"이 중에서 제일 좋아하는 음식을 선택하세요",
		 options:["떡볶이","짜장면","치킨","피자","삼겹살"]
		 },
		 {question:"이 중에서 제일 좋아하는 반려동물을 선택해주세요",
		 options:["강아지","고양이","토끼","여우","새"]
		 }
	];
		for(let i =0; i<list.length; i++) {
		let questionMessage = list[i].question + "\n";
		for(let j=0; j<list[i].options.length;j++){
			questionMessage += (j+1) + '. ' + list[i].options[j]+"\n";
			
		}
		console.log(questionMessage);
			list[i].answer = prompt(questionMessage);
			console.log(list[i]);
		}
	
		for(let i=0; i<list.length;i++){
			let index = parseInt(list[i].answer);
			let message = list[i].question + '\n당신의 선택:' + list[i].options[index-1];
			alert(message);
		}

</script>

번호로 값을 입력 받고, 내가 선택한 번호 결과값 도출


형변환

<script>
	//1.묵시적 형변환
	let num = 10;
	let str = "20";
	const result1 = num + str; //1020
	//const : 상수(재할당 불가능), 블록스코프
	console.log(result1);
    
	//2. 명시적 형변환
	let str2 = "10";
	let strToNum = Number(str2);
	const result2 = num + strToNum; //20
	console.log(result2);
	let str3 = "10개";
	let strToNum2 = parseInt(str3);
	const result3 = num + strToNum2;
	console.log(result3);
</script>

첫번째껀 묵시적 현변환으로 + 해도 합쳐지지않고
10+20 = 1020 으로 그냥 문자열로 더해졌고

두번째껀 명시적 형변환으로
10+10 = 20 으로 숫자로 적용됐다.


element

<p id="var1"> </p>	
<p id="var2"> </p>
<p id="var3"> </p>
<script>
	let car={
		name: 'Sonata',
		speed:100,
		color: "white"
	}
	document.getElementById('var1').textContent = "자동차 이름: " + car['name'];
	//textContent: HTML 요소의 텍스트 콘텐츠를 가져오거나 설정
	document.getElementById('var2').textContent = "자동차 이름: " + car['speed'];
	document.getElementById('var3').textContent = "자동차 이름: " + car['color'];
</script>

car[] 배열에있는 name을 텍스트 콘텐츠를 가져와서 p문단(var1인 id)에 저장하여
해당 텍스트 컨텐츠를 출력하는 문단


element 2

<p id="msg1"> </p>	
<p id="msg2"> </p>
<p id="msg3"> </p>
	
<script>
	let obj={
		m1: function() {
			return "Hello JavaScript";
		},
		m2: function(a) {
			let result = a;
			return result;
		},
		m3: function(a,b) {
			let result = a+b;
			return result;
		},

	};
	document.getElementById('msg1').textContent = obj.m1();
	document.getElementById('msg2').textContent = obj.m2(100);
	document.getElementById('msg3').textContent = obj.m3(100,200);
	//m3에 100,200값이 m3:펑션으로 계산된 값이 -> id=msg3 p문단에 들어간다
</script>

객체 obj의 메서드를 호출하여, 그 결과를 HTML 문서의 특정 p문단 요소에 표시하는 예제

m1: "Hello JavaScript" 문자열을 반환
m2: 입력 매개변수 a를 받아 그 값을 그대로 반환
m3: 두 개의 입력 매개변수 a와 b를 받아, 두 값을 더한 결과를 반환

obj.m1() 메서드를 호출하고 그 결과를 id="msg1" 요소의 텍스트 콘텐츠로 설정
이 메서드는 "Hello JavaScript"를 반환하므로, p id="msg1" 요소에 "Hello JavaScript"가 표시된다.

profile
나를 한줄로 소개하자

0개의 댓글