ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 자바스크립트 반복문2,함수-22.04.07
      HTML 2022. 4. 7. 12:28
      728x90

      <for-while예제>

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/outStyle.css">
<style>
div{
 border: 2px dotted black;
 height: auto;
 width: 50%;
 margin: 5px;
 font-size: 20px;
 color: red;

}

</style>
</head>
<body>
<script src="../js/for_while.js"></script>
   <h4>1부터 100까지의 합</h4>
   <input type="button" value="문제1" onclick="proc1()">
   <div id="d1"></div>
   
   <h4>1부터 200까지 짝수의 합(continue이용)</h4>
    <input type="button" value="문제2" onclick="proc2()">
   <div id="d2"></div>
   
   <h4>입력값을 계속 더하고 0입력시 누적 값 출력</h4>
    <input type="button" value="문제3" onclick="proc3()">
   <div id="d3"></div>
   
   <h4>(다중for)i와k를 각 1~10까지 더한 합이 3의 배수일때 출력</h4>
    <input type="button" value="문제4" onclick="proc4()">
   <div id="d4"></div>
   
   <h4>1~100까지 중 2의 배수이자 3의 배수인 것 출력</h4>
    <input type="button" value="문제5" onclick="proc5()">
   <div id="d5"></div>
   
   <h4>두 수를 입력해 합이 100 이상일 때 출력(continue이용, 두수가 0일때 종료)</h4>
    <input type="button" value="문제6" onclick="proc6()">
   <div id="d6"></div>
   
</body>
</html>

      <js파일로 따로>

      //1부터 100까지 합
function proc1() {
   var sum = 0;
   for(var i=1; i<=100; i++){
       sum += i;
   }
   document.getElementById('d1').innerText = sum;
}
      //1부터 200까지의 짝수의 합(continue 이용)
function proc2(){
   var sum = 0;
   
/*   
   //방법1
   for(var i=2; i<=200; i+=2){
       sum += i;
   }   
*/   
/*
   //방법2
   for(var i=1; i<=200; i++){
      if(i%2==0){
       sum += i;
      }
   }
*/   
      
   //방법3
   for(var i=1; i<=200; i++){
      if(i%2!=0) continue;
      sum += i;
   }
   
   document.getElementById('d2').innerText = sum;   
}
      //입력한 값을 계속 더하고, 0을 입력시 누적 값 출력
function proc3(){
   var sum = 0;  //숫자의 합
   var str = ""; //누적입력된 값들(문자열 형태)
   
   while(true){
      var a = parseInt(prompt("값을 입력하세요")); //string -> int형 변환
      if(a==0) break;
      sum += a;
      str += a + " ";
   }
   //출력형태 구성
   var result = "입력한 값들: " + str + "</br>";
   result += "합: " + sum;
   
   document.getElementById('d3').innerHTML = result;   
}
      //(다중for)i와k를 각 1~10까지 더한 합이 3의 배수일때 출력
function proc4(){
   var sum = "";
   for(var i=1; i<=10; i++){
      for(var k=1; k<=10; k++){
         if((i+k)%3!=0) continue;
         sum += i + "+" + k + "=" + (i+k) + "<br>";
      }
   document.getElementById('d4').innerHTML = sum;
   }
}
      //1~100까지 중 2의 배수이자 3의 배수 인것 출력
function proc5(){
   var sum="";
   for(var i=1; i<=100; i++){
	 if(i%2==0 && i%3==0){
		sum += i+" ";
	}
   }
	document.getElementById('d5').textContent = sum;  
}
      /두수를 입력해 합이 100이상/미만일 때 출력(continue이용, 두수가 0일때 종료)
function proc6(){
   var str1="두수의 합이 100이상인 값들 <br>";
   var str2="두수의 합이 100이하인 값들 <br>";

	while(true){
		var a=parseInt(prompt("첫번째 수 입력"));
		var b=parseInt(prompt("두 번째 수 입력"));
		
		if(a==0 && b==0) break;
		
		var sum=a + b;
		if(sum < 100){
			str2 += a + "+" + b + "=" + (a+b) + "<br>";
			continue;
		}
		str1 += a + "+" + b + "=" + (a+b) + "<br>";  //조건이 맞지 않으면 여기로 와서 실행
	}
	 document.getElementById('d6').innerHTML = str1;
	 document.getElementById('d6').innerHTML += str2;
}

      태그 표현되려면 innerHTML써야하는것이다 함수3에는  태그인 <br>넣어줬기 때문

      <함수>

      함수는 호출에 의해서 실행

      인수(argument) : 함수를 호출할 때 어떤 값을 함수로 전달하는 값
      인수는 데이터 타입이 없을 뿐만 아니라 개수에도 제약이 없다.
      실 인수가 남으면 무시되고, 모자라는 인수는 undefined가 된다.

      매개변수(parameter) : 함수를 만들 때 인수로 받을 변수를 선언하는 것

       

      <계산기 예제>

      -스타일과 자바스트립트 부분

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/outStyle.css">
<style>
label{
   /*인라인 이기때문에 사이즈 조절 불가 그래서 속성을 바꿔준다.*/
   display: inline-block;
   width: 50px;
}
span{
 	display: inline-block;
	border: 2px solid red;
	background-color: yellow;
	width:  140px;
	height: 20px;
}

</style>
<script >
//전역 변수 선언 calc()외에도 사용하므로
var xVal = "";
var yVal = "";
function calc(z) {
	//alert("계산기 호출");
	//입력 값 가져오기
	 xVal = parseInt(document.getElementById('x').value);
	 yVal = parseInt(document.getElementById('y').value);
	
	//연산
	var result="";
	switch (z) {
	case '+':
		result = add();
		break;
	case '-':
		result = sub();
		break;
	case '*':
		result = multi();
		break;
	case '/':
		result = divd();
		break;
	}
	//출력
	//document.getElementById('rst').innerText=result;  input이므로 inner가 안되고 value로 넣어줘야 한다.
	  document.getElementById('rst').value=result;
	//span에 출력하기
	  document.getElementById('sp1').innerText = xVal;
	  document.getElementById('sp2').innerText = yVal;
	  document.getElementById('sp3').textContent = result;
	
}

function add() {
	return xVal + yVal;
}
function sub() {
	return xVal - yVal;
}
function multi() {
	return xVal * yVal;
}
function divd() {
	var sum =  xVal / yVal
	return sum.toFixed(5);  //소수점 5자리 까지만 
}

</script>
</head>

      -body부분

      <body>
   
   <h4>계산기</h4>
   <label for="x">값 1</label>
   <input id="x"> <br>
   
   <label for="y">값 2</label>
   <input id="y"> <br>
   
   <label for="rst">결과</label>
   <input id="rst"> <br>
   
   
   <input type="button" value="+" onclick="calc('+')">
   <input type="button" value="-" onclick="calc('-')">
   <input type="button" value="*" onclick="calc('*')">
   <input type="button" value="/" onclick="calc('/')">
   
   
   <p>
   <label for="sp1">값1</label>
   <span id="sp1"></span>
   </p>
   
    <p>
   <label for="sp2">값2</label>
   <span id="sp2"></span>
   </p>
   
    <p>
   <label for="sp3">결과</label>
   <span id="sp3"></span>
   </p>

</body>
</html>

       

      <무명 함수>

      함수를 만들어서 한번만 사용할 때,
      이름을 주지 않고 한번만 사용하는 경우를 무명함수(anonymous function)라고 한다.

      <script >
(function(str){
	alert(str)
})("안녕~~~~!")
</script>

      =>실행하자마자 바로 뜬다.

      <익명 함수>

      익명 함수(Anonymous function)
       -함수 명 대신 변수에 함수 코드를 저장하는 구현 방식
        익명함수의 소스 코드는 변수 값이므로 끝에 세미콜론(;)을 대입
        호출시 변수명을 함수명처럼 사용한다.
        
       함수 코드가 변수에 저장된 형태이므로 다른 변수에 대입하듯 이동가능

      <script>
//익명 함수 선언
var apple = function() {
	document.write("This is a banana");
};

var banana =apple;
console.log(banana);


//일반적인 형태의 선언식 함수 (=기명함수)
//호출시점 : 브라우저 런타임 이전에 이미 선언되어지며 호출하여 사용
// 호이스팅 가능
function sum(a,b) {
	var c = a + b
	return c;
}
console.log("선언식함수(기명함수)" +sum(1,2));

//익명함수(=표현식 함수)
//호출 시점: 브라우저 런타임시 동적으로 선언되며 바로 사용
//호이스팅 불가(대상이 아님)
//특징 : 변수에 할당하여 사용하는 형태
var sum = function(a,b) {
	var c = a + b
	return c;
};
console.log("표현식함수(익명함수) "+sum(1,2));

//익명함수=무명함수=즉시실행함수
(function(str) {
	alert(str);
})("안뇽~");
</script>

      <익명 함수 선언>

      //익명 함수 선언
var apple = function() {
	document.write("This is a banana");
};

var banana =apple;
console.log(banana);

      <일반적인 형태의 선언식 함수 (=기명함수)>
      -호출시점 : 브라우저 런타임 이전에 이미 선언되어지며 호출하여 사용
      -호이스팅 가능

      function sum(a,b) {
	var c = a + b
	return c;
}
console.log("선언식함수(기명함수)" +sum(1,2));

      <익명함수(=표현식 함수)>
      -호출 시점: 브라우저 런타임시 동적으로 선언되며 바로 사용
      -호이스팅 불가(대상이 아님)
      -특징 : 변수에 할당하여 사용하는 형태

      var sum = function(a,b) {
	var c = a + b
	return c;
};
console.log("표현식함수(익명함수) "+sum(1,2));

      <익명함수=무명함수=즉시실행함수>

      (function(str) {
alert(str);
})("안뇽~");

      <함수의 반환 값>

      <지역변수>

      ·함수 안에서 선언된 변수
      ·함수 안에서만 사용 가능
      ·다른 함수에서도 똑같은 이름으로 선언이 가능함
      ·지역변수는 함수가 종료되면 자동적으로 소멸된다.

      <전역변수>

      ·함수 외부에서 선언된 변수
      ·웹 페이지 상의 모든 스크립트와 모든 함수는 전역변수를 사용할 수 있다.
      ·전역변수는 사용자가 웹 페이지를 닫으면 소멸된다.
      ·선언되지 않은 변수에 값을 대입하면 그 변수는 자동적으로 전역변수가 된다.
      ·예를 들면 다음과 같은 문장은 함수 안에서 실행되더라도 변수 userName을 전역변수로 선언하는 것이나 마찬가지이다.
      =>var 형태로 지역변수로 선언해주어야 하며 전역으로 사용할 경우에는 전역변수로 제대로 선언해주고 사용해야한다.

       

       

      728x90

      'HTML' 카테고리의 다른 글

      자바스크립트 객체, 배열-22.04.07  (0) 2022.04.07
      자바스크립트 호이스팅, ES6백틱-22.04.07  (0) 2022.04.07
      자바스크립트(배열,제어문)-22.04.06  (0) 2022.04.06
      자바스크립트,HTML요소 접근-22.04.06  (0) 2022.04.06
      HTML 유용한 정보  (0) 2022.04.06

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바