[필기정리] Day50-1 - array sort, 유효성체크

Web/javascript

2020. 8. 31. 11:17

Q. Button Game을 만드시오.

- 참고 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

 

Array.prototype.sort()

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

developer.mozilla.org

- 참고 사이트 : www.w3schools.com/js/js_array_sort.asp

 

JavaScript Array Sort

JavaScript Sorting Arrays Sorting an Array The sort() method sorts an array alphabetically: Example var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort();        // Sorts the elements of fruits Try it Yourself » Reversing an Array The

www.w3schools.com

A.

- HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Button Game</title>
		<meta charset="UTF-8">
    </head>
    <body>
        <div id="game"></div>      
        <script src="ButtonGame.js"></script>
    </body>
</html>

- JavaScript

var text = "";
var num = [0, 1, 2, 3, 4, 5, 6, 7, 8];
var answer = [1, 2, 3, 4, 5, 6, 7, 8, 0];
const LEFT = -1, UP = -3, RIGHT = 1, DOWN = 3;

function shuffle()
{
    num.sort(function(a,b){return 0.5 - Math.random()});
}

function display()
{

    text ="";
    var idx = 0;
    for(var i=0;i<3;i++)
    {
        for(var j=0;j<3;j++)
        {
            // text += "<button onclick='move(" + idx + ", " + num[idx] + ")'>" + num[idx] + "</button>";
            text += `<button onclick='move(${idx}, ${num[idx]})'>${num[idx]}</button>`;
            idx++;
        }
        text += "<br>"
    }
    document.getElementById("game").innerHTML = text;  
}
function move(idx, btnNum)
{
    var pointOfTheCompass = whereIsZero(idx, btnNum);
    if( pointOfTheCompass != -100)
    {
        if( pointOfTheCompass == LEFT )
        {
            num[idx+LEFT] = btnNum;
            num[idx] = 0;       
        }
        else if( pointOfTheCompass == UP )
        {
            num[idx+UP] = btnNum;
            num[idx] = 0;       
        }
        else if( pointOfTheCompass == RIGHT )
        {
            num[idx+RIGHT] = btnNum;
            num[idx] = 0;       
        }
        else if( pointOfTheCompass == DOWN)
        {
            num[idx+DOWN] = btnNum;
            num[idx] = 0;       
        }

        display();        
        if( result() ) alert("정답입니다.");
    }
}
function whereIsZero(idx, btnNum)       //유효성 검사하는 함수
{
    if( idx%3 != 0 )    //첫번째 열을 거르기 위함
    {
        if( num[idx+LEFT]== 0 ) 
            return LEFT;
    }
    if( (idx+UP)>=0 )   //첫번째 줄을 거르기 위함.
    {
        if( num[idx+UP]==0 )
            return UP;
    }
    if( idx%3 != 2 )    //세번째 열을 거르기 위함.
    {
        if( num[idx+RIGHT]==0 )
            return RIGHT;
    }       
    if( (idx+DOWN) < num.length )      // 마지막 줄을 거르기 위함.
    
    {
       if( num[idx+DOWN]==0 )
            return DOWN;
    }
    return -100;   
}
function init()
{
    shuffle();
    display();
}
function result()
{
    for(var i=0;i<num.length;i++)
    {
        if(num[i] != answer[i])
            return false;
    }
    return true;
}

window.onload = init;

 

ex) 네이버 버튼 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="location.href='http://www.naver.com'">Naver</button>
</body>
</html>

 

ex) 이름 입력 창 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var name = prompt("당신의 이름은?");
        //var name = prompt("당신의 이름은?", "아무개");
        alert(name+"입니다.");
    </script>
</body>
</html>

ex) 버튼 클릭 시 숫자 추가 버튼 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="reloadTest();">Reload</button>
    <p id="demo"></p>
    <script>
        var i = 0;
        function reloadTest(){
            i++;
            document.getElementById("demo").innerHTML = i;
        }
    </script>
</body>
</html>

 

- 유효성 체크 : 데이터가 정확한지 확인하는 것

ex) 유효성 체크 후 결과화면

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function validate() {
            if (document.getElementById("name").value == "") {
                alert("이름을 입력해 주세요.");
                registerMember.name.focus();
                return false;
            }
            var pw1 = document.getElementById("pw1").value;
            var pw2 = document.getElementById("pw2").value;
            if (pw1 == "") {
                alert("비밀번호를 입력해 주세요.");
                registerMember.pw1.focus();
                return false;
            }
            if (pw2 == "") {
                alert("비밀번호를 입력해 주세요.");
                registerMember.pw2.focus();
                return false;
            }
            if (pw1 != pw2){
                alert("비밀번호가 서로 다릅니다.");
                registerMember.pw2.value="";
                registerMember.pw2.focus();
                return false;                
            }
            return true;
        }

    </script>
</head>

<body>
    <form name="registerMember" method="post" action="Test2.html" onsubmit="return validate();">
        이름 : <input type="text" id="name"><br>
        비밀번호 : <input type="password" id="pw1"><br>
        비밀번호 : <input type="password" id="pw2"><br>
        <input type="submit" value="회원가입"> <input type="reset" value="초기화">
    </form>
</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>회원가입이 완료되었습니다.</p>
</body>
</html>

 

# Front-end vs Back-end

- 프론트 엔드(Front-End) : HTML, CSS, JavaScript, jQuery로 작업한 영역

- 백엔드(Back-End) : JSP, PHP, ASP, DB로 작업한 눈에 보이지 않는 영역

 

// Tip : 크롬 개발자 도구에는 웹 개발에 유용한 패널이 있다. 

         이 중 HTML 요소를 검사하는 (Elements) 패널과 자바스크립트 코드파싱(parsing)과정을 보며

         오류를 디버깅할 수 있는 (Source) 패널이 있다.

 

# JavaScript 객체 종류

- 내장 객체

  자바스크립트 엔진에 내장되어 있어 필요한 경우에 생성해서 사용할 수 있다. 

  내장 객체로는 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있다.

  예를 들어 오늘 날짜를 알고 싶다면

  Date 객체를 생성하여 오늘 날짜를 알려주는 메서드 getDate()를 사용하면 된다.

 

- 브라우저 객체 모델(BOM, Browser Object Model)

  브라우저에 계층 구조로 내장되어 있는 객체를 말한다. 

  브라우저 객체로는 window, screen, location, history, navigator 객체 등이 있으며,

  브라우저(window)는 document와 location 객체의 상위 객체이다.


  예를 들어 자바스크립트를 이용해 현재 열려 있는 사이트에서 다른 사이트로 이동하려면

  location 객체에 참조 주소(href)속성을 바꾸면 된다.

  다음과 같이 실행하면 location의 참조 주소(href)의 속성이 바뀌어 새 주소 사이트로 이동한다.

window.location.href = "사이트 URL"

 

- DOM(Document Object Model), 문서 객체 모델

  문서 객체 모델(DOM)은 HTML 문서 구조를 말한다.

  HTML 문서의 기본구조는 최상위 객체로 <html>이 있으며, 그 하위 객체로는 <head>와 <body>가 있다.

 

 예를 들어 자바스크립트를 이용해 이미지의 src 속성을 바꾸고 싶다면

 지정된 <img>를 선택해 src 속성을 바꿔야 한다.

 이 때 지정 요소를 제대로 선택해서 가져오려면 문서 객체의 구조를 잘 이해하고 있어야 한다.

 이렇게 문서 객체 모델에서는 HTML의 모든 요소들을 문서 객체로 선택하여 자유롭게 속성을 바꿀 수 있고,

 선택한 문서 객체에 원하는 스타일(CSS)을 적용할 수도 있다.

 

  하지만 자바스크립트의 문서 객체 모델은

  IE8 이하 버전에서는 호환성이 떨어지기 때문에 사용하기 힘들다는 단점이 있다.

  그래서 이러한 단점을 극복하기 위해 jQuery 문서 객체 모델을 많이 사용한다.

 

- 비교 연산자
"==" -> 값만 같으면 true 반환
"===" -> 값과 자료형도 같아야 true 반환

 

- location.reroad : 웹페이지 새로고침

- location.href = "http://"+ 주소 : "주소"창으로 이동

 

- getMonth : 인터넷 서버 달력에 값을 가져오는데 1월을 0으로 본다.

- getDay : 인터넷 서버 달력에 값을 가져오는데 일요일을 0으로 본다.

- getTime : 밀리초 단위로 값을 반환

 

Q. 컴퓨터와 하는 가위바위보 게임을 만드시오.

 

game_1
game_2
math_img_1
math_img_2
math_img_3

A.

<!DOCTYPE html>
<html lang="ko">

<head>
    <title> 가위바위보 </title>
    <script>
        document.write("<h1>컴퓨터 가위, 바위, 보 게임</h1>");

        var game = prompt("가위, 바위, 보 중 선택하세요!", "가위");
        var numOfGame;
        switch (game) {
            case "가위":
                numOfGame = 1;
                break;
            case "바위":
                numOfGame = 2;
                break;
            case "보":
                numOfGame = 3;
                break;
            default:
                alert("잘못 입력하셨습니다.");
                location.reload();
        }

        var computer = Math.ceil(Math.random() * 3);

        document.write("<img src=\"images/math_img_" + computer + ".jpg\">");

        if (numOfGame == computer) {
            document.write("<img src=\"images/game_1.jpg\">");
        } else {
            document.write("<img src=\"images/game_2.jpg\">");
        }
    </script>
</head>

<body>
</body>

</html>

 

ex)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>맛보기 예제</title>
</head>
<body>
	<script>
		var age = prompt("당신의 나이는?", "0");
		if(age >= 20){
			document.write("당신은 성인입니다.");
		}else{
			document.write("당신은 미성년자입니다.");
		}
	</script>
</body>
</html>

 

ex) 자바스크립트 파일 연동 예시

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title> 외부 자바스크립트 연동 </title>
	<script src="js/example.js"></script>
</head>
<body>
</body>
</html>

 

ex) 변수 선언 예시

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title> 외부 자바스크립트 연동 </title>
	<script>
		var box;
		box = 100;
		box = 30;
		document.write(box);
	</script>
</head>
<body>
</body>
</html>

 

ex) 논리형 데이터 선언 예시

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>논리형 데이터</title>
<script>
	var a = true;
	var b = false;
	var c = 10 > 5; //true
	var d = Boolean(null); //false 

	document.write(a, "<br>");
	document.write(b, "<br>");
	document.write(c, "<br>");
	document.write(d, "<br>");
</script>
</head>
<body>
</body>
</html>

 

ex) typeof 예시

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>데이터 타입</title>
<script>
	var num = 100;
	var str = "자바스크립트"; 

	document.write(typeof num, "<br>");
	document.write(typeof str);
</script>
</head>
<body>
</body>
</html>

 

ex) 연산자 예시

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title> 산술 연산자 </title>
	<script>
		var num1 = 15;
		var num2 = 2;
		var result;
		result = num1 + num2;
		document.write(result, "<br>"); // 17
		result = num1 - num2;
		document.write(result, "<br>"); // 13
		result = num1 * num2;
		document.write(result, "<br>"); // 30
		result = num1 / num2;
		document.write(result, "<br>"); // 7.5
		result = num1 % num2;
		document.write(result, "<br>"); // 1
	</script>
</head>
<body>
</body>
</html>

 

 ex) 문자열 추가 연산 예시

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 문자결합 연산자 </title>
<script>
	var t1 = "학교종이";
	var t2 = " 땡땡땡 ";
	var t3 = 8282;
	var t4 = " 어서 모이자";
	var result;

	result = t1 + t2 + t3 + t4; 
	document.write(result);
</script>
</head>
<body>
</body>
</html>

 

ex) 복합 대입 연산자 예시

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 복합 대입 연산자 </title>
<script>
		var num1 = 10;
		var num2 = 3;
		num1 += num2;
		document.write(num1, "<br>"); // 13
		 
		num1 -= num2;
		document.write(num1, "<br>"); // 10
		 
		num1 *= num2;
		document.write(num1, "<br>"); // 30
		 
		num1 %= num2;
		document.write(num1, "<br>"); // 0 
</script>
</head>
<body>
</body>
</html>

 

ex) 복합 대입 연산자를 이용한 테이블 만들기 예시

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 복합대입 연산자-테이블 만들기 </title>
<script>
	var str = "<table border='1'>";
	str += "<tr>";
	str += "<td>1</td><td>2</td><td>3</td>";
	str += "</tr>";
	str += "</table>";
	document.write( str );
</script>
</head>
<body>
</body>
</html>

 

ex) 증감 연산자 예시

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 증감 연산자 </title>
<script>
	var num1 = 10;
	var num2 = 20;
	var result;
	 
	num1--; //9
	document.write(num1, "<br>");

	num1++; //10
	document.write(num1, "<br>");    

	result = num2++;  //result: 20, num2: 21  
	document.write(result, "<br>"); 

	result = ++num2;  //result: 22, num2: 22  
	document.write(result, "<br>"); 
</script>
</head>
<body>
</body>
</html>

 

ex) 비교 연산자 예시

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title> 비교 연산자 </title>
	<script>
		var a = 10;
		var b = 20;
		var c = 10;
		var f = "20";
		var result;

		result = a > b;  // false
		document.write(result, "<br>");
		result = a < b;  // true
		document.write(result, "<br>");
		result = a <= b; // true
		document.write(result, "<br>");
		result = b == f;  // true
		document.write(result, "<br>");
		result = a != b;   // true
		document.write(result, "<br>");
		result = b === f;  // false
		document.write(result, "<br>");
	</script>
</head>
<body>
</body>
</html>

 

ex) 논리 연산자 예시

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title> 논리연산자 </title>
<script>
	var a = 10, 
		b= 20, 
		c = 0, 
		d = "hello";
	var result;

	result = b > a || b <= c || a > c;
	document.write(result, "<br>");

	result = a > b || b < c || d;
	document.write(result, "<br>");

	result = a <= b && b >= c && c > a;
	document.write(result, "<br>");

	result = a <= b && c && b >= c;
	document.write(result, "<br>");

	result= !(a > b);
	document.write(result, "<br>");
</script>
</head>
<body>
</body>
</html>

 

ex) 삼항 연산자 예시

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 삼항 조건 연산자 </title>
<script>
	var a = 10;
	var b = 3;

	var result = a > b ? "javascript" : "hello";
	document.write(result); //jvaascript
</script>
</head>
<body>
</body>
</html>

 

ex) 문제 예시

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 과체중 테스트 </title>
<script>
	var userHeight = 180; //신장
	var userWeight = 74; //몸무게
	
	//평균 체중 = (키 - 100) * 0.9
	var normal_w = (userHeight - 100) * 0.9;
	document.write(normal_w);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 적정 몸무게 구하기 </title>
<script>
	var name = prompt("당신의 이름은?", "");
	var height = prompt("당신의 신장은?", "0");
	var weight = prompt("당신의 몸무게는?", "0");
	
	var normal_w = (height - 100) * 0.9;
	var result = weight >= normal_w - 5 && weight <= normal_w + 5;
	result = result ? "적정 체중입니다." : "적정 체중이 아닙니다.";
	document.write(name +"님은 "+ result);
</script>
</head>
<body>
</body>
</html>
728x90
저작자표시

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

[필기정리]Day51-1 - 자바스크립트의 역사, use strict 등  (0) 2020.09.03
[필기정리] Day50-2 - 자바스크립트 예시 및 문제  (0) 2020.09.03
[실습문제] JavaScript로 달력 만들기  (0) 2020.08.19
[필기정리] Day48 - 단계별 달력 만들기 문제 등  (0) 2020.08.19
[필기정리] Day47 - JavaScript, function, typeof 등  (0) 2020.08.18

티스토리툴바