복습
~DTD : Document Tag Definition : 태그 정의 파일
데이터를 저장하는 파일
- DBMS : 시스템에서 데이터 타입 정의
- ~ML : 태그로 저장 -
<tag>data</tag> - JSON : JavaScript Object Nation -
{key:value,key:value...} - CSV : Comma-Separated Values - 쉼표로 구분해서 순서에 맞게 데이터 나열.
- property :
key=value-URL url?key=value & key=value...
request.getParameter("key")- 한개 : 데이터를 찾으면 더이상 찾지 않는다. id 지정과 같음.
request.getParameterValues("key")- 여러개 : 끝까지 계속 찾는다.
<HTML> 태그 보여지는 속성
- text : inline 속성 -
<a><b><span><strong><sub><sup><i><p> - box : block 속성 -
<table><div>->Semantic 태그 요소들,<h1> - block & inline -
<img>
HTML - 데이터 표시
CSS - 디자인
JavaScript - 동작
- HTML과 CSS : HTML 먼저 처리 -> 그 다음 CSS 처리 된다.
- HTML과 JS : 순서대로 동작한다. JS가 위에 있으면 JS 먼저 동작한다.
그래서 JS는 실행 위치를 잘 잡아야 한다.
HTML - 정적
<!DOCTYPE html> - html5를 쓰겠다. (5보다 낮은 버전은 DTD를 선언 해야 한다.)
<html> - 시작
</html> - 끝
웹프로그램 - 정적 페이지(HTML), 동적 페이지 (JSP, ASP, PHP 등)
동적 -> HTML 코드를 만들어 낸다. (출력 : 서버에서 클라이언트 쪽으로 전송)
JSP 기본 객체 : 생성하지 않더라도 쓸 수 있는 객체
response(서버->클라이언트)response.println()
respons.sendRedirect("url?key=value&key=value")
-> 클라이언트[window.]location.[.href]에 url를 저장해라. -> 페이지 이동.[]안은 생략 가능.request(클라이언트->서버 : URL + Header + body)
수업내용
DOM (Document Object Model)
BOM (Browser Object Model)
window.document.getElementById("header");
is the same as : document.getElementById("header")
-기본적으로 window에서 동작을 하니까 window는 생략 가능
JS 공부할 때는 기본적으로 Id에 해당하는 되는 것을 구현하게 된다.
window.innerHeight 내 창의 전체 높이
window.innerWidth 내 창의 전체 너비
-높이와 너비를 계산해서 창의 위치 가운데에 띄울 수 있다.
window.open() 새로운 window를 연다. ex) 아이디 중복 체크 할 때
window.close() 창을 닫는다.
ex) 우편번호 때문에 창을 열었다가 우편번호를 선택하면 데이터를 전달하고 창을 닫는다.
window.location.protocol() protocol을 저장 (http: or https:)
window.history.back() 이전으로
window.history.forward() 앞으로
-> 두칸 이상 가게 되면 go를 쓴다. ex)-2는 두 칸 뒤로
JavaScript Cookie
클라이언트 쪽에 저장하는 것을 cookie라 하고 서버쪽에 저장하는 것을 Session이라고 한다.
클라이언트 쪽에 session을 달라고 요청 할 수는 없다. 접근이 안된다.
cookie는 클라이언트, 서버 쪽 둘 다 접근이 가능하다.
로그인 체크나 처리 같은 것은 클라이언트쪽이 아니라 서버쪽. session, cookie 둘 다 저장 가능.
AJAX
비동기 통신. 서버에 데이터를 요청해서 받아와서 URL을 바꾸지 않고 일부의 데이터를 바꾼다.
iframe은 url이 있고 AJAX는 url이 있는게 아니라 document에 대한 데이터가 바뀌는 것. 두개 다름!
앱을 이용하게되면 브라우저가 없더라도 서버에서 데이터를 불러 올 수 있다. 이 때 사용하는 것이 AJAX 이다.
이 때 가져오는 데이터는 xml cvs 등 이다. 서버쪽에서는 이런것을 줄 수 있는 데이터를 만들어야 한다.
JSON
JavaScript Object Notation
ex) {"name":"John", "age":30, "car":null}
let personName = obj.name;
obj={} 'obj는 JSON 데이터 입니다.' 라는 뜻.
obj.name="John"; 이렇게 쓰면 name이 없지만 name이 생긴다.
자바 스크립트는 변수를 선언하지 않고 사용할 수 있다. (자바와 다름. 자바와 관계 없음)
컴파일을 한 줄 단위로 번역을 한다. 그래서 중간에 오류가 나면 그 밑은 실행하지 않는다.
JSON vs XML
Both JSON and XML can be used to receive data from a web server.
The following JSON and XML examples both define an employees object, with an array of 3 employees:
CSS
예쁘게 꾸미는 것 (디자인) / 대상(선택자) - 스타일 데이터
<style type="text/css">
선택자(tag, .class, #id)
{property : value; property : value; ...}
</style>tag 안에
-> data 안에
-> attribute -> style : 저장이 된다. -> property (color, margin 등..)
선택자를 잘 선택해야 동작이 제대로 된다.
<tag style="property:value">
<link rel="stylesheet" href="url"><link~>... link 태그 여러개를 붙여서 쓸 수 있다.
태그 안에 들어간 style이 가장 우선 순위로 적용이 된다.
상위 태그 선언 -> 하위 태그로 상속 : 하위태그에서 선언하면 상속된것이 무시된다.
link태그와 style 태그는 동등한 입장이므로 적용 해 봐야 안다. 덮어쓸 수도 있고.. 아닐수도 있고..?
JavaScript
받아적은 것
AScript -> BScript -> JavaScript
버전 업그레이드 할 때 마다 이름을 바꿨는데
그 때 당시 가장 잘 나가는 언어를 앞에 붙여서 JavaScript가 되었다.....(띠용) 자바와 관계 없음.
Script - text를 모아 놓은 것. 명령어를 text로 만들어 놓은 것을 저장한 것.
처리 할 때 - 한 줄을 불러온다. 세미콜론;이 나온 곳 까지 혹은 마지막 까지 불러온다.
; : 명령어와 명령어를 분리하는 역할을 한다. 그래서 마지막 명령문은 생략 가능 하다.
HTML처럼 차례대로 실행된다. 구성상 HTML 태그 밖에 쓸 수도 있다.
JavaScript의 위치는 아무곳이나 가능하지만 위에서부터 아래로 처리된다는 것을 명심해야 한다.
아무곳이나 위치 시켜서 Script라고 표시만 하면 된다. -> <script>~</script> 태그 사용
<script type="text/javascript" lang="javascript">
type 속성을 생략하면 기본적으로 javascript를 의미하므로 생략 가능하지만 (type, lang 둘 중에 하나만 써도 되지만) script를 여러개를 사용 할 경우나, javascript를 제외한 다른 script를 사용할 경우에는 생략 하면 안된다.
거의 대부분의 데이터를 전부 변경할 수 있다. (보안에 관련된 정보가 아니라면)
JavaScript Tutorial
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html> 
선생님 설명
<script>
명령어;
명렁어
</script>아무 위치에서 사용 할 수 있다. HTML과 JS는 실행 처리가 위에서 아래로 순서대로 실행된다.
document.write(); window.alert();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS - HTML 태그 출력</title>
<!-- 여기서 쓰는 코드는 JQuery 코드와 같다. -->
<script type="text/javascript">
// javascript 주석은 // - 한 줄 중에서 // 뒤에 있는 것은 주석, /* 범위 주석 */
// document.write() - body 태그 안에 마지막에 추가 시킨다.
// 원래 있던 body 태그 안에 데이터들은 뒤로 밀린다. -> 실행되는 순서대로 추가 시킨다.
document.write("<h1>JS - HTML 태그 출력</h1>"); // 1번
document.write("<h1>JS - HTML 태그 출력(2)</h1>"); // 2번
// 경고창을 띄울 때 사용. [window.]은 생략 가능.
// document와 window는 처리되는 객체가 다르기 때문에 alert 경고창이 먼저 뜨고 document 내용이 뜬다.
/* document 객체는 일단 document에 다 저장한 후에 css 처리를 하고 출력을 한다.
그런데 alert은 그럴 필요가 없어서 먼저 뜨는 것이다. */
// 코드가 길어서 오류를 잡기 힘들 때 개발자 확인용으로 쓰이기도 한다. 이 경우 나중에 주석처리를 한다.
window.alert("위에 있는 js 경고");
// 브라우저 - 검사 눌러서 console창에 뜨는 부분. 개발자가 데이터 확인용(오류확인용)으로 사용한다.
// 일반 사용자에게는 alert을 사용하고 개발자 확인용으로는 console을 사용하면 좋다.
/* 개발자 확인용으로 alert을 사용해도 되지만,
for문 같이 여러번 돌려서 여러개의 데이터를 확인 해야 할 때는 console을 사용하면 좋다.
코드가 완성되면 나중에 주석처리를 해주면 된다. java에서 sysout 처리 했던것과 비슷. */
console.log("보여줄 데이터는 100 입니다.");
</script>
</head>
<body>
<h1>body 안에 h1 태그</h1> <!-- 3번 -->
</body>
<script type="text/javascript">
document.write("<h1>JS - HTML 태그 출력(3)</h1>"); // 4번
alert("아래 있는 js 경고");
</script>
</html>
태그를 추가하는 프로그램
-버튼(대상)을 클릭하면(이벤트 - onclick 이라는 eventhandler 이용) h1태그가 추가가 된다. 또는 경고창이 뜬다. 또는 콘솔에 데이터가 뜬다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
button {
cursor: pointer;
}
</style>
<script type="text/javascript">
// 호출을 해야 실행되는 함수 선언.
function action() {
// js에서 문자열을 표시 할 때 -> [""] or [''] (쌍따옴표, 따옴표) 둘 다 가능.
// "(특수문자 쌍따옴표)를 출력하고자 하면 \" 라고 쓰면 된다.
alert("추가데이터");
}
/*
function action() {
// 함수의 변수명이 같다면 오류가 나지 않고 가장 마지막에 선언된 함수가 실행된다.
alert("추가데이터2");
}
*/
</script>
</head>
<body>
<!-- button 태그 안에 JS 코드를 넣어서 사용하기 -->
<button onclick="document.write('<h1>추가데이터</h1>')">document</button>
<button onclick="console.log('추가데이터')">console</button>
<button onclick="alert('추가데이터')">alert</button> <br> <hr>
<!-- 함수 호출 해서 사용하기 -->
<button onclick="action()">alert</button>
</body>
</html>
계산기
- 숫자 2개 입력 칸
- 결과 보여주는 칸
- 5칙 산술 연산하는 버튼을 클릭하면 계산이 되어서 결과가 보여야 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<script type="text/javascript">
function cal(code) {
// code라는 parameter를 전달 받아서 제대로 전달되어 찍히는지 확인하는 메서드
// alert(code);
// 숫자를 가져와야 한다.
// document.getElmentById("num1").value -> input tag안의 데이터를 가져온다.
// input tag안의 값은 value 속성에 저장된다.
// 타입이 문자열이라서 숫자로 변환 해 주었다. Number()
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
// 가져온 데이터 찍어보기
// alert(num1 + "," + num2);
var result = 0;
// code로 들어온 데이터 확인
if(code == "+") result = num1 + num2;
else if(code == "-") result = num1 - num2;
else if(code == "*") result = num1 * num2;
else if(code == "/") result = num1 / num2;
else if(code == "%") result = num1 % num2;
// 계산 결과 표시 -> 위치를 잡아야 한다.
// innerHTML : 선택된 태그 안(시작태그~끝태그)에 HTML로 넣을 때
document.getElementById("result").innerHTML = result;
// input 태그를 선택하고 그 안에 값을 세팅할 때 value 속성을 사용한다.
document.getElementById("resultInput").value = result;
}
</script>
</head>
<body>
숫자 1 : <input id="num1"><br/>
숫자 2 : <input id="num2"><br/>
<button id="plus" onclick="cal('+')">+</button>
<button id="minus" onclick="cal('-')">-</button>
<button id="multi" onclick="cal('*')">*</button>
<button id="divide" onclick="cal('/')">/</button>
<button id="remain" onclick="cal('%')">%</button><br/>
<div id="result"></div>
<input id="resultInput" readonly="readonly">
</body>
</html>색 바꾸기
p태그로 둘러싼 글자 색 바꾸기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>color</title>
<script type="text/javascript">
function changeColor(color) {
document.getElementById("text").style.color = color;
}
</script>
</head>
<body>
<button id="red" onclick="changeColor('red')">Red</button>
<button id="blue" onclick="changeColor('blue')">Blue</button>
<button id="orange" onclick="changeColor('orange')">Orange</button>
<button id="green" onclick="changeColor('green')">Green</button>
<p id="text">안녕하세요</p>
</body>
</html>callback 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>익명 함수의 사용</title>
<script type="text/javascript">
// function() -> 익명 함수.
// var func1 = function() {
// alert("익명함수 호출");
// }
// alert(typeof func1); // 출력값 : function
// 변수에 저장된 익명함수의 호출은 변수()로 한다. -> 변수에 저장된 처리문을 꺼내서 실행해라
// func1(); // 출력값 : 익명함수 호출
// parameter로 실행할 함수를 전달 받는다. -> 전달 받은 함수를 뒤에서 실행한다.
function action(func) {
// 전달받은 func의 타입이 함수가 아닐 수도 있으니까 if문을 써서 함수가 아니면 false를 return
if(typeof func != "function") {
alert("전달 되는 값이 함수가 아닙니다.");
return false;
}
// 전달받은 func의 타입이 함수면 처리문을 그대로 실행하게 한다.
alert("처리문");
var result = 100;
// 전달받은 함수를 실행하는 코드. callback 함수라고 한다.
func(result);
}
// action(10); // 출력값 : 전달되는 값이 함수가 아닙니다.
// 경고 창으로 결과를 출력하는 함수 호출.
action(function(result) {
alert(result); // 출력값 : 처리문 -> 100
});
</script>
</head>
<body>
<div id="result"></div>
</body>
<script type="text/javascript">
// div 태그 안에 데이터로 출력하는 함수 호출
action(function(result) {
// 위의 객체 중에서 찾는다. 현재 코드보다 아래에 있으면 찾지 못한다.
document.getElementById("result").innerHTML = result; // 출력값 : 처리문
});
// 콘솔에 로그로 결과를 출력
action(function(result){
console.log(result);
});
</script>
</html>