[2일차] 자바스크립트2

이나겸·2022년 3월 24일

0. 복습

태그 감싸는 방법

보기 - 명령 팔레트 - Emmet:약어로 래핑 - 태그입력
키바인딩으로 단축키 만들어서 사용
VSCode에서 왼쪽 하단에 설정 - 바로 가기 키
wrap 검색
키 바인딩이 따로 지정되어 있지 않기 때문에 오른쪽 버튼 - 키 바인딩 추가
다른 단축키와 겹치지 않는 단축키로 지정해서 사용할 수 있다.

단축키 : ctrl+shift+p - wrap 입력 - 태그입력

랜덤이미지

google에서 'ipsum image'를 검색
https://picsum.photos/
Lorem Picsum 으로 들어가면 랜덤으로 그림을 볼 수 있다.
소스코드에서 활용할 URL은 아래쪽에 있다.
https://picsum.photos/200/300

css에서 background-image로 활용
파일경로로 사용할 경우 " " 안에 넣어주고,
URL을 사용할 경우에는 괄호안에 그냥 작성한다.

html과 css파일 분리

html 안에 head 태그에서 style 태그로 스타일을 지정했다.
style.css 파일을 만들어서 style 태그 안의 코드를 넣어준다.
html 파일과 css 파일을 연결해야하는데, html 파일의 head 태그 안에 link 태그를 넣어준다.

<link rel="stylesheet" href="style.css">

대상을 찾는 선택자

document.querySelector('태그')

1. 학습내용

버튼 하나로 night / day 모드 반전되게 만들기

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

여기서 this.value와 'night'가 같은지 알아볼 때 다른 언어처럼 '=='을 썼다.
자바스크립트에서는 '==='을 써야한다.

비교구문

왜? '==='을 써야하나?
'=='은 Equal Operator고 '==='은 Strict Equal Operator이다.
'=='은 단순히 '값'만 비교해서 같으면 true를 반환하고, 다르면 false를 반환한다.
'==='은 '값'과 '값의 종류'까지 모두 같은지 비교하는 엄격한 Equal Operator이다.

<script>
    let num = 111;
    let stNum = '111';
    if(num == stNum){
        console.log(true);
    } else {
        console.log(false);
    }
</script>

num은 정수이고, stNum은 문자열이지만 '=='로 비교했을 때 true를 반환한다.

<script>
    let num = 111;
    let stNum = '111';
    if(num === stNum){
        console.log(true);
    } else {
        console.log(false);
    }
</script>

'==='으로 비교했을 때 두개의 자료형이 다르기 때문에 false를 반환하는 걸 볼 수 있다.

if, else if, else / 조건문 /conditinal statement

if (조건) {
	statement;
}

if (조건) {
	true_statement;
} else {
	false_statement;
}

if (조건1) {
	조건1_true_statement;
} else if (조건2) {
	조건2_true_statement;
} else {
	false_statement;
}

Q. 사용자가 이 웹페이지에 들어왔을 때 아이디가 뭔지 물어보는 프롬프트를 띄운다.

아이디가 'user'라면 'user님 안녕하세요'
다른 아이디를 입력하거나 입력하지 않으면 '누구세요?' 라는 알림창을 띄운다.

let input_Id = prompt('아이디?');
if (input_Id === 'user') {
    alert(input_Id + '님 안녕하세요?');
} else {
	alert('누구세요?');
}

Q. (+추가)
'admin'인 경우 비밀번호를 물어보고 비밀번호가 맞으면 '관리자님 안녕하세요' 띄운다.
미리 adminId와 adminPw를 지정해놓고, 비교할 수 있게 코드를 작성한다.

let inputId = prompt('아이디?');
let adminId = 'admin';
let adminPw = '123456';

if (inputId === '이나겸') {
	alert(inputId + "님 안녕하세요!");
} else if (inputId == adminId) {
	let inputPw = prompt('비밀번호를 입력하세요');
if (inputPw == adminPw) {
	alert('관리자님 안녕하세요');
}
} else {
	alert("누구세요?");
}

버튼 하나로 반전모드 만들기

버튼 하나로 night / day 모드 변경 - button 변수, querySelector 사용

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

버튼 하나로 night / day 모드 변경 - button 변수, getElementById 사용

<input type="button" id="dnbtn1" value="night" onclick="
let button1 = document.getElementById('dnbtn1');
if (button1.value === 'night'){
	document.querySelector('body').style.backgroundColor='white';
    document.querySelector('body').style.color='black';
    button1.value = 'day';
} else {
	document.querySelector('body').style.backgroundColor='black';
    document.querySelector('body').style.color='white';
    button1.value = 'night';
}">

페이지의 모든 a태그의 글자색깔은 어떻게 바꿀까?

document.querySelector('a').style.color='black';

이렇게 쓰면 가장 첫번째 만나는 a태그만 글자색깔이 변한다.

querySelectorAll('a')

console에서 querySelectorAll을 쓰면 모든 a태그를 찾아서 반환해준다.
배열형태로 반환해준다.
배열을 쓸 때 반복문과 같이 많이 쓰인다.

배열(Array)

: 서로 연관된 데이터를 그루핑해서 이름을 붙인 것

<h1>배열(Array)</h1>
<script>
	var topic1 = 'nagyeom';
    var topic2 = 'css';
    var topic3 = 'js';

    var topics = [topic1, topic2, topic3];
    console.log(topics.length);
    console.log(topics[0]);
</script>

배열이름.length : 배열의 길이를 반환
배열이름[인덱스위치] : 해당 인덱스에 위치하는 요소를 반환

반복문

<h1>반복문(Loop)</h1>
<script>
    console.log(1);
    for(let i=1; i<=3; i++){
    	console.log(i+'번째반복');
        console.log(2);
        console.log(3);
    }
    console.log('반복끝')
    console.log(4);
</script>