javascript 수업

HTML과 CSS을 다이나믹하게 제어하는 본격 프로그래밍 언어

javascript 수업 HTML과 CSS을 다이나믹하게 제어하는 본격 프로그래밍 언어

서버

본 수업은 폐지 예정입니다. 자바스크립트 언어 수업웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.

서버란?

  • 개인용 PC와 똑같음 -단지 웹서비스가 돌아가는 컴퓨터일 뿐임
  • 개인용 PC도 서버가 될 수 있음.
  • 서버들이 모여있는 곳을 IDC라고 함.
  • 보통 이렇게 생겼음 - 그러나 거의 똑같은 컴퓨터임

클라이언트란?

  • 서비스를 받는 컴퓨터, 브라우져등을 의미함
  • 보통 이렇게 생겼음.

서버 - 클라이언트 모델이란?

  • 클라이언트가 요청하면 서버가 응답하는 것을 통해서 웹서비스가 운영됨
  • 이 모델이 극대화된 것이 클라우드 컴퓨팅.
  • 모든 에플리케이션을 웹서버에서 제공하고 컴퓨터는 브라우져를 통해서 시스템을 이용 - 구글의 웹에플리케이션들과 크롬 OS

HTML과 서버

 

  • 웹페이지에서 서버로 데이터를 전달하기 위해서는 Form을 사용
  • form을 이용하면 페이지가 리로드 되면서 서버로 데이터를 전달
  • HTML 수업 참조

receiver.php - example1.html, example2.html이 전송한 데이터를 받아서 출력해주는 php 프로그램 (github)

<?php
echo $_GET['nickname'].'님 안녕하세요';
?>

example1.html - (github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<form action="./receiver.php" method="GET">
			<label for="nickname">이름</label>
			<input id="nickname" type="text" name="nickname" value="" />
			<input type="submit" />
	</body>
</html>

Ajax (Asynchronous JavaScript and XML)

 

  • 페이지 리로드 없이 데이터 통신을 할 수 있다.
  • 어떻게 발음하는지는 의견이 분분하다 -> http://deving.net/143
  • jQuery와 같은 라이브러리를 이용해서 쉽게 사용할 수 있다.

example2.html - (github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script type="text/javascript">
			function load(e) {
				var xmlhttp;
				if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
					xmlhttp = new XMLHttpRequest();
				} else {// code for IE6, IE5
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						document.getElementById("output").innerHTML = xmlhttp.responseText;
					}
				}
				xmlhttp.open("GET", "./receiver.php?nickname=" + document.getElementById('nickname').value, true);
				xmlhttp.send();
				return false;
			}
		</script>
	</head>
	<body>
		<form action="http://lab.opentutorials.org/receiver.php" method="GET">
			<label for="nickname">이름</label>
			<input id="nickname" type="text" name="nickname" value="" />
			<input type="submit" onclick="return load()" />
		</form>
		<textarea id="output"></textarea>
	</body>
</html>

댓글

댓글 본문
  1. 다스베이더스
    감사합니다 큰 도움이 되었습니다 :)
  2. HwangTY
    이 동영상은 오픈튜토리얼 내의 여러 중복되게 동영상이 있어서
    덕분에 이제 완벽한 개념이 박혔습니다 ㅎㅎ
  3. 포스만빵
    보시면 되겠습니다. 라고 강의가 끝나는게 맞는 것 같습니다만..
  4. 류사장
    강의 너무나 감사드려요!!! 사부로 생각하고 차근차근열심히하겠습니다!
  5. egoing
    저는 잘 재생되고 있네요. :)
    대화보기
    • Pys3710
      우선, 강의 감사드립니다. 혹시 동영상이 3분 4초에서 계속 멈춤 상태인데요. 저만 그런 것인지 잘 모르겠네요. 다른 분들은 끝까지 잘 보이시나요?
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기