자바스크립트 기초

javascript 출력
<script>
        1. 경고창에 출력 alert('내용') - 확인을 눌러야만 다음으로 넘어감
        alert('hello');
        2. 콘솔에 출력 console.log('내용') 브라우저에서 개발자들이 볼 수 있음.
        console.log('Hello');
        3. BODY 에 출력 (태그도 넣을 수 있음)
        document.write('<h1>JavaScript</h1>');
        4. html DOM 요소안 내용으로 출력하기 (변경 가능)
        document.getElementById('test').innerHTML = "내일은 화요일 입니다.";
</script>


스크립트 안에 작성. 또는 .js파일을 link로 연결


    DOM요소 선택
    1. 단수 선택
    01) document.getElementById('id명')
    02) document.qureySelector('css선택자 그대로')

    2. 복수 선택
    01) document.getElementsByClassName('class명') - html컬렉션(유사배열)
    02) document.getElementsByTagName('tag명') - html컬렉션(유사배열)
    03) document.querySelectorAll('css선택자 그대로') - 노드리스트(유사배열)

document.getElementsByClassName("divbox")[0];
class로 선택 (s가 붙음 복수형으로 선택 가능 순번을 대괄호에 입력 0부터시작)


<button onclick="document.querySelector('div').innerHTML='글자변경'">클릭하세요</button>
버튼 클릭 시 글자를 변경하는 이벤트 발생

innerHTML
1. 값을 반환 innerHTML
2. 값을 변경 innerHTML = "변경내용"

onclick 클릭이벤트 onclick="함수호출이나 script 그대로 사용가능"

src
1. src값을 반환 src;
2. src값을 변경 src = '변경내용';

함수 - 프로그램을 구성하는 주요 구성요소
함수를 사용하면 같은 기능을 여러번 사용할 수 있음.

  <button onclick="chText()">클릭하세요</button>
//함수선언
   function chText(){
            document.querySelector('div').innerHTML='글자변경';
        }