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

7일차 | 자바스크립트 round 6~11, airbnb 클론 코딩

by Sharon kim 2021. 11. 23. 

<!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>자바스크립트 round_06.html</title>
    
</head>

<body onload="javascript: alert('홈페이지에 오신 것을 환영합니다.')">
    <div> ~~ 홈페이지 방문을 환영합니다. </div>
</body>

</html>

<script>

웹브라우저의 HTML문서 렌더링 과정

1. 불러오기 과정 (Loading)
로더가 서버로부터 전달 받은 리소스 스트림 읽는 과정, 읽으면서 어떤 파일인지,

데이터인지 파일을 다운로드할 것인지결정한다.

2. 파싱 (Parsing)
파싱이란: 문서를 파싱한다 -> 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것.
웹 엔진이 가지고 있는 HTML/XML 파서가 문서를 파싱해서 DOM tree를 만든다.

3. 렌더링 트리 (Randering Tree)란?
DOM Tree는 내용을 저장하는 트리로 자바스크립트에서 접근하는 DOM 객체를 쓸 때 이용하는 것.

4. CSS 스타일 결정
CSS는 선택자에 따라서 적용되는 태그가 다르기 때문에

모든 CSS 스타일을 분석해 태그에 스타일 적용하는 과정이다.

5.레이아웃 (Layout)
렌더링 트리가 생성될 때 위치나 크기를 가지고 있지 않기 때문에 객체들에게 위치와 크기를
정해주는 과정을 레이아웃이라고 한다.

6.그리기
렌더링 트리를 탐색하면서 그린다.

 

CSS는 위에 Script(특히 실행하는 코드)는 가능한 아래에 작성하는 것이 성능에 좋다.

인터프린트 언어란?
위에서 아래로 순서대로 해석하는 언어-자바스크립트
컴파일언어-자바
</script>

질문클릭
확인 누르면 왼쪽, 취소 누르면 제법 버릇 없는 오른쪽

<!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>자바스크립트 round_07.html</title>
    <script>
        function question() {
            let ans = confirm('지금 비가 오나요?');
            if (ans == true) {
                alert("우산을 들고 나가세요");
            } else {
                alert("그냥 나가세요");
            }
        }
    </script>
</head>

<body>
    <form action="">
        <input type="text">
        <input type="button" value="질문" onclick="question()">
        
    </form>
</body>

</html>

허름한 a태그 클릭하면
난데없이 취조당하기, 마음은 항상 20살
만 19세로 인정받음 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>자바스크립트 round_08.html</title>
    <script>
        function inputData() {
            let name = prompt("이름 = ", "홍길동");
            let age = prompt("나이 = ", "20");

            document.write(name + "님! " + "<br>");
            document.write("당신의 만 나이는 " + (age - 1) + "세 입니다.");
            alert(name + "님 당신의 만 나이는 " + (age - 1) + "세 입니다.")
        }
    </script>
</head>

<body>
    <a href="#" onclick="inputData()">입력하기</a>

    </form>
</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>자바스크립트 round_09.html</title>
    <script>
        function aaa() {
            document.write("매개변수가 없는 함수 <br>");
        }
        function bbb(x, y) {
            document.write(x + "값과" + y + "값이 전달된 함수 호출 <br>");
        }

        function ccc(z) {
            document.write(z + "값에 100을 덧셈해서 되돌려 주는 함수 <br>");
            return z + 100;
        }
    </script>
</head>

<body>
    <h1>스크립트 테스트</h1>
    <script>
        aaa();
        bbb(23, 19);
        let returnValue = ccc(80);
        document.write("return value : " + returnValue);
    </script>
</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>자바스크립트 round_10.html</title>
    <script>
        function info() {
            let jumin = prompt("주민번호 (xxxxxx-xxxxxxx)", "");
            if (jumin.charAt(6) != "-") {
                alert("주민번호 형식이 잘못 됨");
            }

            let b = jumin.charAt(7);
            let d = "";
            switch (b) {
                case '1': d = "남성"; break;
                case '2': d = "여성"; break;
            }
            alert("성별 : " + d);
        }

        // function info() {
        //     let jumin = prompt("주민번호 (xxxxxx-xxxxxxx)", "");
        //     if (jumin.charAt(6) != "-") {
        //         alert("주민번호 형식이 잘못 됨");
        //     } else {
        //         let b = jumin.charAt(7);
        //         let d = "";
        //         switch (b) {
        //             case '1': d = "남성"; break;
        //             case '2': d = "여성"; break;
        //         }
        //         alert("성별 : " + d);
        //     }

        // }
    </script>
</head>

<body>
    <a href="#" onclick="info()">주민번호</a>
</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>자바스크립트 round_11.html</title>
    <script>
        function showGugudan(a) {
            for (let i = 1; i <= 9; i++) {
                document.write(a + " * " + i + " = " + (a * i) + "<br>");

            }
        }
    </script>
</head>

<body>
    <script>
        let dan = prompt("구구단 몇단을 출력할까요?")

        showGugudan(dan);
    </script>
</body>

</html>

생님이랑 한 Airbnb 클론 코딩 다시 한번 더 해보기

spring할 때 그리드를 잘 다뤄야하기 때문

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

9일차 | flex , SQL  (0) 2021.11.25
8일차 | flex 정렬/wrap, 노드.js설치/사용, 자바스크립트 이론  (0) 2021.11.24
6일차 | 그리드 예제 최종, 자바스크립트 round1~5  (0) 2021.11.22
4,5일차 | code_grid3  (0) 2021.11.19
3일차 | class_grid2  (0) 2021.11.19

관련글

티스토리툴바