[Javascript] #1 onClick

#220418   ! 오늘 꺼 복습 안하면 미래가 없음  

event 캡처링 vs 버블링

modal code

.profileModal{
	display: none; //display: grid로 주면 
    /*place-items: ccenter;*/ //가로세로 다 중앙에 두겠다
    position: fixed;
    top: 0;
    left: 0;
    
    width: 100vw; //화면이 꽉차야하니까
    height: 100vh;
    z - index: 999; //값이 높을 수록 앞으로 나온다 (맨 앞으로 이런거)
    background-color: rgba(0,0,0, 0.7); //alpha는 투명도
    
    .profileModal img {
    width : 100%;
    cursor: pointer; // 커서를 손 보자기 낸 모양으로
    }
    

DOM (Document Object Model)

script에서 다루기 쉽게 문서를 객체화 한 것

문서노드 : 문서 전체를 나타내는 노드
요소노드: 모든 HTML 요소가 요소노드 (유일하게 속성노드를 가질 수 있음)
속성노드: 모든 HTML 요소의 속성 //스타일
텍스트노트: 모든 HTML 텍스트는 텍스트 노드
주석노드: comment node

DOM 요소 생성

오늘의 숙제:
1. create 방식
2. innerHTML 방식

document 함수

var vs let

let을 사용하는 이유:
재할당: 값을 그대로 넣어주는 것

const vs let
const는 재할당 불가

배열

const a [1, 2, 3];
const b [1, 2, 3];

console.log(a==b);
-> false

=, == , ===

let a = 10;
let b = 10;
console.log(a==b); //그냥 값이 같으면 ok
vs
console.log(a===b); //데이터 타입까지 따짐

형변환
let a = 10;
let b = 15;
console.log(a+b);
-> 25

let a = "10";
let b = "15";
console.log(a+b);
-> 1015 (일공일오 라고 읽어야됨 천십오 아님)

let a = "10";
let b = 15;
console.log(a+b);
->1015 (일공일오 why: 자바스크립트가 15를 문자열이라고 바꿔줌)

let a = "10";
let b = "15";
let newA = Number(a); //형변환 하겠다
let newB = Number(b);
console.log(a+b);
-> 25

Q. 문자열과 숫자를 더할 때 숫자가 문자열로 변환되는 이유는?
A. 모든 문자열이 숫자로 변환될 수 있는 것은 아니지만, 모든 숫자는 문자열로 바뀔 수 있기 때문
(!!) +를 제외한 모든 연산자는 문자열을 숫자로 바꾼다

let a = "abcd";
let b = 15;
console.log(a+b);
-> abcd15

console.log("0"==0); //true
console.log([] == 0); //true
console.log([]=="0"); //false

console.log([]=="0");
// [] => ''
// "" == "0"
// false!

let a = "a b c d e f g";
console.log(a);

let test = a.split(' ');
// 배열로 들어간다 개중요함

console.log(test);

input 1,3,5,7,9;
input 4

//정신나가버려 임시저장......

좋은 웹페이지 즐겨찾기