Programming/Javascript (23) 썸네일형 리스트형 Javascript 배경 색깔 자동 변경 소스 Javascript 배경 색깔 자동 변경 소스 html body 태그 백그라운드 색깔이 자동으로 변경되는 코드를 Javascript 소스를 간단히 작성해 보았습니다. jQuery를 활용하지 않고 순수 Javascript만으로 구현해 해당 소스를 복사해 .html 파일 확장자로 저장 하시고 브라우저에서 확인해 보시면 됩니다. 처음엔 색상 코드를 배열로 저장해 랜덤하게 뽑아내려고 했지만, 인터넷에 있는 자료 중 색깔 코드가 자동으로 생성되는 소스를 활용해 코드를 작성했습니다. 소스의 흐름은 간단합니다. change 함수가 무한 반복되며 실시간으로 랜덤하게 색상이 변경되는 모습을 보기 위해 1초에 한 번씩 코드가 실행 되도록 코드를 작성했습니다. 코드의 상세 내용은 주석에 있는 내용을 참고하시면 이해하실 수 .. JavaScript 오류 지점 찾아내기 JavaScript 오류 지점 찾아내기예전부터 소스코드를 칠때 JavaScript언어의 디버깅 때문에 많이 힘들었을 겁니다.물론 저도 마찬가지였고요. JavaScript 구문이 오류가 나면 예전엔 어는 부분에서 에러가 낫는지 찾기 힘들었습니다. 웹브라우져는 정상적으로 구동하는데 JavaScript 오류 구문 때문에 제대로 웹프로그램을 짤수 없었습니다.그래서 예전에는 의심이 가는 JavaScript 구문에 다음처럼 alert("어디까지왔니?"); 구문을 뛰워서 정상적으로 팝업창에 alert가 뜨면 거기까진 문제가 없다고 보고 점차 코드를 찍어서 일일이 확인 했습니다. 하지만 이제 웹 브라우져들의 기능이 강력해져 JavaScript언어에 흐름이 어디까지 갔는지도 체크 해볼수도 있고 디버깅 하기도 쉬워졌습니다.. JavaScript mouse event 컨트롤 JavaScript mouse event 컨트롤 메뉴 #menu div { font-size:20px; font-family:돋움; font-weight:bold; border:5px solid green; margin-bottom:1px; padding:5px; background-color:White; width:190px; } #sub1, #sub2, #sub3 { font-size:17px; font-family:돋움; font-weight:bold; border:3px solid pink; padding:5px; width:190px; background-color:White; position:absolute; display:none; } #sub1 { left:217px; top:8px; } .. Input, Naver 예제 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Input function Test() { //C# 이벤트 핸들러 인자 //1. object sender : 이벤트 발생 객체 //2. EventArgs args : 이벤트 부가 정보 //Javascript //1. event.srcElement //2. event //마우스 -> 좌표 //A. 문서의 좌측 상단이 기준(body) //alert(event.x + " : " + event.y); //B. 화면 기준. //alert(event.screenX + " : " + event.screen.. Form, DOM DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Form #list1 { width:600px; border:1px solid gray; border-collapse:collapse; } #list1 td { border:1px solid gray; font-size:12px; padding:2px; } #list1 #header { font-weight:bold; text-align:center; background-color:Yellow; } function Test(f) { //var txt1 = document.forms[0] //v.. Screen, Location, History, link, image ScreenDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Screen var w = window.screen.width; //해상도 너비 var h = window.screen.height;//해상도 높이 var aw = window.screen.availWidth; //실제사용가능한 너비 var ah = window.screen.availHeight; //실제 사용가능한 높이(작업표시줄 때문에 위 height보다 낮음) var c = window.screen.colorDepth;//디스플레이 색품질 32비트 색상 //alert(w + ".. JavaScript BOM, Event JavaScript BOM, Event BOM BOM function Test() { //1. 텍스트박스 찾기(BOM) // - BOM은 무조건 최상위객체인 window부터 시작해서 족보를 타고 원하는 객체까지 내려가는 방식 //var txt1 = window.document.form1.txt1; window 제외 가능하다. var txt1 = document.form1.txt1; //2. 제어(속성) // - txt1.value = new Date().toLocaleString(); //alert(txt1.value); //txt1.readOnly = true; //클릭시 읽기전용으로 //alert(txt1.type); //어떤 타입인지 확인 //txt1.type = "button";//타입 변환은 불.. JavaScript 조건문 사용방법 JavaScript 조건문 사용방법 조건문 //조건문 // var n = 10; // if (n > 0) // { // alert("양수"); // } // else if (n < 0) // { // alert("음수"); // } // else // alert("영"); //숫자(0이면 false, 0이 아니면 true) //문자열(""이면 false, ""이 아니면 true // if (num != 0) // { // alert("참"); // } // else // { // alert("거짓"); // } // var name = "홍길동"; // switch (name)// {// case "홍길동":// alert("과장");// break;// case "아무게":// alert("부장");/.. 이전 1 2 3 다음
