[웹개발기초 스터디] Javascipt

🎥Javascript
: 정보를 마치 영화처럼 움직이게 하는것. `동적`으로 사용자와 `상호작용`하는 언어. 기본적으로 HTML위에서 동작.

🚩<Script> 태그
: HTML에 자바스크립트 코드가 시작된다고 알리는 역할. 웹브라우저는 `<script>` 태그 안의 코드를 자바스크립트 코드로 해석함. 

🔹 예시

html
<script> // js코드로 해석
    document.write('1+1'); //화면에 2 출력
</script>

🌈이벤트
: 웹브라우저 위에서 일어나는 일들. 자바스크립트가 사용자와 `상호작용`하는데 핵심적인 역할. 주로 `on`으로 시작하는 속성들을 일컫는다.

▶`<input onclick="자바스크립트코드">` : onclick의 속성값은  웹브라우저가 기억해두었다가, onclick 속성이 위치하고 있는 태그를 사용자가 클릭했을 때, 자바 스크립트 코드를 자바스크립트 문법에 따라 해석해서 웹브라우저가 실행함. 

🔹예시 - `on`으로 시작하는 속성들(이벤트)
>특정 이벤트가 일어났을때, 어떠한 자바스크립트 코드를 실행하게함.

▶alert(내용) : 경고창 띄우기

html
<input type="button" value="hi" onclick="alert('hi')">
<!--hi버튼 클릭하면 경고창 (alert) 띄우기-->

<input type="text" onchange="alert('changed')">
<!--내용이 바뀐 채 마우스 커서를 바깥쪽으로 빼서 클릭시 경고창 띄우기-->

<input type="text" onkeydown="alert('Key down')">
<!-- 값을 입력하면 누르면 경고창 띄우기-->

 

💻콘솔
: 파일이 아니더라도 간단하게 어떤 코드를 실행해야 할때, js코드를 즉각적으로 실행시킬 수 있도록 하는 것.

>`마우스 오른쪽` ->`[검사]` ->`[Console]탭`

👾 tip 
: ' ' 를 입력하면 입력한 내용이 문자로 처리되며, .length를 붙이면 문자열의 길이를 출력해준다.

 

🎯데이터타입
  자료형
- `Boolean`
- `Null`
- `Undefined`
- `Number`
- `String` : 문자열은 따옴표(" "or' ') 로 이루어져 있음.
- `Symbol`
- `Object`

 

📛나누기는 실수연산처리됨. ex) 5/3 =1.666666

🔹 **문자열 활용 예제**

▶`String.toUpperCase()` : 소문자 -> 대문자 변경
▶ `String.indexOf(검색하고자하는문자(열))` :  문자열에서 특정 문자찾기. 주어진 값과 일치하는 첫 번째 인덱스를 반환
▶`String.trim()` : 공백제거

 

🔎그외에도 다양한 문자열 관련 함수가 궁금하다면?https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

String - JavaScript | MDN

📜변수와 대입연산자
- 변수 : 선언할때에는 `var` 키워드
- 대입연산자 : `=` 를 통해 변수에 값을 넣어줄 수 있음.

 

👆제어할 태그 선택하기

>document.queryselector('선택자') : 선택자에 해당하는 맨 처음 태그

>document.queryselectorAll('선택자'): 선택자에 해당하는 모든 태그

 

🔹day-night 버튼 구현하기

html
<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';
       ">

 

📝조건,비교연산자
- `if` `else`
- `=`는 대입연산자이고 `===` 는 같다는 등호 표시.

🔹조건문활용하여 밤,낮 toggle버튼 구현하기

javascript
 <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';

       }
       ">

 

🔨코드 리팩토링
:`var`과 `this`를 이용하면 간결한 코드를 작성할 수 있다!
- `this` : 자기 자신이 속한 태그를 지칭.

🔹코드리팩토링

html
<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';

       }

🎰배열

>var 배열명 =[원소1,원소2];
- `shift()` : 배열맨앞 원소 제거하기
- `unshift(element)` : 배열 맨 앞에 원소 추가하기 
- `splice(pos, n)` : pos에서 시작해서 n개의 원소 지우기

⚠이때, 잘못된 인덱스를 사용하면 undefined를 반환한다.

🔎그외 더 많은 JS array의 기능은
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

🔹배열활용예시

<script>
       
       var array=["apple","grape"]; //배열생성

       document.write(array[0]);
       document.write(array[1]);
       document.write(array.length);
       array.push("melon"); //원소추가
       document.write(array[2]);//새로운 인덱스 추가
       
        </script>

🔹배열과반복문의 활용

<script>
            
            var array=["apple","grape","melon","banana"];
            array.push("peach");

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

🔹전체 a태그 색상 바꾸기

javascript
var list=document.querySelectorAll('a') //모든 a태그가 들어간 문장을 가져온다.
        var i=0;

        while (i<list.length){
              list[i].style.color='powderblue';
              i+=1;
        }

🟦함수
🔎 함수 기본 형태

html
<script>
function 함수명 (인자명){
내용;
return 리턴값;
}
</script>

🔑함수호출

html
<script>
  함수명(인자) // 호출
</script>

- `매개변수` : 인자를 받아서 함수 안으로 매개하는 변수. 이름은 사용자 마음대로 설정.
만일 매개변수를 비워두면, 함수안에서 this의 대상이 전역객체를 가리키게됨.
- `인자` : 함수로 전달하는 값. this를 전달하면 해당 문장이 함수로 전달됨.
- `반환값(return)` : 출력

 

🔬함수로 코드 리팩토링

javascript
<script>
    
            function nightDayHandler(self){
        var target =document.querySelector('body');
        
            if (self.value==='night'){
             target.style.backgroundColor= 'black';
             target.style.color= 'white';
             self.value='day';
        
             var list=document.querySelectorAll('a')
             var i=0;
        
             while (i<list.length){
                   list[i].style.color='powderblue';
                   i+=1;
             }
        
            }
            else{
        
             target.style.backgroundColor='white';
             target.style.color= 'black';
             self.value='night';
        
             var list=document.querySelectorAll('a')
             var i=0;
        
             while (i<list.length){
                   list[i].style.color='blue';
                   i+=1;
             }
        
            }
        }</script>

 <input type ="button" value="night" onclick="
       nightDayHandler(this);">

🛒객체
>서로 연관된 함수와 변수를 그루핑해서 정리 정돈하기위한 수납상자

🔎 객체 기본 형태
`var 객체명 ={ key값:value값 }` : 객체리터럴 -{} 중괄호
- key : 우리가 가져오고 싶은 정보에 도달할 수 있는 열쇠. 배열의 인덱스와 유사.
- value : key값과 연결되는 정보

🔐 객체 정보 추가 방법
: `.` 이라는 객체 접근 연산자 를 통해 객체에 접근할 수 있다.

1. 객체명 ["key값"]="value값";
2. 객체명.key값="value값";

 

🔹 예제- 객체 쓰기와 읽기

javascript
var coworkers ={"programmer" :"egoing"
                        ,"designer":"leezche"}

        document.write("programmer :"+coworkers.programmer+"<br>"); 
        document.write("designer :"+coworkers.designer+"<br>"); 
        coworkers.developer="yeonleaf";
        document.write(coworkers.developer+"<br>"); 
        coworkers["frontend engineer"]="seoyeon"; 
        document.write(coworkers["frontend engineer"]+"<br>");

❗ js의 객체는 아직 존재하지 않는 key값으로 멤버를 초기화시킬수 있다! (오류X)

🗓객체와 반복문
>데이터 순회 : for . . in 활용 


🔹 반복문에서 객체의 키값과 데이터 모두 출력 

javascript
for (var key in 객체명){  //this는 함수가 포함된 객체 가리킴

            document.write(key+" :" +객체명[key]+"<br>"); 
        }

: 객체에 있는 특정 데이터를 가져올때 마치 배열처럼 인덱스가 들어가는 곳에 key값을 넣어주면 데이터를 가져올 수 있다.

🧚‍객체 프로퍼티와 메소드
>객체는 모든 데이터를 담을 수 있다. 문자열,배열,숫자 등,, 심지어는 함수까지도! 

- 메소드 : 객체에 소속되어있는 함수
- 프로퍼티 : 객체에 소속된 변수


**🔹 객체에 함수 담기 **
: `this` - 함수안에서 이 함수가 소속된 객체를 가리키는 약속된 기호
```

javascript
 coworkers.showAll =function(){ 

        for (var key in this){  //this는 함수가 포함된 객체 가리킴

            document.write(key+" :" +this[key]+"<br>"); 
        }
        }
        coworkers.showAll(); //객체 함수 호출

```

🔴 단, 값을 모두 꺼내올때 주의해야할것은 js의 객체는 그 객체에 포함된 메소드까지도 전부 꺼내온다. 따라서 함수가 출력되는 것을 원하지 않는다면 if문을 통해 따로 처리해주어야한다.

# 🏂객체의 활용
> 객체에서는 프로퍼티와 프로퍼티를 구분하기위해 `,`(콤마) 를 꼭 넣어주어야한다.

**🔬 객체를 활용한 코드 리팩토링 **

var Link ={ // Link 객체
    setColor :function(color){ //객체 메소드 정의
    
    var alist=document.querySelectorAll('a')
    var i=0;

    while (i<alist.length){
          alist[i].style.color=color;
          i+=1;
    }
   }
}

var Body={ //Body 객체
setColor :function (color){
    document.querySelector('body').style.color= color;
},
setBackGroundColor:function (color){
    document.querySelector('body').style.backgroundColor= color;
}
}


function nightDayHandler(self){
 var target =document.querySelector('body');

if (self.value==='night'){
     Body.setBackGroundColor('black');
     Body.setColor('white');
     self.value='day';
     Link.setColor('powderblue');
}
else{

    Body.setBackGroundColor('white');
    Body.setColor('black');
    self.value='night';
    Link.setColor('blue');

}
}

📂파일로 쪼개서 정리정돈하기

>서로 연관된 코드들을 파일로 묶어서 그루핑하는 것

 ❔ if 1억개의 페이지에 방금 만든 day night 버튼을 추가해야한다면❔ 
-> 우리가 작성한 함수 &객체 를 포함한`<script>`태그의 내용을 모든 페이지에 붙여넣고 일일히input태그 추가하기
-> js파일로 만들고 한문장만 추가하여 모든 html파일에서 접근할 수 있도록 하기! 
❔ 함수의 내용을 변경하고 싶다면 ❔ 
-> 모든 페이지의 js내용 일일히 변경하기
-> 해당 js파일의 변경하고싶은부분만 변경하여 모든 html에서 적용될 수 있도록 하기.

🎗 html에 js파일 첨부하기

<head>  <script src="파일명.js"></script>  </head>

> ✨ 파일로 쪼개서 관리한다면 새로운 파일을 만들었을때 모든 코드를 복사할 필요 없이 간단하게 color.js 파일을 새로운 웹페이지에 포함시키기만 하면 된다❗ 즉, 작성한 코드를 재사용하게 되는것이고, js파일을 수정하면 모든 웹페이지에 동시에 변화가 반영된다. 가독성이 좋아지고, 코드가 훨씬 명확해지며, 코드의 의미를 파일의 이름을 통해 확인할 수 있게 된다.

📚라이브러리와 프레임워크


- 라이브러리 : 내가 만들고자하는 프로그램에 필요한 부품이 되는 SW를 잘 정리정돈해놓은 것
ex) jQuery ,react
- 프레임워크 : 우리가 만들고자 하는것의 공통적인 부분 
ex) Angular, Vue

> 예를들어 집을 만든다고 하면, 라이브러리는 자재랑 가구등 집에 필요한 재료이고
프레임워크는 이미 집의 수도나 뼈대같은 기본적인 구조들이 있어서, 입맛대로 꾸미기만 하면 되는것. 

🚩 jQuery 사용하기

1. 직접 Download 하여 내려받은 파일을 프로젝트 디렉터리로 옮기기
2. ✨CDN (Content Delivery Network)✨

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

다음 코드를 복사하여 html파일에 각각 붙여넣기한다. src에는 구글에서 제공하는 jQuery의 라이브러리 주소가 적혀있다.

✅tip - `ctrl + /` : 주석처리

🔹j Query 활용
: `jQuery`는 기존 자바스크립트 코드보다 훨씬 더 `직관적`이다. 

1. 라이브러리 없을때

javascript
var alist=document.querySelectorAll('a')
    var i=0;

    while (i<alist.length){
          alist[i].style.color=color;
          i+=1;
    }

2. 라이브러리 이용(jQuery) 

var Link ={
    setColor :function(color){
    $('a').css('color',color); //이 웹페이지에 있는 모든 a태그를 선택하여 color를 주어진 color로 바꿈.
   }
}

>jQuery를 사용하면 처리해야할 태그가 여러가지 있을때, 기존 js와 다르게 반복문을 쓰지 않아도 된다! 

 📳UI vs API
- UI (User Interface) : 사용자가 시스템을 제어하기 위해 사용하는 조작장치 웹 사이트를 예로 들면 메뉴바, 스크롤, 경고창 등의 웹 화면 전반적인 기능들이 말한다. 이 유저인터페이스는 사용자와 머신(computer)사이에 위치하여 사용자의 상태나 의중을 시스템에 전달하고 보여주는 입출력 장치들이 여기에 해당한다.
- APT(Application Programming Interface) : API는 위의 개념이 사용자 차원에서 개발자 차원으로 넘어간 개념이다. 애플리케이션을 만들기 위해 프로그래밍할 때 사용하는 조작장치를 말한다. 개발자는 프로그래밍을 할때 코드의 형태를 띈 인터페이스를 다양한 방법으로 결합해서 특정한 기능을 가진 앱을 만들게 된다.  즉 소프트웨어를 제어, 개발하기 위해 사용하는 인터페이스를 API라고 하는것이다.