빅데이터교육과정/WEB
DAY 3. Java Script 응용
Listeria
2021. 3. 3. 01:43
1. 세션이란?
네트워크에서 반영구적이고 상호작용적인 정보 교환을 전제로 하는 둘 이상의 통신장치나 컴퓨터, 사용자 간의 대화나 송수신 상태를 의미하는 보안적인 다이얼로그 및 시간대. 그래서 세션은 연결상태 유지 보단 연결 상태의 안정성을 중시하게 된다.
2. 쿠키란?
일종의 기록으로 사용자가 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일. 사용자가 같은 웹사이트를 방문할 때마다 수시로 읽히고 새로바뀐다. 소프트웨어는 아니기 때문에 프포그램 처럼 실행될수도, 바이러스를 옮길수도 악성코드를 설치할 수도 없다. 하지만 스파이 웨어를 통해 행동을 추적하거나 쿠키를 훔쳐 접근권한을 획득할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<script language = "javascript">
var numArray = new Array();
var saveArray = new Array();
var cnt=0;
function addArray(){
numArray.push(document.getElementById("input").value);
result.innerHTML=numArray;
document.getElementById("input").value="";
}
function shift(){
saveArray = numArray.shift();
result.innerHTML=numArray;
alert(saveArray);
}
function pop(){
saveArray = numArray.pop();
result.innerHTML=numArray;
alert(saveArray);
}
function reverse(){
saveArray = numArray.reverse();
result.innerHTML=numArray;
}
function sort(){
saveArray = numArray.sort(function(a, b) { // 오름차순
return a - b;});
result.innerHTML=numArray;
}
</script>
<body>
<input type="text" id="input">
<input type="button" onclick="addArray()" value="add to Array"><br>
현재 배열의 값 : <p id="result"><br>
<table>
<input type = "button" onclick="shift()" value="shift align">
<input type = "button" onclick="pop()" value="pop out"><br>
<input type = "button" onclick="reverse()" value="resverse">
<input type = "button" onclick="sort()" value="sort align"><br>
</table>
</body>
</html>배열을 입력하고 그 배열을 shift, pop, reverse, sort(오름) 순으로 정렬하는 코드
계산기 - HTML, JS 분리
<!DOCTYPE html>
<html>
<head>
<title>계산기</title>
<script type="text/javascript" src="calc.js"></script>
</head>
<body>
<form>
<input type = "text" id="display" ><br>
<input type="reset" value="clear">
<input type="button" value = "=" onclick="answer()"><br>
<table align="left" width ="150" cellpadding="2" cellspacing="2" border="2">
<tr>
<td><input type="button" value = "1" onclick="getNum(1)"></td>
<td><input type="button" value = "2" onclick="getNum(2)"></td>
<td><input type="button" value = "3" onclick="getNum(3)"></td><br>
</tr>
<tr>
<td><input type="button" value = "4" onclick="getNum(4)"></td>
<td><input type="button" value = "5" onclick="getNum(5)"></td>
<td><input type="button" value = "6" onclick="getNum(6)"></td><br>
</tr>
<tr>
<td><input type="button" value = "7" onclick="getNum(7)"></td>
<td><input type="button" value = "8" onclick="getNum(8)"></td>
<td><input type="button" value = "9" onclick="getNum(9)"></td><br>
</tr>
<tr>
<td><input type="button" value = "0" onclick="getNum(0)"></td>
<td><input type="button" value = "+/-" onclick="getNum('-')"></td>
<td><input type="button" value = "." onclick="getNum('.')"></td><br>
</tr>
</table>
<table align="left" width ="50" cellpadding="2" cellspacing="2" border="2">
<tr>
<td><input type="button" value = "+" onclick="getOp('+')"></td>
</tr>
<tr>
<td><input type="button" value = "-" onclick="getOp('-')"></td>
</tr>
<tr>
<td><input type="button" value = "x" onclick="getOp('x')"></td>
</tr>
<tr>
<td><input type="button" value = "/" onclick="getOp('/')"></td>
</tr>
</table>
<table align="left" width ="50" cellpadding="2" cellspacing="2" border="2">
<tr>
<td><input type="button" value = "x^y" onclick="getOp('x^y')"></td>
</tr>
<tr>
<td><input type="button" value = "sin" onclick="answer_sin()"></td>
</tr>
<tr>
<td><input type="button" value = "cos" onclick="answer_cos()"></td>
</tr>
<tr>
<td><input type="button" value = "tan" onclick="answer_tan()"></td>
</tr>
</table>
</form>
</body>
</html> var num1;
var num2;
var setOp;
function getNum(num){//display 되는 숫자를 받아오는 함수
var out = document.getElementById("display");
if(num!='-'){
display.value=out.value+num;
}else
{
display.value=Number(out.value)*-1;// +/-가 입력될때 토글 시켜주는 부분
}
}
function getOp(op){//연산자를 받아오는 함수
num1 = Number(display.value); //연산자가 입력되는 순간 입력되어있던 숫자를 num1에 저장
setOp = op;
display.value=""; //디스플레이 창을 초기화
}
function answer(){
num2=Number(display.value); //=이 입력 되는 순간 입력되어 있던 숫자를 num1에 저장
switch(setOp){ //연산자에 따라 연산을 수행
case '+' : display.value = num1 + num2; break;
case '-' : display.value = num1 - num2; break;
case 'x' : display.value = num1 * num2; break;
case '/' : display.value = num1 / num2; break;
case 'x^y' : display.value = num1**num2; break;
}
}
// 삼각함수를 연산하는 부분
function answer_sin(){
num1 = Number(display.value); //디스플레이 된 것을 숫자로 받아온다.
display.value=Math.sin((num1*Math.PI)/180);
}
function answer_cos(){
num1 = Number(display.value);
display.value=Math.cos((num1*Math.PI)/180);
}
function answer_tan(){
num1 = Number(display.value);
display.value=Math.tan((num1*Math.PI)/180);
}