본문 바로가기

홈페이지만들기/Javascript 자바스크립트

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>
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 뒤에 따라오는 괄호 안에 들어있는 메시지를 콘솔창에 출력하는 명령어 입니다.


실습파일.zip



  1. 우커머스의 한국형 도로명 주소/ 우편번호 검색 플러그인 - Beomps Korea Postcode Search
  2. 우커머스 플러그인 WooCommerce - 워드프레스 쇼핑몰시스템
  3. 무료호스팅 리스트
  4. KBoard(케이보드) 워드프레스 플러그인 - 코스모스팜
  5. Smush Image Compression and Optimization 워드프레스 플러그인
  6. 워드프레스 페이지 빌더의 행과 열 사용법
  7. 워드프레스 플러그인 젯팩 Jetpack by WordPress.com
  8. 워드프레스 플러그인 Page Builder Interface 페이지 빌더 인터페이스
  9. 워드프레스 유용한 플러그인 SiteOrigin Page Builder


반응형