JavaScript 개념 / 불켜기 불끄기

FrontEnd/JavaScript

by H_Develop 2022. 6. 28. 12:08

정적인 HTML을 동적으로 만드는 프로그래밍 언어.

(시간 관련된 비행기 예약 등 / 크롬 브라우저, 비쥬얼 스튜디오 코드 프로그램 사용)

VS CODE 마켓플레이스 확장

- korean / 한국어 패치

- live server / html crom 바로 연결

- open browser preview / crom download

웹 프로그래밍

웹(www)은 인터넷에 연결된 컴퓨터를 통해 소통하는 사이버 공간.

브라우저를 통해 인터넷 상에 있는 원격 컴퓨터 서버에서 제공되는 웹 서비스를 이용.

회원가입, 로그인, 쇼핑몰 장바구니, 온라인 결제, 온라인 예약, 스케쥴 관리 등 기능을 실제로 구현하는 작업.

(웹 디자인은 디자인적 요소, 텍스트 이미지 동영상 음악 등의 콘텐츠를 디자인)

웹에서는 정보의 이용자, 클라이언트와 정보를 제공하는 웹 서버가 존재.

1) 클라이언트는 웹 브라우저의 주소 창에 URL 주소를 입력하여 서버에 정보 요청.

- HTTP 규약에 맞춰 파일과 데이터를 전송 요청 (HTTP/HyperTextTransferProtocol은 하이퍼 텍스트 전송 규약)

2) 서버 컴퓨터는 요청 받은 해당 웹 페이지를 클라이언트에게 전송

- 웹 서버는 HTML 문서와 관련된 파일과 이미지, 동영상 등의 데이터 보유

- 서버는 HTTP를 통해 전송 요청을 받으면, 데이터 가공하여 전달

(브라우저는 HTML만 이해하며, HTML 요소가 아니면 전환/결과 반환)

- 서버에서 필요한 웹 프로그래밍 언어로, PHP, ASP, JSP 등이 있고,

데이터를 효율적으로 저장 관리하기 위해 MySQL과 같은 DataBase 프로그램도 필요

개요

HTML 뼈대 / CSS 꾸미기 / JavaScript 는 정적인 웹 페이지를 동적으로 만드는데 사용.

(메인 이미지나 배너 등 애니메이션 효과도 줄 수 있다.)

역사

1995년 Netscape Communication 사에서 만든 Netscape라는 웹 브라우저가 많이 사용되었고,

C언어를 모태로 만든 Mocha 라는 프로그래밍 언어를 개발되었다.

Mocha는 JavaScript로 이름을 변경하고, 당시 인기 브라운저인 Netscape Navigator에 사용되었다.

1996년 Microsoft의 Internet Explorer가 시장 점유율을 높일 때,

IE가 플랫폼에 JavaScript 기능을 추가하여 대중적인 인기를 끌게 되었다.

사용법

HTML 문서에 <script> ~ </script> 사이에 JavaScript 명령어를 넣으면 된다.

HTML body 안에 document.write("안녕하세요")를 사용하면 인자가 출력된다.

(최상위 document 클래스의 write() 함수를 사용한 것이다.)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
	function light_on() {	// <- 함수 정의 / 항상 이름 뒤에 괄호가 있으면 대부분 함수. method
    	document.getElementById('image').src = "light_on.png";	// <- 함수 몸체 / document class
    }						// { } 속에는 이 함수/metho가 수행 할 잡업이 기술된다.
    function light_off() {
    	document.getElementById('image').src = "light_off.png";
    }					//elementbyid / i와 L 조심. 대소문자 조심.

</script>
</head>
<body>

	<button onclick="light_on()">불켜기</button> <!-- 함수 호출 -->
	<button onclick="light_off()">불끄기</button>
    <img id="image" src="light_off.png">		<!-- 최조의 상태 -->

</body>
</html>

'FrontEnd > JavaScript' 카테고리의 다른 글

형변환 및 예제 (0)	2022.06.30
연산자 (Arithmetic, Assignment, String, Comparison, Logical) (0)	2022.06.28
변수 Variable / 출력 (0)	2022.06.28
주석문, alert() (0)	2022.06.28
기계어로 번역 방식 / 컴파일(compile), 인터프리터(interpreter) (0)	2022.06.28