34일차// javaScript// document.getElementById(' ').innerHTML

혼돈이 왔다. Java, JavaScript, JSP 가 매우 헷갈려서 정리해본다.

 

 

JSP는 서버에서 자원들(코드)을 사용하는 것이고

JavaScript는 클라이언트에서 자원들(코드)을 사용한다.

 

기존의 Java언어를 사용하는 것에는 동일하지만

JSP는 웹 서버에서 실행되는 .JSP파일이라면 ,

JavaScipt는 <script>태그를 사용하여 표현한다.

사용자의 웹 화면인 .HTML파일 이다.

 

다시 말해 서버에서 실행되어 결과를 사용자에게 보여주는 방식이 JSP이고 

자바스크립트는 클라이언트(사용자)의 웹 브라우저 화면에 실행되어지는 방식이다.

 

JSP는 서버 언어

JavaScript는 클라이언트 언어

 

JavaScript(자바스크립트)란

JavaScript는 모든 웹 개발자들이 반드시 배워야할 3가지 언어 중 하나이다.

 

● HTML은 웹페이지의 컨텐츠를 정의한다.

● CSS는 웹페이지의 레이아웃 및 디자인을 지정한다.

● JavaScript는 웹페이지의 동작을 프로그래밍 한다.

 

 

<p id = "demo">p tag id demo</p>
		 
	<script type="text/javascript">
	/* 여기는 JAVA script 영역 
	한줄주석문
	
	 범위주석문
	*/
	console.log('여기는 JAVA script 영역');
	
	alert('자바 스크립트실행');// 새로고침시 뜨는 창
	
	int 
	float
	
	var v = document.getElementById("demo").innerHTML;//getter
	alert(v);
	
	document.getElementById("demo").innerHTML = 'id demo tag p'; //setter
	
	var obj = document.getElementById("demo");
	alert(obj.innerHTML);
	</script>

 

console.log 객체

  기존에 자바스크립트 코드를 디버깅하는 가장 단순한 방법은 바로 alert()을 사용하여 필요한 정보를 찍어보는 것이었다.

  alert()을 사용하는 방법은 훌륭하진 않지만, 간단히 사용할 수 있는 꽤 쓸만한 디버깅 방법이다. 다만, 일일이 확인 버튼을 클릭해 주는 일은 불편했던 것이 사실이다. 가끔 for루틴 안에 alert()을 넣고 돌리는 황당한 경험을 한두번씩 했을 것이다.

  경험상, 디버깅시에 로그파일에 필요한 정보를 기록하게 되면 디버깅이 훨씬 쉬워진다. 여타 프로그래밍 언어들은 이러한 기능들을 지원하고 있다. 그 개념을 브라우저에서 실행되는 자바스크립를 위해 지원하는 것이 바로 console객체다.

  console객체는 IE8 이상 버전과 사파리, 크롬, 오페라같은 최신 브라우저에서 사용할 수 있다. 먼저 간단한 사용 예를 보자

 

자바스크립트 사용시 쓰이는 코드를 정리해보자

console.log('여기는 JAVA script 영역');

alert('자바 스크립트실행');// 새로고침시 뜨는 창

 

document.getElementById(' ').innerHTML=' '

JavaScript는 "웹페이지의 동작을 프로그래밍 한다"는 말이 처음 접하는 사람에게는 와닿지 않는다.

자바스크립트는 사용자가 클릭, 입력 등을 하면 웹페이지의 내용, 디자인을 변경 하고 특정 결과물이 발생하도록 만들어 준다. 즉 정적인 웹페이지를 동적으로 만들어 준다.

구체적으로 느껴 보기 위해 JavaScript가 웹페이지에서 할 수 있는 대표적인 4가지 기능을 예제로 공부해 보자.

 

오늘은 대표 예제 1번에 대하여 기록 한다.

 

● 1번 ● 자바스크립트는 HTML 컨텐츠를 변경할 수 있다.

 

 1번 풀이 

<p id="abc">JavaScript는 HTML 컨텐츠를 변경할 수 있다. 아래 것을 Click !</p>

<button ype="button" onclick="document.getElementById('abc').innerHTML='JavaScript can change HTML content !'">Click !</butto>

* 위 코딩에서 오렌지색이 JavaScript 이다. HTML의 <button>태그 안에 자바스크립트가 삽입되어 있다.

* <button>태그는 위 그림처럼 버튼을 만들어 준다. 버튼 안에는 'Click !'라는 텍스트가 있다.

* onclick="" 속성은 사용자가 클릭 했을 때의 현상을 정의하여 준다.

* onclick="" 속성의 값으로 자바스크립트를 사용하였다.

* 자바스크립트 풀이

  - document는 HTML문서를 말한다.

  - getElementById('abc')는 아이디가 'abc'인 HTML 요소를 갖고 와라.

  - innerHTML='~~~'은 갖고 온 요소의 내용(JavaScript는 HTML 컨텐츠를 변경할 수 있다. 아래것을 Click !)을 'JavaScript can change HTML content !'라는 내용으로 변경해라.

document.getElementById("demo").innerHTML = 'id demo tag p'

위 코드가 실행되면 id  demo의 내용이 변경된다.