Javascript 자바스크립트 및 프론트엔드 Front-end web programming 웹 개발

Javascript 자바스크립트 / 프론트엔드 Front-end web programming 웹 개발

Javascript 자바스크립트와 Front-end 프론트엔드에 대해 알아보기로 하겠습니다. 자바스크립트는 HTML+CSS와 함께 사용해 client side 웹 프로그램을 작성할 수 있으며 웹 브라우저에서 바로 실행이 가능합니다. Front-end란 앞쪽에라는 뜻인데 웹사이트를 구성할때 가장 바깥쪽에서 보이는 부분을 만드는 일이라는 뜻며 Front-end가 있다면 반대로 back-end도 있습니다.

Javascript 자바스크립트 기초

alert 명령어

• alert 뒤에 따라오는 괄호 안에 들어있는 메시지를 브라우저 경고창에 띄워주는 명령어

실습방법

• Javascript 코드를 작성합니다.

◦ 파일명 lecture01.js로 저장하고 저장한 메모장이나 edit에 아래와 같이 명령어를 입력합니다.

1
alert("hello JUN");
cs

• 해당 코드를 로드하는 HTML 파일을 작성한 다음 index.html이라는 파일을 만들어 저장합니다.

◦ index.html

1
2
3
4
5
6
7
8
9
10
<html>
    <head>
    ...
    <script src="lecture01.js"></script>
    ...
    </head>
    <body>
    ...
    </body>
</html>
Colored by Color Scripter
cs

저장한 index.html를 실행시키면 아래와 같이 결과물이 나옵니다.

결과물

• 프론트엔드 Front-end web programming 웹 개발이란?

Front-end란 앞쪽에라는 뜻인데 웹사이트를 구성할때 가장 바깥쪽에서 보이는 부분을 만드는 일이라는 뜻며 Front-end가 있다면 반대로 back-end도 있습니다. 차를 예로 들어 보면 차 안에는 차가 달리고, 서게 만들어주는 많은 부분들이 있는데 엔진이 있고, 바퀴에 달린 브레이크가 있습니다. 하지만 이걸 다 눈으로 보면서 운전하지는 않습니다. 우리는 눈으로 볼 수 있는 브레이크페달과 악셀페달로 엔진과 브레이크를 조작하지요. 브레이크페달과 악셀페달이 Front-end(HTML, CSS, Javascript, jQuery)라면, 엔진과 브레이크는 back-end(JAVA, JSP, Spring, mySQL)입니다.

다시 웹프로그래밍으로 돌아와서 Front-end web programming은 눈에 보이는 부분을 잘 개발하기 위한 기술이라고 생각하시면 됩니다.

로그인하지 않은 상태에서 [댓글]버튼을 누르면 "카페 멤버가 아니면 글을 쓸 수 없습니다.(카페 회원은 로그인이 필요합니다.)"라는 팝업이 나오는데 이걸 눌렀을때 로그인상태가 아닌지 체크해서, 팝업을 보여줄지 결정하는 것도 front-end web programming입니다.

개발자 도구 (Developer Console)

• 브라우저의 우측 상단 메뉴에서 더보기, 개발자 도구 메뉴를 이용해 활성화

• 여러 탭 중 console 탭을 사용해 console 을 확인 가능

• 직접 명령어를 입력해 실행 가능하며 (>) , 그 결과를 바로 확인 가능 (<)

console.log 명령어

• console.log 뒤에 따라오는 괄호 안에 들어있는 메시지를 콘솔창에 출력하는 명령어 입니다.