태그

2015년 2월 14일 토요일

1. 자바스크립트 소개(JS Introduction)

[참고] http://www.w3schools.com/js/js_intro.asp

자바스크립트는 세계에서 가장 인기있는 프로그래밍 언어이다.
이 페이지는 자바스크립트가 할 수 있는 몇 개의 예제를 포함한다.

자바스크립트는 HTML의 내용을 바꿀 수 있다.

많은 HTML 메소드들 중에서 하나인 document.getElementById().
이 예제는 id가"demo"인(id="demo") HTML요소를 찾고, 그것의 내용을 바꾸는(innerHTML을 사용하여) 예제다.

Example

document.getElementById("demo").innerHTML = "Hello JavaScript";

소스코드

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

실행결과

What Can JavaScript Do?

JavaScript can change HTML content.



자바스크립트는 HTML 속성을 바꿀 수 있다.

이 예제는 <img>태그의 src 속성을 바꿈으로써 HTML 이미지를 바꾼다.

The Light bulb


Click the light bulb to turn on/off the light

Try it Yourself »

 자바스크립트는 HTML 스타일들을 바꿀 수 있다. (CSS)

HTML 요소의 스타일을 바꾸는것은 HTML속성을 바꾸는 것의 변형이다.

Example

document.getElementById("demo").style.fontSize = "25px";

소스코드

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

실행결과

What Can JavaScript Do?

JavaScript can change the style of an HTML element.



자바스크립트는 데이터의 유효성을 검사할 수 있다.

자바스크립트는 종종 입력값의 유효성을 검사하는데 사용된다.

소스코드

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

실행결과

JavaScript Can Validate Input

Please input a number between 1 and 10:



넌 알고 있었니?

Note자바스크립트와 자바는 완전히 개념적으로나 디자인적으로나 다른 언어들이다.

JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.

ECMA-262 is the official name. ECMAScript 5 (JavaScript 1.8.5 - July 2010) is the latest standard.
작성자: 시간:
라벨:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)