03.[JS] React Page

HTML과 JavaScript의 만남 1 (script 태그)

<h1>JavaScript</h1>
<script>
  document.write(1+1);
</script>

<h1>html</h1>
1+1

 

JavaScript와 html의 차이점

 

*JS 

:  <script> 이용, 동적

: 코드에는 1+1으로 뜨지만, 결과값엔 2라고 계산 돼서 나옴.

 

*html

:  정적, 1+1은 결과값에서도 1+1으로 출력.

 

---

HTML과 JavaScript의 만남 2 (이벤트태그)

- 이벤트태그: 사용자와의 상호작용

 

 

 

1. 'hi' 버튼 누를 때 알림도 'hi'로

 

 

2.네모 박스 안에 텍스트 넣고 밖에 클릭하면 'changed' 이벤트가 실행된다.

 

 

그리고 그 코드이다.

        <input type="button" value="hi" onclick="alert('hi')">
        <input type="text" onchange="alert('changed')">

 

* value=""  button 태그 속 버튼 속 텍스트 입력

 

이 코드를 줄로 쪼개서 해석해보자

 

 

1.

<input type="button" value="hi" onclick="alert('hi')">

 

<해석>

*alert  경고창

 

* onclick = "alert('hi')"

-  버튼 클릭시, 자바스크립트가 alert('hi')이벤트 실행.
- onclick의 속성값은 반드시 JS이어야함.

 

 

2.

<input type="text" onchange="alert('changed'")>

 

* text  네모에 텍스트 입력 가능

* onchange 내용이 변했을때 실행
   └  ex) 네모칸에 abc를 입력후 마우스포인터 바깥으로 빠졌을 때 실행.
                이후, 아무거나, abcde썼다가 다시 지우고 마우스 뺐을 땐 실행X
                       ******이걸 어디서 쓰는지..? 아이디? 그리고 abcde실행안된다햇는데 되는데..? 암튼!

 

수많은 이벤트가 있는데 그 중 적어도  기본 10-20개는 기억할 것.

 

 

 

 

 

📍키보드를 눌렀을 때, 이벤트 발생을 원하면?
- 검색: javascript keydown event attribute

<input type="text" onkeydown="alert('key down!')">
-  뜻:  키보드를 아무거나 눌렀을 때, 'key down!'이라는 경고창 실행해라

 

 

키를 하나씩 누를때마다 경고창이 뜬다.

on으로 시작하는 속성들 = event
(onclick, onchange, onkeydown)

 

 

 

 

onclick (속성) / 그 값으로 document~ 부터의 내용은 자바스크립트.

저 자바스크립트 값으로 인해 night 누르면 배경 검정색 바뀌고 반대로 day누르면 흰색으로 바뀐다.

 

---

HTML과 JavaScript의 만남 3 (콘솔)

 

 

📍위치파악 (아하! 여기에 있구나)

- (  F12 ▶ esc  )

 

*콘솔 (console)
:파일 안만들어도 자바스크립트를 즉석으로 실행 가능하게 만드는 도구.

 

 

 

 

📍몇개의 문자, 글자로 이루어졌는지 알고싶다면?

그냥 아무 블로그에서 블로그 글 복붙함.

맨처음과 맨 끝에 작은따옴표를 붙여주자.
마지막엔 .length 적기 (문자열의 문자의 개수를 알려주는 명령)

그리고 다시 맨 처음꺼를 alert로 감싸고 엔터 누르면 24라는 경고창이 뜬다. (=총 24개의 문자가 있다)

 

 

*콘솔에서 실행되는 JS는 현재 웹페이지 대상으로 실행됨.

 

 

 

 

📍현실에서 응용하기 (맥락만 파악할 것)

-  ex) 페이스북에서 2000명 대상으로 3명에게 책 2권씩 주는 증정 이벤트를 열었다.
댓글로 참여한 사람이 2000명인데 여기서, 공정하게 어떻게 줄 수 있는 방법?

 

당첨자 수= 3을 변경하면 그 밑에 누가 당첨됐는지 나온다.

-  강사는 여기서 이전에 자기가 작성했던 코드를 복붙해서 그 안에서 숫자만 바꿈.

-  콘솔에서 한 번 엔터 눌러서 실행했던 것은 수정X. (↑화살표키 누르면 수정 가능)

 

 

*맥락만 이해하기*

이렇듯 큰 문제보다는 현실 속에서의 문제점을 해결하는게 더 중요한 것으로 보인다.

 

 

 

---

데이터타입 - 문자열과 숫자

 

 

데이터 처리하는 일은 중요한 일이다.
-  목표:  JS언어에 어떤 형태의 데이터가 있는지 파악, 문자/숫자에 대한 이해.


*검색: javascript data type

검색하면 이렇게 뜬다.

- Boolean
- Null
- Underfined
- Number (숫자)
- String (문자 열)
- Symbol (new in ECAMAScript6)

(이 중 우리가 공부할 것은 숫자와 문자 열)

 

F12 - console 실행
- alert(1),    1 출력
- alert(1+1),     2 출력

alert를 계속 써주는 건 번거롭다. 따라서

1+1만쳐도 2가 출력될 수 있다.
여기서 + 를 "산술연산자"라고 부른다.

 

▼

▼

▼

다양한 예시)

- 2-1, 1 출력
- 2*4, 8 출력
- 6/2, 3 출력 (슬래쉬(/)는 나누기를 의미)

문자열 예시) 큰따옴표는 큰따옴표끼리, 작은따옴표는 작은 따옴표끼리.

"Hello world"
'Hello world'

문자의 수를 세는 .length말고도 다양한 것들이 있다.
📍문자 처리 시 사용하는 명령들을 찾아보자.
*검색:Javascript string(문자열)

 

그 중 toUpperCase를 보자.

 

 

 

* string.prototype.touppercase()
소문자를 대문자로 바꿔주는 속성.

 

 

 

 

* indexof()

괄호 안에 들어가는 알파벳의 순서를 나타냄.

 

*trim()

글자 간 공백(간격)을 없애줌.

 

 

.이 무엇인지 괄호()가 무엇인지에 대한 이론적인 것보다는

우선은 속성이 무엇인지에 따라 달라질 수 있다는 것을 알면 된다.

위와 같이

문자열인지 숫자인지에 따라서 그 값, 데이터는 달라진다.

문자열/숫자열은 서로 다른 데이터타입이다.

 

---

 

변수와 대입 연산자

 

ex)

x=1; (x=변수,레이어블 / = 대입연산자:좌항 우항 결합해 우항의 값을 만들어낸다)

y=1;

x+y; 2

 

ex) 해당 글은 예제를 위한 의미없는 예제임. 이 안에 내 이름의 마지막 글자를 딴

song 이라는 단어가 몇 개 넣었다.

alert("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown song printer took a galley of type and song scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release song of Letraset sheets song containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem songIpsum.")

("Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown song printer took a galley of type and song scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
song of Letraset sheets song containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem songIpsum.")

 

 song이라는 단어를 geum으로 바꾸고 싶다면

 

1. name='song'; 속성 추가

2. 2-3개 정도 'song'이 들어간 단어를 지우고 "+name"으로 바꾸기

 

name = 'geum';
alert("Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown song printer took a galley of type and "+name+" scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
"+name+" of Letraset sheets "+name+" containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem "+name+" Ipsum.");

*name앞에 var(베리어블) 쓰는게 더 좋음. var name='geum';

 

song 이라는 단어가 1억개 있을 때 한번에 바꿀 수 있다. 

 

 

---

제어할 태그 선택하기

 

onclick="" 클릭했을 때

 

*검색: javascript selct by css selector

document.querySelector('')

 

*검색: javascript element style

.style.

 

*검색: javascript style background color

backgroundColor-'';

(폰트 컬러는 그냥 color="")

 

(자바에서는 대문자도 섞여있는데, 그냥 그렇게 해야한다.)

 

해석: night인 값의 버튼속성을 눌렀을 때, 'body'태그를 선택하는 css의 선택자의 배경화면 색깔이 검정색으로 변한다. 

 

 

night 버튼 누를 때 배경화면이 검정색/day 누를 때 배경색은 흰색

 

 

 

---

프로그램, 프로그래밍, 프로그래머

 

 

<특징>

자바: 컴퓨터 언어, 컴퓨터 프로그래밍 언어, 사용자와의 상호작용을 보완하기 위해 만든 것
html : 컴퓨터 프로그래밍 언어X, 웹페이지 묘샤용, 시간의 순서에 따른 기능X


ex. 음악회에서는 시간의 흐름에 따라 음악이 연주되는 순서가 있음. 
이 순서 = program이라고 부른다.
순서 만드는 행위 = programming
순서 만드는 사람 = programer


프로그램의 본질적 의미:
시간의 순서에 따라 실행되어야 할 기능을 프로그래밍 언어의 문법에 맞게 글로 적어두는 방식.

 

---

조건문 예고

 

*조건문
:하나의 프로그램이 조건에 따라 다른 순서의 기능들이 실행하는 것.(아주 복잡한 업무에서 해방될 수 있는 도구)

*프로그래밍: 반복적인 일 하지 않는 것.


*토글버튼
:'night' 버튼을 클릭하면 다크모드로 되면서 버튼이 'day'로 바뀌고
 'day'버튼을 누르면 화이트모드가 되면서 버튼은 'night'로 뜬다.

---

비교 연산자와 Boolean 데이터 타입

 

파일생성했다

  <body>
        <h1>Comparison operator(비교연산자) & Boolean</h1>
        <h2>===</h2>
	  <h3>1===1<h3>
        <script>
            document.write(1===1);
        </script>
	  <h3>1===2</h3>
    </body>

이 값은 이렇게 출력된다.

 

📍  document.write() 괄호 안에있는 정보를 웹페이지에 출력

📍  1===1 동등비교 연산자 (왼쪽값과 오른쪽값을 비교하여 같으면 true 다르면 false)
📍  1&lt;2 (&lt;는 < / 즉 1<2) 그냥 사용하게 될 경우 문법으로 인식하기 때문에 &lt;로 작성해 줘야 출력값이 '<'로 나오고

&gt;로 작성하면 '>'의 값이 나온다.

*Boolean(불리언) : True & False
- Number/ String 이루어진 데이터 타입 많음
- Boolean 단 2개로 이루어진 데이터타입(True or False)

<h3>1&ltl;2</h3>
  <script>
    document.write(1<2);
  </script>
  
  <h3>1&ltl;1</h3>
  <script>
    document.write(1<1);
  </script>

위에는 true, 아래는 false

 

 

---

조건문

 

조건 문의 기본 코드는

if (조건) {

실행 코드

}else{

실행 코드이다.

}

     <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-false</h2>

           <script>

             document.write("1<br>");

             if(false){document.write("2<br>"); }

             else {document.write("3<br>");}

             document.write("4<br>");

           </script>

*else : 또 다른(그렇지 않다면)

 

IF (TRUE)

true일 때 숫자 2가 나오고, 아닐 땐 3이 나온다. 따라서 1,2,4의 값이 출력되고,

 

IF (FALSE)

false일 때 숫자 2가 나오고, 아닐 땐 3가 나온다. 

 

오른쪽 사진에 web과 html 글씨가 안보인다 흠...ㅡㅠㅠ

night 누를땐 검정으로, 그리고 글자도 'day'로 바뀌고 다시 똑같은 버튼 누르면 흰색 화면으로 되면서 'night'로 바뀜.

*검색: javascript get element value

 

---

리팩토링 중복의 제거

 

리팩토링 : 코딩하고나면 비효율적인 코드가 생긴다.
더 편리하고 유지보수하기 좋은 방식의 코드를 다시 개선하는 방법.
(틈틈이 해야한다)

 

 

night버튼을 하단에 예시로 한 개 더 추가했다. 그리고 그 버튼을 누르면

이런식으로 그 위에 있는 버튼의 텍스트가 변경된다. 아래에도 똑같이 적용하고 싶다면

 

위에것과 구분해주기 위해 2를 추가로 적었다.

 

but...이런 버튼이 1억개라면?

하나하나 다 바꿔야한다(3,4,5,6,....)

 

이것을 해결하기 위한 방법!!

 

이 태그를 this로 수정하자

바꿔줘서 더 명료하고 깔끔해보인다(하..맞아?)

*this :태그를 가리키도록 약속돼있는 특수한 키워드(자기자신을 가리키고있다)
지금의 바뀐 코드를 그 어디에 복붙해도 똑같이 반응한다.


+ document.queryslector('body')가 4번 중복됨.

여러가지 오류는 중복으로 인한 오류들이 많다.
따라서 중복된 게 있다면 끝까지 따라가서 제거할 것.

 

onclick의 속성에
var target=document.querySelector('body')로 변경
타겟은 body로 된다는 뜻.

 

나머지도 바꿔주면 끝!

 

 

결론적으로 나오는 결과는 똑같지만 나중에 봤을 때 오류를 더 줄일 수 있고 용량도 작아질수있다.

 

---

배열

아 뭔뜻이여;하..

 

 

처음에는 왜 해야하는지 모를 수도있지만
그 목적을 알면 알 수 있다. 목적은 좀 뒤에 가면 나온다.  


코딩하면 방대한 양의 데이터를 다루게 되고, 그 성격도 다 다르다.
나중에는 사람이 감당할 수 없는 상태가 되는데,

배열은 그 데이터들을 보관하는 일종의 수납상자 같은 개념으로 이해하자.

 

배열은

-데이터 중에서 서로 연관된 데이터를 잘 정리 정돈해서 담아주는 일종의 수납상자.

-대괄호로 시작-대괄호로 끝난다. []
-여러개를 적을 수 있다.
-여러 값 사이에는 콤마로 표시하여 구분한다.

 

 

예시를 만들었다.

 

1.배열만들기

var coworkers 라는 변수에 ["egoing", "leezche"]라는 배열의 데이터 타입을 넣어줄 수 있다.

 

2.배열에서 데이터 꺼내기

첫번째 자리에 있는 값은 0이고 두 번째 자리에 있는 값은 1이라고 지칭한다.

그렇기 때문에 documnet.write(cosorkers[0]);으로 egoing이 출력되고

documnet.write(cosorkers[1]);로 leezche가 출력된다.

 

3.배열에 들어있는 값이 몇 개인지 확인하는 방법

배열에 들어있는 값이 몇개인가. 검색하기

*검색: javascript array count

 

갯수를 셀 땐, 1부터 세기 때문에 값이 두 개라면 length의 값은 2.

 

4.데이터 추가하는 방법

*검색: javascript array add data

 

push() : 배열의 끝에 데이터를 추가하는 방법. 

(이외에도 다른 명령어들로 원하는 위치에 추가해줄 수 있다. - 검색하기)

coworkers0 / coworkers1 / duru / taeho 총 4개의 값이 들어있다. (맨 아래 체크해둔 건 잘못체크한 것)

 

 

 

---

자료구조: 비슷한 종류의 데이터를 한 군데에 모아두는 것오브젝트와 자료구조 차이점:

 

 

 

- 오브젝트 ===> 토끼, 당근 오브젝트 / 귀 두개, 먹는다, 뛴다, 비타민

 

 

- 자료구조 ===>서로 연관된 특징, 행동 묶어두는것. 은행,토끼,당근, 자동차: 비슷한 타입의 오브젝트를 묶어두는 것.동일한 타입의 오브젝트만 담을 수 있다. 

 

*배열 :칸칸이 모여있는 자료구조

-박스마다 인덱스가 지정돼있고, 인덱스는 0부터 시작한다.

- 1번째 박스 =0, 2번째 박스=1.....

 

2번째 토끼, 3번째 당근 빼고 싶다고 하면 인덱스로 빼버리면 됨. (삽입, 삭제가 쉬움)

 

1. 배열 만드는 법(선언하는법)

 

 

2가지 방법이 있음(arr1, arr2)

이 중 2번째 방법이 가장 많이 쓰이는 방법. 총 길이가 2개인 배열이 만들어졌고

0번째 배열에는 숫자 1이, 1번째 배열에는 숫자 2가 있다.

 

 

2.인덱스 접근하기.

console.log(fruits);  fruits가 배열을 출력한다.

0번째는 사과, 1번째는 바나나. 

length 총 갯수는 2개다.

 

다시 VSC로 돌아와서

console.log(fruits.length); ===> 총 배열의 갯수

 

 

첫번째 사과를 출력하는 방법

console.log(fruits['0']);    ===>사과가 console에 출력된다.

console.log(fruits['1']);     ===>바나나가 console에 출력된다.

console.log(fruits['1']);     ===> undefined 못찾음

 

 

우리가 보통 첫번째를 쓸때는 '0'을 많이 쓰고

마지막 번째를 쓸때는 console.log(fruits[fruits.length - 1]);       '-1'을 넣어서 사용한다. (배열은 인덱스가 0에서 시작하기때문에 총길이에 -1을하면 가장 마지막 인덱스를 받을 수 있다.)

 

 

 

3. 과일 안에있는 모든 과일 출력하기

 

 

1번째방법 : a.for

for(let i = 0; i < fruits.length; i++)

- i를 0부터 시작해서 fruits의 length 이전까지 빙글빙글 돌면서 i(1씩)를 증가시켜준다.

이 말은 0,1 까지만.(총 길이는 2이므로, fruits.length는 2이기때문이다.)

 

 

console.log(fruits[i]);

-fruits의 0번째에 있었던 사과가 출력

-  fruits의 i가 0이니까  0번째 사과가 출력되고 'i++'는 1씩 증가한다는 뜻이니까 1이된다. 

그러면 i=1이고 fruit의 lenght가 2 이니까 성립이 되고, fruits[i]의 데이터는 바나나가 출력된다.

그리고 1이 증가하면 2인데 2보다 작지 않으므로 여기서 멈추게된다. 그리고 다음 문장을 실행한다.

 

 

2번째방법 : a.for

-let이라는 변수에 과일 안에 

 

 

3번째방법:forEach

 

 

 

 

---

반복문

너도 뭔뜻이니?

document.write('<li>1</li>');
순서대로 실행되는 기능들 하나 하나
(1번째,2번째,3번째,4번째 기능)

 

 

필요에 따라 2번째, 3번째 명령을 반복해서 실행해야 될 경우
물론 복붙해서

document.write('<li>2</li>');
document.write('<li>3</li>');
document.write('<li>2</li>');
document.write('<li>3</li>');
document.write('<li>2</li>');
document.write('<li>3</li>');
document.write('<li>2</li>');
document.write('<li>3</li>');

이렇게 사용할 수 있지만, 반복은 최대한 X.
이런 것을 해결하기 위해 반복문이 생긴 것.

*반복하는 코드 만들기
지금 2,3의 코드를 반복하는 코드를 만들어보자.
* while() 반복문의 키워드

            document.write('<li>1</li>');
            while(true){
            document.write('<li>2</li>');
            document.write('<li>3</li>');
        }
            document.write('<li>4</li>');

자바스크립트는 'while'을 먼저 읽고 (true)인지 (false)인지 판단.
만약 (true)라면 중괄호{}안에 것들을 순서대로 실행한 후, 다시 처음으로 돌아가서 또 판단한다.
(true)라면 계속 똑같은 순서대로 실행하는 것이고
만약 (false)라면 while문 바깥에 있는 코드가 실행된다.

반복문: 순서대로 실행되는 프로그램의 실행순서의 흐름을 제어하는 제어문.  if문과 함께.
while은 무한히 반복하는 반복문이기때문에 웹브라우저가 컴퓨터 자원을 다 가져감.
따라서 반복문이 언제 종료될것인가를 규정하는 것이 필요하다. 
두 줄의 코드를 몇번 실행됐는지 적어둘 필요가 있다 (하기 좋은게 변수) 

변수 var i=0
- 습관적으로 i라는 변수에 그런 역할을 시킨다


i = i + 1;(반복문 실행될때마다 i의 값을 1씩 증가시킨다.)
- i는 기존의 i의 값에 1을 더한 결과를 i의 새로운 값으로 준다.
- i가 0부터 시작해서 2,3의 값들이 실행될 때마다 i의값이 1씩 증가할 것이다.


만약 3번 반복문 실행하고 싶다면



while(i < 3){}
- i의 값이 3보다 작다

출력값 2,3 / 2,3 / 2,3 이 총 3번 연속으로 실행되었다.

 

 

 

그렇다면 어떻게 이런 값이 나왔는지 원리를 알아보자

 

 

<원리>


var i = 0;
-i의 값은 현재 0.

while(i < 3){ ...
-여기에서 i의 값은 0은 3보다 작으므로 true가 된다.
-성립이 되므로 아래처럼 실행된다.
1
2
3

document.write('<li>3</li>');
i = i + 1;
-i의 값: 현재 0, 0+1=1 이 되므로 i의 값은 1이된다.

 

그러면 다시 while코드가 실행된다.

while(i < 3){ ...
-여기에서 i의 값은 1이고, 1은 3보다 작으니까 true가 된다
-코드가 실행된다.
1
2
3
2
3

document.write('<li>3</li>');
i = i + 1;
-i의 값: 현재 1, 1+1=2 이 되므로 i의 값은 2이된다.

다시 위로 올라가서 
while(i < 3){ ...
- i=2는 3보다 작으니까 true.
- 실행된다
1
2
3
2
3
2
3

document.write('<li>3</li>');
i = i + 1;
-i의 값: 현재 2, 2+1=3 이 되므로 i의 값은 3이된다.

while(i < 3){ ...
- 3은 3보다 작지 않으므로 false가 되면서 반복문이 끝나고 맨밑에있는 4가 나온다.

1
2
3
2
3
2
3

4

 

 

---

배열과 반복문

 

li태그가 복잡한 태그, 수정이 빈번하다면 글 목록 작성하는 게 어려울 것이다.
<li>egoing</li>
<li>leezche</li>
<li>duru</li>
<li>taeho</li>

이거를 계속 수정해줄 수 없음.

해결법은? 
- 이렇게 연관된 데이터를 배열에 담고, 배열에 담긴 데이터를 순차적으로 꺼내서
li라는 태그로 만들어줄 수 있다.


배열의 항목은 원소(element)라고한다.

 

 

변수가 담겨있는 배열의 데이터를 이용해 li태그를 만들면 된다.
변수는 var

 

 

이부분을 지워주고 

            <script>
                var i = 0;
                while(i < 4){
                    document.write('<li></li>');
                    i = i + 1;
                }
       </script>


새로 작성했다.




var coworkers라는 변수의 배열들 ['egoing','leezche','duru','taeho'];에서
반복문이 실행될때마다 하나하나의 원소값을 가져와서 

여기에 배치시키면 된다.




i라는 변수는 0부터 시작해서 3까지 1씩 증가한다.
따라서
egoing - 0번째
leezche - 1번째
duru - 2번째
taeho - 3번째

coworkers라는 변수를 사이에 넣었다.
데이터 가져오기 위해서는 대괄호를 넣는다
대괄호 안에는 데이터의 값인 인덱스값을 넣어주는데 i값이 그 인덱스랑 일치한다고 하는 특성을 활용할 수 있다.


그러면 이런 결과값이 나온다.

 

 

graphittie라는 원소를 추가해보았다. 하지만 이렇게 해도 결과값은 바뀌지 않는다.

 

코드를 4→5로 수정해야한다.

그러면 이런 결과물이 나온다. 한 명 더 추가됨.

 

 

만약,

원소 한 개를 뺀다면?

undefined 라는 값이 나오게된다.

데이터가 바뀌면, 바뀐 데이터에 따라 유연하게 바뀔 수 있어야한다.

while(i<5){} 숫자 5를 계속 바꾸는것도 로직이 바뀌는 것이기때문에 이것도 별로 추천하는 방법이X

 

 

5의 자리에

coworkers.length가 와야한다.

 

 

 

그리고 그 결과값▼

이렇게했을 때 그 어떤 원소를 추가해도 자동적으로 데이터가 생기는 걸 볼 수 있음.

 

저 데이터값만 바꿔주었다. 굉장히 편한 결과값을 볼 수 있었다.

 

만약, 여기에 링크를 첨부하고싶다고 한다면

a href="" 추가 / +coworkers[i]+ 추가

 

 

배열: 순서대로 연관된 데이터 정리

반복문: 배열데이터를 하나씩 꺼내서 자동화 처리를 할 수 있는 기능

 

 

---

배열과 반복문의 활용

 

 

 

1. 웹페이지에 있는 모든 a태그 가져오기
document.querySelector('a')

 

WEB 하나만 a태그를 가져왔다

이 메서드,함수,명령(모두 같은말)은 a태그에 해당하는 태그 첫번째에 등장하는 것을 가져오는 특성이 있다.

모든 a태그는 가져오지 못함.

 

*검색: javascript get element by css selector multiple

 

nodelist이긴 하지만 배열이라고 생각하면 된다.

 

 

var 변수
a-list 가장 뛰어난, 혹은 우수한 집단
console.log( ); 괄호안의 결과가 콘솔창에서 출력됨.

 

>"안녕하세요"를 적으면  console 내에서 자동적으로 리턴값으로 <"안녕하세요" 이렇게 값을 주는데 굳이  >console.log("안녕하세요")라고 더 번거롭게 적는 이유가 있는걸까? console.log는 말그대로 로그, 그저 기록을 찍어서 보여주는 것이다.  onsole.log를 사용하면 기록을 찍어서 보여주기 때문에 내가 보고싶던 모든 list값을 볼 수 있다. Console.log 쓰는 이유 :: Higher의 창작소 (tistory.com)

 

 

 

console.log(alist[0]);
- 첫번째 태그 선택됨

 

 

console.log(alist[1]);
-두 번째 태그 선택됨

 

alist.length

- 이 페이지에서 전체 'a'태그가 몇 개 있는지 나옴.

 

 

 

 

 

모든 'a'태그가 화면에 나옴.

 

 

 

 

 

'a'태그의 폰트 컬러가 powderblue로 바뀌었다.

 

 

내가 만든 것에 적용해보자.

 

 

 

각 night 변수와 day 변수에 console에서 만들었던 태그를 긁어서 붙였다. 콘솔로그는 지웠음.

와.. 이거 만들기가 이렇게 힘들었다니...

 

 

---

함수

 

연속적인 코드는 반복문을 쓰면 되지만
연속적이지 않은 코드는 함수를 쓴다. 

(항상 뭔가 반복된다면 그 반복되는게 1억개는 있다고 생각해야한다.)

 

 

예시로 이런 코드를 만들었다.

* funtion

:  함수 / 여기서 two는 함수의 이름이다.

 

 

<script>

funtion two(){
documnet.write('<li>2-1</li>');
documnet.write('<li>2-2</li>');
}
</script>

 

 

funtion 아래에는 재사용하고싶은 코드를 적는다.

그 아래에

이부분에서 반복되는 코드를 two();로 바꿔준다.

 

 

왼쪽 : 함수 / 오른쪽: 함수 적용 X

왼쪽코드와 오른쪽 코드의 출력값은 결국 같지만, 내부적으로는 완전히 다른 메커니즘을 갖게된다.

 

<해석>

-  two라는 함수를 만들려고 하는 것이고, 중괄호 안에 있는 코드는 함수의 내용.

two() 이부분
괄호 나오고 닫히는걸 봤을 때, 이건 two함수의 이름이고 그 함수를 실행하고싶구나.
그리고 two함수의 내용이 담긴 코드가 저 자리에 있다는 것을 보여주는 거구나.

 

 

 

 

---

매개변수(parameter)와 인자(argument)

 

 

 

입력: 자판기의 원하는 음료를 선택하는 것
출력: 자판기가 해당제품을 제공하는 것


함수 = 입력/출력으로 이루어져있다.
입력 : 매개변수(parameter)
출력 : 인자(argument), return과 관련있음.


document.write(1+1);
- 출력값은 2가 나온다 (자바스크립트의 경우 숫자가 계산되어 나오므로)

하지만 이 코드가 1억개가 있다 라고 가정해봤을 때 수정하기 어려우므로
함수를 이용해야한다.

function onePlusone(){           document.write(1+1); } documnet.write(1+1);

 

→  onePlusone 이라는 함수를 만들었고 그 안의 내용은 documnet.write(1+1);이다.

 

function onePlusone(){       document.write(1+1); } onePlusone();

→  onePlusone 함수의 내용이 담겨있다.

 

이런 값이 나옴

 

 

하지만 onePlusone 이라는 함수는 언제나 똑같이 동작하는 함수이다.

sum(2,3); // 5 (여기서 슬레시는 주석이라는뜻)
sum(3,4); // 7
우리가 함수 실행 시, 어떤 입력값을 줬을때 함수가 그 입력값에 따라 다른 결과를 출력하게 하는법은 무엇일까?

 

 

▼

▼

▼

 

 

 

function sum(){

      document.write();

}

→  function sum이라는 함수를 만들고
화면에 보여지는 텍스트를 만들어야하므로 document.write를 썼다.

 

function sum(); sum(2,3); sum(3,4);

초록색 안에 빨간색 내용이 들어가면 된다.

sum(2,3)을 예를 들어 2를 left, 3에 해당하는 두 번째 자리를 right라는 변수를 정의해봤다.

 

 

function sum(left,right){ }

바로 이 파란색 부분이 매개하는 변수, parameter 이다.

이제 left의 값은 2, right의 값은 3으로 약속되어있는 상태이다.

 

 

document.write(left+right+'<br>')

→  left의 값 2 더하기 right의 값 3 , 그리고 좀 보기 좋게 하기위해 br태그로 줄바꿈을 한다.

 

좌측: 바꾸기 전 / 우측: 바꿔준 후

이 부분도 <br>을 추가했다.

 

 

<br>해주기 전, 후

우리는 sum이라는 함수에 2,3이라는 값을 입력해주었기 때문에 5라는 결과를 화면에 출력할 수 있게 된다.
우리가 함수로 전달하는 2,3이라는 값을 인자, argument라고 한다.
left, right라는 변수는 parameter 매개변수라고 한다.

 

 

---

함수 리턴(return) (이해X 다시공부)

 

 

콘솔에서 1+1이라 치면
값은 2이다. 1+1은 숫자 2에 대한 표현식이다.

2-1도 숫자 1에 대한 표현식.

1===1도 true에 대한 표현식


함수도 마찬가지다
sum(2,3); 에 대한 표현식을 5로 만들고 싶다면, 우리는 return 이라는 것을 알아야한다.

 

 

 

 

---

 

함수 활용하기

 

 

 

📍night, day 버튼, 함수를 이용해서 효율적으로 바꾸기

          └  *리팩토링: 결과는 똑같지만 코드를 효율적으로 하는 것.

 

 

 

전에 작업했던 night, day의 토글버튼 부분을 수정할 것이다.

선택한 부분은 클릭했을 때 night과 day버튼에서 나타나는 모션이다.

이부분을 복사하자.

 

 

<head> 태그 안에 <script>를 추가하고 그 안에 복사한 내용을 붙였다.

 

함수인

function nightDayHandler(){복붙한내용}

를 그 위에 추가하면 이런 모습.

 

 

 

그리고 함수가 아닌 이 부분은 지우고

 

 

function nightDayHandler();로 바꾼다.

 

그리고 웹사이트를 리로드 해보면 문제가 생긴다.

night와 day라는 텍스트가 바뀌지 않는다.

 

- 우리가 독립된 함수 nightDayHandler를 만들었기 때문에
if의 조건문인 'this'는 더 이상 onlclick이라는 속성의 input버튼이 되지 않는다.

따라서 this의 값이 input값을 가리키기 위해서는 

 

 

1.  nightDayHandler(this);를 넣어준다.

2.  함수 nightDayHandler가 실행될 때 ()로 들어오는 매개변수 'self'란 이름의 매개변수를 넣어준다.

 

3. if 조건문 중 'this' 도 모두 self로 바꿔준다.

오른쪽 사진처럼 변경해줬다.

이부분도 변경해주었다. 

 

 

 

웹사이트를 리로드 해보면 정상적으로 작동되는 것을 볼 수 있다.

---

객체예고(난이도 ★★★★★)

 

 

일단 '객체'라는 기능에 집중하자.
-  목적: 정리정돈의 수단 (함수, 변수가 많아지면 그것들을 정돈한다)

 

 

아래에 선택된 부분은 중복되는 부분이다. 이것도 마찬가지로 1억개가 있다고 생각해야한다.

이 부분을 함수로 독립시켜보자.

 

 

 

function setColor(color{ 이 부분에 선택한 곳 복붙하기 } )

-  set:  설정하다(코딩에서 많이 쓰는 표현)

-  위에 선택한 부분은 색깔에 대한 코드이므로 키워드는 color 이다.

 

 

 

함수를 넣으면 이런 모습.

그리고 그 내용에 선택한 부분을 복붙해줬다.

 

 

 

 

'powderblue'를 'color'로 바꾸면, 매개변수로 인해서 저기 있는 값이 바뀌게된다.

왼쪽: 수정전 / 오른쪽: 수정 후

 

 

이제 이 부분은 지워줘도 된다.

 

 

 

지워준 부분에

한 개는 setColor('powderblue');

다른 한 개는 setColor('blue'); 로 바꾼다.

 

 

 

 

 

 

그리고 이 부분을 보자

"웹페이지 배경색을 흰색으로 한다"라는 뜻.
한줄밖에 없지만 의미가 불명확하거나 파악하기 어려울때는 함수를 통해 로직의 이름을 부여하는것도 좋은 방법이다.
(저 한줄을 여러줄의 코드라고 생각했을땐 정리가 필요하므로)

 

 

 

 

 

function setColor(color){
       target.style.color='white';
        }
을 또 넣어주고, 앞서 선택한 코드를 붙여넣는다.

 

네모박스 안에 밑줄 그은 'white'를 'color'로 변경하면 되겠지만 이렇게 하면 문제가 생긴다.

setColor라는 함수가 이미 존재를 하고있는데, 기존에 우리 했던 function setColor코드가
그 다음에 나오는 코드에 의해서 삭제되는 결과를 얻게된다. 
그럴 경우 setColor라는 함수가 있었는지 없었는지 파악하는 건 어렵다. 실제로는 파악못한다.

이름이 충돌되지 않도록 해줘야한다.

이 객체라는 것은 "폴더"로 인식해야한다.

 

 

 

📍어! 이 부분을 다시 보자

document.querySelector('body')

-  document :  객체 (충격..)
-  querySelector  :  메소드 (객체에 속해있는 함수)

 

---

 

 

 

 

 

 

 

 

 

 

 

 

+공부한대로 계속 추가해나갈 예정.

 

 

 

 

 

 

 

 

 

https://blog.naver.com/wpgns6524/222994299947

자바스크립트강의? 책으로 기초만 배워보기 4

이해가 잘 되지 않아서 그래도 더 잘 정리된 블로그 참고용.

 

 

 

 

💭Q&A

✅1.[조건문] if false 일때 else 전에 있는 중괄호 안에 있는 숫자 "2"가 출력되어야하는게 아닌가? 3이 나오는 이유?  조건이 false일때 2이고, 그렇지 않은경우 3으로 출력된다 라는 명령어로 이해됨ㅠ if(조건문) 안에 들어가는 인자는 무조건 true 임. 예를들어 저 안에 false가 들어가 있으면 "false === true냐" 인데 틀리니까 else로 빠지는 것. 원론적이게 접근하는 것도 좋긴하지만 조건문 반복문 등 기본적으로 제공하는 js함수들은 이런 방법으로 쓰는거구나 라고 이해하고 넘어가는게 좋다. 대부분 다 영어 뜻을 풀이해보면 의미 그대로 사용하니깐 영어 뜻 그대로 직역하면 이해가 빠를수도 있다.

⚠️2. 토글버튼 만들때, 타이틀과 카테고리 문자들이 어두워서 안보임. 해결법찾기.(반복문을 통해 찾을 수 있었음. 근데 너무 어려워서 다시 복습해야할 것 같다..ㅠㅠ)

✅3. 안보고 다시 복습했을 때 저 부분이 왜 들어가는건지 이해가 안갔음. 다시 강의를 보고 답을 얻음. onePlusOne(); 이 있는 함수를 호출한것. 즉, 빨간 줄이 쳐있는 자리에 document.write(1=1='<br>') 이라는 코드가 있다고 생각하면된다.

⚠️4. 위에 함수에 있는 것들은 중괄호 다음에 document.write 가 들어오는데 아래쪽에 물결밑줄 보면  return이 속한 중괄호에는 document가 없고 중괄호 밖에 위치해있다. 그 이유는? ㅠㅠ 너무 헷갈린다.

⚠️5. return 다음에 왜 괄호를 안쓰는지(있는 것과 없는 것의 차이?) / color:red 할때는 ;(세미콜론)이 없는데 font-size:3rem; 에는 있다. 있고없고의 차이가 무엇인가..?

 

✨JS NEW TAGS

onclick="" 클릭했을때 onkeydown="" 키보드 눌렀을 때 onchange="" 내용이 변했을때(키보드?) 서치하기 color="" 폰트컬러 변경 document.write() 괄호 안에있는 정보를 웹페이지에 출력 &lt;  < ) 그냥 사용하게 될 경우 문법으로 인식하기 때문에 &lt;로 작성해 줘야 출력값이 '<'로 나오고 &gt;로 작성하면 '>'의 값이 나온다. ===  동등비교 연산자 (왼쪽값과 오른쪽값을 비교하여 같으면 true 다르면 false) length