●자바스크립트 JSON(JavaScript Object Notation)

- JSON은 원래 자바스크립트 데이터 객체이다.


- JSON이란 데이터를 표현함에 있어 xml보다 더욱 단순하고 객체 표현방식이 기존의 개발자들에 익숙한 {객체표기법}을 따르므로 데이터 처리가 쉽다.





●예제

- text.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR" 

   pageEncoding="EUC-KR"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script>


var rabbit = {

name:"토끼",

age:"22",

like:["당근","풀"],

isBool:true,

father:{

name:"토끼아빠",

age:"50"

},

friend:[

   {

name:"토끼친구1",

age:"22"

},

{

name:"토끼친구2",

age:"22"

}

]

}

document.write("이름:"+rabbit.name+"<br>");

document.write("나이:"+rabbit.age+"<br>");

document.write("논리:"+rabbit.isBool+"<br>");

document.write("like1:"+rabbit.like[0]+"<br>");

document.write("like2:"+rabbit.like[1]+"<br>");

document.write("아빠이름:"+rabbit.father.name+"<br>");

document.write("아빠나이:"+rabbit.father.age+"<br>");

document.write("친구1:"+rabbit.friend[0].name+"<br>");

document.write("친구2:"+rabbit.friend[1].name+"<br>");


</script>

</head>

<body>

</body>

</html> 








Posted by -현's-

댓글을 달아 주세요


●팝업창에서 부모창에 있는 자바스크립트 함수 호출

- opener.자바스크립트함수();



●하위프레임에서 상위프레임에 있는 자바스크립트 함수 호출

- parent.자바스크립트함수();

Posted by -현's-

댓글을 달아 주세요


●사용자 모니터 크기 구하기


<html>

<head>

</head>

<body>

<script type="text/javascript">


var w = screen.availWidth;

var h = screen.availHeight;


alert("w:"+w+"px h:"+h+"px");


</script>



</body>

</html>









●브라우저 크기 구하기


<html>

<head>

</head>

<body>

<script type="text/javascript">


var w = document.body.clientWidth;

var h = document.body.clientHeight;


alert("w:"+w+"px h:"+h+"px");


</script>



</body>

</html>

 
















Posted by -현's-

댓글을 달아 주세요


●예제

- select 에서 값을 선택하면 우측 select에 값이 출력됨


<html>

<head>

</head>

<body>

<script type="text/javascript">

function chg() {

var val1=val2=val3="";

val1 = document.frm.select1.value;

val2 = document.frm.select2.value;

val3 = document.frm.select3.value;

for (i=0; i<document.frm.result.options.length; i++) {

document.frm.result.options[i].text = eval("val"+(i+1));

}

}

</script>


<form name="frm">

<select name="select1" size="5" onchange="chg();">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

</select>

<select name="select2" size="5" onchange="chg();">

<option value="A">A</option>

<option value="B">B</option>

<option value="C">C</option>

<option value="D">D</option>

<option value="E">E</option>

</select>

<select name="select3" size="5" onchange="chg();">

<option value="A1">A1</option>

<option value="A2">A2</option>

<option value="A3">A3</option>

<option value="A4">A4</option>

<option value="A5">A5</option>

</select>

<select name="result" size="3">

<option value=""></option>

<option value=""></option>

<option value=""></option>

</select>

</form>



</body>

</html>

 












Posted by -현's-

댓글을 달아 주세요


●예제


<html>

<head>

</head>

<body>


<script>


//2개만 체크되게 하기

function count_ck(obj){

var chkbox = document.getElementsByName("chk");

var chkCnt = 0;

for(var i=0;i<chkbox.length; i++){

if(chkbox[i].checked){

chkCnt++;

}

}

if(chkCnt>2){

alert("check NO");

obj.checked = false;

return false;

}

}

</script>


<form name="checkTest">

<input type="checkbox" name="chk" onClick="count_ck(this);"value="1" checked><br>

<input type="checkbox" name="chk" onClick="count_ck(this);"value="2"><br>

<input type="checkbox" name="chk" onClick="count_ck(this);"value="3"><br>

<input type="checkbox" name="chk" onClick="count_ck(this);"value="4">

</form>



</body>

</html> 


































Posted by -현's-

댓글을 달아 주세요


●예제


<html>

<head>

</head>

<body>


<script>


//요일 배열

var aday=new Array('sun','mon','tue','wed','Thu','Fri','Sat');

//Date 선언

var date = new Date();

//달 구하기

var month = date.getMonth()+1;

//요일 인덱스 구하기

var day=date.getDay();

//년+월+일+요일

var day = date.getFullYear()+'.'+month+'.'+date.getDate()+"("+aday[date.getDay()]+")";


alert(day);


</script>




</body>

</html> 



















Posted by -현's-

댓글을 달아 주세요


●자바스크립트와 html로 만든 차트 솔루션이다. 비상업용으로 사용할땐 무료이고 상업적으로 사용할땐 비용이 든다.(최소 90달러이상)


http://www.highcharts.com






●예제

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>하이차트 라인 기본</title>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">

$(function () {

  $('#chart1').highcharts({

  title: {

   text: '제목',

x: -20 //center

  },

          subtitle: {

             text: '부제목',

                x: -20

          },

  xAxis: {  //x축

           categories: ['가로1', '가로2', '가로3', '가로4', '가로5', '가로6']

},

      yAxis: {  //y축

           title: {

                   text: '단위 (°C)'

               },

               plotLines: [{   //선

                   value: 0,

                   width: 1,

                   color: '#808080'

               }]

           },

           tooltip: {

               valueSuffix: '°Cas'

           },

           legend: {  //범례

               layout: 'vertical',

               align: 'right',

               verticalAlign: 'middle',

               borderWidth: 0

           },

           series: [{   //값

               name: 'Tokyo',

               data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]

           }, {

               name: 'New York',

               data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0]

           },{

               name: 'New York2',

               data: [1, 2, 7, 3, 4, 10]

           }, {

               name: 'Berlin',

               data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0]

           }, {

               name: 'London',

               data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2]

           }]

       });

   });

    


</script>

</head>

<body>

<script src="../../js/highcharts.js"></script>

<script src="../../js/modules/exporting.js"></script>  <!--우측상단에 차트를 이미지로 출력할 수 있게하는 버튼을 넣는다.-->


<div id="chart1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


</body>

</html>






Posted by -현's-

댓글을 달아 주세요



●체크박스 하나만 선택되게 하기


<html>

<head>

<title>체크박스 하나만 선택하기</title>

<script type="text/javascript">

    function oneCheckbox(a){

        var obj = document.getElementsByName("checkbox1");

        for(var i=0; i<obj.length; i++){

            if(obj[i] != a){

                obj[i].checked = false;

            }

        }

    }

</script>

</head>


<body>

<form name="sendForm" method="get" >

    <input type="checkbox" name="checkbox1" value="a1" onclick="oneCheckbox(this)">a1

    <input type="checkbox" name="checkbox1" value="a2" onclick="oneCheckbox(this)">a2

    <input type="checkbox" name="checkbox1" value="a3" onclick="oneCheckbox(this)">a3

</form>

</body>

</html>










●체크박스 모두 선택, 해제


<html>

<head>

<title>체크박스 하나만 선택하기</title>

<script language="JavaScript">

<!-- 

function selectAll(checkFlag) { 

       var f = document.sendForm; 

       for(var i=0; i<f.elements.length; i++) { 

               if(f.elements[i].name == 'checkbox2'){ 

                       f.elements[i].checked = checkFlag; 

               } 

       } 

//--> 

</script>

</head>


<body>

<form name='sendForm'>

  <input type='checkbox' onclick='selectAll(this.checked);'>모두선택/해제

  <input type='checkbox' name='checkbox2' value='value1'>a1

  <input type='checkbox' name='checkbox2' value='value2'>a2

  <input type='checkbox' name='checkbox2' value='value3'>a3

  <input type='checkbox' name='checkbox2' value='value4'>a4

</form>



</body>

</html>





Posted by -현's-

댓글을 달아 주세요

 

 

●DOM 예제

- 페이지 리로드 없이 이미지 삭제하기

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>a a a</title>
</head>
<body>

<h1>a</h1>
<script type="text/javascript">

var imgFlag = "true";

function Test(){

var myDoc=document;
var myEle=myDoc.documentElement;

alert(myEle.nodeName);

var myEle2 = myEle.getElementsByTagName("head")[0];

if(myEle2 != null){
 alert(myEle2.nodeName);
 
 var titleElement = myEle2.getElementsByTagName("title")[0];
 var bodyElement = myEle2.nextSibling;
 
 while(bodyElement.nodeName.toLowerCase() != "body"){
  bodyElement = bodyElement.nextSibling;
 }
 
 if(imgFlag == "true"){
  if(bodyElement.hasChildNodes()){
   for(a=0; a<3; a++){
    var curNode = bodyElement.childNodes[a];
    if(curNode.nodeName.toLowerCase()=="img"){
     bodyElement.removeChild(curNode);
    }
    
    imgFlag = "false";
    
   }
  }
 }else{
  alert("aaa");
 }
 
  
}

}
</script>

<img src="al.png" />
<input type="button" value="click" onclick="Test();"  />

</body>
</html>

 

 

 

 

 

 

 

 

 

- 이미지 객체 테두리 굵기 속성 변경

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>b b b</title>

<script type="text/javascript">
function setSize(border){
 document.getElementById("Img1").style.borderWidth = border+"px";
 
}
</script>
</head>
<body>

<img id="Img1" src="al.png" style="border:5px solid red;" width = "100" height="100" >

<form name="myForm">
<input type="button" value="1" onclick="setSize(1);" >
<input type="button" value="50" onclick="setSize(50);" >

</form>

</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

- css 속성 변경

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function change(){
 var p = document.getElementById("a");
 var t = document.getElementById("b");
 
 p.style.color="green";
 p.style.fontSize = "30pt"
 
 t.style.color="yellow";
 t.style.fontSize = "100pt"
}
</script>
</head>
<body>

<p id="a" onclick="window.location.href = 'http://www.naver.com/' ;" >네이버 고고</p>

<h1 id="b">Hello World</h1>
<form>
<p><input value="click" type="button" onclick="change();"></p>
</form>

</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'프로그래밍 > java script' 카테고리의 다른 글

하이차트(highcharts) 기본 구조  (0) 2013.11.12
javascript 체크박스(checkbox) 하나만 선택, 모두 선택/해제  (0) 2013.11.05
javascript DOM2  (0) 2013.08.13
javascript DOM1  (0) 2013.08.12
java script 문법 정리 3  (0) 2012.03.22
java script 문법 정리 2  (0) 2012.03.21
Posted by -현's-

댓글을 달아 주세요

 

 

●DOM(Document Object Model) - 웹 페이지 화면을 구성하고 있는 모든 요소들에 대한 구조의 정의로, 화면에서 보이는 글이나 테이블, 그림, 내부 구조 스타일 등을 접근 가능하도록 정의해 놓은 것이다. DOM을 사용하게 되면 비동기식으로 처리된 데이터를 동적으로 화면에 접근시킬 수 있다.

 

 

 

 

 

●document 객체를 통해 웹페이지를 구성하고 있는 다양한 객체에 접근이 가능하다.

 

 

ex1)

 

 

 

 

 

 

 

 

 

ex2)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'프로그래밍 > java script' 카테고리의 다른 글

javascript 체크박스(checkbox) 하나만 선택, 모두 선택/해제  (0) 2013.11.05
javascript DOM2  (0) 2013.08.13
javascript DOM1  (0) 2013.08.12
java script 문법 정리 3  (0) 2012.03.22
java script 문법 정리 2  (0) 2012.03.21
java script 문법 정리 1  (0) 2012.03.21
Posted by -현's-

댓글을 달아 주세요