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. ZZYYTT
    http://www.mbtshoesonline.com
    http://www.kevindurant-shoes.us.com
    http://www.yeezy-boost.us.com
    http://www.goyardbags.us
    http://www.katespadehandbags-outlet.us.com
    http://www.yeezy-shoes.org.uk
    http://www.balenciaga.us.com
    http://www.ultraboost.us.com
    http://www.longchamphandbagsoutlets.com
    http://www.yesyeezy.shop......tml
    http://www.kd11.us
    http://www.adidas-tubular.us.com
    http://www.mlbjerseys.in.net
    http://www.yeezyboost-350v2.us.com
    http://www.jordan6.us.com
    http://www.supremeclothing.us
    http://www.balenciagashoes.us.org
    http://www.airmax90.us.org
    http://www.yeezyshoesuk.com
    http://www.goldengoosesneakers.us
    http://www.yeezy-boost350.us.com
    http://www.calvinkleinoutlet.us.com
    http://www.lebronjames-shoes.us.com
    http://www.supremehoodie.us.com
    http://www.yeezysuk.com
    http://www.yeezyboost.in.net
    http://www.goyardhandbags.us.com
    http://www.hermesbelts.com
    http://www.michael-kors-handbags.org.uk
    http://www.balenciagashoes.us.com
    http://www.coachoutletstorefactory.com
    http://www.jordan13.us.com
    http://www.rolex-replica.us.com
    http://www.hermes-belt.us.com
    http://www.coachoutletssale.com
    http://www.nhljerseysshop.us.com
    http://www.yesyeezy.shop......tml
    http://www.kyrie3.us.com
    http://www.michaelkors-outletonlines.us.com
    http://www.nike-shox.us.com
    http://www.cheap-airjordans.us.com
    http://www.jordanssneakers.us.com
    http://www.nikejordans.us.com
    http://www.nikebasketballshoes.us.com
    http://www.yesyeezy.shop
    http://www.adidasultraboost.us.org
    http://www.jordan11retro.us.com
    http://www.chromeheartsstore.us
    http://www.goldengoose.us.com
    http://www.paulgeorgeshoes.us.com
    http://www.yeezy-500.us.com
    http://www.michaeljordanshoes.us.com
    http://www.adidas-nmds.us.com
    http://www.nikeairforce1.us.com
    http://www.redbottom-shoes.us.com
    http://www.adidasstansmith.uk
    http://www.goldengoose-sneakers.com
    http://www.lebron16.us.com
    http://www.hermeshandbags.us.org
    http://www.adidasnmds.com
    http://www.offwhite.us.com
    http://www.yeezysshoes.us.com
    http://www.airjordanretro.uk
    http://www.lacostepolo.us.com
    http://www.toryburchs.us
    http://www.adidaszxflux.com
    http://www.monclerjackets.us
    http://www.yeezy-shoes.org
    http://www.long-champ.us.com
    http://www.kd11.us.com
    http://www.lebron16.us
    http://www.filashoes.org
    http://www.goyard-handbags.us.com
    http://www.hermes-birkin.us.com
    http://www.monclerjacket.net
    http://www.nikeair-max.us.com
    http://www.hardenshoes.us.com
    http://www.ferragamobelt.us.org
    http://www.converseoutlet.us.com
    http://www.chromehearts.name
    http://www.yeezy-shoes.ca
    http://www.linksoflondon.us.com
    http://www.goyardhandbags.org
    http://www.nikehuaracheshoes.us.com
    http://www.adidasiniki.us
    http://www.lacosteonlineshop.us.com
    http://www.jordanshoes.org.uk
    http://www.yesyeezy.shop/adidas-yeezy-desert-rat-500-blush-db2908-p-425.html
    http://www.caterpillarboots.us.com
    http://www.canada--goose.co.uk
    http://www.nike-hyperdunk.us.com
    http://www.guccibelt.us.com
    http://www.off-whiteshoes.us.com
    http://www.bape-hoodie.us.com
    http://www.nikefoamposite.us.com
    http://www.pandorabracelet.in.net
    http://www.outlettimberland.us.org
    http://www.kyrie4.org
    http://www.yeezyboost.com.co
    http://www.handbagsmichaelkors.com
    http://www.nike-roshe.us.com
    http://www.nikecortez.us.com
    http://www.goyard.us.com
    http://www.long-champhandbags.org.uk
    http://www.polosralphlaurenuk.com
    http://www.russellwestbrookshoes.us.com
    http://www.jordansshoes.us.org
    http://www.michael-korsoutlets.us
    http://www.shoesjordan.us.com
    http://www.yeezy700.us.com
    http://www.vans-outlet.us.com
    http://www.michael-kors-handbags.com.co
    http://www.goldengoose-sneakers.us
    http://www.lacostepolosshirts.com
    http://www.golden-goose.us.com
    http://www.kd-10.us
    http://www.longchamp-bags.us.org
    http://www.hermes-handbags.us.com
    http://www.yesyeezy.shop/supreme-x-nike-air-more-uptempo-varsity-redwhite-902290600-p-592.html
    http://www.hoganoutletonline.us.com
    http://www.nikepolo.us
    http://www.longchamphandbagsonlines.com
    http://www.retro-jordans.us.com
    http://www.curry5.us
    http://www.nikeairmax2018.us.com
    http://www.kobeshoes.uk
    http://www.michaelkors-outletstore.com
    http://www.nike-airmax2017.us.com
    http://www.asics-shoes.us.org
    http://www.adidasgazelle.us.com
    http://www.yeezy-boosts.us.com
    http://www.yeezyboost350v2.org.uk
    http://www.fila.us.org
    http://www.yesyeezy.shop/adidas-ultra-boost-c-82_89.html
    http://www.kobe-shoes.us.com
    http://www.lebron15.net
    http://www.hermesbelts.co.uk
    http://www.yesyeezy.shop/adidas-yeezy-boost-350-v2-beluga-solar-red-bb1826-p-422.html
    http://www.outletlacoste.us.com
    http://www.adidasshoesonline.com
    http://www.adidasstansmith.us.com
    http://www.adidasyeezys.us
    http://www.kobesneakers.com
    http://www.adidasyeezys.us.com
    http://www.jordan-retro.us.com
    http://www.goldengooseoutlet.us
    http://www.kyrieirving-shoes.us.com
    http://www.kobebasketballshoes.net
    http://www.fakerolex.us.com
    http://www.coachsonline.us.com
    http://www.coachoutletsfactory.com
    http://www.nikeairmax2019.us.com
    http://www.nikereact.org
    http://www.nikereact.us.com
    http://www.jordan12.us.com
    http://www.michaelkors-outletfactory.us.org
    http://www.vapormaxshoes.us
    http://www.jordan4.us.com
    http://www.offwhiteclothing.us.com
    http://www.birkinbag.us.com
    http://www.adidaseqts.com
    http://www.adidas-crazyexplosive.us.com
    http://www.yesyeezy.shop/adidas-yeezy-700-boost-wave-runner-b75571-p-428.html
    http://www.filas.us.com
    http://www.jordansforcheap.us.com
    http://www.yeezyboost-350.uk
    http://www.yesyeezy.shop/nike-air-max-197-sean-wotherspoon-aj4219400-p-66.html
    http://www.yeezy500.us
    http://www.outletmichael-kors.us.com
    http://www.nikeflyknit.us.com
    http://www.airmax270.us.com
    http://www.curry5.us.com
    http://www.adidas-pureboost.us.com
    http://www.curry4shoes.us.com
    http://www.valentinos.us.com
    http://www.cheapnbajerseyswholesales.us.com
    http://www.chromehearts.com.co
    http://www.bapehoodie.us
    http://www.nike-huarache.com
    http://www.adidasnmduk.com
    http://www.goldengoose-outlet.us.com
    http://www.coachoutlets.name
    http://www.offwhitexjordan1.com
    http://www.lebron16.net
    http://www.yesyeezy.shop/adidas-pharrell-williams-c-82_88.html
    http://www.yesyeezy.shop/offwhite-air-jordan-1-retro-chicago-the-ten-aa3834101-p-837.html
    http://www.yeezyboost350v2shoes.us.com
    http://www.adidasoutletonline.com
    http://www.yslhandbags.net
    http://www.yesyeezy.shop/offwhite-x-nike-air-presto-black-aa3830002-p-291.html
    http://www.air-max.us.com
    http://www.hermesonlineshop.com
    http://www.michaelkorsoutletonlineus.com
    http://www.outletonline-michaelkors.us.org
    http://www.yesyeezy.shop/balenciaga-17fw-triple-s-black-pink-women-sneaker-483523w06e38080-p-618.html
    http://www.michael--korsoutlet.us.org
    http://www.yesyeezy.shop/balenciaga-17fw-triple-s-trainer-black-red-mens-w05m23972-p-613.html
    http://www.jimmychoo-shoes.us.com
    http://www.reebokoutlet.us.org
    http://www.offwhitehoodie.us.com
    http://www.nikesneakers.us.com
    http://www.yeezy-shoes.us.org
    http://www.curry4.us.com
    http://www.adidasyeezy.co.uk
    http://www.monclersoutlet.us.com
    http://www.nfljerseys.us.org
    http://www.ferragamobelt.us
    http://www.fitflops-saleclearance.us.com
    http://www.adidassuperstar.us.com
    http://www.fila-shoes.us.com
    http://www.louboutinshoes.uk
  2. http://www.adidaseqts.com
    http://www.yesyeezy.shop......tml
    http://www.curry5.us.com
    http://www.goldengoose-sneakers.com
    http://www.yesyeezy.shop......tml
    http://www.nfljerseys.us.org
    http://www.nikereact.org
    http://www.goldengoose.us.com
    http://www.yslhandbags.net
    http://www.adidasyeezy.co.uk
    http://www.curry4shoes.us.com
    http://www.yeezysuk.com
    http://www.jordansshoes.us.org
    http://www.yesyeezy.shop......tml
    http://www.michaelkors-outletstore.com
    http://www.adidasgazelle.us.com
    http://www.nike-hyperdunk.us.com
    http://www.chromeheartsstore.us
    http://www.valentinos.us.com
    http://www.bapehoodie.us
    http://www.yesyeezy.shop......tml
    http://www.converseoutlet.us.com
    http://www.nhljerseys.us.org
    http://www.canada--goose.co.uk
    http://www.redbottom-shoes.us.com
    http://www.filashoes.org
    http://www.fakerolex.us.com
    http://www.vans-shoes.us.org
    http://www.yesyeezy.shop......tml
    http://www.fila-shoes.us.com
    http://www.hermesonlineshop.com
    http://www.hardenshoes.us.com
    http://www.outletmichael-kors.us.com
    http://www.jordan13.us.com
    http://www.adidas-tubular.us.com
    http://www.golden-goose.us.com
    http://www.curry4.us.com
    http://www.guccibelt.us.com
    http://www.hermes-birkin.us.com
    http://www.goyard-handbags.us.com
    http://www.shoesjordan.us.com
    http://www.nikeairforce1.us.com
    http://www.jordanssneakers.us.com
    http://www.adidasstansmith.uk
    http://www.offwhiteclothing.us.com
    http://www.adidasultraboost.us.org
    http://www.monclerjacket.net
    http://www.fitflops-saleclearance.us.com
    http://www.longchamphandbagsoutlets.com
    http://www.longchamphandbagsonlines.com
    http://www.kobesneakers.com
    http://www.yeezy-500.us.com
    http://www.jordanshoes.org.uk
    http://www.lebron16.us
    http://www.polosralphlaurenuk.com
    http://www.hermes-belt.us.com
    http://www.hermes-handbags.us.com
    http://www.offwhitehoodie.us.com
    http://www.yesyeezy.shop......tml
    http://www.calvinkleinoutlet.us.com
    http://www.birkinbag.us.com
    http://www.pandorabracelet.in.net
    http://www.monclerjackets.us
    http://www.goyardbags.us
    http://www.jordansforcheap.us.com
    http://www.yeezysshoes.us.com
    http://www.mbtshoesonline.com
    http://www.goyardhandbags.org
    http://www.nikesneakers.us.com
    http://www.cheap-airjordans.us.com
    http://www.nike-airmax2017.us.com
    http://www.yesyeezy.shop......tml
    http://www.kd11.us
    http://www.paulgeorgeshoes.us.com
    http://www.offwhite.us.com
    http://www.jimmychoo-shoes.us.com
    http://www.outletonline-michaelkors.us.org
    http://www.nikeflyknit.us.com
    http://www.yeezy-boost.us.com
    http://www.yeezyshoesuk.com
    http://www.nike-roshe.us.com
    http://www.hermeshandbags.us.org
    http://www.nike-shox.us.com
    http://www.adidasoutletonline.com
    http://www.vans-outlet.us.com
    http://www.michaelkors-outletfactory.us.org
    http://www.outlettimberland.us.org
    http://www.yeezy-shoes.org.uk
    http://www.cheapnbajerseyswholesales.us.com
    http://www.kobebasketballshoes.net
    http://www.adidasstansmith.us.com
    http://www.supremehoodie.us.com
    http://www.yeezyboost-350.uk
    http://www.michael--korsoutlet.us.org
    http://www.airmax270.us.com
    http://www.yesyeezy.shop......tml
    http://www.jordan-retro.us.com
    http://www.long-champhandbags.org.uk
    http://www.kd11.us.com
    http://www.air-max.us.com
    http://www.jordan6.us.com
    http://www.michael-kors-handbags.com.co
    http://www.yeezy-boost350.us.com
    http://www.yesyeezy.shop......tml
    http://www.coachsonline.us.com
    http://www.yesyeezy.shop
    http://www.nikejordans.us.com
    http://www.ultraboost.us.com
    http://www.yeezyboost.in.net
    http://www.yeezyboost.com.co
    http://www.linksoflondonus.com
    http://www.nikecortez.us.com
    http://www.asicsgelkayano.us.com
    http://www.coachoutletstorefactory.com
    http://www.mlbjerseys.in.net
    http://www.curry5.us
    http://www.airmax90.us.org
    http://www.ferragamobelt.us.org
    http://www.nikepolo.us
    http://www.michaeljordanshoes.us.com
    http://www.outletlacoste.us.com
    http://www.michael-korsoutlets.us
    http://www.off-whiteshoes.us.com
    http://www.chromehearts.com.co
    http://www.adidas-nmds.us.com
    http://www.yeezy-shoes.us.org
    http://www.jordan12.us.com
    http://www.jordan4.us.com
    http://www.nikefoamposite.us.com
    http://www.katespadehandbags-outlet.us.com
    http://www.adidasnmduk.com
    http://www.toryburchs.us
    http://www.yeezy500.us
    http://www.kobeshoes.uk
    http://www.asics-shoes.us.org
    http://www.adidasyeezys.us
    http://www.coachoutletssale.com
    http://www.filas.us.com
    http://www.kyrieirving-shoes.us.com
    http://www.linksoflondon.us.com
    http://www.nikereact.us.com
    http://www.ferragamobelt.us
    http://www.nikebasketballshoes.us.com
    http://www.lebronjames-shoes.us.com
    http://www.goldengoosesneakers.us
    http://www.yeezy-shoes.org
    http://www.adidasyeezys.us.com
    http://www.nikeairmax2019.us.com
    http://www.kyrie4.org
    http://www.fila.us.org
    http://www.yesyeezy.shop/offwhite-x-nike-air-presto-black-aa3830002-p-291.html
    http://www.nikehuaracheshoes.us.com
    http://www.goyard.us.com
    http://www.adidasiniki.us
    http://www.adidas-pureboost.us.com
    http://www.yesyeezy.shop/adidas-yeezy-boost-350-v2-cream-white-cp9366-p-423.html
    http://www.kd-10.us
    http://www.yeezy700.us.com
    http://www.reebokoutlet.us.org
    http://www.monclersoutlet.us.com
    http://www.lacosteonlineshop.us.com
    http://www.michaelkorsoutletonlineus.com
    http://www.kobe-shoes.us.com
    http://www.kevindurant-shoes.us.com
    http://www.jordan11retro.us.com
    http://www.yeezy-shoes.ca
    http://www.coachoutletsfactory.com
    http://www.handbagsmichaelkors.com
    http://www.yesyeezy.shop/supreme-x-nike-air-more-uptempo-varsity-redwhite-902290600-p-592.html
    http://www.goldengoose-sneakers.us
    http://www.hoganoutletonline.us.com
    http://www.adidas-crazyexplosive.us.com
    http://www.nike-huarache.com
    http://www.vapormaxshoes.us
    http://www.michaelkors-outletonlines.us.com
    http://www.airjordanretro.uk
    http://www.yesyeezy.shop/balenciaga-17fw-triple-s-black-pink-women-sneaker-483523w06e38080-p-618.html
    http://www.balenciagashoes.us.com
    http://www.adidassuperstar.us.com
    http://www.michael-kors-handbags.org.uk
    http://www.lacostepolosshirts.com
    http://www.lebron16.us.com
    http://www.caterpillarboots.us.com
    http://www.nikeair-max.us.com
    http://www.goyardhandbags.us.com
    http://www.balenciagashoes.us.org
    http://www.yeezyboost-350v2.us.com
    http://www.adidaszxflux.com
    http://www.adidasnmds.com
    http://www.lebron15.net
    http://www.kyrie3.us.com
    http://www.adidasshoesonline.com
    http://www.coachoutlets.name
    http://www.nikeairmax2018.us.com
    http://www.hermesbelts.com
    http://www.balenciaga.us.com
    http://www.lebron16.net
    http://www.goldengoose-outlet.us.com
    http://www.hermesbelts.co.uk
    http://www.retro-jordans.us.com
    http://www.chromehearts.name
    http://www.rolex-replica.us.com
    http://www.goldengooseoutlet.us
    http://www.louboutinshoes.uk
    http://www.yeezyboost350v2shoes.us.com
    http://www.offwhitexjordan1.com
    http://www.yeezyboost350v2.org.uk
    http://www.lacostepolo.us.com
    http://www.russellwestbrookshoes.us.com
    http://www.yeezy-boosts.us.com
    http://www.longchamp-bags.us.org
    http://www.long-champ.us.com
    http://www.bape-hoodie.us.com
    wwwe
  3. 다스베이더스
    감사합니다 큰 도움이 되었습니다 :)
  4. HwangTY
    이 동영상은 오픈튜토리얼 내의 여러 중복되게 동영상이 있어서
    덕분에 이제 완벽한 개념이 박혔습니다 ㅎㅎ
  5. 포스만빵
    보시면 되겠습니다. 라고 강의가 끝나는게 맞는 것 같습니다만..
  6. 류사장
    강의 너무나 감사드려요!!! 사부로 생각하고 차근차근열심히하겠습니다!
  7. egoing
    저는 잘 재생되고 있네요. :)
    대화보기
    • Pys3710
      우선, 강의 감사드립니다. 혹시 동영상이 3분 4초에서 계속 멈춤 상태인데요. 저만 그런 것인지 잘 모르겠네요. 다른 분들은 끝까지 잘 보이시나요?
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기