생활코딩과 벨로퍼트 모던 자바스크립트 강의를 정리한 노트입니다.
자바스크립트의 등장
자바스크립트는 사용자와 상호작용하는 웹페이지를 만들고 싶다는 욕망에서 시작한다.
-
웹 브라우저는 정적으로 한번 화면에 출력되면 자기 모습을 바꾸지 못하는데, 동적으로 사용자와 상호작용할 수 있기를 원함
-
웹은 html 이용해 웹페이지를 우선 만든 후,
자바스크립트를 이용해서 사용자와 상호작용할 수 있도록 기능을 추가함으로써, html의 정보, 자바스크립트의 기능을 모두 갖춘 유일무이한 시스템으로 성장 -
html이 정보라고 하는 멈춰있는 이미지를 그리는 것이라면,
자바스크립트는 정보라고 하는 그 이미지를 마치 영화처럼 움직히게 하는 것!
📝 자바스크립트는 사용자와 상호작용하는 언어이자, HTML을 제어하는 언어!
* 기존에는 브라우저에서만 사용해왔던 언어였지만, 이제는 웹페이지 뿐만 아니라 Node.js 런타임을 통하여 서버 쪽에서도 사용을 할 수 있게 되었다. 추가적으로, NW.js, Electron 등의 도구를 사용하여 데스크탑 앱을 만들 수도 있고, react-native, NativeScript 등의 도구를 사용하여 모바일 앱도 만들 수 있다.
HTML과 JS의 만남 : script 태그
자바스크립트는 기본적으로 html 위에서 동작하는 언어이다.
그렇다면 어떻게 하면 html이란 컴퓨터 언어에 완전히 다른 문법을 가지고 있는 JS를 낑겨 넣을 것인가?
자바스크립트를 넣는 방법
1) html의 코드로 지금부터 JS가 시작된다는 걸 웹브라우저에게 알려주기 위해서 <script></script> 태그 사용
웹브라우저는 script 태그 안쪽에 있는 코드를 JS 코드로 인식
2)
document.write('hello world')
<body>
<h1>JavaScript</h1>
<script>
document.write(1+1);
</script>
<h1>html</h1>
1+1
</body>자바스크립트는 동적이기 때문에 숫자 1과 1을 더한 값을 2로 만들어 그걸 화면에 출력할 수 있는 능력을 가진다. html은 정적이기 떄문에 있는 그대로 출력된다.
HTML과 JS의 만남2 : 이벤트
1)버튼을 만들 때 사용하는 태그, 글씨를 쓰고 싶으면 value 속성, 경고창을 띄우고 싶으면
<body>
<input type="button" value="hi" onclick="alert('hi')">
</body>2) onclick 속성의 속성값으로는 반드시 JS가 와야 하며, 웹브라우저가 기억하고 있다가 사용자가 클릭했을 때 JS코드를 동작하게 함.
: 어떤 이벤트가 일어났을 때, 어떠한 JS가 실행되도록 하는 속성
웹브라우저에서 일어날 수 있는 이벤트
ex.
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('keydown!')">약 10~20개 되는 이벤트를 이용해서 사용자와 상호작용하는 웹사이트를 만들 수 있다. (검색 키워드: javascript keydown event attribute)
HTML과 JS의 만남3 : 콘솔
파일을 만들지 않고 JS 코드를 실행하는 방법
사이트 - 검색 - consol
문자열의 문자의 갯수를 알려주는 명령: .length
alert('adfasdfadsfasdf'.length)
콘솔은 실제 해당 웹을 대상으로 JS 실행 가능
*검사 - element에서 esc - html 밑에 consol 창
웹페이지, JS를 이용한다는 건 이미 만들어져 있는 웹사이트를 나의 필요에 따라 딱 맞는 코드를 작성해서 문제를 해결할 수 있다는 것. 코드는 나의 현실의 문제를 가볍게 해결하는 방법을 찾을 수 있게 해주는 것이다.
