생활코딩 WEB2-JavaScript ( 처음부터~HTML과 JavaScript의 만남 3 (콘솔) )

*생활코딩님 강의를 듣고 난후 정리하는 글 입니다. 

HTML과 JavaScript의 만남 1 (script 태그)

프로그램에 자바 스크립트를 넣는 방법은 html 코드로 지금부터 자바 스크립트가 시작됩니다 라고 알려주어야 한다.

그때 사용하는 태그가 있는데 바로 <script> 코드 이 <script> 안쪽에 있는 코드를 자바스크립트로 해석을 한다.

<script>
        document.write('hello');
</script>
<!-- hello를 출력해주는데 만약 hello 대신 document.write(1+1); 이런식으로 들어가 있으면 그대로 1+1을
출력하는게 아니라 결과값인 2가 출력이 된다 --!>

HTML과 JavaScript의 만남 2 (이벤트)

버튼을 만들려면 <input type="button"> 이렇게 해주면 된다 근데 여기서 한가지 의문점 그냥 <button> 태그와 뭐가 다른 것인지 의문이 들어서 구글링을 해본 결과 둘의 기능은 동일 하지만 활용성에서는 큰 차이가 있다 

input은 자식 태그들을 추가 할수 없고 button은 그것이 가능하다 그래서 다양한 활용이 가능하다라는 차이점이 있었다.

*참조 https://nykim.work/96

input 버튼에 글씨를 쓰고 싶으면 value를 써주면 되고 버튼을 클릭 했을때 어떠한 기능을 하게 만들고 싶다면 이때 

사용하는게 onclick 이라는 속성이다. 예를 들어서 

<input type="button" value="hi" onclick="alert('hi')">
<!-- 버튼안에 hi라는 글자가 들어가고 버튼을 클릭 했을때 alert로 인해 경고창에 hi 라는 글씨가 나온다 -->

<input type="text" onchange="alert('changed')">
<!-- text를 입력하면 글자를 쓸수 있는 공간이 생기고 거기에 글자를 쓸수 있다 -->

경고창이 뜨고 text로 인해 글씨를 쓸수 있음

그리고 onclick에 속성 값으로는 반드시 자바 스크립트가 와야 된다. (onclick 만 해당하는건 아님 다른 이벤트들도 마찬가지 )

onclick 말고도 onchange, onkeydown 등 여러가지가 있는데 이러한 것들을 통틀어서 이벤트(event) 라고 한다.

각자 기능을 간단히 설명하자면 onclick은 클릭되었을때 onchange는 내용이 변경이 되었을때

onkeydown은 어떤 키를 눌렀을때 발생 하는 이벤트들 이다.

이러한 이벤트들을 이용해서 사용자와 상호 작용하는 코드를 만들 수 있게 되는것이다.

HTML과 JavaScript의 만남 3 (콘솔)

콘솔은 개발자 도구에 들어가서 console 클릭하면 나오는데 이 콘솔은 파일을 만들지 않고도 자바스크립트 코드를 즉석에서 실행이 가능하다.

콘솔 창에 alert('문자'.length) 해주면 작은 따옴표 안에 문자의 개수를 세서 경고창에 띄어준다. 

경고창으로 글자 수를 띄어준다 (사진 업로드가 계속 안돼서 ppt 이용해서 함;)

콘솔을 통해 JS를 실행하면 보고있는 웹페이지를 대상으로 해서 JS가 실행된다.