[스토리지(Storage)]


· 웹스토리지는 클라이언트 컴퓨터에 데이터를 저장하는 메카니즘이다.

· 약 5MB 정도까지 저장이 가능하다.

· 쿠키보다 안전하고 속도도 빠르다.

· 데이터는 키/값(key/value)의 쌍으로 저장한다.


· localStorage 객체

- 만료 날짜가 없는 데이터를 저장한다.(영구보관)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function fn() {

            localStorage.setItem("name", "홍길동");

            localStorage.age=30;//localStorage.setItem("age", 30);

            localStorage['addr']="서울시 은평구";//localStorage.setItem("addr", "은평구");

        }

        function rfn() {

            console.log(localStorage.name);

            console.log(localStorage.getItem("age"));

            console.log(localStorage['addr']);

        }

    </script>

</head>

<body>

    <button onclick="fn()">저장</button>

    <button onclick="rfn()">읽기</button>

</body>

</html> 


· sessionStorage 객체

- 해당 세션이 종료되면 데이터가 사라진다.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function fn() {

            sessionStorage.name="이순신";

            sessionStorage.age=30;

        }

    </script>

</head>

<body>

    <button onclick="fn()">저장</button>

</body>

</html> 


· cookie는 document 속성

function fn() {

            document.cookie = "myname=홍길동;"

        } 


[Geolocation API]


· 사용자의 위치 정보를 얻기 위한 JavaScript API

· 관련 메소드는 window.navigator객체에 정의되어 있다.

· 현재 위치는 한번 얻는다.

- navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

· 위치 정보는 계속 확인한다.

- var watchId = navigator.watchPosition(successCallback, errorCallback, options);


http://mygeoposition.com/

저작자표시

'SK고용디딤돌' 카테고리의 다른 글

직무교육 15일차(jQuery)  (0) 2017.08.02
직무교육 14일차(HTML5 API)  (0) 2017.08.01
직무교육 12일차(DB연동)  (1) 2017.07.25
직무교육 11일차(웹어플리케이션 & ajax)  (0) 2017.07.24
직무교육 10일차(JavaScript)  (0) 2017.07.21

select * from student where name like '%순%';

- 이름에 순이 들어가는 컬럼 찾을 때


[name과 id 차이]

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Insert title here</title>

    <script>

        function fn() {

            xmlHttp=new XMLHttpRequest();//ajax

            xmlHttp.onreadystatechange=on_ready;

            s=`DBInsert.jsp?myname=${idname.value}&myage=${idage.value}`;

            xmlHttp.open("GET", s);

            xmlHttp.send();//submit

        }

        function on_ready() {

            if(xmlHttp.readyState==4 && xmlHttp.status==200){

                mydiv.innerHTML=xmlHttp.responseText;

            }

        }

    </script>

</head>

<body>

<div id="mydiv">표시</div>

이름 : <input id="idname" type="text" name="myname"><br>

나이 : <input id="idage" type="text" name="myage"><br>

<button onclick="fn()">button</button>

</body>

</html>


myname=${idname.value}&myage=${idage.value}`;

name은 파라미터 값 넘길 때 쓰는 키값

- ajax 사용해서 값 넘길 때

(id)=${id.value}&${id.value}

(name)=${id.value}&${id.value}

- form으로 값 넘길때

name을 사용해서 넘긴다.

XML, JSON, 문자열



cross domain 정책 : html에서 다른 서버의 html 읽을 수 없다.

저작자표시

'SK고용디딤돌' 카테고리의 다른 글

직무교육 14일차(HTML5 API)  (0) 2017.08.01
직무교육 13일차(HTML5 API)  (0) 2017.07.26
직무교육 11일차(웹어플리케이션 & ajax)  (0) 2017.07.24
직무교육 10일차(JavaScript)  (0) 2017.07.21
직무교육 9일차(JavaScript)  (0) 2017.07.20

[웹어플리케이션 아키텍쳐]

· Web Client

     (HTTP request / HTTP response)

· Web Server

· DB Server


[웹 프로토콜 - 통신절차]

· TCP(HTTP)는 3가지 절차를 통해 통신이 이루어진다.

(1) 세션 연결 ( 나는 너와 통신하고 싶다. )

(2) 데이터 송.수신 ( 웹 브라우저에 페이지 로딩 )

(3) 세션 종료 ( 통신 종료 )


<form method="get" action="test.jsp"> </form>

- method default : get(2,083 정도의 길이 데이터만을 처리한다.)


[HTTP Request]

· GET방식

- URL 뒤에 이어서 문자열로 서버에 전달을 한다.

- URL 뒤에 "?" 마크를 통해 URL의 끝을 알리면서, 데이터 표현의 시작점을 알린다. 

- URL에 정보가 그대로 노출되어 보안상 취약하다.

- 간단한 데이터를 넣도록 설계되어서 전송할 데이터의 제한이 있다.


· POST방식

- URL 뒤에 붙여서 보내지 않고 HTTP 바디에 데이터를 넣어서 보낸다.

- 정보를 드러내지 않아 GET방식 보다 보안에 유리하다.

- 전송할 데이터의 제한이 없다.


[HTTP Response]

· HTTP Status Code(응답코드) 종류

- 200번 : 요청성공

- 201번 : 원격지서버에 파일 생성

- 302번 : 페이지이동

- 304번 : 로컬 캐쉬정보이용

- 401번 : 인증실패

- 403번 : 접근금지

- 404번 : 페이지없음

- 500번 : 서버에러


//post 요청인 경우 header 들어가는 스트링

xmlHttp.setRequestHeader('Content-Type', "application/x-www-form-urlencoded;charset=utf-8");

- 설정 안해주면 한글 깨져서 null값이 출력된다.



<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

    

<%@ page import="java.sql.*" %>

<%

try{

Class.forName("org.gjt.mm.mysql.Driver");

out.print("driver load success"+"<br>");

}catch(Exception ex){

out.print("driver load fail"+"<br>");

}

String mysqlURL="jdbc:mysql://localhost:3306/test";

//sql database가 있는 url과 접속할 database명

String sID="root";

String sPass="1234";

String sql="insert into student(name, age) values ('홍길동', 30)";

Connection conn=null;

Statement stmt=null;

try{

conn=DriverManager.getConnection(mysqlURL, sID, sPass);

stmt=conn.createStatement();

stmt.execute(sql);

conn.close();

out.print("<h1>추가성공</h1>");

}catch(Exception ex){

out.print("<h1>추가실패</h1>");

}finally{

conn.close();

}

%> 


저작자표시

'SK고용디딤돌' 카테고리의 다른 글

직무교육 13일차(HTML5 API)  (0) 2017.07.26
직무교육 12일차(DB연동)  (1) 2017.07.25
직무교육 10일차(JavaScript)  (0) 2017.07.21
직무교육 9일차(JavaScript)  (0) 2017.07.20
직무교육 8일차(JavaScript)  (0) 2017.07.19

+ Recent posts

티스토리툴바