🔥 [UIUX] 0115 JAVASCRIPT Coding, 코딩 초급 9

You_Jin.·2025년 1월 15일

✏️ 2025. 1월 15일 / javascript 초급 9

👻 수학 객체를 이용하여 묵찌빠 게임을 만들어봅시다!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>묵찌빠 게임</title>
  </head>
  <body>
    <script>
      document.write("<h2>컴퓨터 묵찌빠 게임</h2>");
      var game = prompt("가위 바위 보!");
      var gameNum;
      switch (game) {
        case "가위":
          gameNum = 1;
          break;
        case "바위":
          gameNum = 2;
          break;
        case "보":
          gameNum = 3;
          break;
        default:
          alert("잘못 작성하였습니다.");
          location.reload(); //새로고침
      }
      var com = Math.ceil(Math.random() * 3);
      //랜덤하게 컴퓨터가 내는 가위바위 보
      document.write("<img src='./img/math_img_" + com + ".png' />");
      if (gameNum == com) {
        document.write("사용자 승리!");
      } else {
        document.write("다시 한번 가위 바위 보!");
      }
    </script>
  </body>
</html>

👨‍👨‍👧‍👧 배열(Array)에 대해 알아봅시다
변수에는 데이터가 오직 한 개만 저장됩니다.
하지만 만약 데이터를 여러 개 저장하고 싶다면 배열로 한 번에 묶어 저장할 수 있습니다.
배열 안에 데이터를 여러 개 저장하게 되면
데이터의 첫 번째 순서부터 인덱스 번호를 부여합니다.
인덱스 번호는 데이터의 순서를 의미하며
0부터 시작하여 마지막 데이터까지 오름차순으로 인덱스 번호가 부여됩니다.
배열안에는 다양한 데이터 형식을 넣을 수 있습니다.
예를 들어 문자형, 숫자형, 논리형 데이터 뿐만 아니라 객체{}도 넣을 수 있습니다.
 [기본형]
 1. 
 var 변수명 = new Array();
 변수명[0] = 값;
 변수명[1] = 값;
 변수명[2] = 값;
 : 배열 객체를 먼저 생성한 후,
 한 개씩 데이터를 집어 넣는 방식입니다.
 가독성이 좋지 않아 잘 쓰지 않는 방식 입니다.
 2.
 var 변수명 = new Array(값1, 값2, 값3...);
 : 배열 객체를 생성하여 ()안에 값을 나열하는 방식입니다.
 잘 쓰지 않는 방식입니다.
 3. ★★★
 var 변수명 = [값1, 값2, 값3...];
 : []는 곧 배열을 의미합니다. 가장 많이 사용하는 방식입니다.
🙋‍♂️ 배열 객체에 저장된 데이터 불러오기
배열 객체에서 여러개의 데이터가 저장되어 있고,
이 중에서 필요한 데이터가 있다면 꺼내 쓸 수 있습니다.
데이터를 불러오는 기본형은 아래와 같습니다.
 [기본형]
 (참조)변수명[인덱스번호]; 
🙋‍♀️ 배열객체의 메서드와 속성(프로퍼티)
1. join(연결문자)★
: 배열 객체의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환합니다.
2. revers()★
: 배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환합니다.
3. sort()★
: 배열 객체의 데이터를 오름차순으로 정렬합니다.
4. slice(index1, index2)
: 배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 반환합니다.
이때 시작 인덱스 번호부터 끝 인덱스 번호의 앞의 데이터까지만 잘라서 반환합니다.
즉, slice(0,3) 이라고 하면 0번부터 2번까지의 데이터만 잘라 반환합니다.
5.splice(시작인덱스, 데이터 갯수, 새로 넣을 데이터)
: 배열 객체에서 시작인덱스부터 지정한 데이터 갯수만큼 삭제하고
그 자리에 새로운 데이터를 넣을 때 사용합니다.
6. concat(배열1, 배열2)
: 2개의 배열 데이터를 하나로 합쳐서 반환합니다.
7. pop()
: 배열에 저장된 데이터 중 마지막 인덱스에 있는 데이터를 삭제합니다.
8. push(new data)
: 배열에 저장된 데이터 중 마지막 인덱스에 새 데이터를 삽입합니다.
9. shift()
: 배열에 저장된 데이터 중 첫 번째 인덱스에 있는 데이터를 삭제합니다.
10. unshift(new data)
: 배열에 첫 번째 위치에 새 데이터를 삽입합니다.
11. length
: 배열에 저장된 데이터의 총 갯수를 반환합니다.
 //배열 객체 생성
 var arr = [30, "hello", true, false, 50];
 document.write("<h2>배열 값 가져오기</h2>");
 //인덱스 번호 0번에 위치하는 데이터를 불러오기
 document.write(arr[0], " ");
 //인덱스 번호 1번에 위치하는 데이터를 불러오기
 document.write(arr[1], " ");
 //인덱스 번호 2번에 위치하는 데이터를 불러오기
 document.write(arr[2], " ");
 document.write("-----------------------", " ");
 //배열 안에 있는 데이터를 반복문으로 불러오기
 //arr.length : 배열 arr에 들어 있는 '데이터의 총 개수'
 for (var i = 0; i < arr.length; i++) {
 document.write(arr[i], " ");
 }
 document.write("-----------------------", " ");
 //for문으로 배열의 데이터 모두 불러오기2
 //i in arr 배열 arr 안에(in)있는 인덱스 번호 0번부터 모든 데이터를 불러오기
 for (i in arr) {
 document.write(arr[i], " ");
 var arr_1 = ["사당", "교대", "방배", "서초"];
 var arr_2 = ["신사", "압구정", "옥수"];
 //arr_1에 저장된 값을 -로 연결하여 하나의 문자형 데이터로 반환합니다.
 var result = arr_1.join("-");
 console.log(result);
---------------------------------------------------------
 //arr_1을 기준으로 arr_2를 합쳐 하나의 배열로 반환합니다.
 result = arr_1.concat(arr_2);
 console.log(result);
---------------------------------------------------------
 //arr_1에 저장된 값 중에 1번 인덱스부터 3번의 전인 2번 인덱스까지 구간을 잘라 데이터를 반환합니다.
 //즉, 1번과 2번 인덱스의 데이터를 반환합니다.
 result = arr_1.slice(1, 3);
 console.log(result);
---------------------------------------------------------
 //arr_1에 저장된 값을 오름차순으로 반환합니다.
 //즉, 가나다 순으로 순서를 지정합니다.
 arr_1.sort();
 console.log(arr_1);
---------------------------------------------------------
 //arr_2에 저장된 값의 순서를 바꿔서 반환합니다.
 arr_2.reverse();
 console.log(arr_2);
---------------------------------------------------------
 var greenArray = ["교대", "방배", "강남"];
 var yellowArray = ["미금", "정자", "수서"];
 //greenArray의 2번 인덱스부터 1개의 데이터를 삭제하고 "서초", "역삼" 데이터를 추가합니다.
 greenArray.splice(2, 1, "서초", "역삼");
 console.log(greenArray);
---------------------------------------------------------
 //yellowArray의 맨 마지막 데이터를 잘라서 data1에 대입합니다.
 var data1 = yellowArray.pop();
 //yellowArray의 맨 첫번째 데이터를 잘라서 data2에 대입합니다.
 var data2 = yellowArray.shift();
---------------------------------------------------------
 //yellowArray의 맨 마지막번째 위치에 data2('미금')를 추가합니다.
 yellowArray.push(data2);
 console.log(yellowArray); //정자, 미금
 //yellowArray의 첫번째 위치에 data1('수서')를 추가합니다.
 yellowArray.unshift(data1);
 console.log(yellowArray); //수서, 정자, 미금

📝 문자열 객체에 대해 알아봅시다
문자열 객체는 문자형 데이터를 객체로 취급하는 것으로,
자바스크립트에서 가장 많이 사용합니다.
변수에 문자형 데이터를 넣으면 첫 번째 글자부터 인덱스 번호 0번을 부여 받습니다.
이때 문자 사이에 공백이 있어도 공백 또한 문자형 데이터이기 때문에 인덱스 번호를 부여 받습니다.
 [기본형]
 1. var 참조변수 = new String('문자형 데이터');
 2. var 참조변수 = "문자형 데이터";
📃 문자열 객체의 메서드와 속성
1. charAt(index)
: 문자열에서 인덱스 번호에 해당하는 문자를 반환합니다.
2. indexOf('찾을 문자') ★
: 문자열 왼쪽에서부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의
인덱스 번호를 반환합니다. 만약 찾는 문자가 없다면 -1을 반환합니다.
3. lastIndexOf('찾을 문자')
: 문자열 오른쪽에서부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의
인덱스 번호를 반환합니다. 만약 찾는 문자가 없다면 -1을 반환합니다.
4. match('찾을 문자')
: 문자열 왼쪽에서부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자를 반환합니다.
만약 찾는 문자가 없다면 null을 반환합니다.
5. replace('바꿀 문자', '새 문자')
: 문자열 왼쪽부터 바꿀 문자를 찾아 제일 먼저 찾은 문자를 새문자로 치환합니다.
6. search('찾을 문자')
: 문자열 왼쪽에서부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의
인덱스 번호를 반환합니다. 만약 일치하는 문자가 없으면 아무것도 반환하지 않습니다.
7. slice(a,b) ★
: a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환합니다.
인덱스 번호 자리에 -(마이너스)를 쓸 수 있는데,
-는 문자열의 가장 마지막 번째 글자부터 세서 왼쪽으로 올라옵니다.
8. substring(a,b) ★
: a의 인덱스 부터 b 인덱스 이전 구간의 문자를 반환합니다.
인덱스 번호 자리에 -(마이너스)를 쓸 수 있는데,
-는 인덱스번호 a의 앞글자부터 -숫자 개수만큼 잘라서 반환합니다.
9. substr(a, 문자개수)
: 문자열에 a인덱스부터 지정한 문자 개수만큼 문자열을 반환합니다.
10. split('문자') ★
: 지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환합니다.
11. toLowerCase()
: 문자열에서 영문 대문자를 모두 소문자로 변환합니다.
12. toUpperCase()
: 문자열에서 영문 소문자를 모두 대문자로 변환합니다.
13. lenght
: 문자열에서 문자의 총 개수를 반환합니다.
14. concat("새로운 문자")
: 문자열에 새로운 문자를 결합합니다.
15. charCodeAt(index)
: 문자열 index에 해당하는 아스키 코드값을 반환합니다.
16. fromCharCode(아스키 코드 값)
: 아스키 코드 값에 해당하는 문자를 반환합니다.
17. trim()
: 문자열 앞 또는 뒤에 공백 문자열을 제거합니다.
 var str = "Hello Thank you good luck to you";
 ------------------------------------------------------------
 //문자열의 인덱스 번호 7번 위치에 있는 문자를 반환합니다.
 document.write(str.charAt(3), " "); //l
 ------------------------------------------------------------
 //문자열에서 제일 먼저 찾은 "you"의 y인덱스 값을 반환합니다.
 document.write(str.indexOf("you"), " "); //12
 ------------------------------------------------------------
 //문자열 맨 끝에서 제일먼저 찾은 "you"의 y인덱스 값을 반환합니다.
 document.write(str.lastIndexOf("you"), " "); //29
 ------------------------------------------------------------
 //문자열의 16번 인덱스부터 'you'를 찾아 y인덱스 값을 반환합니다.
 document.write(str.indexOf("you", 16), " "); //12

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)

You_Jin.

🎧 ᴘʟᴀʏɪɴɢ: UXUI (Feat: coding) ─────────⚪───── 𝟸:𝟷𝟾 / 𝟹:𝟻𝟼⠀ ㅤ ◄◄⠀▐▐⠀►► ───○ 🔊

🔥 [UIUX] 0115 JAVASCRIPT Coding, 코딩 초급 9

✏️ 2025. 1월 15일 / javascript 초급 9

🔥 [UIUX] 0114 JAVASCRIPT Coding, 코딩 초급 8

🔥 [UIUX] 0117 JAVASCRIPT Coding, 코딩 초급 10

0개의 댓글