[スパルタコードクラブ]ネットワーク開発総合クラス第1週

20937 ワード
テキストリンク
[カリキュラムの目標]
  • サーバとクライアントの役割について説明します.
  • HTML、CSSの基礎知識を知る.起動テープを持ってきます!
  • Javascriptの基礎文法を熟知しています.
    • 1)サーバ/クライアント/Webの動作概念
    私たちが見たページは、サーバー上で事前に準備した絵です.
    つまり,ブラウザの仕事は,1)リクエストの送信,2)受信したHTMLファイルの描画である.
    ここで、リクエストは、サーバが作成した「API」というウィンドウで所定の約束に従ってリクエストを送信します!
    例)https://naver.com/
    →「naver.com」という名前のサーバーで、「/」ウィンドウへのリクエストです!

    この顔はJSON形式!(データアップロード時のみ)
    2)CSS
    marginとpadding(→混同しないで!)
  • の余白は外側、paddingは内側の余白
    • である.
    この3つの命令は一緒に出します!
    △背景画像をより鮮明にするために!
    background-image: url('');
    background-position: center;
    background-size: cover;
    このコマンドは、中間にインポートすることもできます.
    ここでflex-direction:column;垂直に変更
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    作成した画面を中央に配置するコマンド
    widthにmarify:autoを使います!
    それもだめなら?display:blockを追加!
    3)フォント、注釈、ファイルの分離
  • Googleフォント
    • を使用
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    <head> ~ </head>の間に置く
    まだあります.
    *{
    font-family: 'Jua', sans-serif;
    }
    これを<style> ~ </style>に入れればいいです.

  • ここで*{}はCSSをHTML全体に適用することを示しています!!

  • コメントコメントコメントコメントする場所を指定し、+/を制御すると、その場所は完全なコメントになります!

  • ファイルの切断<link rel="stylesheet" type="text/css" href = "(css파일이름).css">これをhead takeに入れればいい!
    • 4)ガイドバー
    ガイドテープとは?きれいなCSSを事前に集める(CSSの使い方を知ったり、美感できれいにしたりするのは別のことなので、現在の業界では予め完成したガイドバーが使われています.)
    5) JAVASCRIPT
    まず変数を宣言する場合はlet変数名を使用して宣言します
    let num = 20
    num = 'Bob'
    //変数は値を格納するボックスです.
    //一度宣言した場合は、再宣言せずに値を入力します.

  • 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를 출력

  • バイナリ:キー-Valueのセット
    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}을 출력

  • リストとディックシャナリーの組み合わせ
    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 myemail = '[email protected]'
    let result = myemail.split('@')//['sparta','gmail.com']
    result[0]//sparta
    result[1]//gmail.com
    let result2 = result[1].split('.')//['gmail','com']
    result 2[0]//gmail->知りたい!
    result2[1]//com
    myemail.split('@')[1].split(".")[0]//gmail->も簡単に使えます!
  • 関数
    • // 만들기
function 함수이름(필요한 변수들) {
	내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
    // 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
	console.log('숫자', num1, num2);
	return num1 + num2;
}

sum(3, 5); // 8
sum(4, -1); // 3
    条件文
  • function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else if (age > 10) {
		alert('청소년이에요')
	} else {
		alert('10살 이하!')
	}
}

is_adult(12)
  • 複文
    • 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가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
  • 複文例題(重要!常用)
    • 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점 미만인 사람들의 이름만 출력할 수도 있습니다.
    JAVA|Classとは?
    データアップロードの無効化