Week2 - JavaScript (9)

37391 단어 JavaScriptJavaScript

생활코딩 심화 1

JavaScript

: HTML로 구현된 웹페이지는 한번 출력되는 수정이 안됨.
사용자와 상호작용하기 위해 나온 언어가 JavaScript
*JavaScript는 HTML을 제어하는 언어

<HTML과 JS> : Script태그

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

HTML과 JavaScript의 차이

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

실행결과 :

JavaScript

2

html

1+1
-> JavaScript는 동적인 언어로 입력된 값을 계산한 "결과"로 출력

<HTML과 JS> : 이벤트

  <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,
 한/영 등의 키를 인식하지 못한다.

<HTML과 JS> : 콘솔
우클릭 -> 검사 -> Console에서 직접 JavaScript를 실행 가능

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

Datatype(자료형) - 문자열과 숫자
Data types
◎Primitives

•Boolean
•Null
•Undefined
•Number
•String
•Symbol

◎Object

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

ex) 만약 문장안의 글자를 바꿀 때 일일이 바꾸면 비효율적임.
-> 변수에 값을 넣고 변경하면 개수가 많아도 일괄로 바꿀 수 O
+ 변수를 쓸 때 앞에 var 쓰기!(variable이란 의미)

웹 브라우저 제어
예제를 구현하기 위해 필요한 지식들
∙CSS의 속성
∙JavaScript의 문법
(제어하고자 하는 태그를 선택하는 방법)

CSS기초
1. Style 속성을 이용해서 CSS 사용하기
-> 3.html 파일을 Duplicate해서 ex3.html로 만들기

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

태그 옆에 쓰인 Style은 Html태그의 속성으로 뒤의 코드들이 CSS라는 것을 의미한다.
" " 안의 내용은 CSS의 속성(property)이고 style이 위치한 태그에 해당 속성들이 적용된다.

  • CSS background color property 검색
<h2 style="background-color:coral;color:powderblue">...
         // background-color : 배경색 지정
  1. Style 태그를 이용해서 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>
              // 글자를 진하게 설정
  1. 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선택자는 유일하다는 의미이므로 웹 페이지에 한번만 등장

속성을 원하는 곳에 정확하게 적용하려면 선택자를 잘 알아야 한다

  1. 제어할 태그 선택하기
<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개의 버튼으로 전환하는 방식
  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

  1. 조건문
    결과 값을 예상해보기
 <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의 { }안의 코드가 실행됨.
  1. 조건문의 활용
<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로 설정
  1. 리팩토링 중복의 제거
    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라는 변수에 넣어두면 한번에 
수정할 수 있어서 효율적임.
[TIL] 2020/11/14
[TIL] 2021. 02.22

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage