JavaScript란? getElementById, InnerHTML, isNaN(), 변수선언등 기본 설명, 특징
JavaScript는 HTML과 Web 프로그래밍 언어이다.
객체 기반의 스크립트 프로그래밍 언어이며 웹 브라우저에서
주로 사용하지만 다른 응용프로그램의 내장객체에도 접근할 수 있는 기능을 가지고 있다.
자바와 자바스크립트는 그 이름은 유사하지만 전혀 다른 언어이다. syntax가 비슷한건
두 언어 모두 C에 기반을 두었기 때문이다.
자바스크립트는 1995년에 Brendan Eich에 의해 개발되었고 1997년에 ECMA 표준이 되었다.
JavaScript의 특징
1. HTML content의 내용을 변경할 수 있다.
HTML element를 찾는데는 getElementById를 사용하고 element content의 변경은 innerHTML을 사용한다.
예)
<!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>
-스크립트 설명
button의 onclick 이벤트를 보자. 버튼 클릭시
getElementById로 'demo' 를 찾아 innerHTML를 사용해 element 의 content를 'Hello JavaScript!'로 변경 하고 있다.
2.HTML Attribute들의 내용도 변경할 수 있다.
참고)
1. HTML내의 자바스크립트 선언은 <script>...</script> 내에서 한다.
2. 스크립트의 변수 선언은 var를 쓴다.
3. <head>, <body> 어니에나 사용할 수 있으나 <body>마지막에 쓰는것을 추천한다.
예)
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Can Change Images</h1>
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn on/off the light.</p>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
</body>
</html>
-스크립트 설명
<img>태그를 이용해 그림을 불러오는 소스이다.
그림을 클릭하면(onclick) changeImage() function을 실행해 그림을 변경한다.
그럼 chageImage() function을 보자.
image 변수를 선언해 'myImage'의 요소를 저장한다.
그리고 if 문을 사용해 그 요소중 src요소가 'bulbon' 과 같은것이 있다면(match)
src요소를 'pic_bulboff.gif'로, 다르다면 pic_bulbon.gif로 바꿔준다.
3. HTML style(CSS) 를 수정할 수 있다.
CSS를 수정할때는 style을 사용한다.
document.getElementById("element_name").style.바꿀style = 바꿀값
예)
<!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 styleChange() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
-스크립트 설명
버튼 클릭 시 'demo' element의 폰트사이즈와 색을 변경한다.
그럼 styleChange() function을 보자
'demo' element를 가져와 변수 x에 저장한다.
demo element style중 fontSize 를 25px를 변경하고, 색은 '빨강'으로 변경한다.
4. 유효성 검사를 할 수 있다.
참고)
내장함수 isNaN() 의 기능은 해당 값이 숫자인지 아닌지 판단할 때 사용한다.
주의해야 할 점은 숫자인 경우 false를, 숫자가 아닌경우 true를 반환한다는 점이다.
예)
<!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>
-스크립트 설명
x와 text 변수를 선언한다.
x변수는 numb 요소의 값을 가져와 저장한다.
if문으로 숫자가 아니거나 x가 1보다 작거나 10보다 크면
text변수에 "input not vaild"를 저장하고 아니라면 "input OK"를 저장한다.
그리고 "demo"요소의 content를 text변수로 변경해라.
w3schools.com의 내용을 참고하였습니다.
'Programing > JavaScript' 카테고리의 다른 글
| 자바스크립트 키워드란? 키워드 종류 javaScript Keywords (0) | 2015.07.14 |
|---|---|
| 자바스크립트 구문, 주의점 javaScript Statements (0) | 2015.07.14 |
| javaScript syntax 기본 문법, variables, operator, keywords, comments (0) | 2015.07.13 |
| 자바스크립트의 출력방식, javaScript Output, window.alert(), document.wirte(), innerHTML, console.log() (0) | 2015.07.12 |
| JavaScript 자바스크립트 작성 위치와 용법, 외부 스크립트의 장점, external javaScript (0) | 2015.07.12 |
댓글