자바스크립트란?
HTML/CSS로 구성된 HTML문서를 동적으로 만드는데 사용되는 프로그래밍 언어이다.
웹 프로그래밍
웹(www)은 인터넷에 연결된 컴퓨터를 통해서 서로 정보를 공유하고 소통하는 사이버 공간이다. 웹에서는 인터넷 익스플러나 크롬과 같은 웹 브라우저가 중요한 역할을 한다. 웹에서 사용자들은 웹 브라우저를 통해서 인터넷 상에 있는 원격 컴퓨터 서버에서 제공되는 웹 서비스를 이용한다.
웹 프로그래밍은 웹에서 사용되는 회원가입, 로그인, 쇼핑몰 장바구니, 온라인 결제, 온라인 예약, 스케쥴 관리 등의 기능을 실제로 구현하는 작업을 의미한다.
참고로 웹 디자인은 웹 사이트에 들어가는 디자인적 요소, 즉 텍스트, 이미지, 동영상, 음악 등의 콘텐츠를 디자인하는 것을 말한다.
** 서버 ㅣ 서비스를 제공하는 컴퓨터 / 클라이언트 | 서비스를 요청하는 컴퓨터
웹에서는 정보의 이용자, 즉 클라이언트와 정보 제공자, 즉 웹 서버가 존재한다. 클라이언트와 서버는 두 단계로 소통하는데
1) 클라이언트는 웹 브라우저의 주소 창에 해당 웹 서버의 웹 페이지의 URL 주소를 입력해서 서버에게 정보를 요청한다.
=>클라이언트는 웹 브라우저 주소창에 URL 주소를 입력해서 서버에게 HTTP 규약에 맞추어 해당 파일과 데이터를 전송해줄 것을 요청하는데 이 때 HTTP(HyperText Teansfer Protocol) 프로토콜을 사용하는데 이는 하이터 텍스트 전송규약이다. 웹에서는 이 HTTP에 따라 HTML 문서를 서로 주고 받는다. 클라이언트 웹 브라우저가 HTTP를 통해서 서버에 웹 페이지 HTML 문서나 이미지 정보를 요청하면 서버는 이 요청에 응답해서 필요한 정보를 클라이언트의 웹 브라우저에게 전송한다.
2) 서버 컴퓨터는 요청받은 해당 웹 페이지를 클라이언트에게 전송해준다.
=>웹 서버는 웹 사이트에 있는 HTML 문서와 관련된 파일들과 이미지, 동영상 등의 데이터를 보유하고 있다. 서버는 클라이언트로부터 HTTP를 통해 웹 페이지의 전송 요청을 받으면 해당 웹 페이지에 관련된 파일들과 데이터를 가공하여(브라우저는 오직 HTML만 이해할 수 있기 때문에 HTML적 요소가 아니면 HTML로 전환/결과 반환) 클라이언트의 웹 브라우저에 전달한다.
==>클라이언트에서 웹 페이지의 동적인 처리를 위해서 프로그래밍 언어 자바스크립트가 필요한 것과 마찬가지로 서버에서도 클라이언트의 요청에 따라 파일들과 데이터를 처리하는 프로그래밍 언어가 필요하다. 서버에서 필요한 웹 프로그램이 언어로써 PHP, ASP, JSP 등이 있고, 데이터를 효율적으로 저장하고 관리하기 위해서 MySQL과 같은 데이터베이스 프로그램도 필요하다.
** 구성 설정한 웹 페이지가 열리는데 시간 등이 오래 걸린다면 병목지점(bottleneck)을 알기 위해서 소스 코드를 보는 것 보다 웹 페이지가 실행되는 서버의 네트워크나 시스템 설정을 Wireshark와 같은 패킷분석 도구를 사용해서 검사해 보는 것이 훨씬 효율적이다.
자바스크립트 개요
우리가 흔히 사용하는 웹 사이트는 HTML, CSS,그리고 JavaScript 세 가지 요소로 구성된다. HTML은 웹 페이지의 뼈대를 제공하고, CSS의 색상, 글자 크기, 문단의 위치 변경 등 디자인적으로 웹 페이지를 꾸미는데 사용된다.
자바스크립트는 HTML은 웹 페이지의 기본 뼈대를 만들고 CSS는 HTML로 만들어진 요소들을 디자인적으로 꾸미고 화면에 배치한다.
예를 들어 자바스크립트를 이용하면 웹 페이지에 있는 버튼을 클릭했을 때 팝업창을 띄우거나 이미지에 마우스를 올렸을 때 연계된 다른 이미지가 나타나게 할 수 있다. 또 자바스크립트는 웹 페이지의 메인 이미지나 배너 등에 애니메이션 효과도 줄 수 있다. 이 외에도 자바스크립트는 웹 브라우저의 화면에서 발생되는 다양한 효과를 연출 할 수 있다.
자바스크립트의 역사
1995년 Netscape Communications 사에서 만든 넷스케이프란 웹 브라우저가 널리 사용되었었고, 이후에 HTML로 구성된 정적인 페이지를 동적으로 작동시키기 위해서 C 언어를 모태로 해서 Mocha라는 프로그래밍 언어를 개발했다. 모카는 나중에 Javascript라는 이름으로 변경되었는데 Sun Microsoftsystems의 Java와 명칭만 유사할 뿐 전혀 상관이 없는 다른 언어이다. 이 자바스크립트는 당시 가장 인기있던 브라우저였던 넷스케이프 내비게이터에 사용되었었다. 1996년 Microsoft의 Internet Explorer가 Netscape Navigator를 누르고 브라우저 시장에서 점유율을 높일 때 IE가 플랫폼에 자바스크립트 기능을 추가해서 자바스크립트는 대중적인 인기를 끌게 되었다.
HTML 문서에 자바스크립트를 삽입할 때에는 <script> ~ </script> 사이에 자바스크립트 명령어를 넣으면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
function light_on(){ //항상 이름 뒤애()가 있으면 대부분 함수, 메써드 이다. 이 부분이 함수 정의
document.getElementById('image').src = "light_on.png"; //{ } 속에는 이 함수/메써드가 수행할 작업이 기술된다. 이 부분이 함수 몸체
}
function light_off(){
document.getElementById('image').src = "light_off.png";
}
</script>
</head>
<body>
<button onclick="light_on()">붙켜기</button> <!--함수 호출-->
<button onclick="light_off()">붙끄기</button>
<img id="image" src="light_off.png"><!--최초의 상태-->
</body>
</html>'일단 해보는 코딩 > Java Script' 카테고리의 다른 글
| [Java Script] 반복문 ( WHILE /FOR /이중FOR문/BREAK/CONTINUE ) (0) | 2022.06.30 |
|---|---|
| [Java Script] Switch 문 (0) | 2022.06.29 |
| [Java Script] 형변환 제어문(조건문 / 반복문) (0) | 2022.06.29 |
| [Java Script] 자바스크립트 다양한 연산자 종류 (0) | 2022.06.28 |
| [JavaScript] 자바스크립트 기본 문법 (0) | 2022.06.28 |