꿈 많은 사람의 이야기

아래는 html 파일이다. Document 아래는 자바스크립트 소스 파일이다. 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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113..

자바스크립트에서 제공해주는 Math 기능은 다음과 같이 대표적인게 있다. 함수 또는 상수 설명 PI PI 상수. 3.141592....round( ) 가장 가까운 값을 반환 pow( ) 제곱 sqrt( ) 제곱근 abs( ) 절대값 ceil( ) 가까운 up의 수 floor( ) 가까운 down 수 sin( ) 싸인 함수 cos( ) 코싸인 함수 min( ) 최솟값 max( ) 최댓값 random( ) 0 ~ 1까지의 난수 생성 사용법은 아래와 같다. Math.PI; Math.round(4.7); // 5 가까운 값 Math.round(4.4); // 4 가까운값 Math.pow(8, 2); // 64 제곱 Math.sqrt(64); // 8 제곱근 Math.abs(-4.7); // 4.7 절대값 Mat..

자바스크립트에선 문자열을 숫자로 변경하는게 매우 간단하다. 애시당초 변수를 선언하고 숫자를 넣으면 숫자, 문자열을 넣으면 문자열 타입으로 넣을 수 있는거 자체가 간단하긴하다. var a = 10; //숫자형 var a = "abc";//문자열 형 하지만 문자열을 숫자로 바꿀 수 있는 방법이 있다. Number() 나 parseInt()를 이용하면 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 var x = true; Number(x); //1 x = false; Number(x); //0 x = "10"; Number(x); // 숫자 10 x = "10 20"; Number(x); //NaN(Not a Number) x = "afd"; Number(x); //N..

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..