목록javascript (16)
꿈 많은 사람의 이야기
NaN 은 Not a Number 의 약자로 말 그대로 숫자가 아닌, 또는 될 수 없는 것들을 뜻한다. var x = 100 / "apple" 를 하게 되면 x 는 NaN이 된다. 하지만 var x = 100/"10" ; 을 하면 결과는 10이 나온다. 즉, 문자열이 숫자값으로 변환할 수 있으면 숫자로 변환해 계산을 해준다. var x = 100 / "apple" 을 하게 되면 x는 NaN 값이 나오게 되는데 이런 NaN 값을 체크 하는 것이 isNaN() 메소드이다. x를 isNaN() 메소드에 넣으면 -> isNaN(x) // true; 가 나오게 된다. 1 2 3 4 5 6 7 8 9 10 var dd =100/"Apple"; document.getElementById("demo").innerHTM..
자바스크립트 이벤트 자바스크립트에는 onclick과 같은 여러 이벤트가 있다. 다음 표를 보자 이벤트 종류 설명 onclick 해당 객체를 클릭 했을 때 이벤트 onmouseover 해당 객체에 마우스가 올라왔을때 이벤트 onmouseout 해당 객체에서 마우스가 나갔을 때 이벤트 onload 브라우저가 페이지 load를 끝냈을 때 onchange 객체가 바뀌었을 때(select 같은 태그에서) 다양한 이벤트가 있지만 대표적인 것은 이렇게 있다. 여기서 onmouseover와 onmouseenter의 차이점이 존재한다. 다음 그림을 보자. 이게 onmouseenter와 onmouseover의 큰 차이점이다. mouseenter는 해당 영역에만 적용이 되고 mouseover는 영역을 넘어서 자식에 해당되는..
매우 간단한 계산기 만들기 예제이다. 뭐 방법은 여러가지 방법이 있겠지만 본인은 본인 편한데로 했다 Title .btn{ width: 50px; height: 50px; font-size: 18pt; } #calc{ width: 150px; } input#result{ width: 150px; height: 30px; border: 1px solid blue; border-radius: 5px; } function getById(str) { return document.getElementById(str); } var result = getById('result'); var butns = getById('butns'); var arrEvent = new Array(); //배열을 생성한다. 여기에 각 아이..
object자바스크립트에는 object로 데이터를 관리할 수도 있다. name:value 값으로 데이터를 저장할 수 있다. var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; 위와 같이 말이다. 예제를 보자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName +" "+ this.lastName; } }; document.getElementById("demo").innerHTML = p..
자바스크립트를 이용해서 화면에 뭔가 써줄라면 document.write()를 이용하면 된다. document.write(5 + 6); 이런식으로 하면 된다. 제대로 봐보면 1 2 3 4 5 6 7 8 9 10 11 My First Web Page My First Paragraph. document.getElementById("demo").innerHTML =5+6; Colored by Color Scripter cs 와 같은 방식으로 객체에 접근을 해서 해당 HTML 을 5+6 즉 11의 값을 출력하게 해준다. innerText, innerHTML 그리고 innerText도 있는데 innerHTML 과의 차이를 한번 봐보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18..
자바스크립트는 뭐 다양한 기능이 존재하지만 기본적으로 HTML 태그의 id 값에 접근해서 DOM 객체를 생성한 뒤 해당 값에 접근하여 css, html text 값 등을 바꿀 수 있다. 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 Document button{ width: 100px; height : 50px; font-size: 18pt; } 안녕하세요 내용바꾸기 on off Colored by Color Scripter c s 위 예제처럼 말이다. 저 방식은 html 태그 안에 직접 써놓는 inline 방식인데 저렇게 써도 상관은 없지만 유지보수 측면에서 script 영역을 따로 설정하는 것이 좋다. 1 2 3 4 5..