●자바스크립트 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-

댓글을 달아 주세요

 

●Node.js

- 자바스크립트 기반 서버 개발 환경이다.

 

- 기본 웹 서버는 스레드를 기반으로 하는 동기 방식으로 네트워크 입출력을 처리 했다면,  Node.js는 이벤트 기반으로 하는 비동기 방식으로 네트워크 입출력을 처리한다.

 

- Node.js는 하나의 스레드만 생성한다. 따라서 메모리 사용량의 변화는 거의 없다. 그래서 대규모 네트워크 프로그램을 개발하기 적합하다.

 

 

 

 

 

 

●개발 환경 구축

 

- 아래 사이트에서 Node.js를 설치한다.

 

http://nodejs.org/

 

 

 

 

 

 

 

 

 

- 설치 후 설치가 제대로 되었는지 확인 하기 위해서 명령 프롬프트에 들어가서 node를 입력한다.

 

 

 

 

 

 

 

 

- colsole.log("Hello World");   를 입력해서 Hello World가 출력되는지 확인한다.

 

 

 

 

 

 

 

 

'프로그래밍 > Node.js' 카테고리의 다른 글

Node.js 개발 환경 세팅  (0) 2014.01.01
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-

댓글을 달아 주세요

 

●<body>안에 아래 태그를 입력한다.

- oncontextmenu='return false' - 우클릭방지
- onselectstart='return false' - 블럭선택방지
- ondragstart='return false' - 드래그방지

 

 

ex)

<body oncontextmenu='return false' onselectstart='return false' ondragstart='return false'>

 

 

 

 

Posted by -현's-

댓글을 달아 주세요