본문 바로가기
코리아 IT아카데미/grid·flex·mySql·jsp

14일차 | json 파일 만들기, 프로그램 설치, 다이나믹 웹 프로젝트 만들기

by Sharon kim 2021. 12. 2.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class_13</title>
    <script>
        // 객체 
        // let user = new Object(); // 객체 생성자 문법 
        // let user = {}; // 객체 리터럴 문법 

        let user = {       // 객체 
            name: "John", // 키 name , 프로퍼티 , 값 
            age: 30       // 키 age : 값 
            // 선언 
        };

        // 프로퍼티 값 얻기 
        // alert(user.name);

        user.isAdmin = true;
        // alert(user.isAdmin);

        // 프로퍼티 삭제 
        delete user.age;
        // alert(user.age);

        // 상수 객체 
        // 상수 객체는 수정될 수 있습니다. 
        // 주의하세요 const로 객체는 수정될 수 있습니다. 
        const user2 = {
            name: "John"
        }

        user2.name = "Pete";
        console.log(user2.name);

        // 대괄호 표기법  <---- 
        let user3 = {
            name: "John",
            age: 30,
            "likes birds": true
        };

        console.log(user3["likes birds"]);

        // set 
        user3["likes food"] = true;
        console.log(user3["likes food"]);

        // get 
        alert(user3["likes food"]);

        // delete 
        delete user3["likes food"];
        console.log(user3["likes food"]);


    </script>
</head>

<body>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class_14</title>
    <script>
        // JSON 
        // JavaScript Object Notation

        // 클라이언트 - 서버 
        //자바 스크립트로  -- 문자열로 변환 name : 토니,  , , 

        //객체 
        // Person 
        // 규칙, 약속, 표준, JSON 형식 
        // var person = {"height" : 180, "job" : "programmer"}
        //var members = ["홍길동", "김유신", "티모"];

        let student = {
            name: "Jon",
            age: 30,
            isAdmin: false,
            courses: ['html', 'css', 'js'],
            wife: null
        };

        // 객체를 문자열로 변경 --> JSON 형식을 가진 문자열로 변환한다. 
        // let json = JSON.stringify(student);

        // console.log(typeof json);
        // console.log(json);

        // 객체 {...}
        // 배열 [...]
        // 원시형 : 
        // 문자형
        // 숫자형
        // 불린형 
        // null


        // JSON.parse 
        // JSON으로 인코딩된 객체를 디코딩한다.
        // ㄴJSON으로  다시 객체로 만들어 준다. 
        let userData = '{"name": "John", "age" : 35, "isAdmin" : true, "friends" : [0, 1, 2, 3]}';

        // 다시 객체로 만들어 주는 과정
        let user = JSON.parse(userData);

        alert(user.name);
        console.log(user.friends[0]);



    </script>
</head>

<body>

</body>

</html>

설치프로그램

  • 이클립스 엔터프라이즈
  • 아파치 톰캣 

  • postman

이클립스 실행-다이나믹 웹 프로젝트 만들기 

window>web browser> 4. chrome 선택

window>preperences> enc 검색 후 UTF-8로 변경

run as 안되면 sever로 port번호 변경해주기

README.md파일 만들기

깃헙에 만든 서버(blog) 올리기

README.md 에 있는 DB파일 워크벤치에 넣고 실행

 

<ul class="menu">
	<!-- 절대경로 -->
	<li><a href="http://localhost:8001/myapp/project1/index.html">호스트가 되어 보세요</a></li>
	<!-- 상대경로 -->
	<li><a href="../project2/index.html">도움말</a></li>
	<li><a href="http://localhost:8001/myapp/project3/index.html">회원가입</a></li>	
	<li><a href="#">로그인</a></li>
</ul>

 

 

'코리아 IT아카데미 > grid·flex·mySql·jsp' 카테고리의 다른 글

16일차 | jsp1  (0) 2021.12.06
15일차 | jquery, http/서버 개념, postman으로 확인  (0) 2021.12.03
13일차 | Javascript, mySQL  (0) 2021.12.01
12일차 | JavaScript, SQL  (0) 2021.11.30
11일차 | sql  (0) 2021.11.29