JavaScript 소개
HTML은 웹 페이지의 틀, 구조를 정의하는 것이라면,
CSS는 HTML의 틀을 꾸며주는 역할을 한다.
이번 부터 JavaScript를 배울 것이다.
JavaScript는 웹 페이지와 상호작용하도록 만들어진 언어이다.
그렇다면, JavaScript는 어떤 기능을 할까?
역할:
- 브라우저에서 사용자의 행동을 처리
- 데이터 저장
- 네트워크 응답과 요청을 처리
JavaScript를 사용하여 웹 페이지를 dynamic하고 interactive하게 만드는 건 프론트 개발자의 가장 큰 역할이라고 한다.
아직 프론트로 가야 할 지, 백으로 가야할 지 고민중이다.
하지만, 어느 길로 가든 JavaScript는 중요하다고 개인적으로 생각한다.
자,JavaScript를 실행시키려면 무엇이 필요하냐면,
먼저, 브라우저가 존재 해야한다. 대표적인 웹 브라우저는 chrome,safari,Firefox,Opera 등이 있다.
두번째, HTML파일이 있어야 한다.
세번째, HTML파일에서 JavaScript파일을 연결시켜줘야한다.
JavaScript의 함수 두 가지를 살펴보려 한다. 가장 기본적인 함수 두가지가 있는데
alert창으로 알림창 띄우기와 Console.log이다.
이 두가지는 비슷한 역할을 한다.
다만, alert은 사용자에게 안내하고 싶은 텍스트를 보여준다는 것이라면
console.log는 개발자가 확인하고 싶은 내용을 출력하는 함수이다.
좀 더 자세히 들어가보겠다.
1. 알림창 띄우기
- 언제 사용할까?
로그인 창에서 비밀번호가 틀렸을 때 우리는 "비밀번호가 틀렸습니다."라는 문구로 조그만 창이 띄워지는 것을 종종 보았을 텐데 그것이 바로 알림창이다. - 어떻게 쓰이나?
alert("알림 내용 입력")
-
코드:
위 그림을 보면 1번째 코드가 바로 alert를 쓴 것이다.
-
코드 결과:
이렇게 화면 상단 가운데에 뜨는 것을 볼 수 있다.
2.console.log() , 큰솔(console)창
alert창과의 차이는 개발자가 하고 싶은 내용을 출력하는 함수라고 설명을 했는데
그말은 즉슨 일반 사용자가 볼 수 없도록 브라우저에 내장된 개발자 도구를 통해서만 확인할 수
있도록 했다는 것이다. -
코드:
- 코드 결과:
- 추가로 알아야 할것:
- alert와 console.log는 자바스크립트에서 이미 정의된 약속된 단어이다. 앞으로 약속어(Reserved Words)라고 부르면 된다.
또, 이것은 이미 이름이 존재하는 함수이므로 내가 임의로 alert이라는 이름의 함수를 만드는 건 안된다!
- 위 코드를 주석을 제거하고, alert과 console 모두 실행시킬 시에
순서대로 alert창이 나오고 확인을 누르고서야 비로소 console의 결과룰 확인할 수 있다.
