[개발일지 3월 24일] [공통교육-웹기초] JavaScript 2/3 - 이고잉 강사

박재준·2022년 3월 24일

1. 학습한 내용

필기내용

<h1 style="border-bottom:10px solid
        green;">

→ 스타일 속성으로 사용 (선호하진 말기)(관리의 어려움)

css diner 게임 홈페이지... ㅎ

ctrl + alt + ,
로 현재

설정 해놓음
→ VIEW메뉴 → Command

Lorem Picsum : Lorem(랜덤 텍스트 만들어무) + Picsum : 이미지 만들어줌
→ https://picsum.photos/200/300 계속 들어가면 이미지가 바뀌면서 출력해줌

background-image 예제 튜토리얼 사이트

h1{
                border-bottom:10px solid red !important;

!important; 를 통해서 어떤 명령문보다 더 먼저 실행

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<style>
            body{
                background-image :url(http://picsum.photos/1024);
                background-size:cover

홈페이지 배경! 설정방법
→ url에 다른 이미지 페이지를 설정하면 배경으로 적용가능
→ http://picsum.photos/1024 페이지는 이미지가 계속 바뀌면서 출력해주니까, 배경에 들어갈 때마다 배경이 계속 바뀜!

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
style.css란 파일을 새로 생성해서

body{
    background-image :url(http://picsum.photos/1024);
    background-size:cover
}
h1{
    border-bottom:10px solid red !important;
}
#container{
    display:grid;
    grid-template-columns: 200px 2fr;
}

내용을 붙여넣기

그리고 review3.html의 에

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

를 넣으면 링크

→ 관련 사진

→ review3의 페이지에 자동으로 스타일이 반영됨!

→ 이럴게!(새로고침할 때마다 배경바뀜)

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

onmouseover: 마우스가 올라가면 생기는 이벤트
그 외에도 keydown, keyup 등 10개가 더 있음

start the generator 버튼 클릭하면 랜덤하게 컬러를 보여주는 사이트
→ space bar누르면 랜덤으로 바뀜

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

중요!!! 다시 확인하기

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

index button 제어문(flow control)

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

위의 코드 설명

<input type="button" id="dnbtn" value="Night"language-null">let button = document.querySelector('#dnbtn')

→ button을 document.querySelector('#dnbtn')로 변수 설정

if (button.value==='Night'){
            document.querySelector('body').style.
            backgroundColor='black';
            document.querySelector('body').style.color='White';
            button.value='Light'}

→ 만약 button의 value가 'Night'면 body의 sytle 중 backgroundColor를 'black'으로
→ 그리고 body style 중 글씨 컬러는 'white'로 설정
→ 그리고 button의 value를 Light로 바꿈

else {
            document.querySelector('body').style.
            backgroundColor='white';
            document.querySelector('body').style.color='black';
            button.value='Dark'}

→ 위와 동일하게 작동

<조건문, conditional statements> 사용
→ 어떤 조건을 만족하면 어떠한 결과가 실행

<반복문, loop statements>
→ 어떤 조건을 만족하면 계속 반복실행

Boolean 비교연산자가 필요!(연산자와 함께 사용)

숫자는 구체적인 데이터 무한함
문자는 구체적인 데이터 유한함
Boolean은 구체적인 데이터가 단 두 개(True/False)

Boolean 연산자 중 비교연산자, 논리연산자가 있음
비교연산자 :

== : 대충 같다(예외적인 사항이 많이 생기므로 3개 추천)
=== : 진짜 같다
!== : 같지 않다(부정)
(==, ===차이 참고)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

prompt(‘아이디?’) 라고 치면 프롬프트 창이 열림

추가 내용
let button = this;
this로 바꾸면 id지정 할 필요가 없음(사진)
this : 이벤트를 발생시키는 태그를 가리키는 것

→ this를 alter로 사용한 사진

→ this를 console로 사용한 사진

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

배열은 서로 연관된 데이터를 그룹핑해서 이름을 붙인 것
→ 목적 : 정리정돈(a와 관련된 사진)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

live server 기능(다운받음)
서버를 다운받지 않아도 서버를 이용해서 서비스를 이용할 수 있는 것
편집한 내용이 실시간으로 반영

→ live server 설치방법

→ live server 실행은 마우스 우측 클릭 후 그림과 같이 'Open with Live Server' 실행
→ 실행하면 따로 저장하지 않아도 수정할 때마다 자동으로 페이지가 변경되어 출력!(꿀팁)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<loop.html 내용>

Array : 배열

추후 AI 수업 때 배울 내용 :
관심을 가져야할 정보가 너무 많을 때 지저분하다고 생각
→ 모음(비슷한 것끼리) → 거기에 이름을 붙임 → 그 다음부턴 새로운 물건이 생기면 그것에 어울리는 상자에 넣음 → 군집화(서로 비슷한 것끼리 넣음) / 분류(적당한 상자에 넣음)

0, 1, 2는 ‘색인 인덱스(index)’ : 순서라고 생각하셈(역순은 당연히 -1, -2순)
각각의 값(10, 20, 30)들은 ‘원소(element)’

중요!!! <반복문(Loop)>

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

→ i=0 부터 시작해서 i<3 조건까지 i에 +1 (i=i+1) 반복
→ 처음에 console.log(1) 실행 → i > 3전까지 i를 1 증가시키면서
console.log(2)와 console.log(3) 출력
→ for문이 끝나고 나면 마지막에 console.log(4) 출력하면서 끝

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

웹페이지 모든 a를 가져올 때
document.querySelectorAll(‘a’)
→ NodeList(4) [a,a,a,a]
→ 원리 이용해서 웹페이지에 있는 모든 li태그를 바꾸는 것(내일 학습 내용)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

태그 우선순위