JavaScript

JavaScript 기초 수업 내용

JavaScript
홍윤's avatar
홍윤
Aug 12, 2024
JavaScript 기초 수업 내용
=>는 화살표 함수(arrow function)라고 불리는 JavaScript의 함수 표현식입니다.
기존의 함수 선언문 function과는 다른 방식으로 함수를 정의하는 데 사용됩니다. 화살표 함수는 함수를 더 간결하고 명확하게 표현할 수 있도록 도와줍니다.
일반 함수 선언문:
javascriptCopy code
function add(a, b) {
  return a + b;
}
화살표 함수:
javascriptCopy code
const add = (a, b) => a + b;
화살표 함수의 주요 특징은 다음과 같습니다:
  1. 간결한 문법: 중괄호 {}를 생략하고 표현식(expression)만을 사용하여 결과를 암묵적으로 반환할 수 있습니다. 위의 예시에서는 a + b가 암묵적으로 반환됩니다.
  1. this 바인딩: 화살표 함수는 자신의 this 값을 자동으로 바인딩하지 않고, 함수가 정의된 위치에서 상위 스코프의 this 값을 사용합니다. 이는 일반 함수에서 자주 발생하는 this 오류를 방지하는 데 도움이 됩니다.
  1. 인자 처리: 하나의 인자만 있는 경우 소괄호 ()를 생략할 수 있습니다. 하지만 인자가 없거나 둘 이상인 경우에는 반드시 소괄호를 사용해야 합니다.
  1. 생성자로 사용할 수 없음: 화살표 함수는 생성자 함수로 사용할 수 없으므로, new 키워드로 인스턴스를 생성할 수 없습니다.
따라서 =>는 JavaScript에서 함수를 간결하게 표현하기 위한 문법적인 요소로 사용되는 것입니다.
 
const hasApple = arr.some(value => value.includes("apple"));
arr.some() 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 콜백 함수의 조건을 만족하는 요소가 있는지를 확인하는 메서드입니다.
  1. arr.some() 메서드는 value => value.includes("apple")라는 콜백 함수를 인자로 받습니다. 이 콜백 함수는 배열의 각 요소에 대해 실행되며, 현재 처리 중인 요소를 value 매개변수로 받습니다.
  1. value.includes("apple")는 문자열의 includes() 메서드를 사용하여 현재 처리 중인 요소인 value에 "apple"이 포함되어 있는지를 확인합니다. includes() 메서드는 문자열이 특정 부분 문자열을 포함하고 있는지를 검사하며, 조건을 만족하면 true를 반환하고 그렇지 않으면 false를 반환합니다.
  1. arr.some() 메서드는 콜백 함수의 조건을 만족하는 요소가 하나라도 있는지를 확인합니다. 조건을 만족하는 요소가 하나라도 있으면 true를 반환하고, 조건을 만족하는 요소가 없으면 false를 반환합니다.
따라서, const hasApple = arr.some(value => value.includes("apple")); 코드는 배열 arr에 포함된 요소들 중에서 "apple"을 포함하는 요소가 있는지를 확인하여, 결과를 hasApple 변수에 할당하는 것입니다. 반환된 hasApple 값은 true 또는 false가 됩니다. 만약 배열 arr에 "apple"을 포함하는 요소가 있으면 hasApple 변수에 true가 할당됩니다.
 
등록하고 지우는 연습https://aspdotnet.tistory.com/3028
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #num{
        font-size: 1.5em;
        color: red;
    }
    #name{
        font-size: 1.5em;
    }
    #phone{
        font-size: 1.5em;
    }
    #btn{
        font-size: 1.5em;
    }
    #fom{
        background-color: pink;
        padding: 10px;
        align-items: center;
        display: grid;
        justify-content: center;
    }
    #t2 {
        border: 1px solid black;
        
    }
    #menu {
        border: 1px solid black;
      
    }
    #tbl{
        display: flex;
        justify-content: center;
    }
</style>
<body>
    <form id="fom">
        번호<input type="text" id="num"><br>
        이름<input type="text" id="name"><br>
        연락처<input type="text" id="phone"><br>
        <button type="submit" id="btn">등록</button>
    </form>
    <hr>
    <DIV id="tbl">

        <table border="1" id="t2">
            <thead>
                <tr id="menu">
                    <th>번호</th>
                    <th>이름</th>
                    <th>연락처</th>
                    <th>삭제</th>
                </tr>
            </thead>
        </DIV>
            <tbody id="tbody">
                
            </tbody>
    </table>
    <script>
        const btn = document.querySelector('#btn');
        const num = document.querySelector('#num');
        const name = document.querySelector('#name');
        const phone = document.querySelector('#phone');
        const tbody = document.querySelector('#tbody');

        btn.addEventListener('click', reg);
        function reg(event) {
            event.preventDefault();
            if(num.value.trim() !== '' && name.value.trim() !== '' && phone.value.trim() !== ''){
                //if (name.value.includes(' ')) { //외국인일 경우도 있기 때문에 공백 포함은 안 됌!
               // return alert('이름에는 공백을 포함할 수 없습니다.');
               // }
               
                tbody.innerHTML += '<tr><td>' + num.value + '</td><td>' + name.value + '</td><td>' + phone.value + '</td><td><button id="removebtn">삭제</button></td></tr>';
            }
            // trim() 함수를 사용하면 문자열의 앞과 뒤에 있는 공백을 제거할 수 있습니다. 즉 모든 공백을 삭제하는 것이 아니라는 점입니다.
            //
            //
            //
            //
            //
            //

            else{
                return alert('모든 텍스트 박스를 입력해야 등록이 가능함');
            }
        }
        tbody.addEventListener('click', delRow);
        function delRow(event) {
            if(event.target.id == 'removebtn') { // tagNname 할 때는 대문자를 써야한다.
            event.target.parentElement.parentElement.remove();
            }
        }
    </script>
</body>
</html>
 
●creatElement
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: seagreen;
            width: 100px; height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    
    
    <script>
        let div = document.createElement('div');
        let txt = document.createTextNode('aaa');
        div.appendChild(txt);
        document.body.appendChild(div);
        /*<!DOCTYPE html>
<html>
<head>
    <title>createElement Example</title>
</head>
<body>
    <button id="btn">새로운 단락 생성</button>

    <script>
        const btn = document.querySelector('#btn');

        btn.addEventListener('click', createParagraph);

        function createParagraph() {
            const paragraph = document.createElement('p');
            const text = document.createTextNode('새로운 단락입니다.');

            paragraph.appendChild(text);
            document.body.appendChild(paragraph);
        } */    
        </script>
</body>
</html>
    </script>
</body>
</html>
●creatElement2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        div{
            background-color: seagreen;
            width: 100px; height: 100px;
            border: 1px solid black;
        }
        #first{
            background-color: aqua;
        }
        .boldLine{
            border: 5px solid gray;
        }
    </style>
</head>
<body>

    <div id="demo">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    
    
    <script>
        //const div = document.createElement('div');
        //const ul = document.createElement('ul');
        //const li = document.createElement('li');
        //const li2 = document.createElement('li');
        //const li3 = document.createElement('li');        
        //const txt = document.createTextNode('1');
        //const txt2 = document.createTextNode('2');
        //const txt3 = document.createTextNode('3');


        //div.appendChild(ul);
        //ul.appendChild(li);
        //ul.appendChild(li2);
        //ul.appendChild(li3);
        //li.appendChild(txt);
        //li2.appendChild(txt2);
        //li3.appendChild(txt3);
        //document.body.appendChild(div);

          const demo = document.querySelector('#demo');
          const div = document.createElement('div');
          const txt = document.createTextNode('aaa');

        div.appendChild(txt);
        document.body.insertBefore(div,demo);
        div.setAttribute('id','first');

        //두번쨰 div 생성
        const div2 = document.createElement('div');
        const txt2 = document.createTextNode('ㅠㅠㅠ');
        div2.appendChild(txt2);
        document.body.appendChild(div2);
        div2.setAttribute('style','background-color: red');
        div2.setAttribute('class','boldLine');

        
        
        /*<!DOCTYPE html>
<html>
<head>
    <title>createElement Example</title>
</head>
<body>
    <button id="btn">새로운 단락 생성</button>

    <script>
        const btn = document.querySelector('#btn');

        btn.addEventListener('click', createParagraph);

        function createParagraph() {
            const paragraph = document.createElement('p');
            const text = document.createTextNode('새로운 단락입니다.');

            paragraph.appendChild(text);
            document.body.appendChild(paragraph);
        } */    
        </script>
</body>
</html>
    </script>
</body>
</html>
● 팝업창(modal)연습
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container{
            position: relative;

        }
        #first{
            width: 100px; height: 100px;
            background-color: bisque;
            position: absolute;
            /*z-index: 10;*/
        }
        #second{
            width: 200px; height: 100px;
            background-color: gray;
            display: none;
            position: absolute;
            opacity: 90%;
            /*z-index: 1;*/
            

        }
        #x{
            text-align: center;
            color: white;
            position: absolute;
            width: 20px; height: 20px;
            background-color: black;
            right : 10px;
            top: 10px;
            border-radius: 5px;
        }
        #x:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="first">AAAAAA</div>
        <div id="second">
            <div id="x">x</div>
        </div>
    </div>
    <script>
        const first = document.querySelector('#first');
        //const second = document.querySelector('#second');
        const x = document.querySelector('#x');

        first.addEventListener('click', showSecond);
        x.addEventListener('click',hideSecond);

        function showSecond(){
            second.style.display = 'block';
        }
        function hideSecond(){
            second.style.display = 'none';
        }
    </script>
</body>
</html>
●formex
notion image
notion image
Share article

More articles

See more posts

Uni

RSS·Powered by Inblog