html 검색 결과

18개 발견
  1. 미리보기
    2015.09.29 - Palpit

    [ASP] ASP 소개

  2. 미리보기
    2015.06.13 - Palpit

    [javascript] 58. DOM CSS - 자바스크립트 강좌 JS / CSE

  3. 미리보기
    2015.06.13 - Palpit

    [javascript] 53. HTML DOM - 자바스크립트 강좌 JS / CSE

  4. 미리보기
    2015.06.13 - Palpit

    [javascript] 13. 이벤트(Events) - 자바스크립트 강좌 JS / CSE

  5. 미리보기
    2015.06.13 - Palpit

    [Javascript] 1. 소개(Introduction) - 자바스크립트 강좌

  6. 미리보기
    2015.06.13 - Palpit

    [jQuery] 13. Set - jQuery 강좌 jQuery / CSE

  7. 미리보기
    2015.06.13 - Palpit

    [jQuery] 12. Get - jQuery 강좌 jQuery / CSE

  8. 미리보기
    2015.06.12 - Palpit

    [Web Building] 9. Web DaaS - 웹 페이지 제작 강좌

[ASP] ASP 소개

2015.09.29 11:54 - Palpit
조회수 확인

ASP Introduction

 ASP 파일은 텍스트와 HTML 태그 스크립트를 포함할 수 있습니다.


 ASP 파일의 스크립트는 서버에서 실행되어 집니다.





 What you should already know

  강좌를 진행하기 전에 다음에 대한 기본적인 이해가 필요합니다:

  - HTML

  - 자바스크립트 또는 VB 스크립트 같은 스크립팅 언어


  





 What is ASP?

  - ASP는 Active Server Pages 를 의미합니다.

  - ASP는 Microsoft Technology 입니다.

  - ASP는 IIS 내부에서 실행되는 프로그램입니다.

  - IIS는 Internet Information Services를 의미합니다.

 


  



  What is an ASP File?

  - ASP 파일은 HTML 파일과 같은 파일입니다.

  - ASP 파일은 텍스트와 HTML, XML, 스크립트를 포함할 수 있습니다.

  - ASP 파일의 스크립트는 서버에서 실행되어 집니다.

  - ASP 파일은 ".asp" 확장명을 갖습니다.





  How Does ASP Differ from HTML?

  - 브라우저가 HTML을 요청하면, 서버는 파일을 반환합니다.

  - 브라우저가 ASP 파일을 요청하면, IIS는 ASP 엔진에 요청을 넘깁니다. ASP 엔진은 ASP 파일을 라인 단위로 읽고 파일 내부의 스크립트를 실행합니다. ASP 파일은 평이한 HTML로 브라우저에게 반환합니다.






  What can ASP do for you?

  - 웹 페이지의 내용에 대한 유동적인 수정, 변경, 또는 추가 

  - HTML 폼으로부터 사용자의 질의나 데이터 제출에 대한 반응

  - 데이터나 데이터베이스 접속과 브라우저에 결과 반환

  - 웹 페이지를 개인 유저에게 더 유용하게 커스터마이즈

  - CGI, Perl 대신 간결하고 빠른 이점

  - 보안 제공

  - 영리한 ASP 프로그래밍을 통한 네트워크 트레픽 최소화






















* 위 포스트는 w3schools 강좌를 통해 작성한 포스팅입니다.

'Web > ASP' 카테고리의 다른 글

[ASP] ASP 세션(Session)  (0) 2015.10.16
[ASP] ASP 쿠키(Cookie)  (0) 2015.10.02
[ASP] ASP Form  (0) 2015.10.02
[ASP] ASP 프로시저  (0) 2015.09.30
[ASP] ASP 변수  (0) 2015.09.30
[ASP] ASP 문법  (0) 2015.09.30
[ASP] ASP 소개  (0) 2015.09.29
Tagasp, html, 강좌

다른 카테고리의 글 목록

Web/ASP 카테고리의 포스트를 톺아봅니다
조회수 확인
JavaScript HTML DOM - Changing CSS

 


1. Changing HTML Style

 HTML 요소의 스타일을 변경하기 위해서 아래 문법을 사용합니다:

document.getElementById(id).style.property=new style


 아래 예제는 <p> 요소의 스타일을 변경하는 예제입니다:


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <body>
 
    <p id="p1">Hello World!</p>
    <p id="p2">Hello World!</p>
 
<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>
 
    <p>The paragraph above was changed by a script.</p>
 
    </body>
</html>
 
cs



 



 





2. Using Events

 HTML DOM은 이벤트가 발생했을 때, 코드를 실행하도록 허용합니다.

 이벤트는 HTML 요소에 어떠한 일이 발생할 때, 브라우저에서 생겨나는 것 입니다.
  - 요소가 클릭 되었을 때

  - 페이지가 로드 되었을 때

  - 입력 필드가 변경 되었을 때


 아래 예제는 id가 id1인 HTML 요소의 스타일을 버튼이 클릭 되었을 때 바꾸는 예제입니다:


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<!DOCTYPE html>
<html>
    <body>
 
    <h1 id="id1">My Heading 1</h1>
 
    <button type="button" 
    onclick="document.getElementById('id1').style.color = 'red'">
    Click Me!</button>
 
    </body>
</html>
 
cs




 






다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인

JavaScript HTML DOM

 HTML DOM에서, 자바스크립트는 모든 HTML 문서를 접근하고 변경 할 수 있습니다.





1. The HTML DOM (Document Object Model)

 웹페이지가 로드될 때, 브라우저는 페이지의 문서 객체 모델(Document Object Model)을 생성합니다.

 HTML DOM은 객체의 트리 형태 구조로 되어 있습니다:




 







  객체 모델에서, 자바스크립트는 동적인 HTML을 만들어서 모든 걸 가져올 수 있습니다:

   - 페이지 내의 모든 HTML 요소를 변경 할 수 있습니다.

   - 페이지 내의 모든 HTML 속성을 변경 할 수 있습니다.

   - 페이지 내의 모든 CSS 스타일을 변경 할 수 있습니다.

   - 존재하는 HTML 요소와 속성을 제거 할 수 있습니다.

   - 새로운 HTML 요소와 속성을 추가 할 수 있습니다.

   - 페이지 내의 모든 존재하는 HTML 이벤트에 대해 반응 할 수 있습니다.

   - 페이지 내의 새로운 HTML 이벤트를 생성 할 수 있습니다.







2. What You Will Learn

 아래와 같은 것을 배웁니다:

  - HTML 요소의 내용물을 변경

  - HTML 요소의 CSS 스타일 변경

  - HTML DOM 이벤트의 반응

  - HTML 요소의 추가와 삭제






3. What is the DOM?

 DOM은 W3C(World Wide Web Consortium) 표준 입니다.

 

 DOM은 문서의 접근을 위한 표준을 정의 합니다:



 "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."



 W3C DOM 표준은 3가지 부분으로 나뉘어 집니다:

  - Core DOM - 모든 문서 타입의 표준 모델

  - XML DOM - XML 문서의 표준 모델

  - HTML DOM - HTML 문서의 표준 모델







4. What is the HTML DOM?

 HTML DOM은 표준 객체 모델이고 HTML을 위한 프로그래밍 인터페이스 입니다:

  - 객체 로서의 HTML 요소

  - 모든 HTML 요소의 속성

  - 접근 가능한 모든 HTML 요소의 메소드

  - 모든 HTML 요소의 이벤트

다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인


JavaScript Events


 HTML 이벤트는 HTML 요소에서 발새하는 "사건"입니다.


 자바스크립트가 HTML 페이지에서 사용된다면, 자바스크립트는 이러한 이벤트에 반응 할 수 있습니다.



 

1. HTML Events

 HTML 이벤트는 브라우저가 하는 일 또는 사용자가 하는 일이 될 수 있습니다.

 

 HTML 이벤트의 몇 가지 예제:

  - HTML 웹 페이지가 로딩을 끝 맞췄을 때

  - HTML 입력 필드가 변경 되었을 때

  - HTML 버튼이 클릭 되었을 때


 

 종종 이벤트가 발생하면, 무언가 일을 하고 싶어합니다.


 자바스크립트는 이벤트가 감지되었을 때, 코드를 실행할 수 있게 해줍니다.


  

 

1
2
 
<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>
cs



 

1
<button onclick="this.innerHTML=Date()">The time is?</button>
cs







2. Common HTML Events



 

EventDescription
onchangeAn HTML element has been changed
onclickThe user clicks an HTML element
onmouseoverThe user moves the mouse over an HTML element
onmouseoutThe user moves the mouse away from an HTML element
onkeydownThe user pushes a keyboard key
onloadThe browser has finished loading the page

[ 출처: W3Schools ]








3. What can JavaScript Do?

 이벤트 핸들러(Event Handler)는 사용자의 입력, 행위, 브라우저의 행위를 다루거나 검증 할 수 있습니다:

  - 페이지 로드가 매 순간 끝났을 때

  - 페이지가 닫혔을 때

  - 사용자가 버튼을 클릭 했을 때

  - 사용자 입력 값을 검증 할 때

  - 등등.....


 여러가지 메소드는 이벤트와 함께 작동할 수 있도록 자바스크립트를 지원합니다:

  - HTML 이벤트 속성은 자바스크립트 코드를 바로 실행 할 수 있습니다.

  - HTML 이벤트 속성은 자바스크립트 함수를 호출 할 수 있습니다.

  - HTML 요소에 대한 이벤트 핸들러 함수를 할당 할 수 있습니다.

  - 이벤트가 보내지거나 다루어지는 것을 방지 할 수 있습니다.

  - 등등....










  

 


 



 

3. What can JavaScript Do?

 이벤트 핸들러(Event Handler)는 사용자의 입력, 행위, 브라우저의 행위를 다루거나 검증 할 수 있습니다:

  - 페이지 로드가 매 순간 끝났을 때

  - 페이지가 닫혔을 때

  - 사용자가 버튼을 클릭 했을 때

  - 사용자 입력 값을 검증 할 때

  - 등등.....


 여러가지 메소드는 이벤트와 함께 작동할 수 있도록 자바스크립트를 지원합니다:

  - HTML 이벤트 속성은 자바스크립트 코드를 바로 실행 할 수 있습니다.

  - HTML 이벤트 속성은 자바스크립트 함수를 호출 할 수 있습니다.

  - HTML 요소에 대한 이벤트 핸들러 함수를 할당 할 수 있습니다.

  - 이벤트가 보내지거나 다루어지는 것을 방지 할 수 있습니다.

  - 등등....


 

다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인

1. JavaScript Can Change HTML Content


HTML 메서드인 document.getElementById() 를 이용하여 HTML Content를 바꿔보도록 하겠습니다!

다음 예제는 HTML 요소(id="demo")를 찾기위한 메소드를 사용하고 "Hello JavaScript"로 요소 내용을 변경하는 예제입니다.

아래와 같이 HTML을 작성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<!DOCTYPE html>
<html>
    <body>
 
    <h1>What Can JavaScript Do?</h1>
 
    <p id="demo">JavaScript can change HTML content.</p>
 
    <button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">
        Click Me!
    </button>
 
    </body>
</html>
 
cs




그러고선 웹에서 실행합니다!






위와 같이 뜨면 버튼을 클릭하여 결과를 확인합니다.









이전 문구가 'Hello JavaScript!' 로 바뀌었죠??


document.getElementById().innerHTML 속성으로 해당 p 태그의 HTML text를 삽입 한 것입니다!!



2. JavaScript Can Change HTML Attributes


이번에는 이미지를 클릭시, 바꾸는 예제를 진행하겠습니다!



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!DOCTYPE html>
<html>
    <body>
 
    <h1>JavaScript Can Change Images</h1>
 
    <img id="myImage" onclick="changeImage()" src="bbb.jpg" width="200" height="180">
 
    <p>Click the image to change the image.</p>
 
    <script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bbb")) {
image.src = "aaa.jpg";
else {
image.src = "bbb.jpg";
}
}
</script>
 
    </body>
</html>
 
cs

 

 


실행하면 아래와 같이 나오는데, 클릭을 통해 확인합니다!











 


이번 예제는 이미 정의된 img 태그의 속성을 가져와서 
Script 내에서 제어를 하는 changeImage() 함수를 생성하여 이미지를 변경하는 예제입니다!

image 변수를 HTML의 아이디가 myImage로 된 태그로 매핑해주고,

이미지 소스의 값에 따라 if / else 로 변경합니다!







3. JavaScript Can Change HTML Styles (CSS)

이번에는 CSS 바꾸는 예제를 진행하겠습니다!


 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html>
<html>
    <body>
 
    <h1>What Can JavaScript Do?</h1>
 
    <p id="demo">JavaScript can change the style of an HTML element.</p>
 
    <script>
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";           
x.style.color = "red"
}
</script>
 
    <button type="button" onclick="myFunction()">Click Me!</button>
 
    </body>
</html
 
cs



버튼 누르기 전의 화면입니다.







버튼을 누르면 폰트 색과 사이즈가 변경이 됩니다!









4. JavaScript Can Validate Data

이번에는 값을 검사하는 예제를 진행하겠습니다!
값 검사는 패스워드 확인, 이메일 폼 확인 등등 여러 방식으로 많이 쓰이죠~




 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!DOCTYPE html>
<html>
    <body>
 
    <h1>JavaScript Can Validate Input</h1>
 
    <p>Please input a number between 1 and 10:</p>
 
    <input id="numb" type="number">
 
    <button type="button" onclick="myFunction()">Submit</button>
 
    <p id="demo"></p>
 
    <script>
function myFunction() {
var x, text;
 
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
 
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
 
    </body>
</html
 
cs



 









Script의 가운데 부분에 isNaN 과 숫자 입력값이 1 부터 10 사이인지 검사하는 if 문이 존재합니다!!

if /else에서 체크해서 text를 위의 첫 예제 방식으로 뿌려주는 것이지요~


5. JavaScript Can Hide HTML Elements

HTML 요소를 숨기는 것 또한 가능합니다.

1
document.getElementById("demo").style.display="none";
cs



W3schools의 JS 섹션을 참고로 작성했습니다!



다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인
jQuery - Set Content and Attributes

 


1. Set Content - text(), html(), and val()

 get과 마찬가지로 3 가지 메소드를 이용하여 설정합니다:

  - text()

  - html()

  - val()


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!DOCTYPE html>
<html>
    <head>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
    </head>
    <body>
 
    <p id="test1">This is a paragraph.</p>
    <p id="test2">This is another paragraph.</p>
 
    <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
 
    <button id="btn1">Set Text</button>
    <button id="btn2">Set HTML</button>
    <button id="btn3">Set Value</button>
 
    </body>
</html>
 
cs






 



 








2. A Callback Function for text(), html(), and val()

 text(), html(), val() 메소드는 또한 콜백(callback) 함수를 가지고 있습니다. 

 

 콜백 함수는 2 개의 파라미터를 갖습니다: 요소의 리스트에서 선택된 현재 요소의 인덱스 와 이전의 원본 값을 갖습니다.


 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"
});
});
 
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"
});
});
});
</script>
</head>
<body>
 
<p id="test1">This is a <b>bold</b> paragraph.</p>
<p id="test2">This is another <b>bold</b> paragraph.</p>
 
<button id="btn1">Show Old/New Text</button>
<button id="btn2">Show Old/New HTML</button>
 
</body>
</html>
 
cs



 





3. Set Attributes - attr()

 attr() 메소드는 또한 속성 값을 설정하거나 변경하는데 사용되기도 합니다.


 

1
2
3
4
 
$("button").click(function(){
    $("#w3s").attr("href""http://www.w3schools.com/jquery");
});
cs


 attr() 메소드는 여러 속성을 한 번에 바꾸는 것을 허용합니다.


 

1
2
3
4
5
6
$("button").click(function(){
    $("#w3s").attr({
        "href" : "http://www.w3schools.com/jquery",
        "title" : "W3Schools jQuery Tutorial"
    });
});
cs




4. A Callback Function for attr()

 attr() 메소드는 또한 콜백함수를 갖습니다. 




 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href"function(i, origValue){
return origValue + "/jquery"
});
}); 
});
</script>
</head>
<body>
 
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
 
<button>Change href Value</button>
 
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
 
</body>
</html>
 
cs






다른 카테고리의 글 목록

Web/jQuery 카테고리의 포스트를 톺아봅니다
조회수 확인
jQuery - Get Content and Attributes
 jQuery는 HTML 요소와 속성을 변경하거나 조작하는 강력한 메소드를 가지고 있습니다.





1. jQuery DOM Manipulation
 jQuery의 가장 중요한 부분은 DOM을 조작하는 가능성입니다.
 jQuery는 DOM 관련 메소드의 다양한 종류로, 요소나 속성을 조작하거나 접근하는데 용이합니다.
 





2. Get Content - text(), html(), and val()
 3 가지 간편하면서도 유용한 DOM 조작을 위한 jQuery 메소드:
  - text() - 선택된 요소의 텍스트 내용을 설정하거나 반환하는 메소드
  - html() - 선택된 요소의 내용을 설정하거나 반환하는 메소드
  - val() - 서식 필드의 값을 설정하거나 반환하는 메소드

 아래 예제는 text()와 html() 메소드가 어떻게 쓰이는지 보여줍니다:


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
    <head>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
    </head>
    <body>
 
    <p id="test">This is some <b>bold</b> text in a paragraph.</p>
 
    <button id="btn1">Show Text</button>
    <button id="btn2">Show HTML</button>
 
    </body>
</html>
 
 
cs




 









3. Get Attributes - attr()
 attr() 메소드는 속성 값을 가져오는데 사용됩니다.



 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html>
<html>
    <head>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
    </head>
    <body>
 
    <p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
 
    <button>Show href Value</button>
 
    </body>
</html>
 
cs

 




 


다른 카테고리의 글 목록

Web/jQuery 카테고리의 포스트를 톺아봅니다
조회수 확인


 

Web Building - Data as a Service (DaaS)


1. What We Will Do

 이번 장에서:
 - SQL이 구동중인 웹 서버로 부터 유동적인 데이터 인출을 합니다.


2. Using a PHP Server Running MySQL

 customers.html을 수정합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8"/>
  <title>Customers</title>
  <link href="site.css" rel="stylesheet">
</head>
 
<body>
 
<nav id="nav01"></nav>
 
<div id="main">
  <h1>Customers</h1>
  <div id="id01"></div>
  <footer id="foot01"></footer>
</div>
 
<script src="script.js"></script>
 
<script>
var xmlhttp = new XMLHttpRequest();
 
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
 
function myFunction(response) {
    var obj = JSON.parse(response);
    var arr = obj.records;
    var i;
    var out = "<table><tr><th>Name</th><th>City</th><th>Country</th></tr>";
    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" + 
        arr[i].Name +
        "</td><td>" +
        arr[i].City +
        "</td><td>" +
        arr[i].Country +
        "</td></tr>";
    }
    out += "</table>"
    document.getElementById("id01").innerHTML = out;
}
</script>
 
</body>
</html>
cs

 



 이번 장은 JSON 장과 마찬가지 입니다.


 그러나 이번 장에 쓰인 php는 "live"한 데이터베이스로부터 데이터를 인출한 것 입니다.


 



3. Using an ASP.NET Server Running SQL Server

 customers.html을 수정합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8"/>
  <title>Customers</title>
  <link href="site.css" rel="stylesheet">
</head>
 
<body>
 
<nav id="nav01"></nav>
 
<div id="main">
  <h1>Customers</h1>
  <div id="id01"></div>
  <footer id="foot01"></footer>
</div>
 
<script src="script.js"></script>
 
<script>
var xmlhttp = new XMLHttpRequest();
 
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
 
function myFunction(response) {
    var obj = JSON.parse(response);
    var arr = obj.records;
    var i;
    var out = "<table><tr><th>Name</th><th>City</th><th>Country</th></tr>";
    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" + 
        arr[i].Name +
        "</td><td>" +
        arr[i].City +
        "</td><td>" +
        arr[i].Country +
        "</td></tr>";
    }
    out += "</table>"
    document.getElementById("id01").innerHTML = out;
}
</script>
 
</body>
</html>
cs
 

 위의 PHP와 결과는 같지만, asp를 이용하여 인출하였습니다.



* W3School을 통해 제작된 강좌입니다.




다른 카테고리의 글 목록

Web/Web Building 카테고리의 포스트를 톺아봅니다