멋쟁이사자 FE7

멋쟁이사자 FE7 19일차

FrontEnd 개발자 준비생 최현우 2023. 7. 27. 22:20
728x90

자바스크립트를 배우기 전 전반적으로 간단하게 여러 가지를 배웠다. 배운 개념과 강의를 통해 진행한 실습을 기록해보려 한다.

Findings (배운 점)

Math.random()

 

컴퓨터 프로그램에서 사용되는 랜덤한 숫자를 만들어주는 마법상자와 같은 함수이다.

간단하게 표현하자면, math.random()은 숫자를 랜덤으로 선택한다. 호출할 때마다 매번 다른 숫자가 나오며, 그 숫자는 0과 1 사이의 소수일 수 있다.

Math.random() 함수에 * 연산자를 사용하면 반환되는 랜덤 한 숫자의 범위가 변화한다.

간단하게 말하면, Math.random()의 결과에 *를 사용하여 숫자를 조절하면 랜덤 한 숫자의 크기를 바꿀 수 있다.

 

// Math.random()에 * 연산자를 사용하여 랜덤한 숫자의 범위 바꾸기

// Math.random()을 호출하면 0 이상 1 미만의 랜덤한 숫자가 나온다.
let randomNumber = Math.random();
console.log(randomNumber);  // 예시: 0.5438905702354621

// * 연산자를 사용하여 반환값에 10을 곱해보면, 0 이상 10 미만의 숫자를 얻을 수 있다.
randomNumber = Math.random() * 10;
console.log(randomNumber);  // 예시: 7.349827684120312

// * 연산자를 사용하여 반환값에 100을 곱해보면, 0 이상 100 미만의 숫자를 얻을 수 있다.
randomNumber = Math.random() * 100;
console.log(randomNumber);  // 예시: 72.83942370864241

ParseInt()

parseInt() 함수는 문자열을 정수로 변환하는데 사용되는 함수이다. 이 함수는 주어진 문자열에서 숫자 부분만 추출하여 정수로 변환한다. 간단히 말하면, parseInt() 함수는 문자열 안에 숫자가 있을 경우 그 숫자만 추출하여 정수로 변환해 준다.
또한 parseInt()는 소수점 숫자를 정수로 변환할 때에는 소수 부분을 버리게 된다.

 

// parseInt() 함수 사용 예시

// 문자열을 정수로 변환
let numberString = "123";
let number = parseInt(numberString);
console.log(number);  // 출력: 123 (정수)

// 숫자가 아닌 문자열일 경우 NaN(Not-a-Number)을 반환
let nonNumberString = "hello";
let nonNumber = parseInt(nonNumberString);
console.log(nonNumber);  // 출력: NaN

// 부동소수점 숫자도 정수로 변환 가능
let floatNumberString = "3.14";
let floatNumber = parseInt(floatNumberString);
console.log(floatNumber);  // 출력: 3

// 숫자 앞 뒤에 있는 공백은 무시
let spaceNumberString = "   456   ";
let spaceNumber = parseInt(spaceNumberString);
console.log(spaceNumber);  // 출력: 456

// parseInt() 함수는 문자열의 시작부터 숫자가 아닌 문자가 나올 때까지만 변환
let mixedString = "789abc";
let mixedNumber = parseInt(mixedString);
console.log(mixedNumber);  // 출력: 789

// 두 번째 인자를 사용하여 진법(base)을 지정할 수도 있습니다.
let binaryString = "101010";
let binaryNumber = parseInt(binaryString, 2); // 진법 2 (바이너리)
console.log(binaryNumber);  // 출력: 42

sort()

sort 메서드는 배열의 요소를 정렬하는 데 사용하는 함수이다.

const String=['b','c','a'];

String.sort();

위의 코드를 확인하면 a, b, c로 올바른 정렬의 형태로 출력이 될 것이다.

const Digit=[11,2,5,20,8];
Digit.sort();

이런 식으로 정렬을 한다면 예상으로는 2,5,8,11,20이라고 나올 것으로 예상할 수 있다.

sort()는 기본적으로 문자열 기준으로 정렬을 수행하기 때문에 숫자 배열을 정렬할 때는 올바르게 정렬되지 않을 수 있다. 즉 11,2,20,5,8로 정렬되는 모습을 확인할 수 있다. compareFunction을 통해 정확하게 오름차순, 내림차순을 사용할 수 있다.

compareFunction

sort() 메서드에 전달되는 선택적 매개변수로, compareFunction은 두 개의 인자를 받아서 이들을 비교하여 정렬 순서를 결정하는 함수이다.

 

조금 더 자세히 설명을 해보자면,

compareFunction은 두 개의 인자 a와 b를 받는다. 이 두 인자는 배열의 인접한 두 요소를 나타내며, compareFunction은 이들을 비교하여 다음과 같은 값을 반환합니다:

만약 compareFunction(a, b)이 음수를 반환하면 a는 b보다 앞에 위치함. (오름차순) // arr.sort((a,b) => a-b)
만약 compareFunction(a, b)이 양수를 반환하면 a는 b보다 뒤에 위치함. (내림차순) // arr.sort((a,b) => b-a)
만약 compareFunction(a, b)이 0을 반환하면 a와 b의 순서는 변경되지 않는다. 
이렇게 compareFunction을 사용하면 배열의 정렬 순서를 원하는 방식으로 변경할 수 있다. 

DOM에 대한 간단한 설명

DOM(문서 객체 모델)은 웹 페이지를 컴퓨터가 이해할 수 있는 객체로 변환하는 것을 말한다.
웹 페이지는 사람이 이해하는 HTML 코드로 작성되어 있지만, 컴퓨터는 이를 이해하기 어렵다. 그래서 DOM은 웹 페이지를 컴퓨터가 이해할 수 있는 객체 형태로 변환한다.
DOM은 웹 페이지의 각 부분을 객체로 표현하고, 이들 객체들을 트리 구조로 연결합니다. 그렇게 하면 JavaScript와 같은 프로그래밍 언어로 웹 페이지의 내용을 읽고 변경할 수 있다.

innertext와 innerHTML 차이

innerText

  • 텍스트 내용만을 가져오거나 설정한다. HTML 태그를 제외한 순수한 텍스트만을 가져옴
  • innerText를 통해 가져온 내용은 HTML 태그를 포함하지 않으며, 태그는 모두 무시됨
  • innerText는 사용자가 입력한 내용을 그대로 가져오므로, 스크립트로 내용을 변경해도 사용자가 입력한 내용이 유지된다.
  • 텍스트만을 다룰 때 사용하기 적합.

innerHTML

  • HTML 요소의 내용을 가져오거나 설정. 즉, HTML 태그와 함께 내용을 가져올 수 있다.
  • 요소 내부의 HTML 태그를 유지하면서 가져옴. 따라서 HTML 구조와 스타일을 변경할 때 사용.
  • 주의할 점은 innerHTML을 사용하여 요소의 내용을 변경하면 해당 요소 내의 모든 내용이 새로운 HTML 문자열로 대체되므로, 기존에 있던 이벤트 핸들러 등이 사라질 수 있다.

간단하게 말하자면, innerText는 텍스트만 다루고 HTML 태그를 무시하며, innerHTML은 HTML 태그와 함께 요소 내용을 다루는 데 사용됨. 

이벤트, 이벤트 핸들링

이벤트(Event)란 웹 페이지에서 발생하는 동작이나 상황을 의미한다. 사용자가 버튼을 클릭하거나 마우스를 움직이는 등의 동작, 또는 웹 페이지 로딩이나 폼 제출과 같은 상황은 모두 이벤트에 해당한다.

이벤트 핸들링(Event Handling)은 이러한 이벤트가 발생했을 때, 해당 이벤트에 대응하여 원하는 동작을 수행하는 것을 말하며, 웹 페이지에서 이벤트 핸들링을 통해 사용자와 상호작용하거나 원하는 기능을 구현할 수 있다.

 

<!DOCTYPE html>
<html>
<head>
    <title>이벤트 핸들링 예시</title>
</head>
<body>
    <h1 id="message">안녕하세요!</h1>
    <button id="changeButton">메시지 변경</button>

    <script src="script.js"></script>
</body>
</html>

=================================================================

// 버튼 요소와 메시지 요소를 가져옵니다.
const changeButton = document.getElementById("changeButton");
const message = document.getElementById("message");

// 버튼에 클릭 이벤트를 추가하여 메시지를 변경하는 함수를 정의합니다.
changeButton.addEventListener("click", function() {
    message.textContent = "버튼을 클릭했습니다!";
});

 

이벤트 핸들링은 addEventListener() 메서드를 사용하여 버튼에 클릭 이벤트를 추가하고, 클릭했을 때 실행할 함수를 정의합니다. 함수 내에서 message.textContent를 사용하여 메시지를 변경합니다.
이렇게 하면 버튼을 클릭할 때마다 메시지가 변경되어 사용자와 웹 페이지 간의 상호작용이 이루어집니다. 이벤트 핸들링을 통해 다양한 동작을 구현할 수 있습니다.

Apply (적용)

배운 개념을 통해, 로또 번호 추첨기, 글자수 제한하기를 실습해 봤다. 

 

로또 번호 추첨기

math.random
parseInt
sort
DoM
이벤트, 이벤트 핸들링
innertext와 innerHTML 차이
제이쿼리 간단한 사용법
익명함수
콜백함수
객체

로또 번호 추첨기 만들기.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로또 번호 추첨기</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>로또 번호 추첨기</h1>
    <script>
        let lotto = [];
        for (let i=0; i<6; i++){
            let num = parseInt(Math.random()*45+1)
            if(lotto.indexOf(num) === -1){
                lotto.push(num)
            }
        }
        lotto.sort((a,b)=> a-b)
        document.write(lotto)
    </script>
</body>
</html>

 

글자수 제한하기

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자소서 글자수 계산기</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <style>
        h1 {
            margin-top: 30px;
        }
        #count {
            float: right;
        }
    </style>
</head>
<body class='container'>
    <h1>자기소개</h1>
    <textarea class="form-control" rows="3" id="jasoseol" onkeydown="counter()"></textarea>
    <span id="count">(0/200)</span>
    <script>
        function counter() {
            var content = document.getElementById('jasoseol').value;
            if (content.length > 200) {
                content = content.substring(0,200);
                document.getElementById('jasoseol').value = content;
            }
            document.getElementById('count').innerHTML = '(' + content.length + '/200)';
        }
        counter();
    </script>
</body>
</html>

 

Feeling (느낀 점)

자바스크립트를 통해 기능을 추가하니 페이지에 생동감이 들어가는 느낌이다. 앞으로 배우게 될 메서드들을 통해 여러 가지 기능을 구현해보고 싶다. 또한 생소한 메서드들이 많다 보니 오타가 상당히 많았다. 이 오타 하나 때문에 기능은 구현되지 않는다. 더욱 꼼꼼하고 세심하게 코딩을 해야 한다는 생각이 들었다.