Week2 - JavaScript (9)

36832 ワード

生活コード深化1

JavaScript

:HTMLで実装されているページでは、一度に出力を変更することはできません.사용자와 상호작용하기 위해 나온 언어はJavaScriptです
*JavaScriptはHTML을 제어하는 언어:スクリプトラベル

<script>: html태그 중 하나로, 웹 브라우저에게 다른 언어가 나올 것이라고 알려주는 역할을 한다. 웹 브라우저는 script태그 안쪽의 내용을 JavaScript로 해석한다.

HTMLとJavaScriptの違い

<body>
 <h1>JavaScript</h1>
 <script>
   document.write(1+1);    // JavaScript의 출력문
</script>                     글자일 경우 " "안에 쓰기
<h1>html</h1>
1+1
</body>

実行結果:

JavaScript

html

1+1
->JavaScript出力動的言語で入力値を計算する「結果」
:イベント

  <body>
    <input type="button" value="hi" onclick="alert('hi')">
    <input type="text" onchange="alert('changed')">
    <input type="text" onkeydown="alert('key down!')">
  </body>

分析:

  <input>은 입력 폼을 만드는 태그, type을 버튼으로 하면 버튼이 생기고, 
  text로 하면 글자를 입력할 수 있는 네모 칸이 생성됨.
  value는 버튼안의 글자를 의미하고, onclick은 버튼 클릭 시 동작하는 이벤트이다.
  onclick안의 속성은 js만 넣을 수 있다.

  네모창안에 글씨를 넣고 커서를 바깥으로 뺄 때 onchange가 동작
  (✡︎네모 안의 내용이 최종적으로 달라진 상태로 커서를 빼야 onchange속성이 동작함.
    글씨를 쓰거나 지우더라도 수정하기 전과 결과가 똑같아진 상태로 커서를 빠져나오면
    onchange속성이 동작하지 X)

  onclick, onchange, onkeydown같은 것들을 event라 함
  이런 것들을 이용해 사용자와 상호작용하는 코드를 만들 수 있음

[注意]

JavaScript KeyDown Event Attribute
◦onKeyDown : 키를 눌렀을 때 이벤트 발생
            -> 키를 입력하면 이벤트 발생 후 문자가 입력됨.
◦onKeyPress : onKeyDown과 같은 이벤트
◦onKeyUp : 키를 눌렀다 놓았을 때 이벤트 발생
          -> 키를 입력하면 문자 입력 후 이벤트가 발생.

onKeyDown, onKeyUp은 Keycode값
onKeyPress는 ASCII값
✥onKeyPress는 ASCII값이기 때문에 Shift, ctrl, backspace, tab,
 한/영 등의 키를 인식하지 못한다.

:コンソール
右クリック->チェック->コンソールでJavaScriptを直接実行

alert('내용'.length) -> alert는 알림창을 나타나게 하는 명령어
                       length는 글자 수를 세어 줌.

  현재 켜져 있는 웹 페이지를 대상으로 명령을 실행하기 때문에 나의 필요에 맞게 코드를 짠다던지 해서 엄청나게 응용가능하다.
  ex) 페이스북에서 당첨자 골라내기
  검사페이지에서 esc누르면 console이랑 같이 띄울 수 있음

データ型-文字列と数値
Data types
◎Primitives
•Boolean
•Null
•Undefined
•Number
•String
•Symbol
◎Object

Number

  alert(1)             //
  undefined             //
  alert(1+1)            // 매번 alert("값")을 해줄 필요 없이 
  undefined             // 콘솔에서 바로 연산이 가능
  1+1
  2                     // + 는 앞의 값과 뒤의 값을 계산하는 연산자
  2-1                      -> 이항연산자
  1                     // + 는 산수를 하는 연산자이기도 함
  2*4                   // -> 산술연산자
  8                     // ex) +, -, *, /가 있음
  6/3
  2

String

  "Hello world"
  "Hello world"
  'Hello world'
  "Hello world"                      // 문자열은 나 ""로 묶어야함
  'Hello world'.length 
  11                                 // length는 문자열의 길이  
  'Hello world'.toUpperCase()        // toUpperCase()는 모든 글자를 
  "Hello world"                         대문자로 바꿔줌
  'Hello world'.indexOf('o')         
  4                                  // indexOf("찾는 문자열", 시작위치)
  'Hello world'.indexOf('world')        문자열을 찾은 뒤 해당 위치를 알려줌
  6
  '    hello    '.trim()             // trim : 공백을 없어준다
  "hello"

☆ Datatype 주의!!

  1
  1                 // 1은 Number
  "1"               // "1"은 String(문자열)
  "1"
  1+1
  2                 // 1+1은 숫자기 때문에 결과 값이 2
  "1"+"1"           // "1" + "1"은 문자열이기 때문에 11
  "11"

変数と代入演算子

  x = 1;
  1    
  y = 1;
  1                // x와 y를 변수(variable)라고 한다
  x + y;
  2
  x = 1000;        // = 는 대입연산자
  1000               : = 오른쪽의 값을 왼쪽에 넣는다는 의미
  x + y;
  1001
  1 ≠ 2;           // 1은 변하지 않는 상수(constant)이고, 값을 
  Uncaught            넣을 수 없기 때문에 오류가 난다
  ReferenceError

文の中の字を変換するときに一つ一つ変換すると、効率がありません.
->変数に値を入力して変更する場合は、複数の変数Oを一括置換できます.
+変数を書くときにvarを前に書きます!(表示変数)
Webブラウザ制御
実施例に必要な知識.
∙CSS属性
∙JavaScriptの構文
(制御するタグの選択方法)
CSSベース
1.スタイル属性を使用してCSSを使用する
-> 3.htmlファイルをex 3にコピーします.htmlの作成

  <body>
    ...
    <h2 style="color:powderblue">JavaScript</h2>
    ...    // 여기에 쓰인 style은 Html태그의 속성, " "안의 내용은 CSS
  </body>

タグの横のスタイルはHtmlタグの属性で、後のコードがCSSであることを示しています.
「」の内容はCSSのプロパティ(property)であり、これらのプロパティはstyleが存在するラベルに適用されます.

CSS背景色属性検索

<h2 style="background-color:coral;color:powderblue">...
         // background-color : 배경색 지정

スタイルラベルを使用してCSSを有効にする
生字したいからといってhラベルを複数回使ってはいけません<div>と<span>

が出てきました

 <div>: 어떠한 의미도 기능도 X
         CSS나 JavaScript에서 정보를 제어하기 위해 쓰는 태그
         h1같은 태그처럼 자동 줄 바꿈이 되는 태그
 <span> : div와 같은 기능의 태그지만 줄 바꿈이 되지 X
   >
   <div> block level element
   ---------------------------
   <span> inline level element

 <span style="font-weight:bold">JavaScript</span>
              // 글자를 진하게 설정

CSSセレクタ

<style>
  .js{
    fonts-weight: bold;
    color: red;
  }
  #first{
    color: green;
  }
</style>
  
>``` 
<span id="first" class="js">JavaScript</span>

     
실행결과 :

JavaScript

 글자 색은 **초록색**으로 나온다! -> **선택자 우선순위** 때문

[注意]選択者の優先度

   Id > Class > Tag
•같은 종류의 선택자끼리는 가장 마지막에 오는 것이 적용된다.
•class선택자가 id선택자보다 더 포괄적이다.
 여러 개를 묶을 때는 class선택자를 사용하는 것이 좋다.
•id선택자는 유일하다는 의미이므로 웹 페이지에 한번만 등장

プロパティを目的の場所に正確に適用するには、選択者を理解する必要があります.
制御するタグ

を選択する.

<body>
 ...
 <input type="button" value="Night" onclick="
    document.querySelector('body').style.backgroundColor='black';
    document.querySelector('body').style.color='white';
 ">
 <input type="button" value="Day" onclick="
    document.querySelector('body').style.backgroundColor='white';
    document.querySelector('body').style.color='black';
 ">   
 ...
</body>

●document.QuerySelector(「タグ名」)選択者の指定
ex)id選択側はdocumentです.QuerySelector("#idセレクタ名")
●styleはcss属性の追加を許可するコマンド
●JavaScriptは背景色を設定するコマンドbackgroundColor
(CSSではbackground-color)
実行結果:
nightボタン->背景色黒、文字色白
dayボタン->背景色白、文字色黒
プログラム
計画:시간의 순서에 따라서 실행되어야 할 기능을 프로그래밍 언어에 맞게 글로 적어두는 것 ->

HTML은 웹페이지를 묘사하는 목적의 언어이기 때문에 시간순서에 따라서 무엇을 할 필요X /반면 JavaScript는 사용자와 상호작용하기 위해 고안된 언어이기 때문에 시간순서 매우 중요

条件文
1.条件文予告조건문:조건より
他の順序の機能を実行します.

   -> 하나의버튼으로 전환할 수 있게 만들기 = 토글방식
    + toggle : 2가지 상태를 1개의 버튼으로 전환하는 방식

比較演算子とBoolean生活符号化

참고] JavaScript와 비교 연산자
● 엄격한 비교 : ===(일치 연산자), !==(불일치 연산자)
     -> 피연산자들이 동일한 type과 내용을 갖고 있을 때만 true
● 관대한 비교(형-변환 비교) : ==(동등연산자), !==(부등연산자)
     -> 비교하기 전에 피연산자들을 같은 자료형으로 바꾼다.
● 관계 요약 비교 : <=, >=
     -> 피연산자들이 비교되기 전에 먼저 원시형으로 변환되고,
        그 다음 동일한 형으로 변환
     
✣ !=와 !==는 달라야 true가 반환됨!
  비교연산자는 좌항과 우항을 비교하므로 이항연산자

console.log(1 == 1);      // true
console.log("1" == 1);    // true
console.log(1 === 1);     // true
console.log("1" === 1);   // false

★Boolean:trueとfalseの2つの値
注:==と==の違い
特別でない場合はできるだけ==を使用することをお勧めします.

0 == ''
true
0 == '0'
true                               0 === ''
1 == true                          false 
true                               0 === false
1 == True                          false
Error                              1 === true
false == '0'                       false
true                               NaN === NaN
null == undefined                  false
true                               null === undefined
false == null                      false
false
false == undefined
false

見積り結果値

<body>
  ...
  <h3>1===1</h3>
  <script>
     document.write(1===1);       // JS의 화면출력 명령어
  </script>
  <h3>1===2</h3>
  <script>
     document.write(1===2);
  </script>

  <h3>1&lt;2</h3>               // html에서 <는 태그기 때문에
  <script>                         less than이라는 의미로 &lt라고 씀
     document.write(1<2);
  </script>

  <h3>1&gt;1</h3>               // >는 greater than으로 &gt
  <script>
     document.write(1>1);
  </script>
  ...
</body>

실행결과 :

===

1===1

true

1===2

false

1<2

true

1>1

false
条件文

推定結果

 <body>
   <h1>Conditional Statements</h1>
   <h2>Program</h2>
   <script>
     document.write("1<br>");     // <br>하면 줄 바꿈
     document.write("2<br>");
     document.write("3<br>");
     document.write("4<br>");
   </script>
   
   <h2>IF-true</h2>
   <script>
     document.write("1<br>");
     if(true){
     document.write("2<br>");
     } else{
     document.write("3<br>");
     }
     document.write("4<br>");
   </script>
   
    <h2>IF-true</h2>
   <script>
     document.write("1<br>");
     if(false){
     document.write("2<br>");
     } else{
     document.write("3<br>");
     }
     document.write("4<br>");
   </script>
 </body>

実行結果:

Conditional Statements

Program

1
2
3
4

IF-true

1
2
4

IF-true

1
3
4

if의 ()안에는 Boolean 데이터타입이 온다.   
괄호안의 값이 true일 경우 : if의 { }안의 코드가 실행됨.
괄호안의 값이 false일 경우 : else의 { }안의 코드가 실행됨.

使用条件文

<body>
 ...
 <input id="night_day" type="button" value="Night" onclick="
  if(document.querySelector('#night_day').value === 'Night'){
  document.querySelector('body').style.backgroundColor = 'black';
  document.querySelector('body').style.color = 'white';
  document.querySelector('#night_day').value = 'Day';   
 } else{
  document.querySelector('body').style.backgroundColor = 'white';
  document.querySelector('body').style.color = 'black';
  document.querySelector('#night_day').value = 'Night';
}
">
</body>

if의 조건문(night_day의 값이 Night)이 true면
if의 { }안의 내용이 실행됨.
   <body> 태그의 배경을 검은색으로 설정
   <body> 태그의 글자색을 흰색을 설정
   id 선택자인 night_day(버튼)의 값을 Day로 설정

if의 조건문(night_day의 값이 Night)이 false면
else의 { }안의 내용이 실행됨.
    <body>태그의 배경을 흰색으로 설정
    <body>태그의 글자색을 검정색으로 설정
    id 선택자인 night_day(버튼)의 값을 Night로 설정

再パッケージ重複除外Refactoring:コードの可読性を向上させ、メンテナンスを容易にするためにコードを改善し、動作結果をそのままにし、重複コードを低減する.

変更前:

 <input id="night_day" type="button" value="Night" onclick="
  if(document.querySelector('#night_day').value === 'Night'){
  document.querySelector('body').style.backgroundColor = 'black';
  document.querySelector('body').style.color = 'white';
  document.querySelector('#night_day').value = 'Day';   
 } else{
  document.querySelector('body').style.backgroundColor = 'white';
  document.querySelector('body').style.color = 'black';
  document.querySelector('#night_day').value = 'Night';
}
">

変更後:

 <input type="button" value="Night" onclick="
  var target = document.querySelector('body')   
  if(this.value === 'Night'){
  target.style.backgroundColor = 'black';
  target.style.color = 'white';
  this.value = 'Day';   
 } else{
  target.style.backgroundColor = 'white';
  target.style.color = 'black';
  this.value = 'Night';
}
">

document.querySelector('#night_day')는 자기자신이기 때문에 
this로 대체 가능하다. 또한 자기 자신을 가리킨다면 굳이 id선택자로 구분해줄 필요가 
없기 때문에 id선택자를 지워도 똑같이 작동한다.

doument.querySelctor('body')는 target라는 변수에 넣어두면 한번에 
수정할 수 있어서 효율적임.

Reference

この問題について(Week2 - JavaScript (9)), 我々は、より多くの情報をここで見つけました https://velog.io/@seoha23/Week2-JavaScript-9

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Styled-components

[TIL] 2021. 02.22