JavaScript - 기초

양유준·2024년 4월 29일

코드 공부

목록 보기

3/5

데이터별 형태

javascript 에서 데이터 타입마다 형태가 제각각이다.

Object type

Array type

Function type

ex)
이를 활용하여

document 객체에 querySelectorAll 함수의 배열 0번째 자리에 해당하는 value 값을 가져올 수도 있다.

document.querySelector()

이 함수는 css의 선택자 또는 선택자 그룹과 일치하는 요소를 찾고, 일치하는 요소가 없을 경우 null을 반환한다.

예시

<body>
    <input type="text" id="inputText">
    <button onclick="send()">전송</button>
    <p id="result">xxx</p>
    <script>
        //전송 버튼을 누르면 호출되는 함수
        function send () {
            // 1. input 요소에 입력한 문자열을 읽어와서 변수에 담는다.

            // 2. 변수에 담긴 문자열을 p 요소의 innertext 로 넣어준다.
            let msg = document.querySelector("#inputText").value;
            document.querySelector("#result").innerText = msg;
        };
    </script>
</body>

이 코드에서 send()함수에 msg는 inputText라는 id값을 받아와서 result라는 id를 가진 p태그의 innerText를 바꾼다.

전역변수와 지역변수

- 전역변수

let 변수명;
function 함수명() {
};

함수 밖에서 정의된 변수
전역의 범의를 가지고 있어 함수 안과 밖에서 사용 가능

- 지역변수

function 함수명() {
	let 변수명;
};

함수 안에서 정의된 변수
지역의 범위를 가지고 있어 함수 안에서만 사용이 가능
함수 밖에서 호출 불가능

JS 변수 선언 및 함수 사용

<script>
        //num1 이라는 이름 지어진 기억 공간을 만들어서 숫자 data 10 을 대입하기 (저장하기)
        let num1 = 10;
        let num2 = 2;

        // myName 이라는 이름 지어진 기억 공간을 만들어서 여러분의 이름을 대입해 보세요.
        let myName = "Yang";
        let yourName = '양';
        let ourName = `해골`;

        //backtic 을 이용하면 여러줄의 문자열을 편리하게 작성할수 있다
        let str1 = `
            하나
            두울
            세엣
        `;

    </script>