안녕하세요
인포돈 입니다.
초보자를 위한 자바스크립트입니다. 코딩 초보자, 일반인, javascript를 처음 접하시는 분들에게 추천드립니다.
시리즈 별로 조금씩 학습해보면 일주일 안에 javascript가 무엇인지 알게 되는 경험을 할 수 있습니다.
지금 바로 시작합니다.
* 참고사항
- 개발환경은 Atom을 기준으로 작성되었습니다.
- 웹 브라우저는 크롬을 기준으로 작성되었습니다.
- javascript 시리즈는 웹에서의 활용을 집중적으로 다루어 나갑니다.
1. javascript가 무엇인가?
인터넷 상에 있는 수많은 웹들은 html을 기반으로 만들어졌다. 그러나 html은 컴퓨터 프로그래밍 언어라기보다는 컴퓨터 언어라고 볼 수 있다. 여기서 프로그래밍이라는 단어의 의미는 '순서'라고 볼 수있다. html은 프로그래밍 언어가 아니다 보니 코드의 순서를 매길 수 없었고 이는 곳 한계에 부딪치게 되었다.
하나의 예시를 들어볼 수 있다.
다들 홈페이지에서 블랙 모드 즉 화면 보호 모드(시력보호 차원)를 지원하는 유튜브, 페이스북 등의 플랫폼들을 보았을 것이다. html로 그런 기능을 구현하려면 어떻게 해야 될까?
결론부터 말하자면 html만으로는 해당 기능을 구현할 수 없다.
이처럼 html은 웹의 시초이자 훌륭한 컴퓨터 언어이지만, 한계가 분명했다. 이러한 점들을 보완하기 위해서 개발된 언어들이 CSS, Javascript, PHP, Node.js 등 과같은 언어들이다.
그중에 Javascript는 사용자와 상호작용하는 웹페이지를 만들기 위해서 개발된 언어이다.
2. event(onclick, onchange, onkeydown)
event 처음 보는 단어라고 전혀 겁먹지 않았으면 좋겠습니다.
event란? : 웹페이지에서 일어나는 일(사건)을 의미합니다.
사용자가 웹페이지에 글을 쓰고 버튼을 누르고 이러한 모든 일들을 event라고 할 수 있습니다.
javascript에는 여러 가지 event를 감지하고 이용할 수 있는데 대표적인 3가지를 알아보겠습니다.
*
1) onclick
사용자가 클릭하는 event를 감지한다.
예제
<!DOCTYPE html>
<head>
</head>
<body>
< <input type="button" value="hi" onclick="alert('hi')"">
</body>
</html>
실행 웹페이지
웹페이지에 있는"hi"버튼을 누르면 다음과 같은 알림이 나오게 된다.
*type="button"은 html 속성으로 버튼 기능을 하는 아이콘을 생성한다.
*alert은 알림을 뜨게 해주는 js의 기능이다.
*onclick 뒤에 ="alert('hi')"는 js의 언어이지만 onclick은 html의 속성으로 간주된다.
2) onchange
사용자가 글자를 변화하는 event를 감지한다.
예제
<!DOCTYPE html>
<head>
</head>
<body>
<input type="text" onchange="alert('changed')">
</body>
</html>
실행 웹페이지
text 타입의 상자에 아무 글씨를 넣은 뒤 커서를 다른 곳에 클릭을 하면 변화가 감지되어 알림이 뜨게 된다.
*type="text"는 html 속성 기능으로 글씨를 쓸 수 있는 박스를 만들어준다.
3) onkeydown
사용자가 글자를 변화하는 event를 감지한다.
예제
<!DOCTYPE html>
<head>
</head>
<body>
<input type="text" onkeydown="alert('key down!')">
</body>
</html>
실행 웹페이지
아무 키를 입력하면 키 입력을 인지하여 알림을 울리는 기능을 한다.
3. 웹브라우저에서 javascript 사용하기
Atom과 같은 개발환경을 이용해도 되지만, 정말 간단한 확인을 위해서는 따로 개발 환경을 이용하지 않고 javascript를 실험해 볼 수 있는 기능이 대부분의 웹브라우저에 구현이 되어있습니다.
아무 웹페이지에서 ctrl + shift + i 단축키를 눌러보시기 바랍니다.
(안 나올 경우 마우스 우클릭 -> 검사를 누르시면 됩니다.)
오른쪽에 알 수 없는 창이 뜨겁니다. 가장 상위 목록에서 Console이라고 적혀있는 곳을 누르시면 빈 공간이 나오게 됩니다.
해당 창을 통해서 js의 간단한 예제들을 실행해 볼 수 있습니다.
1+1, "abcde". length 와같이 간단한 명령을 하기 위해서 개발환경을 열어 해당 코드를 입력하고 파일을 열어보기보다는 바로 웹페이지를 통해서 하는 편이 더욱 효율 적이기 때문에 효과적입니다.
