자바스크립트 훑기

1. 파일경로 에는 [ 절대경로 ] 와 [ 상대경로 ] 가 있다.

/ 는 최상위경로를 의미한다.

2. git graph extension 은 변경사항을 비교할 수 있어 유용하다.

 

---

 자바스크립트 

 

뭐든 시작할 때는 설치, 실행, 배포 세 단계로 나누어서 본다. 한 가지를 성공했다면 한 단계는 넘어선 것이다.

 

1. 자바스크립트를 실행 하는 방법 3가지

1. 콘솔창 

콘솔창을 키는 방법은 3가지가 있다.

① 크롬> 도구더보기 > 개발자도구 로 들어가거나

② F12를 눌러서 console 탭으로 들어가거나

③ 오른쪽 마우스 클릭 후 검사에서 console 탭으로 들어가면 된다.

콘솔창은 자바스크립트만 칠 수 있는 공간이다. 어려운 수학 계산을 해야 할 때 개발자도구를 사용하면 유용하다.

콘솔창에서 쓴 자바스크립트 명령은 현재 열려있는 웹페이지에만 적용된다.

 

★ 콘솔창에서 자바스크립트 연습하기!

alert('hi');

prompt('name:');     // 입력창이 뜸.

alert(prompt('이름?') + '님 안녕하세요');

confirm('really?');    // 확인누르면 true, 아니면 false를 반환. -> 조건문이랑 같이 잘씀.

document.write('hello!');    // 화면에 hello 출력

console.log();      // 콘솔창에 출력, 디버깅에 많이 사용.

 

★ 굳이 프로젝트가 아니더라도 문제를 직면했을 때 코드로 해결하려는 노력을 자꾸 하고, 그걸 이력서에 잘 정리해두는 게 좋다.

ex) 어떤 문제가 생겨서 해결하기 위해 어떤 코드를 썼고, 그랬더니 어떤 점이 좋아졌다.

★ 스크롤을 무한히 내리는 코드짜기

function scrollInfinite(interval, height){
        setInterval(()=>{
            scrollTo(0, height);   // scrollTo(x, y) 좌표
        },interval*1000);          // setInterval( 함수, 기다릴시간 ms단위 )
      }

 

2. html 파일의 script태그에서 코드 작성하기

자바스크립트는 동적이다. document.write(1+1) 을하면 2를 출력해준다.

html은 정적이다. 1+1을 쓰면 그대로 1+1을 화면에 보여준다.

** script태그는 보통 body태그의 가장 밑에 넣는다. 왜냐하면 script태그가 위쪽에 있을 때, html이 아직 없는 상태일 수 있기 때문이다. 예시로, head태그에 script태그를 넣으면, document.querySelector('body')를 했을 때 body가 아직 없어서 null값이 들어간다.

 

3. 태그의 속성으로 이벤트를 줘서

브라우저는 onclick = "", onchange = "" 등 이벤트가 일어났을때 속성값을 자바스크립트로써 실행한다.

<input type="button" value="dark" onclick="

	document.querySelector('body').style.backgroundColor='black';
    
	document.querySelector('body').style.color='white';

">

 

---

2. 문법

1. data type

** datatype 을 구분하는 이유는 datatype에 따라서 연산방법이 달라지기 때문이다.

[ Number 숫자 ]

[ String 문자열 ] 

문법① 작은따옴표랑 큰따옴표는 같은 것끼리 쓰기

문법② 따옴표 자체를 넣고 싶으면 \( 역슬래시, escape sequence ) + 따옴표

문법③ 띄어쓰기, 엔터 등 문장 형식을 쓰는대로 나오게 하고싶을때 백틱(그레이브액센트 ) 으로 감싼다.

[ Array 배열 ]

문법① 배열[인덱스]

문법② 배열.length

문법③ 배열.push('aa')

[ Object 객체 ]

객체는 디렉토리같은것. 

---

2. Variable 변수

변수를 정의하는 키워드로 var, let, const가 있다. var 보다는 let 이 요새 많이 쓰인다.

변수는 데이터에 이름을 붙인 것이다. 주석보다 데이터를 잘 나타내는 변수를 사용하는 게 더 좋은 방법이다. 

자바스크립트의 주석은 // 를 쓴다. 만약 변수만 봤을 때 데이터가 뭔지 잘 모르겠다면 주석으로 설명해 주는 것이 좋다. 

★ 변수와 문자열을 한번에 나타내는 방법 

let price = 1000;

console.log(`가격 : ${price}`);    // 따옴표 대신 백틱으로 감싸기

** 자바스크립트에는 대시 - 문법이 없음 -> 두 어절이상은 대문자로 시작

 

---

3. 조건문

if( 조건 ){ 
	
    조건이 참이라면 실행할 코드 

} else{ 
    
    조건이 거짓이라면 실행할 코드

}

1. boolean : true false 2가지

2. comparison operator 비교 연산자 : < > === 

 이유가 없다면 등호는 3개를 쓴다.

== 을 쓰면 데이터타입이 달라도 값이 같으면 true를 리턴하기 때문에 숫자 1과 문자열 "1" 을 같다고 할 수도 있기 때문이다.

3. 논리 연산자 : &&(and) ||(or) !(not)

★ dark모드 버튼만들기

<input type="button" value="dark" onclick="

	let target = document.querySelector('body');
    
    if(this.value === 'dark'){
        
        target.style.backgroundColor = 'black';   // body 배경색 검은색
        
        target.style.color = 'white';   // 글자색 흰색
        
        this.value = 'light';   // this 는 해당태그, input 태그
    }else{
        target.style.backgroundColor = 'white';   // body 배경색 흰색
        
        target.style.color = 'black';   // 글자색 검은색
        
        this.value = 'dark';   // this 는 해당태그, input 태그
    }
  ">

** this.value : 이벤트가 발생했을 때, 그 이벤트가 소재하고있는 태그의 value값 얻기

---

4. 반복문

for 문 괄호안에는 세가지가 들어간다. 변수 정의 및 초기화, 조건, 증감.

for (let i = 0; i < 2; i++) {
	console.log(i);
}

① let i = 0; 이 한 번실행됨.

② i <2 가 true니까 코드실행.

③ i = i+1 이 실행됨 -> i === 1 이 됨.

 

반복문과 배열은 뗄래야 뗄 수없는 관계이다.

★ 배열을 반복하면서 <li>로 꺼내기

<ul>
<script>
let friends = ['egoing', 'duru', 'basta'];

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

    document.write(`<li>${ friends[i] }</li>`);
}
</script>
</ul>

 

★ 모든 a 태그의 href 출력하기

let as = document.querySelectorAll('a');    // 결과물은 배열의 형태로 반환된다.

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

	console.log(as[i].href);
    
}

---

5. 함수

// 가격 : 매개변수, parameter, 입력값의 이름
function 부가세계산기(가격){

	return 가격 * 부가세;     // 가격 * 부가세 : 반환값, return value, 출력값

};

console.log(부가세계산기(10000));    //10000 : 인자, argument, 입력값