スパルタコードクラブホームページ開発総合クラス第1週開発ログ

18993 ワード
JavaScript CSS 開発ログ Web開発総合クラス スパルタコードクラブ html テキストリンク

0.window条件ショートカットセット


-すべて選択:ctrl+A
-カット:ctrl+X
-コードソート:ctrl+alt+L
-インデント:Tab
-インデント解除:shift+Tab
-コメント:ctrl+/(再度ctrl+/を押すとコメントをキャンセルできます.)
-すべての切り替えをオン/オフにするショートカットキー:ctrl+alt+t
-改行:Shift+Enter

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


1-1. Webの動作概念(HTMLを受信する場合)


-私たちが見たページは、サーバー上で事前に準備された「受け取り」、「描き出す」です.
つまり,ブラウザが行うのは1)送信要求,2)受信したHTMLファイルの描画だけである.

1-2. Web上の動作概念(データのみを受信する場合)


-常にHTMLだけではありません.より多くの場合、データを下げるだけです.
-例:前売りチケットの場合、満席になるたびにシャットダウンしたときに見られるページが更新されると気まずいですよね?この時!データのみ受信して挿入する

2.HTML、CSSの基本内容


2-1. HTMLはスケルトン、CSSはデコレーション!


2-2. HTMLベース


1)HTMLは主にheadとbodyからなり,headにはページの属性情報が含まれ,bodyにはページの内容が含まれている.
2)headの代表的な要素:meta、script、link、title
3)bodyの代表的な要素に入る:
-開発者も全部暗記していません.必要なときに見つけて入れる
※ソートの重要性
コードが正しく整列していないと、コードの外観が認識されないため、エラーを解決するのは難しい.Ctrl+alt+L(macはcmd+alt+L)を使用して自動的にソート

3.ガイド、きれいなCSS集合


3-1. Bootstrapとは?


きれいなCSSを事前に集める(CSSの使い方を知ったり、美感できれいにしたりするのは別のことなので、現在の業界では予め完成したガイドバーが使われています.)

3-2. スタートストリップスタートテンプレート

코드를<!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> 입력하세요

3-3. ブートストラップアセンブリ(4.0)


https://getbootstrap.com/docs/4.0/components/alerts/

4.コメント


1)中間にインポートするには、width、marginも同様に使用します。

width: 500px;
margin: auto;

2)marginサイズは時計回りに並べます!


エッジ:px(上)px(右)px(下)px(左);

3）強制的に文章の属性を枠に設定する

display: block;

この3本の線はいつも一緒に歩く。

background-image: url(“);
background-position: center;
background-size: cover;

5)枠線と内部要素の間隔は、塗りつぶしによって制御されます。


6)spanが特定文字のサイズなどを作成したい場合。


5.Javascriptを味わう


JavaScriptとは?


-ブラウザが理解できるプログラミング言語です.
-クライアントがサーバに要求すると、サーバはクライアントに送信されます.
HTML+CSS+Javascriptを覚えていますか?
など常識!
Q.なぜブラウザでJavascriptしか聞き取れないのですか?HTMLでPythonやJavaなどの言語を使えますか?
A.それは不可能ではない.しかし、これは「歴史的理由&作成済みの標準」であるため、すべてのブラウザは基本的にJavascriptを理解できるように設計されており、すべてのWebサーバはHTML+CSS+Javascriptを提供しています.
Q.JavaとJavascriptの違いは何ですか?
A.インドとインドネシア.
海とゾウ...
何の関係もない.

2)JavaScriptベース


(1)HTML接続.ボタンをクリックすると警告ウィンドウが開きます
(2)関数の作成
function hey(){
	alert('안녕!');
}
<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성합니다.
(3)関数をボタンに接続する.
<button onclick="hey()" type="button" class="btn btn-primary">기사저장</button>

3)Javascriptの基礎文法を学ぶ(1)


3-1. Javascriptの基礎構文について
(1)Chrome開発者ツールを開き、Consoleタブで作成します.
マウスの右ボタン->チェック->コンソール(Check->Console)も簡単に使用できます.
Q.クロム開発者ツールコンソールウィンドウの意味は?
A.開発者用に作成したツールは、空白のページでJavaScriptをすばやくテストできます.更新すると消えてしまう事実!
  • ウィンドウ:F 12
  • mac:alt(オプション)+command+i
    • (2)console.log(変数)
    console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해줍니다.
개발자가 결과값을 보기 편하도록!

console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요.
아래를 복사해서 붙여넣어보세요.

console.log("Hello World!");
    3-2.変数&基本演算
    (1)変数
    1.letが何かするとこれは箱変数は値を入れる箱です.
    2.単一引用符で囲まれた文字列を含むこともできます.(二重引用符を使用できます)
    3.変数名を指定する場合は、適切な名前を付けます.他人が見ても分かりやすい.
  • 変数代入(a=2)の意味:「右のものを左に置く!」(aという変数に2を入れる)
  • let宣言変数
    let num = 20
num = 'Bob'
    • //変数は値を格納するボックスです.
    //一度宣言する場合は、再宣言せずに値を入力します.
    
-사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다.
    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//Bob 1->文字+数字を使用する場合は、数字を文字に変換して実行します.
    
- 변수명은 아무렇게나?
    let first name=“bob”//snake case.
    または、
    let firstName=“bob”//camel case.どの会社にもルールがあります.
    中に示すように、わかりやすく書くことが大切です.
    他の特殊文字やスペースは不可能です!
    
(2)리스트
- 리스트: 순서를 지켜서 가지고 있는 형태.
 리스트 자료형은 순서가 중요한 담기.
 
 let a_list = ['수박','참외','배']
 리스트는 이렇게 꺽쇠로 쓰는 거예요.

a_list[0]
'수박'
컴퓨터는 셀 때 0부터 세요. 그래서 0번째는 수박이고요.
    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,“hey”]出力
    //リストの長さを求める
    (3)딕셔너리:키(key)-밸류(value) 값의 묶음
딕셔너리형은 우리가 정말 일상 생활에서 많이 쓰는 거예요.
예를들면, 제가 너 생일이 언제니? 
이렇게 물어보면 그 생일이라는 단어에 대응되는 날짜를 우리가 얘기를 해달라는 거죠. 
다시 말하면, 생일이라는 키(key)값에 대응되는 밸류(value)값을 얘기해달라는 거예요.
    let a dict={}//ディック声明.変数名は勝手に取ることができます!
    //または、
    let b dict={"name":"Bob","age":21}//宣言可能
    b dict["name"//出力"Bob"
    b dict['age']//21出力
    b dict["height"]=180//dicksherryのキー:値を入れる
    b dict/{name:出力「Bob」、age:21、height:180}
    가지고 올 때는 [꺽쇠]로, 선언할 때는 {중괄호}로.
**(4)☆리스트와 딕셔너리의 조합**
    names = [{'name':'bob','age':20},{'name':'carry','age':38}]
    //names[0][name']の値は?bob'
    //names[1]の値は?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'
    
Q.왜 필요할까요?
A.순서를 표시할 수 있고, 정보를 묶을 수 있습니다.

앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름,  휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.

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)  Javascript 기초 문법 배우기(2)
4-1. 함수
--기본 생김새
    //作成
    function関数名(必要な変数){
    発行するコマンドを順番に作成
    }
    //使用
    関数名(必要な変数);
    --예시
    //関数は2つの数字を返した結果
    function sum(num1, num2) {
    console.log('num1: ', num1, ', num2: ', num2);
    return num1 + num2;
    }
    sum(3, 5);//8
    sum(4, -1);//3
    
4-2. 조건문
--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){
    もし(age>20&&性='女'){
    alert(「大人の女性」)
    }else if(年齢>20&性別=="男"){
    alert(「大人の男性」)
    } else {
    alert(「私は青少年です」)
    }
    }
    //注意:OR条件は以下の通りです.
    function is_adult(age, sex){
    if (age > 65 || age < 10) {
    alert(「搭乗不可」)
    }else if(年齢>20&性別='女'){
    alert(「大人の女性」)
    }else if(年齢>20&性別=="男"){
    alert(「大人の男性」)
    } else {
    alert(「私は青少年です」)
    }
    }
    is大人(25,「男」)
    
4-3. 반복문
--예를 들어 0부터 99까지 출력해야 하는 상황이라면!
    console.log(0)
    console.log(1)
    console.log(2)
    console.log(3)
    console.log(4)
    console.log(5)
    ...
    console.log(99)
    このように書くのはちょっと無理でしょう.だから、繰り返し文というものがある!
    --반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.
    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=[『哲秀』『英姫』『敏秀』『亨俊』『奇男』『東熙』]
    //これでリストのすべての要素を一度に出力できますよね?
    //iが1増加するにつれて、ユーザの要素を順次読み込むことができます.
    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},
    ]
    for (let i = 0 ; i < scores.length ; i++) {
    console.log(scores[i]);
    }
    //リストのディックシーケンスを1つずつ印刷できます.
    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]);
    }
    //リストのディックシーケンスを1つずつ印刷できます.
    【プログラマースキルポイント】——Linux
    linux常用コマンド個人メモ