Web開発総合クラス-第1週

66244 ワード

サーバ/クライアント/Webの動作概念


私たちが見たページは、サーバーに事前に用意された「受け取る」「描く」です.
つまり,ブラウザが行うのは1)送信要求,2)受信したHTMLファイルの描画だけである.
しかし、1)どこにリクエストを送るのか.サーバが作成した「API」ウィンドウで、所定の要求に従って要求を送信する.
例)https://naver.com/
->naver.comという名前のサーバの'/'ウィンドウに要求されます.

以下に、データのみを受信する場合(この外観をJSON形式と呼ぶ)を示す.


HTMLは主にheadとbodyで構成されており、headにはページの属性情報が含まれ、bodyにはページの内容が含まれています.
headの代表的な要素:meta、script、link、titleなど
->ページのプロパティを定義するか、必要なスクリプトを呼び出します.
つまり、目に見えない必要なものを装う.
  • HTMLベース
  • <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>스파르타코딩클럽 | HTML 기초</title>
    </head>
    
    <body>
        <!-- 구역을 나누는 태그들 -->
        <div>나는 구역을 나누죠</div>
        <p>나는 문단이에요</p>
        <ul>
            <li> bullet point!1 </li>
            <li> bullet point!2 </li>
        </ul>
    
        <!-- 구역 내 콘텐츠 태그들 -->
        <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
        <h2>h2는 소제목입니다.</h2>
        <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
        <hr>
        span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
        <hr>
        a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
        <hr>
        img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
        <hr>
        input 태그입니다: <input type="text" />
        <hr>
        button 태그입니다: <button> 버튼입니다</button>
        <hr>
        textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
    </body>
    
    </html>
    htmlタグの最も重要なのは「誰が誰の中にいるか」を理解することです.

    CSSは<ヘッダ>~内に<スタイル>~で空間を作成する.
    mytitleという名前のクラスを指す場合、mytitle{...}このように書くことを忘れないでください.
    배경관련
    background-color
    background-image
    background-size
    
    사이즈
    width
    height
    
    폰트
    font-size
    font-weight
    font-famliy
    color
    
    간격
    margin
    padding
    marginとpaddingを混同しないで!
  • marginは外距離、paddingは内辺距離
  • divに色を入れてそのまま比較差異
  • を使用
    テキストスタイルを中央に配置します.
    width値にmarify:autoを使用
    それでもダメなら、display:blockを追加!
    Google Webフォントリンク
    Google Webフォントリンク
  • Nanum Gothicを例としてフォントを追加する場合は、以下の操作を行うだけです.
  • <!-- HTML에 이 부분을 추가하고 -->
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
    /* CSS에 이 부분을 추가하면 완성! */
    * {
    	font-family: 'Nanum Gothic', sans-serif;
    }
    👉 の部分が長すぎる場合は、ファイルを次のように分離できます.
    <!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
    <link rel="stylesheet" type="text/css" href = "(css파일이름).css">

    ガイドガイドガイド:きれいなCSSを集める


    ガイドテープ
    ガイドバーリンク
    スタートストリップスタートテンプレート↓
    <!doctype html>
    <html lang="en">
    
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    
        <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    </head>
    
    <body>
        <h1>이걸로 시작해보죠!</h1>
    </body>
    
    </html>

    JavaScriptの体験


    ~では、<スクリプト>~を使用してスペースを作成します.
    <スクリプトscript>~内にJavaScriptを作成します.
  • ボタンに関数を接続します.ボタンを押すと、関数が呼び出されます.
  • <button onclick="hey()" type="button" class="btn btn-primary">기사저장</button>

    JavaScript基礎構文

  • ウィンドウ:F 12
  • mac:alt(オプション)+command+i
  • console.log(変数)
    --
    console.log(변수), 콘솔 창에 괄호 안의 값을 출력해줍니다.
    개발자가 결과값을 보기 편하도록!
    
    console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요.
    아래를 복사해서 붙여넣어보세요.
    
    console.log("Hello World!");

  • 変数&基本演算
    	- 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!"
      (2를 a라는 변수에 넣는다)
    	- let으로 변수를 선언합니다.
          
  • let num = 20
    num = 'Bob'
                
    // 변수는 값을 저장하는 박스예요.
    // 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.
  • 4つの演算は、デフォルトで文字列を追加できます.
  •             let a = 1
                let b = 2
                
                a+b // 3
                a/b // 0.5
                
                let first = 'Bob'
                let last = 'Lee'
                
                first+last // 'BobLee'
                
                first+' '+last // 'Bob Lee'
                
                first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
  • 変数名は何ですか?
  •             let first_name = 'bob' // snake case라고 합니다.
                
                또는,
                
                let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠.
                
                과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
                다른 특수문자 또는 띄워쓰기는 불가능합니다!
  • List&DickShownery
    -リスト:順番に持つ形態.
  •             let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
                
                // 또는,
                
                let b_list = [1,2,'hey',3] // 로 선언 가능
                
                b_list[1] // 2 를 출력
                b_list[2] // 'hey'를 출력
                
                // 리스트에 요소 넣기
                b_list.push('헤이')
                b_list // [1, 2, "hey", 3, "헤이"] 를 출력
                
                // 리스트의 길이 구하기
                b_list.length // 5를 출력
  • バイナリ:キー(キー)-値(値)のセット
  •             let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
                
                // 또는,
                
                let b_dict = {'name':'Bob','age':21} // 로 선언 가능
                b_dict['name'] // 'Bob'을 출력
                b_dict['age'] // 21을 출력
                
                b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
                b_dict // {name: "Bob", age: 21, height: 180}을 출력
  • ListとDickShowneryの組み合わせ
  •             names = [{'name':'bob','age':20},{'name':'carry','age':38}]
                
                // names[0]['name']의 값은? 'bob'
                // names[1]['name']의 값은? 'carry'
                
                new_name = {'name':'john','age':7}
                names.push(new_name)
                
                // names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
                // names[2]['name']의 값은? 'john'
  • なぜ必要なの?
  • 順序を表示したり、情報を整理したりできます.
    前述の「スパルタフルーツショップ」は本当に人気があり、全国からお客さんが訪れています.待合表に記入するために、来た順番に名前と携帯電話番号を書きました.変数のみを使用:
            let customer_1_name = '김스파';
            let customer_1_phone = '010-1234-1234';
            let customer_2_name = '박르탄';
            let customer_2_phone = '010-4321-4321';
            ...(알아보기 힘듭니다.)
            
            👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다.
            let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
            let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};
            
            👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다.
            let customer = [
                {'name': '김스파', 'phone': '010-1234-1234'},
                {'name': '박르탄', 'phone': '010-4321-4321'}
            ]
            
    きれいに見えて、操作も簡単で、もう一人のお客さんが来ても.push関数は簡単な応答を提供します.
  • 基本関数
    -4つの演算に加えて、デフォルトで提供される関数も多数存在します.
  • これがあるような気がしますか?(たとえば、文字などを変更したい場合は、自分で作成しないでください.
    まずグーグルに行って探してみてください.
                **예를 들면, '나눗셈의나머지'를 구하고 싶은 경우**
                
                let a = 20
                let b = 7
                
                a % b = 6
                **, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
                
                let myname = 'spartacodingclub'
                
                myname.toUpperCase() // SPARTACODINGCLUB
                **, 특정 문자로 문자열을 나누고 싶은 경우**
                
                let myemail = '[email protected]'
                
                let result = myemail.split('@') // ['sparta','gmail.com']
                
                result[0] // sparta
                result[1] // gmail.com
                
                let result2 = result[1].split('.') // ['gmail','com']
                
                result2[0] // gmail -> 우리가 알고 싶었던 것!
                result2[1] // com
                
                myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!
                **특정 문자로 나누고 싶은 경우 2**
                
                let txt = '서울시-마포구-망원동'
                
                ****let names = txt.split('-'); // ['서울시','마포구','망원동']
                
                **특정 문자로 합치고 싶은 경우**
                
                let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)

    Javascriptの基礎文法を学ぶ(2)

  • 25)文法をもっと勉強しましょう!
  • 関数
  • 素顔
  •             // 만들기
                function 함수이름(필요한 변수들) {
                	내릴 명령들을 순차적으로 작성
                }
                // 사용하기
                함수이름(필요한 변수들);

  •             // 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
                function sum(num1, num2) {
                	console.log('num1: ', num1, ', num2: ', num2);
                	return num1 + num2;
                }
                
                sum(3, 5); // 8
                sum(4, -1); // 3
  • 条件文
    -20未満は小、20以上は大の関数
  •             function is_adult(age){
                	if(age > 20){
                		alert('성인이에요')
                	} else {
                		alert('청소년이에요')
                	}
                }
                
                is_adult(25)
  • if, else if, else if, else if else
  •             function is_adult(age){
                	if(age > 20){
                		alert('성인이에요')
                	} else if (age > 10) {
                		alert('청소년이에요')
                	} else {
                		alert('10살 이하!')
                	}
                }
                
                is_adult(12)
  • ANDとOR条件!
  •             // AND 조건은 이렇게
                function is_adult(age, sex){
                	if(age > 20 && sex == '여'){
                		alert('성인 여성')
                	} else if (age > 20 && sex == '남') {
                		alert('성인 남성')
                	} else {
                		alert('청소년이에요')
                	}
                }
                
                // 참고: OR 조건은 이렇게
                function is_adult(age, sex){
                	if (age > 65 || age < 10) {
                		alert('탑승하실 수 없습니다')
                	} else if(age > 20 && sex == '여'){
                		alert('성인 여성')
                	} else if (age > 20 && sex == '남') {
                		alert('성인 남성')
                	} else {
                		alert('청소년이에요')
                	}
                }
                
                is_adult(25,'남')
  • 繰り返し
    -たとえば、0から99に出力する必要がある場合!
  •             console.log(0)
                console.log(1)
                console.log(2)
                console.log(3)
                console.log(4)
                console.log(5)
                ...
                console.log(99)
                
                // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
  • 繰り返し文を使用して、次のように3行を出力します.
  •             for (let i = 0; i < 100; i++) {
                	console.log(i);
                }
                for (1. 시작조건; 2. 반복조건; 3. 더하기) {
                	4. 매번실행
                }
                
                1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
                -> 2체크하고 -> (괜찮으면) -> 4 -> 3
                -> 2체크하고 -> (괜찮으면) -> 4 -> 3
                -> 2체크하고 -> (괜찮으면) -> 4 -> 3
                
                와 같은 순서로 실행됩니다.
                i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
  • ただし、重複文は、上記の出力数に比べて、通常、リストとともに使用される.
    次の例は?下をコピーして貼り付け、一緒にエンコードします.
  • [コード断片]重複問題例1
  •                 let people = ['철수','영희','민수','형준','기남','동희']
                let people = ['철수','영희','민수','형준','기남','동희']
                
                // 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
                // i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
                for (let i = 0 ; i < people.length ; i++) {
                	console.log(people[i])
                }
  • リストもリストだけじゃない!ディック・シャナリーのリストとよく似合います.
    下のコピーを貼り直しましょうか?
    -[コード断片]重複問題例2
  •                 let scores = [
                    	{'name':'철수', 'score':90},
                    	{'name':'영희', 'score':85},
                    	{'name':'민수', 'score':70},
                      {'name':'형준', 'score':50},
                      {'name':'기남', 'score':68},
                      {'name':'동희', 'score':30},
                    ]
                let scores = [
                	{'name':'철수', 'score':90},
                	{'name':'영희', 'score':85},
                	{'name':'민수', 'score':70},
                  {'name':'형준', 'score':50},
                  {'name':'기남', 'score':68},
                  {'name':'동희', 'score':30},
                ]
                
                for (let i = 0 ; i < scores.length ; i++) {
                	console.log(scores[i]);
                }
                
                // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,
                for (let i = 0 ; i < scores.length ; i++) {
                	if (scores[i]['score'] < 70) {
                		console.log(scores[i]['name']);
                	}
                }
                
                // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.